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.

Issue %%issue_number%%

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.

This article provides a comparative analysis of Gulp and Grunt, two popular JavaScript task runners, highlighting their features, performance, and use cases to help developers choose the most suitable tool for their projects.

Gulp versus Grunt Gulp O Gulp é um sistema de automação de tarefas que utiliza o conceito de " streaming " para processar arquivos. Ele permite que você crie tarefas de maneira mais simples e flexível, usando código JavaScript. Aqui estão algumas características do Gulp: Simplicidade e Flexibilidade: O Gulp é conhecido por sua sintaxe simples e fácil de entender. As tarefas são definidas usando código JavaScript, o que oferece uma grande flexibilidade para criar pipelines de tarefas personalizados. Execução Rápida: Por utilizar streams, o Gulp tende a ser mais rápido do que o Grunt, especialmente em projetos com muitos arquivos. Comunidade Ativa: O Gulp possui uma comunidade ativa de desenvolvedores e uma vasta gama de plugins disponíveis, permitindo automatizar uma variedade de tarefas no desenvolvimento front-end e back-end. Grunt O Grunt é uma ferramenta de automação de tarefas amplamente utilizada que utiliza configurações baseadas em JSON. Ele foi uma das primeiras ferramentas populares para automação de tarefas no desenvolvimento web. Aqui estão algumas características do Grunt: Configuração Baseada em JSON: As tarefas no Grunt são configuradas usando arquivos JSON, o que pode ser mais familiar para alguns desenvolvedores. Ampla Gama de Plugins: Assim como o Gulp, o Grunt possui uma ampla gama de plugins disponíveis para realizar várias tarefas de automação. Maduro e Estável: O Grunt é uma ferramenta madura e estável, amplamente utilizada em projetos de todos os tamanhos. Comparação Sintaxe: O Gulp usa JavaScript para definir tarefas, enquanto o Grunt usa JSON. Alguns desenvolvedores acham a sintaxe do Gulp mais fácil de entender e escrever, enquanto outros preferem a abordagem baseada em JSON do Grunt. Desempenho: Devido à sua abordagem de streaming, o Gulp tende a ser mais rápido do que o Grunt, especialmente em projetos grandes com muitos arquivos. Flexibilidade: O Gulp oferece uma abordagem mais flexível para definir tarefas e criar pipelines de tarefas personalizados, enquanto o Grunt é mais estruturado e baseado em configurações predefinidas. Em resumo, tanto o Gulp quanto o Grunt são excelentes ferramentas de automação de tarefas, e a escolha entre eles geralmente se resume às preferências pessoais e às necessidades específicas do projeto.

Gulp versus Grunt

This week's edition of Frontend Weekly dives into a variety of topics crucial for web developers and designers. Explore the diverse and creative solutions offered by 99 designs, where global artists showcase their work for businesses and individuals seeking professional design options. Delve into the personal nuances of burnout with an insightful article that redefines our understanding of this common challenge by emphasizing personalized triggers and coping mechanisms. For developers comparing JavaScript task runners, a detailed comparison of Gulp and Grunt is provided to help choose the best tool for your project needs. If you're curious about the Virtual DOM in React, an informative piece explains its role in efficient update management for web applications. Plus, discover post-launch strategies to optimize your website or app, ensuring alignment with business goals for sustained growth. Learn to develop modern emails with React's component-based architecture to harness its full potential. Lastly, get hands-on tips for implementing JSON Web Tokens in Node.js applications to bolster security, and an advanced guide on using react-dropzone with web workers for enhanced file uploads in React. Enhance your frontend skills and knowledge with these expertly curated insights.

In Frontend Weekly, explore 99 designs' creative platform, rethink burnout with a personalized approach, compare Gulp vs. Grunt, and learn about the Virtual DOM's role in React. Discover post-launch optimization strategies, modern email creation with React, and enhance security in Node.js with JWTs. Dive into using react-dropzone with web workers for better file uploads.

This article reviews various free online image editors available, highlighting their features and suitability for different editing tasks.

