An Interest In:
Web News this Week
- April 1, 2024
- March 31, 2024
- March 30, 2024
- March 29, 2024
- March 28, 2024
- March 27, 2024
- March 26, 2024
Weekly Digest 19/2021 - Top of the Week
Welcome to my Weekly Digest #19 of this year.
This weekly digest contains a lot of interesting and inspiring articles, videos, tweets, podcasts, and designs I consumed during this week.
Giveaway
We are giving away any course you need on Udemy. Any price any course.
To enter you have to do the following:
- React to this post
- Subscribe to our newsletter
You will receive our articles directly to your inbox .
Interesting articles to read
Frustrating Design Patterns That Need Fixing: Birthday Picker
In this new series of articles on UX, we take a closer look at some frustrating design patterns and explore better alternatives, along with plenty of examples to keep in mind when building or designing one.
Frustrating Design Patterns That Need Fixing: Birthday Picker - Smashing Magazine
JavaScript testing: 9 best practices to learn
We zoom in on nine best practices for JavaScript testing that can help you write better tests and help your team to better understand them.
JavaScript testing: 9 best practices to learn - LogRocket Blog
Using Forms in React
Learn how to build forms with React, the difference between controlled and uncontrolled inputs, and which to use.
How we use Web Components at GitHub
GitHub has long been a proponent of Web Components. Here's how we use them.
How we use Web Components at GitHub | The GitHub Blog
Some great videos I watched this week
Typescript for React Components
Typescript is quickly becoming the industry standard for React development. Take your Typescript skills from beginner to masters level by learning everything you need to know about how to write components in React the right way.
Advanced CSS Border-Radius Tutorial
How to create complex shape with only CSS border-radius and understand how to separately control horizontal and vertical border-radius.
by Red Stapler
Thinking on ways to solve a Media Scroller
In todays GUI challenge, Adam Argyle shares thinking on ways to create inline scrolling experiences for the web that are minimal, responsive, accessible and work across browsers and platforms (like TVs!).
by Adam Argyle
Amazon's, Etsy's and Ebay's Checkout UI
Here are five key UI elements that appear on leading ecommerce companies' checkout screens. The UI comparison also has lead to a freebie Figma Checkout template.
Yet Another 5 Must Know CSS Tricks That Almost Nobody Knows
CSS is a vast language with tons of features and it is impossible to know them all. In this video I will be covering another 5 features in CSS that nobody knows but are incredibly useful.
Testing React Components
Here, Amy Dutton will show you how to write tests for a React component using Jest and the React Testing Library.
by Amy Dutton
Mastering React Hooks with Typescript
Let's dive DEEP again into Typescript but this time to look at React Hooks.
Useful GitHub repositories
Folio
A customizable test framework to build your own test frameworks.
Folio
A customizable test framework to build your own test frameworks. Foundation for the Playwright test runner.
Folio is available in preview and is under active development. Breaking changes could happen. We welcome your feedback to shape this towards 1.0.
Docs
- Isolation and flexibility
- Writing a test
- Writing a configuration file
- Creating an environment
- Command line
- Snapshots
- Annotations
- Parallelism and sharding
- Advanced configuration
- Reporters
- Expect
Isolation and flexibility
Folio focuses on test isolation and flexibility. This makes it fast, reliable and able to adapt to your specific needs.
Isolation. Tests are isolated by default and can be run independently.
Folio runs tests in parallel by default, making your test suite much faster. Thanks to isolation, Folio reuses
zx
A tool for writing better scripts
zx
#!/usr/bin/env zxawait $`cat package.json | grep name`let branch = await $`git branch --show-current`await $`dep deploy --branch=${branch}`await Promise.all([ $`sleep 1; echo 1`, $`sleep 2; echo 2`, $`sleep 3; echo 3`,])let name = 'foo bar'await $`mkdir /tmp/${name}`
Bash is great, but when it comes to writing scripts,people usually choose a more convenient programming language.JavaScript is a perfect choice, but standard Node.js libraryrequires additional hassle before using. The zx
package providesuseful wrappers around child_process
, escapes arguments andgives sensible defaults.
Install
npm i -g zx
Documentation
Write your scripts in a file with .mjs
extension in order tobe able to use await
on top level. If you prefer the .js
extensionwrap your scripts in
Remote Redux DevTools
Use Redux DevTools remotely for React Native, hybrid, desktop and server side Redux apps.
zalmoxisus / remote-redux-devtools
Redux DevTools remotely.
Remote Redux DevTools
Use Redux DevTools remotely for React Native, hybrid, desktop and server side Redux apps.
Installation
npm install --save-dev remote-redux-devtools
Note: for Windows use
[email protected]
(newer versions will not work due to a Windows issue fixed inreact-native
).
Usage
There are 2 ways of usage depending if you're using other store enhancers (middlewares) or not.
Add DevTools enhancer to your store
If you have a basic store as described in the official redux-docs, simply replace:
import { createStore } from 'redux';const store = createStore(reducer);
with
import { createStore } from 'redux';import devToolsEnhancer from 'remote-redux-devtools';const store = createStore(reducer, devToolsEnhancer());// or const store = createStore(reducer, preloadedState, devToolsEnhancer());
Note: passing enhancer as last argument requires redux@>=3.1.0
When to use DevTools compose helper
If you setup your store with middlewares and enhancers
dribbble shots
Localy Roadmap
by Arman Rokni
Govoroon App
IoT App for growing plants
Doctor appointment
Allhand - Mobile App
by Baten
Tweets
Gatsby@gatsbyjsGatsby v3.5 is here.
DX:
~ 20% faster Gatsby CLI startup.
Gatsby v3 compatibility for Gatsby Source GraphQL Toolkit.
Build perf:
~ 20% faster query running.
~ 70% faster page creation.
~ 50% drop in peak memory utilization.
gatsbyjs.com/docs/reference14:02 PM - 12 May 2021
Picked Pens
GLSL Sample027
by Yuki
Spring pattern
by Liam Egan
Podcasts worth listening
Syntax FM - Technical Debt
In this Hasty Treat, Scott and Wes talk about technical debt what it is, why does it occur, and some techniques for reducing and avoiding it.
The CSS Podcast - Snap Points
In this episode, Una and Adam are guiding scroll areas into their peaceful resting places, maintaining alignment, keeping visual harmony, and improving the overall experience with the content.
Smashing Podcast - What is The Future of CSS?
Were starting our new season with a look the future of CSS. What new specs will be landing in browsers soon? Drew McLellan talks to expert Miriam Suzanne to find out.
3 Minutes with Kent - Cypress Driven Development
Software Engineering Daily - Natural Language Processing
Natural Language Processing (NLP) is a branch of artificial intelligence concerned with giving computers the ability to understand text and spoken words. Understanding includes intent, sentiment, and whats important in the message.
Thank you for reading, talk to you next week, and stay safe!
Make sure to subscribe to our newsletter to receive our weekly recap directly on your email and react to this post to automatically participate in our giveaway
If you would like to join our discussions, you can find us on Discord .
Original Link: https://dev.to/worldindev/weekly-digest-19-2021-1cfh
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To