DEV Community

Cover image for Weekly Digest 35/2021
Marco Biedermann
Marco Biedermann

Posted on • Updated on

Weekly Digest 35/2021

Welcome to my Weekly Digest #35 which is the first one for September.

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

Vector? Raster? Why not both!

This week I ran into an interesting class of problems that—in hindsight—could use a much better workflow. Does it exist?

Vector? Raster? Why Not Both!-zachleat.com

Reducing Carbon Emissions On The Web

Websites, unfortunately, aren’t as environmentally friendly as we might like them to be. This article contains some thoughts and experiences from trying to clean them up.

Reducing Carbon Emissions On The Web - Smashing Magazine


Some great videos I watched this week

Functional Programming with JavaScript

Functional Programming is becoming increasingly popular and relevant with each year that goes by. With so much discussion around languages such as F#, Haskell, and Erlang, it can seem as though getting started with Functional programming would mean first learning a whole new syntax...but what if it didn't?

by Simon Painter

New in Chrome 93

Chrome 93 is rolling out now! You can now load CSS style sheets with import statements, just like JavaScript modules. Installed PWAs can register as URL handlers, making it possible for users to jump straight into your PWA. The Multi-Screen Window Placement API has been updated based on your feedback and starts a second origin trial.

by Google Chrome Developers

The Beauty of Bézier Curves

Bézier curves - how do they do?
They're used for animation, text rendering, and all sorts of curved shapes! But how do they actually work? well, like, that's what the video is about, so, watch it to find out, etc!

by Freya Holmér

PostCSS in 100 Seconds

PostCSS is a tool that allows you to use modern CSS features like nesting and mixins, while supporting legacy browsers. Learn why this simple JavaScript library is one of the most popular tools in the web development industry.

by Fireship

VS Code 1.60 Release Party

Live event and Q&A with the VS Code team to discuss highlights from the August 2021, 1.60 release.

by Visual Studio Code


Useful GitHub repositories

React Native Bottom Sheet

A performant interactive bottom sheet with fully configurable options

GitHub logo gorhom / react-native-bottom-sheet

A performant interactive bottom sheet with fully configurable options 🚀

React Native Bottom Sheet

Reanimated v3 version Reanimated v2 version Reanimated v1 version
license npm runs with expo
NPM Downloads

A performant interactive bottom sheet with fully configurable options 🚀

React Native Bottom Sheet


Features

Getting Started

Check out the documentation website.

Versioning

This library been written in 3 versions of Reanimated, and kept all implementation in separate branches:

  • v5 | branch | changelog : written with Reanimated v3 & Gesture Handler v2.

  • v4 (not maintained) | branch | changelog : written with Reanimated v2.

  • v2 (not maintained) | branch | changelog : written with Reanimated v1 & compatible with Reanimated v2.

I highly recommend…

30 Seconds of Interviews

A curated collection of common interview questions to help you prepare for your next interview.

GitHub logo Chalarangelo / 30-seconds-of-interviews

A curated collection of common interview questions to help you prepare for your next interview.

30 Seconds of Interviews logo

30 Seconds of Interviews

A curated collection of common interview questions to help you prepare for your next interview.


PRs welcome travis producthunt licence

This README is built using markdown-builder.

Foreword

Interviews are daunting and can make even the most seasoned expert forget things under pressure. Review and learn what questions are commonly encountered in interviews curated by the community that's answered them and go prepared for anything they'll ask. By bringing together experience and real-world examples, you can go from being nervous to being prepared for that next big opportunity.

30 Seconds of Interviews promo

Contributing

30 seconds of interviews is a community effort, so feel free to contribute in any way you can. Every contribution helps!

Do you have an excellent idea or know some cool questions that aren't on the list? Read the contribution guidelines and submit a pull request.

Join our Gitter channel to help with the development of the project.

Related projects

git-split-diffs

GitHub style split diffs with syntax highlighting in your terminal.

