A step-by-step guide on creating a custom plugin for Vite, offering practical insights and techniques tailored for developers looking to enhance their Vite projects efficiently.

Creating A Custom Plugin for Vite: The Easiest Guide

Unlock Frontend Magic: Top Reads & Tools Inside!

This issue of Frontend Weekly brings a wealth of knowledge to both novice and experienced developers. It begins with a comprehensive guide on creating custom plugins for Vite, offering practical insights for efficient Vite project enhancements. For React enthusiasts, there's a detailed walkthrough on building a progressive steps-rendering component, ideal for enhancing web application UIs. Another highlight is the collection of 338 stories, providing deep narratives that explore diverse areas within frontend development. For those interested in AI, there's a high-level overview of large language models, covering core concepts and tools. Additionally, developers and designers can explore the top WordPress themes for 2024, offering insights into features and customization. Gain practical knowledge on web updates from May 2024, unit testing Riot.js components with Vitest, and implementing lazy loading of custom elements to improve page performance.

Explore practical insights on Vite plugins and React components in this week's Frontend Weekly. Discover 338 stories on frontend development, large language model overviews, and top WordPress themes of 2024. Learn about the latest web updates, Riot.js unit testing, and lazy loading techniques.

Issue %%issue_number%%

This article explores the principles of naming tiles and maintaining simplicity in design work, guided by insights from the expert viewpoint of Chris Coyier.

They say  naming things is hard not because picking any ol name is hard, but because picking a useful, long-lasting, meaningful, understandable, deeply communicative name is hard. Screw it up and you can confuse yourself and others unnecessarily. We re in a dev cycle right now on CodePen itself that has me seeing PRs on the []

Chris’ Corner: Naming, Tiles, and Simplicity

"Master CSS & React: Frontend Secrets Uncovered!"

This week's issue of Frontend Weekly covers a wide array of topics for developers and designers alike. Dive into a comprehensive guide on becoming a successful full-stack developer, detailing the key roles, responsibilities, and skills required. Enhance your technical proficiency with practical CSS exercises aimed at preparing you for coding interviews. For those working with React, learn how to implement user authentication using Appwrite, a service that adds valuable functionality to your applications. Gain insights into the shrinking design landscape and explore advanced CSS techniques with Chris Coyier's expert guidance. Additionally, understand the challenges of continuously integrating Ember.js with Jenkins, and explore invaluable personal insights from a seasoned web developer. Whether you're a newbie or an experienced professional, this issue has something to offer. Stay informed and improve your skill set with Frontend Weekly.

Frontend Weekly: Elevate your skills with guides on full-stack dev, CSS interview prep, React user auth with Appwrite, and advanced design insights. Perfect for devs and designers alike!

Explore the top websites offering free Bootstrap templates to enhance web design projects without incurring additional costs.

