Top Front-end news this weekWelcome to the first issue of We Got Your Front! Content handpicked and summarized by our own team of front-end developers to help you get the best and most essential front-end news right in your inbox. |
1. How Gorillas's GraphQL API was leaking data from 10000 customersGerman on-demand online grocery delivery company Gorillas took the industry by storm in 2020, guaranteeing delivery in under 10 minutes and gaining massive popularity throughout the pandemic. Just a year later, they reached Unicorn status. They developed fast and overlooked security. A report showed that JavaScript loaded in the login page, disclosed the GraphQL endpoint. Any authenticated user (or anybody who signed up to Gorillas) has access to all the data. 1,000,000 orders, the associated 200,000 customers, and information about the employees related to these orders were leaked. |
2. Lazy Loading in images with React JS 😴 - DEV Community 👩💻👨💻Lazy loading is an image optimization strategy that can improve a website’s performance, especially on mobile. It works by delaying the loading of files, such as images, until a user needs them according to their behaviour and navigation. Projects can be created with: React JS (v 18), Vite JS, TypeScript, CSS vanilla. With some browsers you can implement lazy loading just by attaching the loading attribute with the value of lazy to your img or frame tag in HTML. For other browsers, an external package, such as this one can be installed and implemented to React applications. Read the article to learn how to implement a lazy loading technique. |
3. Clean Code — A practical approach by Mikel OrsThere’s a lot out there about clean code. This article summarizes the most important things you need to know, with no deep diving. Clean code is important for operational efficiency. It’s easy for any developer to read or modify, is written by someone who cares about it and holds no surprises and ultimately: minimizes the human effort needed to create and maintain the required system. Mikel Ors brings together the basic principles of how to write clean code, aswell as easy steps to refactoring to clean code in this easy to read article. |
4. Introducing Turbopack: Rust-based successor to Webpack – VercelVercel introduce Turbopack: Rust-based successor to Webpack Webpack has been downloaded over 3 billion times. However Vercel are as focused as ever on speeding up Next.js On 25th October 2022 Vercel launched Webpack’s successor: Turbopack Turbopack is built on Turbo, an open source framework for Rust and its architecture focuses on using caches to never do the same work twice, making it 700x faster than Webpack in a large application with 3,000 modules. Turbopack will be used or the Next.js 13 Webpack and users can expect an incremental migration path into the Rust-based future with Turbopack. Learn more about Turbopack and Next.js 13. |
5. React Just Got Even More Awesome 👩💻👨💻Finally! A native way to handle async functionality in React. Move over useEffect, now we can fetch our data by simply creating an axios fetch request and wrap it in a use hook. The use hook is only meant to handle async behaviour, not caching or any other advanced features - so, not a replacement for react-query. It also appears to support conditional execution. This means that we can conditionally fetch data based on some condition. Read the article for a use hook example |