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 for iOS & Android.
- Support pull to refresh for scrollables.
- Support FlatList, SectionList, ScrollView & View scrolling interactions.
- Support React Navigation integration.
- Compatible with
Reanimatedv1 & v2. - Compatible with
Expo. - Accessibility support.
- Written in
TypeScript. - Read more.
Getting Started
Check out the documentation website.
Versioning
This library been written in 2 versions of Reanimated, and kept both implementation in 3 separate branches:
-
v2| branch | changelog : written withReanimated v1& compatible withReanimated v2. -
v3 (deprecated)| branch | changelog : written withReanimated v2, soon to be deprecated in-favour ofv4.
I…
30 Seconds of Interviews
A curated collection of common interview questions to help you prepare for your next interview.
30-seconds
/
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.
View online
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
GitHub style split diffs in your terminal
git-split-diffs
GitHub style split diffs with syntax highlighting in your terminal.
Usage
This currently requires node version 12 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
Syntax highlighting
Syntax highlighting is supported via shiki, which uses the same grammars and themes as vscode. Each theme specifies a default syntax highlighting theme to use, which can…
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 as gray…
dribbble shots
Social Media App Design
Book Store App
Cryptocurrency Wallet App
Tweets
`font-size: min(100%, 16px);`
opt your UI out of iOS zooming when inputs are tapped
[video alt]
a <select> element is tapped before and after it's font-size is changed, and in one case the device zooms to the <select>, the other it doesn't13:23 PM - 31 Aug 2021
For all WebDevs, this event is definitely something to check out.
👇
@id24conf
🔗 inclusivedesign24.org/2021/schedule/17:14 PM - 01 Sep 2021
Visual Studio Code@code
📣 The August release of VS Code is here! 🆕:
🖇 Inlay hints for JS/TS
🪄 Auto language detection with local ML model
🎨 Bracket pair colorization built-in
📝 Author guide for web extensions
…and more!
Release notes: aka.ms/vscode/v1_60
Download: aka.ms/vscode17:00 PM - 02 Sep 2021
🎉 Input type `datetime-local` support is coming to Firefox 93. 🎉
🔗 MDN docs: developer.mozilla.org/en-US/docs/Web…
#devsheets16:27 PM - 03 Sep 2021
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)