Community Picks·4yIslands Architecture
Islands architecture borrows concepts from different sources and aims to combine them optimally. Marko is an open-source framework developed and maintained by eBay to improve server rendering performance. Astro: Astro is a static site builder that can generate lightweight static HTML pages from UI components built in other frameworks such as React, Preact, Svelte,
Hacker News·4y58 bytes of css to look great nearly everywhere
58 bytes of css to look great nearly everywhere (enhanced version) This should be simple drop-in css. I've since changed the padding to 1.5rem for a happier compromise between mobile and desktop displays. The padding also provides sorely-needed top and bottom whitespace.
freeCodeCamp·4yJavaScript DOM Tutorial – How to Build a Calculator App in JS
The Document Object Model (DOM) is a logical structure that defines how elements in a document can be manipulated and changed. You must first learn how to access elements in the DOM before you can manipulate it. How to create a DOM Element JavaScript requires that any element be created before it can be added to the DOM. For this, we use the document.createElement() method.
DEV·4yMe & React: 5 years in 15 minutes
React has finally started making sense to me. It was almost the same as my old pal HTML, except JSX allowed splitting HTML pages into tiny dynamic building blocks. A stateful component had a state which was triggering a re-render on change, while the stateless had only the render part and were rendering the same thing. It made debugging quite mind bending, as sometimes console.log has been printed a microsecond before the state was actually propagated. Redux has treated me a bit better.
asayer·4ySemantic elements in HTML: why use them
Semantic elements have to do with the syntax that makes the HTML very easy to understand. It makes our code cleaner and make more sense where each element uses the appropriate word. The navElement makes it immensely more accessible for us to create a neat menu of text links and help screen readers correctly identify the primary navigation areas in a document.
asayer·4yMicro-Interactions using Anime.js
Micro-interactions are small, functional animations that give the user support using visual feedback. They are just like other interactions with gadgets; they’re used to give users meaningful feedback because they must always be aware of the results of their actions. We imported Machine from XState and created a generic type for our TogglEvent, setting type to TOGGLE, and created our state machine.
freeCodeCamp·4yHow to write a Good Technical Tutorial
The first thing a reader looks for in a tutorial is what the tutorial will solve or answer for them. Make an Outline before starting to write a tutorial, outline what things are you going to write about. Use Headings and Small Paragraphs to separate different sections of your article by topic.
freeCodeCamp·4yWhat is Tailwind CSS? A Beginner's Guide
Tailwind CSS is a new tool that takes away a lot of the burden from us. There are many ways to write CSS out there – like Vanilla CSS3, LESS, SCSS, Bootstrap, styled-components, Windi CSS, and more – and even our OG HTML. The concept of Atomic CSS is not new but tailwind CSS takes it to another level.
Pointer·4yBuilderIO/qwik: The HTML-first framework. Instant apps of any size with ~ 1kb JS
Qwik allows fully interactive sites to load with almost no JavaScript and pickup from where the server left off. As users interact with the site, only the necessary parts of the site load on-demand. This precision lazy-loading is what makes Qwik so quick.
Community Picks·4yWhy our websites are slow — Importance of bundle size
A new story tells the impact of bundle size on application performance and a mind-boggling story to understand why websites can be slow. The story begins way back exactly one year ago. For one year I have covered so many stories on react application optimisation but today I have a new perspective on seeing react applications.
asayer·4yAn Introduction to Native Web Components
Native Web Components provide a way to create encapsulated, single-responsibility, custom functionality that can be used with or without a framework. The concepts were first introduced by Alex Russell at the Fronteers Conference in 2011. The browser can call one of six handler methods depending on the current state of the web component. It typically runs clean-up operations such as aborting in-flight Fetch()requests.
DEV·4ySass: Interpolation & Nesting
Interpolation can be used almost anywhere in a Sass stylesheet to embed the result of a SassScript expression into a chunk of CSS. It allows us to insert sass expressions into a simple SASS or CSS code. We will discuss nesting in further detail in the following post.
asayer·4yPre-rendering Techniques in Next.js for React
Next.js for React The Next.js brings friendly and welcome solutions to some problems in the React framework. Some solutions include out-of-the-box support for routing, SEO optimization, etc., and in particular, different pre-rendering techniques. OpenReplay is self-hosted for full control over your data.
Community Picks·4yIs CSS Transform Dead?
CSS is adding lots of new features and some of the smaller quality of life features they added recently were the addition of the translate, rotate, and scale properties. These properties almost entirely remove the need to use the transform property which is incredibly nice since there are tons of possibilities this opens up that were very difficult if not impossible before. There are a few ways to get around this issue.
Hacker News·4yHow I’m a Productive Programmer With a Memory of a Fruit Fly
Dash is a $30 Mac app3 (also available as part of Setapp subscriptions!), there’s the free Windows and Linux version called Zeal. Dash can replace documentation that you already keep locally on your computer for faster and/or offline access without doing anything special. Just package it up into the necessary directory structure, add an empty index, and fill out simple metadata.
Better Programming·4yUnderstand Island Architecture and How the Client Receives No JavaScript
Island Architecture was created by Katie Sylor-Miller, the front-end architect for Etsy. Island Architecture is also known as Partial Hydration (Partial Hydration) SEO Pages are SEO-friendly because all static information is rendered on the server. The architecture is ineffective for heavily interactive pages, such as social media apps, which would almost certainly require thousands of islands.
Open Source Way·4yA beginner's guide to making a dark theme for a website
dark theme can be added to your website with a simple and easy-to-add-the-dark theme. The dark theme is a dark-themed theme to the top of the list of icons. The for...of loop of JavaScript applies ".dark-theme" class styling properties to each card on the page, regardless of its position. It applies the theme to all web parts selected with querySelectorAll(). Without this, the font and background color remain unchanged. The font and color remains unchanged. If you set a dark theme, the dark theme will not work as expected.
