Pointer·3ynuejs/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.
Josh W Comeau·3yMaking 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.
DZone·3yBest 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.
InfoWorld·3yIntro 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.
Community Picks·3yBest 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.
Community Picks·3yStop 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.
JavaScript in Plain English·3yTwo-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.
DZone·3yA 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.
Community Picks·3yCirrus 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.
Discover .NET·3yWhat 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.
Community Picks·3yState 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.
Community Picks·3yAn 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.
Product Hunt·3ytiiny 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.
Medium·3yHow 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.
asayer·3yCross-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.
freeCodeCamp·3yWeb 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.
Community Picks·3yA 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.
Codrops·3yWeekly 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.
freeCodeCamp·3yHTML, 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.
CircleCI·3yWeb 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.
freeCodeCamp·3yHow 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.
freeCodeCamp·3yHow 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.
Community Picks·3yReact: 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.
Noted·3yCreating 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.