Next.js 14.2
soufiane hrittaneNext.js Version 14.2 has launched, packed with upgrades to supercharge your development process, streamline production, and optimize caching strategies. Here's what's in store: 🚀 Turbopack for Development Replacing Webpack, Turbopack is a game-changer in the Next.js ecosystem. It streamlines the build process, offering lightning-fast updates when you tweak your code, boosting developer efficiency. Version 14.2 further enhances error handling with: Instant Updates: Turbopack ensures swift updates when code changes, supercharging developer productivity. Efficient Rebuilds: Smart caching means changes in one part of your app won't trigger unnecessary full rebuilds elsewhere. Smooth Transition: Turbopack plays nice with existing npm packages, ensuring a seamless switch without disruption. Robust Testing: Extensive testing across different Next.js examples confirms Turbopack's reliability for diverse use cases. Enhanced Build and Production Efficiency In Next.js 14.2, significant optimizations change how applications are built and served: Effective Tree-Shaking: Unused exports are pruned, reducing bundle sizes and speeding up load times. For example, importing a single component no longer brings in unnecessary others from the same package, leading to significant bundle size reductions. Memory Usage Optimization: Fine-tuning memory usage during builds prevents crashes in large applications, crucial for enterprise-level projects. Improved CSS Chunking: A new CSS chunking approach ensures consistent style delivery across pages, eliminating delays or unstyled content flashes. These upgrades aim to simplify the development process, helping developers spot and fix issues faster. Next.js remains committed to enhancing the developer experience, creating a smooth and productive environment for web app development. CSS Handling and Optimization CSS optimization updates during production builds ensure smoother transitions between pages: Enhanced Chunking: CSS chunking prevents conflicting styles when moving between pages. Streamlined Order: CSS chunk order and merging are determined by import hierarchy, ensuring styling consistency. Enhanced Caching Mechanisms Caching strategies get a boost with the addition of the staleTimes configuration for the Client-side Router Cache. This feature lets developers define how long a cached page remains valid before it's marked as stale, offering better control over content freshness and performance. staleTimes Configuration: Set cache invalidation periods with the experimental staleTimes option for customizable revalidation times. Parallel and Intercepting Routes Integration: Improved integration with the Client-side Router Cache ensures refreshed content while maintaining the user's current view. Developer Experience Improvements Next.js 14.2 prioritizes a better developer experience with improved error messages and debugging tools. The new error overlay supports both light and dark themes, simplifying issue troubleshooting and aligning with developers' visual preferences for smoother debugging workflows. These updates streamline debugging, providing developers with the tools they need for a smoother, more productive development workflow.
Helpful Front-End Resources
soufiane hrittaneintroduction Here's a compilation of fantastic resources, primarily centered around front-end web development API RapidAPI - Free Public APIs for Developers any-api - Documentation and Test Consoles for Over 1400 Public APIs public-apis - A collective list of free APIs for use in software and web development API list - A collective list of APIs free-open apis - 30 Free & Open APIs for Marketers & Content Developers json placeholder - Free fake API for testing and prototyping Data-Structures-and-Algorithms Algorithm-Challenges CodeWars HackerRank coderbyte exercism.io AlgoExpert HackerEarth Codemonk LeetCode edabit NeetCode.io Algorithm-Books grokking algorithms Think Like A Programmer Algorithm-Websites Algorithm Visualiser Design Design-Articles Pixel Perfect Web Development: 5 Essential Steps by Daniel Corin Stig Learn Responsive Design! by web.dev Everything I Know About Style Guides, Design Systems, and Component Libraries Atomic Design Design-Books Atomic Design Colors coloors - color schemes generator Hex Colors - color palette generator Canva Colors - multiple color tools contrast ratio - contrast checker Adobe Color - color wheel and other tools Name that Color - color namer Accessible Brand Colors - accessibilty checker for colors Flat UI Colors - color palettes Coolors Palette Creator - random color palette generator mycolor Palette Creator - random color palette generator Design-Systems Polaris by shopify Evergreen Segment Eva Design Assets Vercel Ant Design Carbon Storybook Radix Primer Blueprint Atlassian chakra Fonts Google Fonts - huge font library Font Flipper - random font generator Font Squirrel - webfont generator Online Font Converter - create @font-face rules and convert fonts online fonts in the wild - font library webfontloader - tool for controling @font-face rules BEfonts - free fonts for designers Icons flaticon - vector icons & stickers Material Icons - huge icons library icones - icon sets Tabler Icons - fully customizable free svg icons iconmonstr - icon library IcoMoon - pixel perfect icon solutions heroicons - free icon library heroicons - by the makers of tailwindcss Bootstrap Icons - free icon library Font Awesome - icon library Simlpe Icons - icon library Icon Finder - icon library and illustrations 700+ CSS Icons - open-source svg and figma ui icons Streamline - icons and emojis Optimization Tools Squoosh - image optimization tiny png ImageOptim Stock Photos-Illustrations-Mockups Unsplash - royalty free stock photos Pexels - free stock photos & videos Pixabay - free images & royalty free stock Doodle Ipsum - free illustrations and doodles ls.graphics, Mockups and UI toolsl - mockups, illustration and ui tools PurePNG - Pure PNG Image Library FavPNG - Free Transparent PNG Images CleanPNG - Free PNG Images StickPNG - Free PNG Stickers Tools-for-Responsive-Design MY DEVICE.io a tool for responsive design, browser features Tools 10015 - All Online Tools in “One Box” Contrast - a tool for contrast checker Typography Typography 101 - Web Design For Beginners by Dev Ed - typography 101 introduction video The Fastest Google Fonts by CSS Wizardry - an article about how to enhance performance with google fonts Design-Websites Laws of UX - best practices for design and user interfaces uxcel - ui/ux design courses and skill tests Ux Tools - tutorials and methods, skills about design Design Resources - huge source for all kind of design tools UI Design Daily - daily design and ui pieces Daily Handpicked Free UI Kits for Your Projects daily design and ui pieces HTML Accessibility A Complete Guide To Accessible Front-End Components by Vitaly Friedman The Importance Of Manual Accessibility Testing HTML-Articles How Web Works by Vasa 7 useful HTML attributes you may not know Building an adaptive favicon Checklist Front-End Checklist by David Dias Checklist by The A11y Project The Front-End Checklist HTML Best Practices Performance My Challenge to the Web Performance Community Validation Can I use? Can Include Browser Default Styles W3C Markup Validation Service What the tag ?! HTML-Websites HTML CheatSheet How HTTPS works How DNS works CSS CSS-Articles An Interactive Guide to Flexbox by Josh W Comeau Understanding Clip Path in CSS by Ahmad Shadeed Defensive CSS by Ahmad Shadeed Efficient font stack with Sass by Fabrice Lejeune Responsive Typography With Sass Maps by Jonathan Suh What Does a Well-Documented CSS Codebase Look Like? by Kaloyan Kosev The Options for Programmatically Documenting CSS by Kaloyan Kosev Structuring your SASS projects A Complete Guide to Grid 14 CSS Topics You Must Know Simplifying Form Styles With accent-color The Large, Small, and Dynamic Viewports Understanding Layout Algorithms Architectures-Methodologies Sass Guidelines by Kiltty Giraudel Scalable and Modular Architecture for CSS by Jonathan Snook CSS Guidelines by Harry Roberts An Introduction To Object Oriented CSS (OOCSS) A Simple SCSS Architecture by Matthew Elsom BEM Cheat Sheet Organizing Your CSS / SCSS Code CSS-in-JS Styled Components Stitches JSS Emotion CSS-Design-Systems Css Layout SmolCSS CSS-Generators CSS-GEN box-shadow Generator CSS-GEN border-radius Generator CSS-GEN transform Generator CSS-GEN image-filter Generator CSS Grid Generator - grid generator CSS Buttons Generator - Button generator CSS box-shadow generator - box-shadow generator Neumorphism.io - Generate Sof-UI CSS code Make some waves! - Wave generator CSS Separator Generator - make awkward separators html and css uiGradients - gradient generator Easing Gradients - gradient generator CSS Gradient - gradient generator gradient-designer - gradient generator Mesh Gradient - gradient generator Fancy Border Radius - border-radius generator Smooth shadow gradient - box-shadow gradient CSS Scroll Shadows! CSS-Videos Sass Tutorial for Beginners - CSS With Superpowers by codeSTACKr CSS-Websites css-tricks cssreference.io cssauthor Modern Css Solutions by Stephanie Eckles Style Stage by Stephanie Eckles Every Layout by Heydon Pickering & Andy Bell CSS { In Real Life } by Michelle Barker Css CheatSheet State of CSS Sass cheatsheet Curated list of awesome Sass and SCSS frameworks, libraries, style guides, articles, and resources. What does 100% mean in CSS? Front-End-Resources Front-End-Articles Smashing Magazine - Guides to Web Design and Development Why learning to code is so damn hard? The Front-End Developer's Guide to the Terminal How To Learn Stuff Quickly Front-end may soon need new sub-disciplines Learning to Code: How to Think Like a Programmer - Zapier How to write maintainable JavaScript code in 2023 — Web or Node.js Front-End-Challenges Frontend Mentor.io DevProjects by codementor.io Ace FrontEnd codewell devChallenges Front-end-Surveys State of Frontend 2022 State of JavaScript State of CSS Front-End-Websites Patterns - A collection of code snippets to help you optimize your web projects. The Valley of Code This vs That 101 DevTools Tips Front End Web Development Resources by Ritik Patni Front-End Dev Bookmarks by Tim Navrotskyy 200+ Ultimate Resources for Front-End Development in 2021 by Rahul ZTM Free Developer Resources Git&Github Git-Courses Learn Git Branching Introduction to GitHub Git-Videos Git & GitHub Crash Course For Beginners by Traversy Media Git Explained in 100 Seconds by Fireship Getting Started with GitKraken for GitHub Users Git-Websites Git Explorer Dangit, Git!?! Git from Beginner to Advanced by MadeByMike Advanced Git Tutorials by Bitbucket Little Things I Like to Do with Git Oh Shit, Git!?! Git-Tools lazygit simple terminal UI for git commands JavaScript JavaScript-Articles Top 6 JavaScript ES12 Features You Should Use Javascript in Plain English - New JavaScript content every day Building the DOM faster: speculative parsing, async, defer and preload by Milica Mihajlija The Ultimate Tutorial on JavaScript DOM - JS DOM with Examples Learn map(), filter(), reduce(), and sort() in JavaScript How to create a dark theme system in 5 minutes or less with vanilla JS. ES6 Handbook Introduction to Promises and Async and Await Promises in Javascript! ✨ How I built a modern website in 2021 17 Life-Saving JavaScript One-Liners 🔥 2ality – JavaScript and more How to Use JavaScript Arrays Like a Pro How much JavaScript should I learn? 🤔 Statements Vs. Expressions 165+ JavaScript terms you need to know JavaScript-Books You Don't Know Javascript by Kyle Simpson Functional Light JavaScript by Kyle Simpson Eloquent Javascript by Marijn Haverbeke JSbooks - The best free JavaScript resources Exploring JS: JavaScript books for programmers Learning Patterns by Lydia Hallie and Addy Osmani JavaScript Allongé: A strong cup of functions, objects, combinators, and decorators JavaScript-Conference-Talks Becoming a better developer by using the SOLID design principles by Katerina Trajchevska The myth of the “Real JavaScript Developer” by Brenna O'Brien How to fix the web by Brendan Eich Get better at JavaScript with just JavaScript - Wes Bos Learning Functional Programming with JavaScript - Anjana Vakil JavaScript-Courses-Practices 30 Days of JavaScript Introduction to How to Write an Open Source JavaScript Library - egghead Learn Modern Javascript - scrimba Learn JavaScript for free - scrimba clean-code-javascript node.js-best-practices JavaScript Algorithms and Data Structures JavaScript Cheat Sheet: The Advanced Concepts JavaScript-Tools vite.js Parcel gulp webpack esbuild Grunt Babel JavaScript-Websites Just Javascript - text based javascript course whatthefuck.is - - dan's javascript glossary JavaScript Patterns Workshop Free Javascript Resources Javascript CheatSheet SheCodes Javascript Cheatsheet JavaScript For Cats Javascript.info Learn Javascript Online LEARN JS egghead.io - Javascript codecademy - Learn Javascript public-apis JSON Crack - seamlessly visualize your JSON data instantly into graphs Manage HTML DOM with vanilla JavaScript React React-Articles How to learn React - The Effective way 5 Packages Every React Developer Must Know Ultimate ReactJS Resources 🛠For Web Developers 2021👨‍💻 React — 5 Things That Might Surprise You Implementing Atomic Design in Modern React Development Some Features Every React Developer Should Know A Complete Guide to useEffect Persistent login in React using refresh token rotation React Authentication & Access Control 13 Libraries You Should Know as a React Developer 19 GitHub Repositories to Become a React Master ⚛️🧙 Atomic Design and ReactJS React-Frameworks Next.js REMIX Gatsby React-Hooks react-use React Hooks Cheatsheet React Hooks Simplified React-State-Management Zustand Jotai Redux Recoil Easy Peasy React-Tools Mantine Create React App React Starter Projects React Dev-Tools React Redux Storybook React.js cheatsheet evergreen React Styleguidist React Testing Library REACTIDE React Cosmos React Proto React Hot Loader React Hook Form React Bits React Bootstrap kbar - command + k interface TypeScript TypeScript-Articles TypeScript for React Developers – Why TypeScript is Useful and How it Works An Introduction to TypeScript The Relevance of TypeScript in 2022 Creating a TypeScript React Application with Vite Creating Custom Types in Typescript React Event Handlers with TypeScript With 30+ Articles, You Will Not Be Confused When Learning TypeScript TypeScript-Courses React+TypeScript Cheatsheets Beginners TypeScript Tutorial TypeScript-Challenges Type Challenges TypeScript exercises TypeScript-Tools TypeScript Error Translator Other-Content Blogs Dav Abramov Medium Overreacted - Dav Abramov Blog Kent C. Dodds Blog DEV Community alligator.io Flavio Copes Una Kravets Silvestar Bistrović Zell Liew Kyle Cook (Web Dev Simplified) Lydia Hallie Lee Rob Other-Books Frontend Masters Books Code-Formatters Prettier dirtyMarkup awesome-code-formatters Developer&Productivity-Tools Raycast - Spotlight with super powers with lots of awesome extensions. Snipetty - Tool for developers to create code snippets. Polypane - Development focused browser for building apps and refactoring. React Developer Tools - Chrome extension for React Development. Thor - Easy switch between apps by custom shortcuts. AltTab - Customize your alt-tab settings deeply. xScope - Great tool for both design and development. Sip - Color picker for Mac OS. RainDrop - Bookmark manager. Github Copilot - Your AI pair programmer. WakaTime - Track your time in both browser and IDE. GitKarken - Git GUI & Git CLI with a lot of features. DevBook - Search through the DevDocs and StackOverflow without switching to your browser. daily.dev - Great tool for finding hottest trends and popular articles. Discord Communities Frontend Developers Kevin Powell - Community KCD - Kent C. Dodds Community Reactiflux Bruno Simon Community (Three.js) Next.js Community Documentations Mozilla Developer Network React Docs (beta) DevDocs sass-lang - TypeScript Documentation Interactive-Games Flex Box Adventure Knights of the Flexbox Table Flexbox Zombies Flexbox Froggy Flexbox Defense Flexy Boxes CSS Grid Garden CSS Grid Cheat Sheet CSS Grid Attack CSS Grid Critters CSS Selectors Cheatsheet CSS Animations CSS Rules CSS Filter Blend CSS Battle CSS Diner TypeScript Exercises React Tutorial Elevator Saga - JavaScript Screeps - JavaScript Untrusted - JavaScript PromiSEES - Javascript JSchallenger JSRobot Service Workies (PWAs) Learn Git Branching Select Star SQL SQL Police Department SQLBolt Regex Crossword Regex101 RegexOne CodinGame OpenVim Jamstack Attack JavaScript Quiz Interview Practices Coding Interview University mission-peace interview Front-end Developer Interview Questions React Interview Questions 123 Essential JavaScript Interview Questions JavaScript Interview Questions & Answers JavaScript Questions Tech Interview Handbook Front End Interview Handbook by Yangshun Tay JavaScript Code Challenges 10 Interview Questions Every JavaScript Developer Should Know System Design Front End Engineer Newsletters STACKR News newsletter by Kevin Powell flaviocopes newsletter CSS-Tricks Newsletter Smashing Magazine Newsletter ModernCSS by Stephanie Eckles Stefan's Web Weekly JavaScript Weekly Web Tools Weekly Web Dev Simplified newsletter Frontend Focus CSS Animation Weekly Dev Tips cssweekly Podcasts Syntax. Front End Happy Hour The CSS Podcast The freeCodeCamp Podcast Shop Talk Show CodePen Radio JavaScript Jabber JS Party Ladybug Podcast Orbit FM - Web of Tomorrow Full Stack Radio Frontside Podcast developer tea egghead.io podcast The Front End Podcast Frontend News 2021 Reddit-Subreddits freeCodeCamp.org: Learn to Code for Free From Home programming AskComputerScience iOS Programming Learn Javascript Computer Science web_design coding learn programming javascript AskProgramming webdev: reddit for web developers HyperText Markup Language HTML5 & Friends Bringing the web out of 2007 since 2013. Cascading Style Sheets Official announcements pertaining to reddit custom CSS ProCSS css_irl Help for reddit's CSS Sass - a language for building awesome CSS Roadmaps React Roadmap 2022 Web Dev Roadmap by codeSTACKr Web Skills Roadmap Step by step guide to becoming a modern frontend developer by roadmap.sh The Front-End Developer Learning Roadmap by FrontendMasters How to Learn Javsascript 2021 React advanced education Online-Curriculums freeCodeCamp The Odin Project Web Dev for Beginners - Microsoft Coding Interview University Youtube-Channels Fireship Kevin Powell codeSTACKr Traversy Media DesignCourse Web Dev Simplified Wes Bos The Net Ninja Dev Ed Adam Argyle Coder Coder Clever Programmer Coding Tech Dorian Develops Adrian Twarog Ben Awad Kenny Gunderman Tech With Tim Florin Pop Program With Erik Codevolution Devslopes freeCodeCamp.org CS50 JSConf uidotdev Mixed-Content web.dev Coder Survival Guide tutorialzine 30 Seconds of Code Awesome Free Developer Resources by codeSTACKr Design Resources by Brad Traversy & Csaba Kissi The Ultimate List of Web Development Podcasts Best Design Resources for Developers by Suhail Kakar Rico's cheatsheet cult. by Honeypot codecademy Web Development Cheatsheet OverAPI - Collecting All Cheat Sheets codrops free-programming-books free-for.dev awesome-resources Today I Learned by jbranchaud Every Programmer Should Know 🤔 Visual Studio Code Cheat Sheet Solidity Videos Is Web3 all Hype? Top 10 Web 3.0 Questions & Answers by Fireship Youtube Channels Dapp University Web3 Foundation Moralis Web3 EatTheBlocks
100 CSS helpers and libraries for Web Developers
soufiane hrittaneCSS generators streamline website development, offering efficient time-saving solutions. This post delves into a diverse array of these tools, conveniently categorized for easy reference. Additionally, an open-source variant is accessible on Github for further exploration. Table of Contents CSS Grid Generators Flexbox Generators Border Generators Border Radius Generators Box Model Generators Box-Shadow Generators Text, Typography, and Scaling Button Generators Page Separator and Wave Generators Animations, Keyframes, and Cubic-bezier Generators Neumorphic Design Generators Glassmorphism Generators Clip-path and Shapes Blob Generators Background Generators CSS and SVG Patterns PNG and JPG Patterns Gradient Generators Mesh Gradient Generators List Generators Multi-Column Generators Filter Effect Generators Cursor Customization Switches and Toggles Scrollbar Generators Color Picker Table Generators Media Query Generators CSS Grid Generators CSS Grid Generator Grid Layoutit Cssgr.id Griddy CSS Grid Layout Generator CSS Layout Generator AngryTools Grid Generator Holy Grail Grid Generator Flexbox Generators Flexbox.tech Flexplorer Flex Generator Flexyboxes Loading.io Flexbox Flex Layout Generator Border Generators Broider - Tool for making 9-patch borders Border Outline Border Image - Generate a border using an image Dashed Border Generator - Create cool custom borders Custom border Generator Border Radius Generators Border Radius Border Radius Generator CSS3 Border Radius Generator Box Model Generators CSS Box Model Box-Shadow Generators Shadow Elevation Editor Shadows Generator Box Shadow Generator Cssscan Box Shadow Examples Box Shadow.dev CSS 3 Gen Box Shadow Box Shadow Generator Manuarora Tailwind Box Shadows Josh Comeau Shadow Palette Generator CSS Shadow Gradients Text, Typography, and Scaling Gridlover Scaled Typography Type Scale Modular Scale Shaper Typography Styling Archetypeapp Typography Design Vertical Rhythm Generator CSS Font Style Generator CSS Underline Generator Button Generators Btns - A collection of buttons with cool hover effects Copy Paste CSS - Copy the buttons from top websites Tailwind CSS Buttons - Well-designed Tailwind button collection Beautiful CSS Buttons - A useful button collection from CssScan Button Buddy - Generator with a focus on accessibility Marco Denic Button Generator - Great premade button collection with hover effects Best CSS Button Generator - Useful button editor with some premade styles CSS-Tricks ButtonMaker - Button generator from CSS Tricks CSS Button Generator - Button generator with hover effect options Gradient Buttons - Gradient buttons with hover effects Page Separator and Wave Generators Shape Divider SVG Wave Getwaves.io Wavelry CSS Seperator Generator Page Dividers Haikei Wavy Dividers Generator Mountain Ridge Divider Generator Animations, Keyframes, and Cubic-bezier Generators Animista Play - Premade animations Animatopy - Simple premade CSS animations snippets CSS Animation Generator - Premade animations Keyframes.app Animate - A website to design animations Waitanimate - A tool to provide a pause before it loops around again in CSS Cssanimation.io - Text animation generator using the Greensock library Cubic-bezier.com - Create and compare cubic beziers CSS Easing Generator - Easing curve comparison on with an easy interface Easings - A library of easing functions Neumorphic Design Generators Neumorphic Design Neumorphism Hype 4 Neumorphism Generator Glassmorphism Generators Glassmorphism CSS Generator CSS Glass CSS Glassmorphism Generator Magic Glassmorphism Generator Simple Glassmorphism Generator Hype4 Glassmorphism Generator Glassmorphism Generator Clip-path and Shapes Clippy - Simple in-browser editor to create many shapes Relative Clip Path - Create awesome shapes with SVG Clip Path Generator - Editor to build your own SVG paths Clip Path - Clip path generator for basic shapes CSS Arrow Please - CSS arrows and tooltips CSS Triangle Generator - Simple triangle generator Bubbly - Speech bubble generator Blob Generators Blobmaker Blobs.app Magic pattern blob generator Random blob generator Haikei - Make sure to click the 'blob' section on the left panel Signalsupply - Gradient blobs for text overlay Squircley - Symmetrical blobs Generate Blob Fancy Blob Border Radius Ssshape Blob Maker Blob Animation Superdesigner blobs Background Generators Background Color and Image Generator Background CSS Generator CSS Background Image Generator CSS Background Generator CSS and SVG Patterns Gradienta - Striking collection of multicolor gradients MagicPattern CSS Backgrounds SVG Backgrounds Heropatterns.com Pattern Generator Plain Pattern Bgjar.com Haikei Patternify.com Stripes Generator Visiwig.com Patterns Visiwig.com Textures Wicked Backgrounds Animated Backgrounds Fffuel Isomorphic 3d Patterns Superdesigner Background Generator Heazy Studio PNG and JPG Patterns Cool Backgrounds - Generate striking background pattern pngs BgGenerator - Generate cool background pattern pngs and jpgs Smoky Background Generator GeoPattern - Cool geometric patterns based on what you type Delaunay Triangle Pattern Maker - Nice high-contrast low-poly backgrounds Background Image Generator Background Generator - Generate cool textures Figen - Generate post covers and backgrounds Gradient Generators Gradpad Gradihunt LearnUI Gradient Generator CSS-Gradient.com Grabient Gradient King Vivid Gradient Generator Tools Design Gradients Slick Gradients LaunchChoice Tailwind Gradients Mesh Gradient Generators Fffuel Fluid SVG Background Noise and Gradient - Complex textured gradients, downloadable as .jpg Color Morph Random Mesh Gradient Generator Mesh Gradient Generator Ingradients Mesh Gradients List Generators List Style Generator List-Style CSS Generator Somacon Website List Style Generator - Generate and experiment with your website's list styles Multi-Column Generators Bestagencies Column Generator CSS Portal Column Generator Multiple Columns CSS Generator CSS Column Generator CSS3 Multi Column Generator Doodlenerd Multiple Column Generator Filter Effect Generators CSS Filter Generator CSS filters - Instagram-like presets, filters, and gradient overlays Image and SVG Filters Doodlenerd CSS Filter Generator Duotone Generator - Really cool css duotone images CSS Filter Generator CSS Portal Filter Generator Image effects with CSS - Premade collection of cool css effects Halftone Effect Filter Effects Generator Filter blend - Filter and blend mode that will combine two images SVG Color Matrix Mixer - SVG overlay mixer to change SVG color Cursor Customization CSS Cursor - Demos of cursors. Simply click to copy CSS CSS Cursor Demonstrator and Generator - Demos of every cursor declaration CSS Cursor Viewer - Cursor demos Emoji Cursor - Use emojis as mouse cursors by combining SVG with CSS Switches and Toggles CSS3 Flip Switch CSS Toggle Switch Button On-off switches Radio Button Checkbox Generator Pure CSS Toggle Buttons Scrollbar Generators Scroll Generator CSS Scrollbar Collection Color Picker CSS Land Keyframes Color Picker HSL Color Picker CSS Color HSL Picker Hex Color Tool Mozilla CSS Color Picker Tool Table Generators HTML Table Generator Divtable Table Styler Web Toolkit Table Generator Rapid Tables Responsive Table Generator Tool HTML Table Generator Generator Table Styler Table Generator HTML Table Generator Media Query Generators AtMediaQuery Generator Giona Media Query Generator CSS Media Queries SimpleCSS Media Query Generator