DEV Community

Marco Biedermann
Marco Biedermann

Posted on

Weekly Digest 25/2022

Welcome to my Weekly Digest #25.

This weekly digest contains a lot of interesting and inspiring articles, videos, tweets, podcasts, and designs I consumed during this week.


Interesting articles to read

Different Ways to Write CSS in React

We’re all familiar with the standard way of linking up a stylesheet to the head of an HTML doc, right? That’s just one of several ways we’re able to write CSS. But what does it look like to style things in a single-page application?

Different Ways to Write CSS in React | CSS-Tricks

How to add a theme switcher to Storybook

Learn to control how a story renders by wiring it to a decorator and toolbar items

How to add a theme switcher to Storybook


Some great videos I watched this week

ReactJS useId Hook

React 18 brings a lot of exciting features but one of the less celebrated but still extremely useful addition is the new useId hook and that’s exactly what we will cover in this complete tutorial

by Basarat

New in Chrome 103: HTTP 103 early hints, Local Font Access, AbortSignal.timeout, and more!

Chrome 103 is rolling out now! There’s a new HTTP status code that helps the browser decide what content to preload before the page has even started to arrive. The Local Font Access API gives web applications the ability to enumerate and use fonts installed on the user’s computer. There’s an easier way to implement timeouts on asynchronous APIs.

by Google Chrome Developers

The Power of JS Generators

Generators have been around in JavaScript since ES2015, yet remain largely ignored by many JS devs, who don’t see why or how they’d use them in their day-to-day work.

by Anjana Vakil

Every Beginner React Developer Makes This Mistake With State

By far one of the biggest beginner React mistakes I see is developers storing derived state. This is a huge problem that is incredibly hard to detect unless you know what you are looking for.

by Web Dev Simplified


Useful GitHub repositories

Data Structure & Algorithms 101 with doodles

I am trying to describe complex matters in simple doodles!

GitHub logo girliemac / a-picture-is-worth-a-1000-words

I am trying to describe complex matters in simple doodles!

header image

Doodles-as-A-Service Repo

CC BY-SA 4.0

👋 Aloha, this is where you can grab most of my tech doodles and sketchnotes.

I have been posting my tech doodles on Twitter and Microsoft open-source projects and I am repeatedly asked where to get the original images, especially from people who saw some of my works out of context on some social media, so I decided to put all together on one GitHub repo.

Here are some of the latest giditally created handdrawn doodles, as well as photos of analog ones.

All my doodles are under Creative Commons license. So please share with attributions. And I definitely don't want you to NFT them without my permission (and I won't permit you because you don't own them. They are open-sourced to be freely available for educational purpose only!)

Enjoy 🌺


Algorithms

/algorithms

└── 📁algorithms
    ├── 📁png
    │   ├── 📄algorithm101_file.png
    │   └── 📄
    └── 📁tiff
        ├── 📄algorithm101_file.tiff
        └──

Dolt

Dolt – It's Git for Data

GitHub logo dolthub / dolt

Dolt – It's Git for Data

Dolt is Git for Data!

Dolt is a SQL database that you can fork, clone, branch, merge, push and pull just like a git repository. Connect to Dolt just like any MySQL database to run queries or update the data using SQL commands. Use the command line interface to import CSV files, commit your changes, push them to a remote, or merge your teammate's changes.

All the commands you know for Git work exactly the same for Dolt. Git versions files, Dolt versions tables. It's like Git and MySQL had a baby.

We also built DoltHub, a place to share Dolt databases. We host public data for free. If you want to host your own version of DoltHub, we have DoltLab. If you want us to run a Dolt server for you, we have Hosted Dolt.

Join us on Discord to say hi and ask questions.

What's

React Native Elements

Cross-Platform React Native UI Toolkit

GitHub logo react-native-elements / react-native-elements

Cross-Platform React Native UI Toolkit

react-native-elements

Cross Platform React Native UI Toolkit

Installation

npm install @rneui/themed @rneui/base
Enter fullscreen mode Exit fullscreen mode

Follow these instructions to install React Native Elements!

Packages

Package Version Downloads
@rneui/base badge npm
@rneui/themed badge npm

Quick Start

Start using the components or try it on Snack.

import { Button } from '@rneui/base';
const App = () => <Button title="Hello World!" />;
Enter fullscreen mode Exit fullscreen mode

React Native Web support

As a cross platform UI Toolkit, you can now use RNE on the web & share your codebase between your React Native + React web apps. RNE components are rendered perfectly on browser. You can achieve this to target iOS, Android and Web by collaborating RNE and React Native for Web.

Click here for a full walkthrough using React Native Elements + React Native Web.

Expo demo app

Checkout the official React Native


dribbble shots

Finance Dashboard

by [Rakib Kowshar](https://dribbble.com/shots/18581445-Finance-Dashboard)

by Rakib Kowshar

Improving health app

by [Taras Migulko](https://dribbble.com/shots/18578096-Improving-health-app)

by Taras Migulko

Fusen-System

by [Jabel Ahmed](https://dribbble.com/shots/18582097-Fusen-System)

by Jabel Ahmed


Tweets


Picked Pens

Generative Kong Summit Patterns

by Adam Kuhn

Squiggly Pencils

by Jhey

CSS House from "Up"

by Jhey


Podcasts worth listening

Syntax – New Viewport Units

In this episode of Syntax, Wes and Scott talk about the new viewport units coming to the web - what are they and when can we use them?


Thank you for reading, talk to you next week, and stay safe! 👋

Discussion (2)

Collapse
happygu34891963 profile image
Happy Guy

thanks for the links. FYI that kong thing has tons of memory leaks and kills Safari

Collapse
marcobiedermann profile image
Marco Biedermann Author

Thank you!
Yeah, I know. It's very resource-intensive ⚡