We delve into the top free online photo editors and explore their features to help you discover the solution for your design needs. Continue reading The Best Free Online Image Editors on SitePoint.

The Best Free Online Image Editors

In this week's edition of Frontend Weekly, we delve into diverse topics designed to enhance your frontend development skills and productivity. Discover how integrating Stylelint into Visual Studio Code can elevate your coding standards by enforcing style consistency and early error detection. Explore the practicality of clean architecture principles in frontend development to improve software quality. Gain proficiency in Bootstrap with a series of 66 engaging stories, and learn about the best free online image editors to suit your creative needs. Also, understand the intricacies of Feature-Sliced Design for building complex, scalable frontend architectures. Learn strategic habits and tools to boost developer productivity, and master the CSS box model to enhance your web development expertise. Additionally, enjoy special sponsored content offering numerous apps in one subscription for just $9.99.

This week in Frontend Weekly: Elevate your code with Stylelint in VS Code, explore clean architecture's practicality, and master Bootstrap with 66 stories. Dive into Feature-Sliced Design, boost productivity with key tips, and understand the CSS box model. Plus, get access to dozens of apps with one subscription for $9.99.

This article discusses practical tips and strategies for optimizing website performance. It covers various aspects such as improving server response time, optimizing CSS and JavaScript, implementing caching and compression techniques, and leveraging content delivery networks (CDNs) for faster delivery of web assets.

Advanced Data Retrieval Techniques for Peak Performance

This week's Frontend Weekly newsletter brings together insightful and practical articles for developers. Discover how to seamlessly install Node.js on Ubuntu with our detailed guide, packed with specific commands and steps for a smooth setup. Dive into the world of Go by exploring how to build a static site generator using the Elem-Go framework, perfect for mastering essential concepts and implementation techniques. Enhance your web applications with a curated list of the best Material UI themes, offering stylish and functional design options. Understand HTTP methods and status codes in depth to boost your knowledge about web development protocols. Follow a personal journey in 'My First Website' that highlights the challenges and achievements of creating a first website, providing guidance to new developers. Learn to build a music player with React's useState hook through a comprehensive tutorial. Explore the common issue of decoding uncommented code and whether it gets easier with experience. Finally, optimize your website's performance with advanced data retrieval techniques, including caching, compression, and CDN strategies.

Discover Node.js setup on Ubuntu, Go site generators, top Material UI themes, and more in this week's Frontend Weekly. Dive into HTTP protocols, personal web dev journeys, React music players, and performance optimization tips to elevate your skills.

How to Bypass the Vercel Tax by Using Open-source Alternatives

In this week's edition of Frontend Weekly, explore compelling insights and strategies that resonate within the world of frontend development. Learn from an inspiring article about how a non-CS graduate secured three front-end engineering offers despite a competitive market. Additionally, delve into Astro, a modern web framework that enables developers to create fast-loading websites by utilizing static HTML regardless of the chosen web technologies, such as React or Vue. Understanding the psychology behind UI design is crucial, as it influences how users perceive and interact with your creations; an in-depth article reveals the importance of elements like color schemes in engaging user experiences. For those looking for creativity, enjoy fresh 'Waiting For Spring' wallpapers designed by artists globally, available for March 2024. Learn practical solutions for making websites responsive on Ultra HD screens and discover open-source alternatives to reduce costs associated with Vercel. This newsletter is packed with insights and innovative solutions for front-end developers.

Discover how a non-CS graduate landed 3 front-end offers, explore Astro for fast web development, and learn UI design psychology. Enhance site responsiveness on Ultra HD screens and find Vercel alternatives in this edition of Frontend Weekly.

Geez, leave it to Patrick Brosset to talk CSS performance in the most approachable and practical way possible. Not that CSS is always what s gunking up the speed, or even the lowest hanging fruit when it comes to improving  The truth about CSS selector performance originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

The truth about CSS selector performance