This is a roundup of the best websites where you can find and download free Bootstrap templates. There are many template creators in the online space. Here is why those mentioned below stand out from the crowd: They offer free Bootstrap 5 templates besides older versions Templates are offered free for both personal and commercial use Items look modern and are presented with the mandatory Live Preview You are not required more than an email address or signup to download As a template maker myself I ' ve browsed thousands of templates. From experience I know that many " free " templates are licensed just for personal use. That means you can ' t use them for client projects which can be quite disappointing. Not the case with the sources below. HTMLrev HTMLrev (free) is a gallery that showcases a wide range of free templates for web developers. The Bootstrap category is the largest and showcases the best work of generous template creators around the world. Find items for business, product, agency, hospitality, services, events, blogs, portfolios, ecommerce, dashboards and more. Features Showcases the best templates created by top makers Bootstrap category is the largest on the website All featured items are Bootstrap 5 Start Bootstrap Start Bootstrap (free + paid) is an established source of premium quality free Bootstrap templates for startup, agency, portfolio, personal and blogs. It even provides feature-rich admin dashboard templates. They ' re built at such high standards that one can even learn web development from them. Features Incredibly well built and varied templates Designs align to the form follows function mantra Doesn ' t require email or signup for download Templatemo Templatemo (free + paid) is a generous and impressive source of free Bootstrap templates. The sheer number of items is mind blowing and the quality is great. It will be hard not to find a solid foundation for your project among the listed items. Besides looking good the templates are also marketing oriented. Features Comprehensive library of templates on many subjects Doesn ' t require email or signup for download 3rd Wave Media 3rd Wave Media (free + paid) is one of the most developer friendly resources in the list. It ' s made by developers for developers and it shows in terms of design efficiency and code structure. Templates are well constructed and results oriented. You will find items for a wide range of subjects. Features Startup, mobile app, ebook, event, personal, portfolio, docs The website is easy to navigate without intrusive ads Doesn ' t require email or signup for download Tooplate Tooplate (free) is a huge library of well designed Bootstrap templates. Designs are modern and well polished. Each template is carefully crafted to look good on all devices. Ads can be intrusive at times but it ' s important to notice that downloads are 100% free without restrictions. Features Big collection of various Bootstrap templates Advanced components specific to premium class items Doesn ' t require email or signup for download Creative Tim Creative Tim (free + paid) is one of the most loved Bootstrap resource suppliers among web developers. The free Bootstrap UI kits &amp; dashboard templates are on par with their premium items. They are just as well designed and smoothly polished. Since these templates are used to build web apps the documentation quality is in a league of its own. Features Designs are superb and consistent Components with advanced functionalities Themesberg Themesberg (free + paid) provides a couple of high quality free Bootstrap templates. You can get dashboards, landing pages, design systems and UI kits. Design quality and refinement levels are in a league of their own. Besides looking amazing the items are well structured and documented. Features Great dashboard templates and UI kit Advanced components for complex functionalities TemplateDeck TemplateDeck (free) is a great resource offering very few but very high quality Bootstrap templates. The right words to describe them would be minimalist, creative and impressive. The company, personal and startup website templates are crafted to the highest design and code standards. Features Presentation website is nice and easy to navigate Templates are both professionally designed and coded Pixel Rocket Pixel Rocket (free) provides a small but useful collection of free Bootstrap templates. Designs look amazing with modern color schemes. Each item comes with many basic and advanced sections and components. Use cases covered are ecommerce, dashboard, portfolio and business websites. Features Small collection of high quality Bootstrap templates Doesn ' t require email or signup for download HTML Codex HTML Codex (free + paid) provides a large number of free templates. All templates are Bootstrap based, look good and can be downloaded without any restrictions. There is huge variation which covers multiple use cases. Business, course, product, agency, service, portfolio, resume and the list goes on. Features Results oriented designs covering a wide range of use cases Doesn ' t require email or signup for download Subtle scroll based animations W3Layouts W3Layouts (free + paid) provides many free Bootstrap templates. Basically all templates on their website are available for free. Check the Free Download button just below the Demo one. Designs are modern and usable for a wide range of subjects. Business style templates seems to be their specialty. Features Good number of business style templates Covers a wide range of use cases Bootstrapious Bootstrapious (free) is a useful resource for free Bootstrap templates. Ads are present everywhere but not extremely intrusive. You need to provide your email to download but on the upside there is a large selection to choose from. Designs look good and some items pack advanced components. Features Large number of free items on various subjects Some of the designs are exceptionally good AdminMart AdminMart (free + paid) doesn ' t provide many free Bootstrap templates. But what it lacks in numbers it more than makes up in quality and complexity. The free items are professionally designed and come with tons of ready-made sections and components. Definitely worth checking out. Features SaaS, agency and dashboard templates Items usable for professional projects TemplatesJungle TemplatesJungle (free + paid) is a generous resource providing many Bootstrap templates for free download. Designs are awesome, marketing oriented and cover multiple use cases. Business, agency, service, portfolio, ecommerce. You will find a template for just about any subject you can imagine. Features Huge number of well designed templates to choose from Designs are impressive and will make your project stand out MonsterOne MonsterOne (free + paid) is the subscription based template library by Template Monster. If you register for a Free account you get access to free items without paying the subscription. They are of high quality and come with multiple pages, sections and components. Will save you a lot of design and development time. Features Modern templates with multiple pages Well structured website with many filters Item quality varies because of multiple makers Untree Untree (free) creates free Bootstrap templates that save developers time and money. They are beautifully designed, with great attention to details. Templates come with multiple pages and advanced components like dropdown navigation, sliders and subtle animations. Even though they ' re built on Bootstrap they still have a lot of character. Features Designs have personality and don ' t look repetitive Doesn ' t require email or signup for download Tabler Tabler (free) is an amazing Bootstrap UI kit providing multiple dashboard templates and components for web apps. It ' s quite incredible that a package so big and well polished is available for free. Designs are great, documentation is thorough, code is very well structured. This resource is a gem. Features Bootstrap templates focused on dashboards Top of the range design and code quality Many premium level, advanced components Wrappixel Wrappixel (free + paid) provides a good sized collection of free Bootstrap templates for admin dashboards. There are plenty of options when it comes to design and structure. You can choose between corporate style for business use cases or choose a creative versions for more fun websites. Features Solid collection of Bootstrap dashboards Different designs and color schemes KeenThemes KeenThemes (free + paid) is a reliable supplier of well designed free Bootstrap templates for admin dashboards. Each free template comes with multiple time saving components wrapped up in modern designs. There are different styles to choose from adapting to many possible scenarios. Features Niched on web app admin dashboards Clean website without ads or other annoyances BootstrapDash BootstrapDash (free + paid) provides a useful selection for free Bootstrap website and dashboard templates. The packages are generous in terms of different pages and components. Designs are consistent, modern and optimized for results. The website is free of ads and a pleasure to navigate since the authors monetize with Pro items. Features Great templates for website, landing page and dashboard Presentation website is modern and easy to navigate There are a couple more template websites especially if you check Google search results pages. I didn ' t mention those because they fit in one or more of the situations below: Claim they offer free templates but they are actually paid They are specific to visual builders and not downloadable Old websites offering only Bootstrap 4 templates and lower The license doesn ' t allow commercial or client use To assemble this roundup I ' ve went through each website on relevant Google search pages including blog posts. I ' ve searched through comments of similar roundup posts on Dev. To. I ' ve scoured Gumroad Discovery for $0 priced items. Checked Dribbble and GitHub. Hope it will save your time and help you build projects easier.

