freeCodeCamp·3yIntroducing freeCodeCamp Press – Free Books for Developers
FreeCodeCamp has published more than 10,000 tutorials over the years. Now we're publishing more comprehensive books and handbooks that will teach you everything you need to know to get started with a certain programming language or tool. The freeCodeCamp community publishes shorter, more focused guides that aim to answer a specific question.
Matt Rickard·3yWhy Tailwind CSS Won
Tailwind CSS has become synonymous to some degree with the UI components shipped through Tailwind UI (which is a UI framework) It replaces a generation of sites built with Twitter Bootstrap. Tailwind is tree-shaken by default and doesn’t have its own ideas of grids or flexboxes.
Community Picks·3yGetting Started – Lightning CSS
Lightning CSS can be used as a library from JavaScript or Rust. It can also be wrapped as a plugin in other build tools, and built into Parcel out of the box. From Node First, install Lightning CSS using a package manager such as Node First. Once installed, import the module and call one of the Lightning CSS APIs.
asayer·3yCreate a CI/CD Pipeline for Front End Projects
In modern front-end development, automating the testing and deployment of your apps is mandatory to avoid wasting time or making mistakes. This article will show you how to go about achieving this goal. We’ll walk through the crucial elements of a successful pipeline for Front-end projects.
Community Picks·3yPatterns for Reactivity with Modern Vanilla JavaScript
Patterns for Reactivity with Modern Vanilla JavaScript are Core to Web Development. ‘Reactivity’ is how systems react to changes in data. Reactive Object Properties with Proxies in JavaScript can be the foundation for performing reactivity after setting or getting properties on an object.
Community Picks·3yBuilding a Design System with React Web Components
Building a Design System with React Web Components is a simple way to build a universal design system with React. We compiled React to Web Components using wrappers, polyfills and tooling to make them work in every context. The implementation turned out tougher than we anticipated but we're happy with the result.
Community Picks·3yBEM 101 | CSS-Tricks
The Block, Element, Modifier methodology (commonly referred to as BEM) is a popular naming convention for classes in HTML and CSS. It gives developers a standard on which to write better, maintainable code. BEM gives everyone on a project a declarative syntax that they can share so that they're on the same page.
builder.io·3yClosing the Gap: Simplify Your Web Layouts with the CSS Gap Property
The CSS Gap Property is a shorthand for the size of the gap between the rows and columns in, or multi-column layouts. Using the gap property instead of margins, you can use the CSS gap property to achieve the same effect with a single line of code. It simplifies layouts, improves readability, enables responsive design, reduces code complexity and improves browser performance.
Community Picks·3yImpossible⁉️ CSS only syntax highlighting 😱 ...with a single element and GRADIENTS 🤯
CSS only syntax highlighting system uses just a single element and can function in pure CSS (for displaying snippets) No elements for each different part of syntax that is highlighted, no bulky JavaScript libraries to render everything. So while the demo may not look that impressive, the 99.8% data saving is pretty impressive.
freeCodeCamp·3yHow to Build an Online Image-to-PDF Converter with HTML, CSS, JS, and NodeJS
An online image-to-PDF converter is a website that helps you convert your images to PDFs. This tool is useful because it provides an efficient way to store your images. In this tutorial, you'll learn how you can create your online photo converter with HTML, CSS, JavaScript, and NodeJS.
asayer·3yThe Top Ten Rendering Patterns in Modern Web Development
The Top Ten Rendering Patterns in Modern Web Development Back How to render your website most optimally? This article introduces the ten most commonly used rendering design patterns applied by current frameworks. In each case, we will look at the concept of the rendering pattern, the benefits and drawbacks, the use cases, the relevant frameworks concerned.
asayer·3yBuilding Interactive Dashboards with Gridstack.js
This article is a guide on how to use GridStack.js to create a drag-and-drop interface in a dashboard. The article would also explain how to install Gridstack.js, how you can use the library to build a functional dashboard, and would detail a comparison between Grid Stack.js and Muuri.
Community Picks·3yResume and pause animations in CSS
Resume and resume animations in CSS can be paused using the property. This property accepts two values: and. The value is the default value and it lets the animation run as normal. This can help you build some interesting UIs. For instance, you can pause the animation when the user hovers over the element and resume it.
Community Picks·3yCreating 3D Illustrations with CSS
Ricardo Oliva Alonso creates 3D Illustrations with CSS with HTML and CSS. He uses Sass mixins to create cubes much more efficiently. He gives us a couple of tips on how to create 3D illustrations with CSS. Check out the full piece: Animations Most of Ricardo’s great animations, most of them with CSS.
Community Picks·3yCSS Selectors: A Visual Guide & Reference
CSS selectors are used in CSS to select and style HTML elements on a page. Pseudo-classes allow us to define styles based on an element's state or its relation to other elements. This guide serves as your map, detailing and visualizing these essential selectors.
Hacker News·3yI'm betting on HTML
With the advent of large language model-based artificial intelligence, semantic HTML is more important now than ever. At its core, the internet is used to transmit data that helps humans interact with the world as they perceive it. The freedom that HTML/CSS/JS provide is a double-edged sword because access to data has become limited.
asayer·3yPrefetching, Preloading, and Prerendering in HTML
HTML markup offers effective strategies like prefetching, preloading, and prerendering to speed up websites without complex JavaScript tricks or network manipulation. Preloading is a technique to load resources like script files, pictures, and stylesheets in advance. Prerendering improves page load times significantly but has a higher resource cost than preloading.