GitHub logo banga / git-split-diffs

Syntax highlighted side-by-side diffs in your terminal

git-split-diffs

GitHub style split (side by side) diffs with syntax highlighting in your terminal.

Screenshot of dark theme

Screenshot of github-light theme

Demo 1 | Demo 2

Usage

This currently requires node version 14 or newer to run.

Install globally

npm install -g git-split-diffs

git config --global core.pager "git-split-diffs --color | less -RFX"
Enter fullscreen mode Exit fullscreen mode

Install locally

npm install git-split-diffs

git config core.pager "npx git-split-diffs --color | less -RFX"
Enter fullscreen mode Exit fullscreen mode

Use manually

git diff | git-split-diffs --color | less -RFX
Enter fullscreen mode Exit fullscreen mode

Customization

Line wrapping

By default, lines are wrapped to fit in the screen. If you prefer to truncate them, update the wrap-lines setting:

git config split-diffs.wrap-lines false

Inline changes

By default, salient changes within lines are also highlighted: Screenshot of inline changes

You can disable this with the highlight-line-changes setting:

git config split-diffs.highlight-line-changes false

Enable scrolling in the terminal

git config --global core.pager "git-split-diffs --color | less -+LFX"
Enter fullscreen mode Exit fullscreen mode

(note the difference from the main configuration with the added +

Open color

Open color is an open-source color scheme optimized for UI like font, background, border, etc.

GitHub logo yeun / open-color

Color scheme for UI design.

Open color

Open color is an open-source color scheme optimized for UI like font, background, border, etc.

Goals

  • All colors shall have adequate use
  • Provide general color for UI design
  • All colors will be beautiful in itself and harmonious
  • At the same brightness level, the perceived brightness will be constant

Note

  • The colors are subject to change in the future. Thus, using an Open color as a main identity color is not recommended.

Available Colors

available colors

Installation

$ npm install open-color

or

$ bower install open-color

Currently Supported Formats, Language Environments, Libraries

CSS, Sass, Less, Stylus, JSON, SVG, TeX, Open Color Tools (.oco), PowerPaint (.rcpx), Sketch (.sketchpalette), Inkscape, aco, clr, Tailwind, TypeScript

Variable Convention

Sass, SCSS

$oc-(color)-(number)
Enter fullscreen mode Exit fullscreen mode

Less

@oc-(color)-(number)
Enter fullscreen mode Exit fullscreen mode

Stylus

oc-(color)-(number)
Enter fullscreen mode Exit fullscreen mode

CSS

--oc-(color)-(number)
Enter fullscreen mode Exit fullscreen mode

  • oc: Abbreviation for Open color
  • (color): Color name such…

dribbble shots

Social Media App Design

https://cdn.dribbble.com/users/7514969/screenshots/16138671/media/aa6d22bf3f12a7dc452f86ec114d279f.png

by Julius Branding

Book Store App

https://cdn.dribbble.com/users/4179218/screenshots/16382297/media/747e5a1abd574815a0ae88aba857df52.png

by Achmad Qomarudin

Cryptocurrency Wallet App

https://cdn.dribbble.com/users/2125046/screenshots/16383414/media/42a94977474c30d2dfe7d8d3cfbd6a77.jpg

by Ofspace Digital Agency


Tweets


Picked Pens

Emoji Search

by Marco Biedermann

13.8 billion years ago

by Louis Hoebregts

Podcasts worth listening

Syntax – Freelance Tips - Toxic Clients

In this Hasty Treat, Scott and Wes talk about toxic clients — how to identify them, and what to do about them.

Ladybug – Diving Deep On Databases

If you have data for your application, you’ve probably used a database to store it. There are so many types of databases, NoSQL, SQL, graph, etc. Let's learn about their benefits and how to use them!

Syntax – Coding Interview Questions

In this episode of Syntax, Scott and Wes are back with another edition of Stump'd! where they try to stump each other with interview questions.


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

Top comments (0)