Best Websites to Find Free Bootstrap Templates

Frontend Magic: Bootstrap, Angular & More! ✨

This week's edition of Frontend Weekly brings valuable insights and resources for frontend development enthusiasts. Discover the best websites to find free Bootstrap templates, aiding your web design projects without extra costs. Gain a glimpse into the 'Success at Scale' book, offering strategies to scale your business effectively just before its pre-sale offer concludes. Dive into a detailed comparison of frontend vs backend developers, outlining their distinct roles and skill sets vital for web development. Explore the challenges of mobile accessibility for assistive technology users and learn ways to enhance inclusivity. Delve into the interactions of throttling and debouncing in asynchronous programming to optimize code execution. Understand how to design robust digital products for unpredictable user needs with an article focused on adaptability. Learn unit testing in Angular 16 with a comprehensive guide for ensuring application robustness. Finally, the article on voice content explores its potential to revolutionize usability through intuitive and accessible user experiences.

This issue of Frontend Weekly features free Bootstrap templates, scaling strategies from 'Success at Scale,' frontend vs backend roles, mobile accessibility challenges, and more insights for developers.

This article provides a comparative analysis of Node.js and .NET Core, focusing on their performance, scalability, and suitability for different types of projects.

This article provides you with a comprehensive comparison of. NET and Node, based on factors such as performance, scalability, and security. Continue reading Node. Js vs. NET Core: What to Choose in 2023? On SitePoint.

Node.js vs .NET Core: What to Choose in 2023?

Frontend Trends: React Flexibility & JS vs Python

