Best of HTMLSeptember 2023

  1. 1
    Article
    Avatar of pointerPointer·3y

    nuejs/nuejs: Build user interfaces with cleaner code. Alternative to React, Vue, and Svelte

    Nue JS is a small JavaScript library for building web interfaces with cleaner code. It offers a minimalist approach and easy-to-understand code, making it easier to scale. Nue supports server-side rendering and can be used for UI library development, progressive enhancement, static website generators, and single-page applications.

  2. 2
    Article
    Avatar of joshwcomeauJosh W Comeau·3y

    Making Sense of React Server Components

    React Server Components is the latest paradigm shift for React. For the first time ever, React components can run exclusively on the server. It's helpful to understand how Server Side Rendering (SSR) works. If you're already familiar with SSR, feel free to skip to the next heading.

  3. 3
    Article
    Avatar of dzDZone·3y

    Best 15 CSS Trends To Watch For

    The days are long gone when a viewer’s attention is quickly captured by a simple and plain HTML website. Cascading Style Sheets, or CSS, is an ideal way to spice up your web design. According to W3Techs, as of January 2023, approximately 96.9% of websites use CSS.

  4. 4
    Article
    Avatar of infoworldInfoWorld·3y

    Intro to HTMX: Dynamic HTML without JavaScript

    HTMX lets you use an extended HTML syntax instead of JavaScript to achieve interactivity. It's an interesting idea that could end up influencing the way web front-ends work. It uses server-side rendering of the HTML for the edit markup and abstracts the form marshaling into the framework.

  5. 5
    Article
    Avatar of communityCommunity Picks·3y

    Best Practices for Securing Your ReactJS Application

    As with any web application, security is paramount to safeguard against potential attacks like XSS (Cross-Site Scripting) and CSRF ( cross-Site Request Forgery) This article delves into essential Reactjs security best practices for fortifying Reactjs applications. Let's explore the key strategies for securing your Reactjs application effectively.

  6. 6
    Article
    Avatar of communityCommunity Picks·3y

    Stop Lazy Loading Product and Hero Images

    Lazy loading is a recurring performance problem on many ecommerce sites. It impacts user experience, Core Web Vitals, and by extension search engine optimization. The main product photo takes 14.39 seconds to load on a simulated Fast 3G / Slow 4G connection. This network speed is what Google’s Lighthouse and Page Speed.

  7. 7
    Article
    Avatar of jsPlainEnglishJavaScript in Plain English·3y

    Two-way data binding in Vanilla JavaScript without Angular or React

    Two-way data binding in Vanilla JavaScript without Angular or React. In Plain English, we will create a similar data binding but with vanilla JavaScript. We will create an object’s property with a getter and a setter function to update the value of the corresponding HTML element.

  8. 8
    Article
    Avatar of dzDZone·3y

    A PDF Framework

    Nanhu-print-java is a PDF Framework that solves the pain points of enterprise development using Java and JavaScript. The company I work for wants to implement a custom printing function, which needs to meet the following functions: Define some templates. For each field of each template, the label can be customized, displayed, and hidden.

  9. 9
    Article
    Avatar of communityCommunity Picks·3y

    Cirrus CSS

    The SCSS framework is designed to be pluggable into any new or existing projects. Use Cirrus to improve your existing designs or start a new project. Using Cirrus's responsive components and utility classes, controlling how your design scales with width and height can be done inline inside the HTML without requiring extra media queries.

  10. 10
    Article
    Avatar of discdotDiscover .NET·3y

    What Is A JavaScript Bundler?

    A JavaScript bundler produces bundles. It's basically a static file, optimized to be served to the client (in our case: a web browser) The main goal is to produce a single bundle file from multiple dependencies. In effect, the user’s browser doesn’t need to fetch so many files separately.

  11. 11
    Article
    Avatar of communityCommunity Picks·3y

    State of HTML

    State of HTML is the annual developer survey about the web platform. It has long seemed like HTML wasn't evolving, but things may be changing. The survey will be open for 3 weeks, but responses entered within the first 9 days (until October 1st) will have a much higher impact on the Web.

  12. 12
    Article
    Avatar of communityCommunity Picks·3y

    An introduction to Web Components

    Learn about Web Components, which are a set of web platform APIs that allow you to create new custom, reusable, encapsulated HTML tags to use in web pages and web apps. Discover how to create a simple Web Component and use Shadow DOM to add styles to a custom element.

  13. 13
    Article
    Avatar of phProduct Hunt·3y

    tiiny web editor - The simplest web editor for any HTML template

    tiiny web editor - The simplest web editor for any HTML template. "Thanks for checking this out! This is an entirely new product category for us and we're really excited to learn from you. Is this useful for you? What features would you like to see?" "What feature would you want to see? What feature will you like.

  14. 14
    Article
    Avatar of medium_jsMedium·3y

    How to Implement SSR(Server Side Rendering) in React 18

    How to implement SSR(Server Side Rendering) in React 18. Learn how to implement the “renderToPipeableStream” server API to render a React tree as HTML to a Node.js stream. In React 18, we'll explore React’s SSR feature with helpful code samples and examples.

  15. 15
    Article
    Avatar of asayerasayer·3y

    Cross-Browser Compatibility: Tips and Techniques

    Cross-browser compatibility makes it possible for websites to run on any browser. It helps to manage the time and expenses used in browser-specific coding and testing. Gecko, Blink, and Trident are four of the most widely used rendering engines. For example, Chrome has gained market share over the past few years.

  16. 16
    Article
    Avatar of freecodecampfreeCodeCamp·3y

    Web Scraping with Google Sheets – How to Scrape Web Pages with Built-in Functions

    Google Sheets has five built-in functions that help you import data from other sheets and other web pages. All it needs is a URL for a Google Sheet and the range we want to import. CSV is the most commonly used file type for financial data that needs to be imported into spreadsheets and other programs.

  17. 17
    Article
    Avatar of communityCommunity Picks·3y

    A Future of Themes with CSS Container Style Queries

    A Future of Themes with CSS Container Style Queries is an experimental feature which has not yet landed in stable browsers at the time of writing. The style query approach is more of an experiment about how we might do the same in a cleaner way. Thehtml and selectors target the same element in the context of a standard web page.

  18. 18
    Article
    Avatar of codropsCodrops·3y

    Weekly Frontend News: Collective #784

    The article features various topics including an inspirational website, a free web database, the State of HTML survey, a JavaScript library called Nue, creating responsive type scales using CSS, a code search engine called SeaGOAT, the complexities of creating a design system, an open-source tool called HyperDX, an Inception experiment, achieving a realistic glass backdrop with CSS, a Windows 95 operating system experiment, beautifully designed components with Radix Vue and Tailwind CSS, a startup simulation game, the ups and downs of the text-wrap property, 3D mapping Earth from space, ink and water simulation, a data visualization toolkit called Vizro, a Figma guide to handoff, and a data exposure incident on Microsoft's AI GitHub repository.

  19. 19
    Article
    Avatar of freecodecampfreeCodeCamp·3y

    HTML, CSS, and JavaScript Project in Spanish – Create a Pokédex

    HTML, CSS, and JavaScript Project in Spanish is a great way to practice your skills, especially in web development. We just published a course on the freeCodeCamp.org Spanish YouTube channel that will teach you how to build a Pokémon step by step. You will get their data and statistics from the PokéAPI to show their names.

  20. 20
    Article
    Avatar of phProduct Hunt·3y

    Realm - HTML framework for building MVP

    Realm, the open-source framework for building MVP, stands for Reactive-Lightweight Markup Language. Realm is not rated yet. This is Realm's first launch. Realm was hunted by Ribhararnus Pracutian in Developer Tools.

  21. 21
    Article
    Avatar of circleCircleCI·3y

    Web scraping with Cheerio and Node.js

    Web scraping is the process of extracting data from web pages by programmatically accessing the underlying HTML. This article will cover web scraping with Cheerio, an HTML parsing library. In the next section, you will learn what web scraping is, how to use it to extract data from websites, and why it is useful.

  22. 22
    Article
    Avatar of freecodecampfreeCodeCamp·3y

    How to Create Animated Bubbles with HTML5 Canvas and JavaScript

    How to create Animated Bubbles with HTML5 Canvas and JavaScript. We'll achieve all of this using just a touch of HTML and all JavaScript, no CSS. What we will learn is how to create circles using the method of the canvas context. How to add stroke styles and fill styles to your circles for a 3D bubble effect.

  23. 23
    Article
    Avatar of freecodecampfreeCodeCamp·3y

    How to use HTML Elements – Headings, Paragraphs, and Text Formatting Elements Example

    HTML is the standard markup language used to create webpages. HTML provides a structured way to organize content on a webpage, allowing web developers to present text and media in a clear and meaningful way. In this article, we'll explore three fundamental HTML elements: headings, paragraphs, and text formatting elements.

  24. 24
    Article
    Avatar of communityCommunity Picks·3y

    React: What is the One-Way Data Flow and JSX Rules

    React is a JavaScript library/framework for building user interfaces. It has gained immense popularity due to its simplicity and flexibility. Data flow is the backbone of any application, dictating how information moves and transforms. When data changes, it flows in a single direction, making it easier to trace how components are affected.

  25. 25
    Article
    Avatar of notedNoted·3y

    Creating your first Docker Image

    Docker is a popular containerization tool that enables developers to build and run applications in a consistent, portable, and scalable environment. Docker images are the basic building blocks of the Docker ecosystem. In this guide, I will walk you through the process of creating a simple website and containerizing it using Docker.