In this week's edition of Frontend Weekly, we delve into several engaging topics in the realm of frontend development. Patrick Brosset guides us through the nuances of CSS selector performance, breaking it down with a practical approach on CSS-Tricks. For those working with RiotJS, explore an insightful guide on setting up client-side routing with Riot-Route, integrating smoothly into Single Page Applications. As we move into 2024, developers should consider the latest powerful React form builders highlighted by SitePoint, offering key features tailored for efficient web form creation. Junior developers can find inspiration in creating standout portfolios that effectively showcase their coding talents, with strong project ideas shared to enhance their professional profiles. Furthermore, we reflect on the trajectory of Facebook's Create React App (CRA), questioning its current state and future directions. For Angular enthusiasts, testing Signals, the reactive primitives, is crucial for harnessing their potential in improving app performance. To top it off, discover the best web development resources, spanning documentation and learning platforms to coding challenges, ensuring developers have access to essential tools for continual growth. Don't miss this wealth of information meant to elevate your frontend development journey.

In Frontend Weekly: Explore CSS selector performance with Patrick Brosset, set up RiotJS routing, & discover top React form builders for 2024. Get portfolio ideas for junior devs & insights into Create React App's future. Boost skills with top web dev resources.

An analysis of LlamaIndex and LangChain, two frameworks for developing applications powered by large language models, comparing their features and use cases.

In this comparison of LlamaIndex vs LangChain, we ' ll help you understand the capabilities of these two remarkable tools. Continue reading LlamaIndex vs LangChain: Tools for Building LLM-powered Apps on SitePoint.

LlamaIndex vs LangChain: Tools for Building LLM-powered Apps

This week's edition of Frontend Weekly brings a curated list of exciting updates and insightful articles for frontend developers. Highlighted is the React Advanced conference in London, scheduled for October 25-28, 2024, where experts will dive into the latest trends and advanced practices in React development. We feature a comparison between LlamaIndex and LangChain, two frameworks spearheading applications powered by large language models. The newsletter also includes a practical guide on implementing sideway selection in CSS using the ':has()' pseudo-class, as well as tips to avoid common mistakes with the 'useEffect' hook in ReactJS. Additionally, unravel the best practices for handling dynamic routing in Next.js and learn how to dockerize an Angular app to enhance its portability. Furthermore, discover how AI-powered tools are ushering in a new era of task automation and debugging, and get introduced to the fundamentals of Neon Branching for optimized database workflows.

In this Frontend Weekly: Dive into React Advanced London, compare LlamaIndex vs LangChain, master CSS ':has()', optimize 'useEffect' in ReactJS, enhance Next.js dynamic routing, dockerize Angular, and explore AI automation tools and Neon Branching.

A detailed overview of the Progress Design System Kit, which aids developers and designers in creating consistent user interfaces across applications. The article explores the features and benefits of the kit for improving workflow efficiency.

Learn about Telerik ' s Progress Design System, an end-to-end design language for creating simple, intuitive and beautiful experiences. Continue reading 6 Ways the Progress Design System Kit Makes UI Design Fun on SitePoint.

6 Ways the Progress Design System Kit Makes UI Design Fun

This week's Frontend Weekly brings an exciting array of articles and insights for developers and designers. '6 Ways the Progress Design System Kit Makes UI Design Fun' offers a compelling overview of a tool that aids in creating consistent UIs, enhancing workflow efficiency for professionals. Dive into 'How to Perform Data Analysis in Python Using the OpenAI API' to expand your analytical capabilities with practical Python examples. For PHP enthusiasts, 'Laravel vs CodeIgniter: A Comprehensive Comparison' provides an in-depth analysis of these popular frameworks, helping developers choose the right one for their needs. Additionally, 'Introducing Chromatic’s Cypress integration' showcases an enhancement that streamlines component-driven testing. Finally, explore 'What’s New in React 19: Key Features and Enhancements' to stay updated with the latest improvements in this powerful library.

Frontend Weekly highlights top picks: Learn about the Progress Design System Kit, explore OpenAI API with Python for data analysis, and compare Laravel vs CodeIgniter for PHP development. Discover React 19's new features and Chromatic's Cypress integration for smoother testing.

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.