-
Notifications
You must be signed in to change notification settings - Fork 30
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
1e657a0
commit 7aa4b36
Showing
1 changed file
with
103 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,103 @@ | ||
| --- | ||
| tags: | ||
| - frontend | ||
| - market-report | ||
| title: Frontend Report October 2024 | ||
| short_title: October 2024 | ||
| description: This month’s newsletter highlights React’s new compiler beta, key updates from Next.js Conf 2024, and industry shifts toward full-stack roles and modern CSS. AI-driven tools like GitHub Copilot and Project IDX are further advancing development workflows. | ||
| date: 2024-10-05 | ||
| authors: | ||
| - mashiro5951 | ||
| --- | ||
|
|
||
| This month’s newsletter highlights key advancements in web development, including React’s new compiler beta and top updates from Next.js Conf 2024, featuring optimizations like Edge Functions and React Server Components. Industry trends show a shift toward full-stack roles, modern CSS standards, and rising demand for engineering talent. AI-driven tools like GitHub Copilot and Project IDX continue advancing development workflows. | ||
|
|
||
| ## React | ||
|
|
||
| ### [React Compiler Beta Release](https://react.dev/blog/2024/10/21/react-compiler-beta-release) | ||
|
|
||
| React’s new compiler, in beta, introduces optimizations that minimize re-renders and improve code-splitting, enhancing performance, especially for larger applications. | ||
|
|
||
| ### [The Interactive Guide to Rendering in React](https://ui.dev/why-react-renders) | ||
|
|
||
| Discover why React components render, what triggers re-renders, and how to optimize them for better app performance. Perfect for new developers looking to understand React’s rendering process. | ||
|
|
||
| ### Quick Links | ||
|
|
||
| - [React Folder Structure in 5 Steps](https://www.robinwieruch.de/react-folder-structure/) | ||
| - [React Native Storybook 8](https://storybook.js.org/blog/react-native-storybook-8/) | ||
| - [Conditional React hooks pattern](https://robinmalfait.com/blog/conditional-react-hooks-pattern) | ||
| - [Tailwind CSS Group Modifier to Prevent React Rerenders](https://www.nico.fyi/blog/tailwind-css-group-modifier-to-prevent-react-rerender) | ||
|
|
||
| ## Next.js | ||
|
|
||
| ### [Key Highlights from Next.js Conf 2024: What You Missed](https://vercel.com/blog/recap-next-js-conf-2024) | ||
|
|
||
| Get the highlights from Next.js Conf 2024, featuring exciting updates on React Server Components, Edge Functions, and the new Next.js features that are shaping modern web development. | ||
|
|
||
| ### Quick Links | ||
|
|
||
| - [Server Side State management in NextJS: a deep dive into React Cache](https://www.yoseph.tech/posts/nextjs/server-side-state-management-in-nextjs-a-deep-dive-into-react-cache) | ||
| - [How to Build and Deploy a Headless WordPress with Next.js](https://scientyficworld.org/how-to-deploy-headless-wordpress-with-next-js/) | ||
| - [Managing Advanced Search Param Filtering in the Next.js App Router](https://aurorascharff.no/posts/managing-advanced-search-param-filtering-next-app-router/) | ||
|
|
||
| ## Others | ||
|
|
||
| ### [State of Frontend 2024 - The Rise of Full-stack development](https://tsh.io/state-of-frontend/) | ||
|
|
||
| Full-stack developers now outnumber senior frontend roles, with performance as a top challenge prompting simpler applications. Nearly 69% of companies plan to integrate AI for developer support, and remote work remains popular. | ||
|
|
||
| ### [State of CSS 2024 - Embracing 'New CSS' with Advanced Features and Enhanced Browser Support](https://2024.stateofcss.com/en-US/) | ||
|
|
||
| The report highlights a pivotal shift from traditional CSS practices to "New CSS," characterized by the adoption of advanced features like sub-grid, variables, and container queries. | ||
|
|
||
| ### [State of Engineering Market 2024 - The growth resumes](https://newsletter.pragmaticengineer.com/p/state-of-eng-market-2024?utm_source=substack&utm_medium=email) | ||
|
|
||
| The report highlights resilient demand for software engineers, with growth in remote work and a broadening search for talent beyond traditional tech hubs. Key areas include AI, machine learning, and cybersecurity. | ||
|
|
||
| ### Quick Links | ||
|
|
||
| - [The New Architecture in React Native](https://reactnative.dev/blog/2024/10/23/the-new-architecture-is-here) | ||
| - [Content-Aware Components Using CSS :has(), Grid, and Quantity Queries](https://piccalil.li/blog/making-content-aware-components-using-css-has-grid-and-quantity-queries/) | ||
| - [Unleash the Power of Scroll-Driven Animations](https://css-tricks.com/unleash-the-power-of-scroll-driven-animations/) | ||
| - [The most effective ways to improve Core Web Vitals](https://web.dev/articles/top-cwv) | ||
| - [How We Shrunk Our Git Repo Size by 94%](https://www.jonathancreamer.com/how-we-shrunk-our-git-repo-size-by-94-percent/) | ||
| - [Fixing your website's JavaScript performance](https://developer.mozilla.org/en-US/blog/fix-javascript-performance/) | ||
|
|
||
| ## Trending | ||
|
|
||
| ### [Enhance Your Code Reviews with GitHub Copilot Workspace (Public Preview)](https://github.blog/changelog/2024-10-29-refine-and-validate-code-review-suggestions-with-copilot-workspace-public-preview/) | ||
|
|
||
| GitHub Copilot Workspace now offers tools to refine and validate code review suggestions, enabling a smoother and more efficient review process with AI-driven insights. | ||
|
|
||
| ### [How Vercel adopted microfrontends](https://vercel.com/blog/how-vercel-adopted-microfrontends) | ||
|
|
||
| Learn how Vercel cut build times and improved developer velocity while maintaining a smooth user experience with microfrontends. | ||
|
|
||
| ## New Tools | ||
|
|
||
| ### [TanStack Start - Full-stack React framework](https://tanstack.com/start/latest) | ||
|
|
||
| Full-document SSR, Streaming, Server Functions, bundling and more, powered by TanStack Router, Vinxi, and Vite. | ||
|
|
||
| ### [Project IDX - Building apps in the cloud](https://idx.google.com/) | ||
|
|
||
| Project IDX simplifies the process of setting up and managing a monolithic tech stack, integrating services from database to authentication. It aims to streamline the deployment and maintenance of cohesive, scalable applications. | ||
|
|
||
| ### [OneStack - When creating websites and apps is too complex](https://onestack.dev/) | ||
|
|
||
| One is a new React framework for web and native, built on Vite. It simplifies things with universal, [typed routing](https://onestack.dev/docs/routing) seamlessly across static, server, and client pages | ||
|
|
||
| ### Quick Links | ||
|
|
||
| - [Motion Canvas - A TypeScript library for creating animated videos using the Canvas API](https://motioncanvas.io/) | ||
| - [Deno 2: New Features and Enhancements](https://deno.com/blog/v2.0) | ||
| - [Nuqs: Lightweight Data Fetching for React](https://nuqs.47ng.com/) | ||
|
|
||
| ## Commentary | ||
|
|
||
| - [Why I Switched from Svelte to React: A Developer’s Perspective](https://www.reddit.com/r/sveltejs/comments/1gbwi0b/i_moved_from_svelte_to_react/) | ||
| - [A Reddit discussion on React Query alternatives](https://reddit.com/r/reactjs/comments/1ghxz99/if_youre_not_using_react_query_in_large/) | ||
| - [The WordPress, WP Engine and ACF Drama](https://dev.to/matfrana/the-wordpress-wp-engine-and-acf-drama-5h88) | ||
| - [Using AI Generated Code Will Make You a Bad Programmer](https://slopwatch.com/posts/bad-programmer/) | ||
| - [Measuring Developer Productivity: Real-World Examples](https://newsletter.pragmaticengineer.com/p/measuring-developer-productivity-bae) |