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?
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.
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.
Useful GitHub repositories
React Native Bottom Sheet
A performant interactive bottom sheet with fully configurable options
gorhom
/
react-native-bottom-sheet
A performant interactive bottom sheet with fully configurable options 🚀
React Native Bottom Sheet
A performant interactive bottom sheet with fully configurable options 🚀
Features
- Modal presentation view, Bottom Sheet Modal.
- Smooth gesture interactions & snapping animations.
- Seamless keyboard handling.
- Support React Native Web 🔥
- Support pull to refresh for scrollables.
- Support FlatList, SectionList, ScrollView & View scrolling interactions.
- Support React Navigation integration.
- Compatible with
Reanimatedv1-3. - Compatible with
Expo. - Accessibility support.
- Written in
TypeScript. - Read more.
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 withReanimated v3&Gesture Handler v2. -
v4(not maintained) | branch | changelog : written withReanimated v2. -
v2(not maintained) | branch | changelog : written withReanimated v1& compatible withReanimated v2.
I highly recommend…
30 Seconds of Interviews
A curated collection of common interview questions to help you prepare for your next interview.
Chalarangelo
/
30-seconds-of-interviews
A curated collection of common interview questions to help you prepare for your next interview.
30 Seconds of Interviews
A curated collection of common interview questions to help you prepare for your next interview.
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.
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.
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.
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"
Install locally
npm install git-split-diffs
git config core.pager "npx git-split-diffs --color | less -RFX"
Use manually
git diff | git-split-diffs --color | less -RFX
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:
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"
(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.
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
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)
Less
@oc-(color)-(number)
Stylus
oc-(color)-(number)
CSS
--oc-(color)-(number)
-
oc: Abbreviation for Open color -
(color): Color name such…
dribbble shots
Social Media App Design
Book Store App
Cryptocurrency Wallet App
Tweets
Picked Pens
Emoji Search
13.8 billion years ago
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)