This week's Frontend Weekly dives into several key topics for developers. Discover how headless components are transforming React applications, allowing for increased flexibility and better usability. If you're deciding between Node.js and .NET Core in 2023, our comparative article highlights which might be the best fit for your project's needs based on performance and scalability. Learn to scale your React apps efficiently using Storybook and Chromatic, and explore how these tools can optimize component library management. Additionally, we explore the ideal design for a privacy icon, ensuring user trust and understanding. Get insights from a fascinating five-second testing case study that underscores the importance of first impressions in design. Lastly, catch up on the latest WordPress 6.3 pattern system upgrades, enhancing dynamic and reusable design elements for improved workflow and consistency.

This week in Frontend Weekly: Unlock new flexibility in React with headless components, decide between Node.js or .NET Core in 2023, and learn to scale React apps with Storybook and Chromatic. Plus, explore creating the perfect privacy icon and discover updates in WordPress 6.3.

This article provides a step-by-step guide to implementing simple pagination using HTML, CSS, and JavaScript, offering practical coding examples and tips for developers.

Learn how easy it is to create a simple, accessible pagination script that breaks up large amounts of content into more digestible chunks. Continue reading How to Implement Pagination with HTML, CSS and JavaScript on SitePoint.

How to Implement Pagination with HTML, CSS and JavaScript

Unlock Frontend Magic: JS Tips, CSS Tricks & More!

This week's edition of Frontend Weekly is packed with insightful articles and practical guides for developers. Dive into the intricacies of pagination with a hands-on approach using HTML, CSS, and JavaScript. Enhance your JavaScript code's clarity with our essential tips focusing on modern best practices. Gain a deeper understanding of closures and their role in code efficiency and privacy. Discover the transformative potential of CSS filters and blending for creative web design solutions. Learn how to create engaging web experiences through interactive SVG animations. For those interested in SaaS development, explore a comprehensive overview of boilerplates to streamline your projects. Additionally, the newsletter delves into the basics and impacts of artificial intelligence and provides guidance on building a chat interface using Gradio and Vultr Cloud GPU.

This week's Frontend Weekly highlights practical guides on implementing pagination, enhancing JavaScript code, understanding closures, and using CSS creatively. Explore SVG animations, SaaS boilerplates, AI insights, and building chat interfaces with Gradio & Vultr Cloud GPU.

Discover the latest updates and enhancements in web technologies unveiled at the I/O 2024, including advancements in developer tools, performance improvements, and new capabilities for building web applications.

What ' s new in Baseline this year, and about the new tools to help you make better use of Baseline.

What's new in the web

"Frontend Fun: Animations, Testing & Dynamic Themes!"

This week's edition of Frontend Weekly brings you a range of insightful articles and tutorials geared towards the modern web developer. Discover how Angular animations can enhance route transitions, providing users with a smoother and more interactive navigation experience. Dive into testing methodologies in Storybook to improve UI component reliability. Stay updated with the latest advancements in web technologies revealed at I/O 2024, including new tools and performance enhancements for web app development. We also explore why Angular or Vue could be a better choice over React for starting new web applications, emphasizing factors like complexity and community support. Additionally, learn to style your site with a dynamic theme switcher using Next.js and MUI, and enhance your coding prowess with a comprehensive guide to HTML essentials. For those interested in creative projects, we feature a collection of free branding identity templates for InDesign.

Frontend Weekly highlights: Angular animations for smoother routes, Storybook testing best practices, I/O 2024 web tech updates, Angular/Vue vs. React insights, and styling with Next.js & MUI.

This article highlights five common mistakes that beginner developers often make when starting with the React JavaScript library. It provides practical guidance on how to avoid these mistakes, offering valuable insights for those looking to improve their React development skills.

5 Mistakes I Made When Starting My First React Project

Uncover 7 Key Web Dev Concepts & React Tips!

This week's issue of Frontend Weekly features a range of insightful articles and guides for web developers. Delve into '7 Concepts Every Web Developer Should Know!' to enhance your development prowess and adaptability. Beginners can learn from '5 Mistakes I Made When Starting My First React Project', providing essential advice to refine React skills. Discover how to 'Create a Chatbot Trained on Your Own Data via the OpenAI API', a practical guide for those interested in chatbot development. Expand your JavaScript expertise with 'JavaScript: Reverse Arrays', covering multiple methods to reverse arrays effectively. Additionally, learn about team efficiency with 'Roles and Responsibilities Matrix', and explore new technology with 'An Introduction to the Bun JavaScript Runtime'. Finally, catch up on .NET technologies with '.NET Blazor Overview and Upcoming .NET 8 Changes', offering an insight into building interactive web applications with C# and .NET.

