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.
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.
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.
Smashing Magazine·3yTop Front-End Tools Of 2022 — Smashing Magazine
Top Front-End Tools Of 2022 are the most popular tools in the developer community. Almost all of these tools are practical tools you can use in your projects today. Piling.js is a JavaScript library that allows you to build interfaces where large amounts of items can be dragged and dropped into “piles” It’s built on top of PixiJS.
Community Picks·3yA Complete Guide to CSS Grid | CSS-Tricks
CSS Grid is a two-dimensional layout system that, compared to any web layout system of the past, completely changes the way we design user interfaces. Grid is the very first CSS module created specifically to solve the layout problems we've all been hacking our way around for as long as we’ve been making websites.
Community Picks·3yI Created an OpenSource Portfolio Template for Developers 🚀
I created an OpenSource Portfolio Website Template for Developers. The project is made with HTML, CSS, some JavaScript, and SASS to write CSS. Don't worry if you don't know any, I have provided the instructions on how to use Dopefolio and set up your own Portfolio using it in the README.
LogRocket·3yUnderstanding neumorphism in CSS
Neumorphism is a style of design that combines elements of skeuomorphism and flat design. It is a design style that involves creating user interface elements with a soft, three-dimensional appearance. This article will explore how to use it in your CSS projects and its accessibility concerns.
CSS-Tricks·3yAnimating CSS Grid (How To + Examples) | CSS-Tricks
CSS Grid has technically supported animations for a long time, as it’s baked right into the CSS Grid Layout Module Level 1 spec. But animating these grid properties only recently gained supported by all three major browsers. Here, we take a look at some examples to get the creative juices flowing.
asayer·3yIntroduction to Pure.css
Pure.css makes it simple to build quick-loading, mobile-friendly websites that look amazing on any device since it is meant to be lightweight, modular, and responsive. To make default styles consistent across many browsers, Normalize.css is used to build Pure. CSS is designed to be minimal and lightweight.
freeCodeCamp·3yWhat is Pre-Caching? How to Increase Website Speed and Performance
The goal of pre-caching is to improve the performance and user experience by reducing content load times. Pre-cached is to cache commonly accessed data or resources in advance so that when the time comes, you can deliver it to the end-user faster. It is important for you to choose the right data to cache.
Medium·3yThe entry-level (junior) full-stack software engineer’s guide
The entry-level (junior) full-stack software engineer’s guide Jan 11. Learn how variables are declared, the language primitives, how functions, objects, and arrays are used in JavaScript. Find out what the language data types are and how to use them.
Community Picks·3yBecome a Frontend web developer in 2023 - A step by step guide
A front-end developer is responsible for building the layout of a website from scratch including various icons and toggles that users rely on to get a service done. Back-end developers do the exact opposite of frontenders do as a programmer in the field you are expected to implement all the background stuff like development of the infrastructure, database and Communications.
Ahmad Shadeed·3yConditional CSS
Conditional CSS has evolved a lot to the point you can see conditional rules. In CSS, there are three conditional rules happening: If the items wrap into a new line, the will work for the horizontal and vertical spaces. If the page direction is RTL (right-to-left) the items will switch their order.
Community Picks·3yThe truth about CSS selector performance
The way you write CSS selectors does play a role in how browsers render your web pages. This heavily depends on the web page, the size of the DOM tree, the amount of CSS rules, and whether the DOM changes often. Microsoft Edge DevTools has a Performance tool that can be a real eye opener when your app starts feeling slow.
freeCodeCamp·3yHow to Style Your React Apps with CSS Like a Pro
You will learn how to integrate React with CSS like a pro by understanding the different ways you can apply styles to your React components. By the end of this tutorial, you should be able to confidently style your React component and build visually appealing user interfaces. You'll also learn some best practices for organizing and maintaining your CSS code.
Community Picks·3yFun with Viewport Units | CSS-Tricks
Four new ‘viewport-relative’ units appeared in the CSS specifications between 2011 and 2015, as part of the W3C’s CSS Values and Units Module Level 3. The new units work similarly to existing length units like or. but represent a percentage of the current browser viewport.
Tuts+·3yVue.js Tutorial: Beginner to Front-End Developer
Vue.js is a great choice for a front-end framework, and you'll learn how to use it in detail. The course is 4 hours 22 minutes long, and it’s split into 35 lessons in total. You'll learn the fundamentals of Vue with no build tools or toolchains.
freeCodeCamp·3yLearn CSS by Building the Figma Logo in Pure CSS
Learn CSS by Building the Figma Logo in Pure CSS by building the logo in pure CSS. I will show you how to use the following CSS concepts by creating the logo: - flex-wrap - multiple classes - border-radius. What We Will Be Creating We will create the FigMA logo inpure CSS.
freeCodeCamp·3yHow to Integrate PayPal into Your HTML, CSS, and JS Product Pages
PayPal is one of the most widely-used and trusted payment gateways available. There are many new software startups appearing every day that use PayPal to handle their transactions and clients’ payments. Integrating PayPal into your product pages can greatly improve the user experience and streamline the checkout process for your customers.
asayer·3yAn Introduction to Spectre CSS
Spectre.css is built with a mobile-first approach and uses a flexbox-based grid system to create responsive layouts. It also includes a number of utility classes for common styles, such as text alignment, margin, padding, and visibility. It is made to be flexible and compatible with current web development tools like task runners, package managers.
DEV·3yCSS Generators
In this blog, we will introduce you to the world of CSS generators and how they can save you time and effort in your web development process. From online tools to desktop software, we'll explore the different options available. Whether you're a beginner or an experienced developer, you'll find something useful here.
asayer·3yWorking With CSS Gradients
CSS gradients are CSS images that allow you to display progressive and smooth changes between two or more specified colors. They can add subtle visual interest to a webpage or create a more striking effect. Gradients give depth and dimensions to the background of a web page by conveying the design from flat to three-dimensional.
DEV·3yCreating a toast notification system for you react web app
In today's Article, we will develop a simple and light toast notification for our react web apps. We will use the React-notification-system Tools used in Project React (I will use Nextjs for this project) Tailwind is a simple tailwind component for making customisable styles for our projects Framer motion.
