builder.io·3yThe React Ecosystem in 2023
The React Ecosystem celebrates its 10th anniversary in 2023 as the ecosystem continues to flourish. For those who are new to React, getting started can be a daunting task. With a vast array of tools and libraries available within the React ecosystem, choosing the right combination for your project can be challenging.
Robin Wieruch·3y10 Web Development Trends in 2023
The most popular meta framework called Next.js comes on top of React.js. SSR is all over the place when working with JavaScript frameworks these days. Other meta frameworks like SvelteKit are catching up. SSR has been competing with static site generation (SSG) for a while for the perfect performance.
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.
Community Picks·3y3D in CSS
Learn how to use 3D effects in CSS to create depth and perspective in web design. The 'perspective' property enables a 3D space for child elements, while 'translate3d' and 'rotate3d' are used to move and rotate elements in the 3D space. Using 3D effects can provide more screen real estate and enhance user experience.
Ahmad Shadeed·3yNew Viewport Units
New Viewport Units - Ahmad Shadeed We have been using CSS viewport units since 2012. They are useful to help us in sizing elements based on the viewport width or height. But using the unit on mobile is buggy. The reason is that viewport size won’t include the browser’s address bar UI.
Community Picks·3yPatterns
A collection of animation techniques built using CSS or JavaScript with considerations for accessibility and user preferences. You can use the code in these examples to help ensure your projects stay on the right track. This collection includes patterns that are often tricky to implement without hurting your Core Web Vitals scores.
builder.io·3yTailwind CSS Tips and Tricks Worth Knowing
Tailwind allows us to change the style of an element based on its state with helper classes. There are some times where we are forced to use CSS for our styles. Tailwind has some very useful and easy-to-use animation utility classes. For example, we can add the transition color class and set a duration of 300 milliseconds.
Community Picks·3yOptimal Images in HTML
Shopify Storefront Build is the most powerful no-code solution for Shopify merchants to drive growth Pricing Blog.io & Elastic Path on 12/13 Use Cases Landing Pages Customize and optimize high performing landing pages within your existing site or app Headless CMS. Visually create and seamlessly manage content on any tech stack.
Hacker News·2yYou don't need JavaScript for that
The article discusses the rule of least power in web development, which advocates for choosing the least powerful language suitable for a given purpose. It highlights examples of using native HTML and CSS instead of JavaScript, such as creating custom switches, using the datalist element for autosuggest, utilizing the native color picker, implementing accordions, and using dialog modals. The article also mentions future features that will further reduce the need for JavaScript.
Red Stapler·3yWeb Design Trends 2023
Bold Typography is being used more frequently to make a statement and grab the attention of users. 3D Transform, Filter and new CSS features are going to unlock lots of interesting web design purely on CSS. Dark mode/Dark Design is expected to be a popular trend in web design this year.
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·3yThe modern way of serving images
The HTTPArchive found at least 70% of all websites have an image as the most prominent element, yet only 34% of the web uses to create responsive & performant images. To change this, the following article will guide you through responsive image techniques, and introduce a novel technique that aims to make tags work (almost) like tags.
Product Hunt·3yplayCSS - Improve your CSS skills by playing daily challenges 💪
PlayCSS was hunted by Frank Eno in Design Tools and Developer Tools. PlayCSS is not rated yet. The easiest way to translate a website Support is great. "Feel free to leave some feedback about this project, it will mean a lot to me," says the makers of playCSS.
Community Picks·3yWhy we're bad at CSS
CSS is more like putting their hand in the pain box from Dune while some product manager has a gom jabbar to their neck, daring them to pull their hand out. Despite the latest advancements in CSS, many are still stuck in this kind of BEM mindset, trying to encapsulate everything.
Community Picks·3yMastering CSS Grid
A series of concise lectures and hands-on exercises will guide you through everything you need to know about creating responsive layouts for all of your web applications. You'll learn how to enable grid, define basic layouts, and use DevTools overlays to help plan and debug grid lines and areas.