Frontend Weekly: Boost your skills with key web dev concepts, React project tips, and JavaScript insights. Explore chatbot building with OpenAI API and discover new tech like the Bun JavaScript Runtime and .NET Blazor enhancements.

This article explores different layout options in the Astro framework, providing insights into creating responsive and accessible designs.

Layouts in Astro

"Level Up Your Frontend Skills This Week!"

In this week's edition of Frontend Weekly, we kick off with an insightful podcast episode featuring Ethan Marcotte, where he delves into the concept of a tech union. For those looking to modernize their React applications, a beginner's guide to the MVVM architectural pattern outlines its benefits and provides practical examples. Developers working with TypeScript can deepen their understanding of data types with our article on the differences between 'any' and 'unknown', ensuring better handling of uncertain data. JavaScript enthusiasts will appreciate our exploration of promises, shedding light on managing asynchronous tasks effectively. Astro framework users can discover various layout options for creating responsive and accessible designs. We also address the usability issues of the 2-page login pattern, offering innovative solutions to enhance user experience. Beginners interested in optimizing web performance can benefit from our guides on using HTML and CSS. Lastly, learn how the WordPress Playground makes setting up a development environment quick and easy, perfect for developers and testers alike.

This week in Frontend Weekly: Explore tech unions with Ethan Marcotte, learn MVVM in React, and delve into TypeScript's 'any' vs 'unknown'. Optimize JavaScript with promises, and discover Astro layouts. Plus, fix the 2-page login pattern and instantly set up WordPress with Playground.

Comprehensive guide covering the key features and updates in Next.js version 14 for developers.

Hey there! Did you miss this year ' s Next. Js Keynote or want to get a summary of what you ' ve heard? No worries, I got you covered. Next. Js is a Framework built on React and they are determined to bring the power of full-stack to the frontend. They ' ve been extremely innovative and have been chosen by Notion, Twitch, DoorDash and TikTok just to mention a few. Next. Js 13 introduced the app/ directory, next/font and next/image as well as many other things. This year we have been gifted again and to be honest, there ' s never been a better time to be a Frontend developer. Next. Js is (almost) " Turbocharged " With Next. Js 13, Vercel introduced the alpha version of Turbopack. Turbopack is an incremental bundler optimized for JavaScript and TypeScript, written in Rust. After merging the knowledge of Vercel and a few ex-Webpack engineers, a new contender arose on the horizon of bundlers. Vercel is heavily invested in creating a better experience for developers and as a result, Turbopack is closer to stable than ever before. They are passing +5000 tests of next dev. According to the Framework giant, they witnessed a 53% faster local server startup and almost a 95% faster code update using next dev --turbo. The best part is; that the larger your project, the bigger improvements you ' ll run into. Once Turbopack passes all the required tests, it will be tagged as stable. You can follow the process here: https: //areweturboyet. Com/. Server Actions is now stable There is no need to create API Routes manually or write event handlers. With Server Actions, you can define functions that run on the server but can be called directly from a component. For example, a simple create function can be done in a single file: export default function Page () { async function create (formData: FormData) { ' use server ' ; // the use server directive is a must const id = await createItem (formData); } return (&lt; form action = { create } &gt; &lt; input type = " text " name = " name " /&gt; &lt; button type = " submit " &gt; Submit &lt; /button &gt; &lt; /form &gt;); } With Typescript, using server actions will give you an end-to-end type safety between the client and server. Also, you will get a ton of built-in functions when using the App router. You can redirect through routes with redirect() and read/set cookies with cookies() etc. This is proof that Vercel ' s goal is clearly to provide the easiest access to all the full-stack opportunities on the front end. Isn ' t this cool? Metadata changes Metadata is just " data about the data " , it may sound simple, but metadata plays a huge role in SEO and accessibility. To ensure a smooth user experience, Next. Js will remove viewport, colorScheme and themeColor from metadata. They wouldn ' t let us empty-handed, so from Next. Js 14 you can customize the initial viewport of the page using the viewport object or the generateViewport function. Note: both options are only supported in Server Components and only one of them can be exported from the same route. // How to use the Static Viewport object in your layout. Tsx / page. Tsx import { Viewport } from ' next ' export const viewport: Viewport = { themeColor: ' black ' , } export default function Page () {} /* How to use the Dynamic generateViewport function in your layout. Tsx / page. Tsx */ export function generateViewport ({ params }) { return { themeColor: ' . . . ' , } } Next. Js teaches Next. Js Probably the biggest blessing to us WebDevs, is that now we can learn directly from the creators of Next. Js. The course is entirely free of charge, and I ' m not surprised by the exceptional comprehensiveness and depth of the curriculum they ' ve assembled. A few things you can and will learn at Next Learn: App Router Styling Setting up your Database Fetching data with Server Components Adding search and pagination Accessibility Authentication and more! Well, that is it for this year ' s Next. Js conf. If you would like to dig deeper into the things I mentioned, I recommend you check out the official release note or watch back the keynote. Call to action Hi, I am Gergo, but everybody calls me StariGeri — I am a Frontend Developer Intern as well as a Computer Science student and I am sharing many things around these topics. If any of this sounds interesting to you subscribe to my newsletter, so you won ' t miss anything in the future. Also if you have some thoughts you’d like to share, a topic suggestion or you found a mistake, do not hesitate to reach out to me via LinkedIn or Instagram.

