Hi everyone!
New: LinkedIn page + Twitter community: feel free to join/follow to give me an initial boost 😉. I intend to share more informal content there, not always suitable for this newsletter.
React 18: new RC + blog post were just published 😅 too late for me for this week, I have to send the issue.
This week I found the React vs Solid article really interesting. The one on do-notation too (but requires some FP knowledge).
Nice video intro to Remotion in a 10 minutes video.
A new Vitest feature allows you to co-locate a test with its source code in the same file. It's not going to please everyone 😏 but I love it 😍.
Issues of the React repo (among others) were spammed by pro-Russia supporters who didn't appreciate the Ukraine support banner on the website.
🙏 Support the newsletter:
If you like this newsletter, subscribe in priority there:
React
Solid.js feels like what I always wanted React to be
Explains why Solid is simpler than React. Solid is reactive and directly updates the DOM (without virtual DOM). The render function is only called once, even if the state changes, and there are no stale closure issues. A good article to discover the differences between these 2 frameworks and discover Solid.
I find Solid really interesting. In the short term it can be a very good alternative to React for web apps. However, I am waiting to see the practical use of the innovations of React 18 because I think that the virtual DOM is interesting for the highly anticipated concurrent features.
Headless components in React and why I stopped using a UI library for our design system
Nir tells his story: from using React-Bootstrap and MUI to implementing an autocomplete from scratch, to ending up using a headless lib that encapsulates behavior and accessibility. A good intro to understand the interest of headless libs, which also lists the popular libs of the ecosystem.
Screaming Architecture: Evolution of a React folder structure and why to group by features right away
Johannes shows us how he gradually refactors his file-system structure to keep his app maintainable over time. An interesting line of thought. I don't think there is a one-size-fits-all solution that works for everyone. Personally I like fractal trees, and I would love for IDEs to offer a way to tag files.
What's New at GatsbyConf 2022
Gatsby now offers an Image CDN that reduces build times and optimizes loading (Note: Netlify offers an equivalent). Other notable improvements announced: incremental deploys, full TypeScript support, GitHub Enterprise, trailing slash...
Hooks: React's do-notation
For FP lovers. Devansh explains that you can convert each hook to a render-prop, but not the other way around. Hooks are just syntactic sugar to avoid the "callback hell". It is related to Haskell monads and the do notation. Show various interesting experiments like implementing conditional rendering, or using generator functions for hooks.
Extras:
React Bricks: CMS with visual editing for Next.js, Gatsby and Remix, based on React components
Content creators don't like the grey forms of a headless CMS.
Visual tools like Wix or Webflow are either not flexible, complex to use or too flexible: a content creator should not decide on a margin, right?
React Bricks has the best of the 2 worlds: all the advantages of a Headless CMS and best in class Visual editing experience with no way to break the design system.
You create visually editable content blocks as React components using the react-bricks library. Content creators use these blocks to compose content with all the freedom they want and no more than they need.
Learn it in about 2 hours with the Step-by-step tutorial or the full Documentation.
Create your free account and start building now
React-Native
Expo: EAS Update Preview Progress
Expo shares its progress on EAS Update, the new Over-The-Air update system currently in preview. It is possible to associate a release channel with a Git branch and do continuous delivery. They also improved performance, security, and are working on a web UI to make it easier to use.
React Native + Github Action = ❤️
Offers a complete workflow to automate the build of React-Native apps. The build is triggered when a new GitHub release is created. There is a bit of work, but it shows that Fastlane may not be so essential anymore.
Extras:
Partners
- Start React Native: learn everything about gestures and animations with William Candillon
- React-Native Weekly: stay up-to-date React-Native core updates
- TypeScript Weekly: the best TypeScript links every week, right in your inbox.
- ES.next News: learn about the latest in JavaScript and cross-platform tools
- Tailwind Weekly: all things Tailwind CSS, new issue every Saturday
- G2i: pre-vetted remote React & React-Native developers you can trust on contract or full-time basis
- Infinite Red: US React-Native experts making your idea a reality
- Software Mansion: the co-creators of React Native and the technological core of many tech companies
Other
Socket: Secure your JavaScript supply chain
New tool to detect supply-chain security vulnerabilities: compromised npm libs you use in your apps.
Offers a different and pro-active approach: rather than looking for known vulnerabilities, assumes that any npm package may be compromised and looks for indicators based on the history of packages that have already been compromised. A tool to adopt quickly, given the number of attacks of this type is increasing sharply. Read also:
Interop 2022: browsers working together to improve the web for developers
The teams of the main browsers will work together in 2022 to improve compatibility on 15 areas of focus which are particularly painful for developers today. There's even a dashboard with a compatibility score for each browser. We find among others the cascade layers, color functions, viewport units, scroll, subgrid...
Extras:
