Community Picks·4yMaking a fast website is SUPER EASY
For a website whose goal is to convert customers by selling goods or services, the website should be attractive to look at. Images take up a huge part of the website's total size. As of August 2022, images made up on average 45% on desktop and 44% on mobile of a page’s total weight. Optimizing the images can therefore result in big and easy wins.
Tuts+·4yLearn React 18: The Complete React Developer Course
Learn React 18: The Complete React Developer Course is 3 hours 40 minutes long and it’s split into 27 lessons in total. In React, we primarily use props (short for properties) to pass data to our components. The easiest way to understand props is to think of them like the attributes you can pass to HTML elements in web development.
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.
asayer·4yGlassmorphic UI in React using CSS
Glassmorphism is a style that uses the properties of glass to enhance your design. It gives a translucent or transparent look to its elements. This effect is achieved by blurring an object, allowing the background to shine through. The layered interface maintains a clean look that’s easy on the eyes.
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.
asayer·4yThe Top 7 Component Libraries for React
React is one of the best JavaScript libraries for building intuitive and responsive user interfaces. Ant Design, Ant Design and Material UI are among the most popular React UI libraries. All the components in Onsen UI are auto-styled according to the platform, which means the same source code can be used for both platforms. The library is absolutely CSS-based, and there is no JavaScript functionality.
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.
asayer·4yUnderstanding the useId hook in React
UseId hook generates a stable id that can be used across any application’s server and client side of any application. The useId hook was formerly known as the useOpaqueIdentifier hook, but there were many concerns when using it. We have looked at isomorphic applications and why using libraries like uuid or options like Math.random is bad.
This Dot·4yWhat's new in Tailwind CSS 3?
Tailwind CSS v3 was released at the end of 2021. The new engine is so much faster that it takes only a few milliseconds to fire up the server. It detects all the classes you use, and it will update the output file live. It also has new text decoration utility classes to make fancy underline styles.
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.
Community Picks·4yThe Battle of the Units: PX vs REM vs EM
The Battle of the Units: PX vs REM vs EM in this article. I'm going to go through a few CSS units for customizing the font-size of text when building webpages. There are a lot of other units such as pt, pc, ex, etc. I will be focusing on the 3 most popular units; px class="one-em">1 em based on 10px.
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.
Community Picks·4yUsing Only CSS to Recreate Windows 98
Using Only CSS to Recreate Windows 98 Sponsor, I try and recreate Windows 98 using nothing else apart from CSS and HTML. See the Pen CSS Only Windows 98 by smpnjn (@smpnjn) on CodePen. The demo can be found here, since it is better viewed in full screen mode. The difficulty is you can only have one label associated with one input.
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.