Next.js 14: All you need to know

"Unlock CSS Grid & Next.js 14 Secrets! 🚀"

This week's Frontend Weekly dives into essential topics for web developers, featuring a comprehensive technical guide on utilizing the File System in Node.js for efficient file handling. We explore CSS with an in-depth examination of CSS Selectors and the powerful CSS Grid for creating complex layouts. Discover how integrating MongoDB with Node.js can enhance your applications, and learn how CSS Custom Properties can optimize your styling efficiency. Additionally, delve into Next.js 14, with a detailed guide on its key features and updates. Finally, uncover how artificial intelligence is influencing frontend development, potentially transforming the way developers work.

Frontend Weekly covers Node.js File System usage, CSS insights, MongoDB integration, and Next.js 14 updates. Explore AI's rising influence in frontend development.

Explore how psychological principles influence user experience design, enhancing engagement and interaction through strategic user interface decisions.

Explore the relationship between psychology and UX design, including the impact of psychological principles on shaping user behavior. Continue reading Psychology and UX: Decoding the Science Behind User Clicks on SitePoint.

Psychology and UX: Decoding the Science Behind User Clicks

Unlock Frontend Secrets: UX, Angular & React Tips!

This week's issue of Frontend Weekly delivers a thoughtfully curated selection of articles and insights pivotal for frontend developers. Discover the development process behind a reply generation app using Angular, showcasing project implementation and standout features. Dive into valuable strategies for conducting UX research even without direct user access, ensuring insightful outcomes for product development. Navigate SQL Server efficiently with an in-depth guide on SQLCMD, complementing your database management skills. Learn how to bolster your DNS against DDoS attacks, crafting a strong digital fortress with strategic security methods. Additionally, understand how to integrate PDFs in Next.js using the React PDF Viewer, and explore the essence of effective dashboards and the psychological principles that can transform UX design. For React developers, gain insights into state management through the useReducer hook in functional components, improving your frontend project efficiency.

In this issue: Discover Angular's reply generation app, UX research strategies without direct user access, and enhance DNS security against DDoS attacks. Tackle database management with SQLCMD, learn Next.js PDF integration, and explore the useReducer hook in React. Plus, dive into dashboard and UX design fundamentals.

I'm creating this article for a newsletter, give me a 2 sentence summary of the article.  Make it factual and professional.  Do not mention the article title or source, just the summary of the article.

The best articles, links and news related to Frontend Development delivered once a week to your inbox.