teleren/devto huggingface dataset:
UI Dev Newsletter #50
Tags: webdev, html, css, javascript
Published: 2021-03-31 08:05:58

- [A Complete Guide To Accessible Front-End Components](https://bit.ly/3cwWLgb)
Vitaly Friedman looks into reliable, accessible components: from tabs and tables to toggles and tooltips.


- [How to Improve CSS Performance](https://bit.ly/3fnGWKz)
Milica Mihajlija covers what kinds of performance issues CSS can cause and best practices for crafting CSS that doesn’t get in people’s way


- [prefers-reduced-motion: Taking a no-motion-first approach to animations](https://bit.ly/2QRPNKl)
Tatiana Mac provides an approach and guidance on animating thoughtfully and responsibly.


- [Not Your Typical Horizontal Rules](https://bit.ly/3fpJFTM)
Sara Soueidan shows how to add a nice little personal touch to your content and designs by customizing horizontal rules.


- [How I Made My Website Load 18% Faster](https://bit.ly/31H2V7f)
Joseph Maurer describes how 15 minutes could save you 15% or more on performance.


- [Good form](https://bit.ly/31tioYh)
Jeremy Keith describes and admires the booking process of the National Health Service coronavirus vaccination.


- [Websites I found useful during my web development journey](https://bit.ly/3rz1W3p)
Dominik shares a comprehensive list of helpful web development resources that could help you, too.


- [Fontshare](https://bit.ly/39oYpOC)
Fontshare is a service that helps brands and individuals who do not have the budget but still want to access beautiful typography.



Happy coding!

[Subscribe to the newsletter here!](https://bit.ly/34155z3)
React Redux - Firebase CRUD Operations example
Tags: react, firebase, crud, redux
Published: 2021-03-31 12:01:10

React Redux - Firebase CRUD Operations example

https://grokonez.com/frontend/react/react-redux-firebase-crud-operations-example


React Redux - Firebase CRUD Operations example

In this tutorial, we’re gonna do CRUD operations with Firebase Realtime Database in a React Redux Application.

Related Article: <a href="https://grokonez.com/frontend/how-to-use-react-firebase-database-crud-operations-in-react-webpack">How to use Firebase Database CRUD Operations in React Webpack</a>

<!--more-->
<h2>Async Redux Action</h2>
<h3>Overview</h3>
We have known how the Redux works with Action creators:
- A Component calls an Action creator.
- That creator returns an Object with <code>type</code> field.
- The Component dispatches the Object.
- Redux store changes.

With Async Redux Action:
- A Component calls an Action creator.
- That creator returns a Function instead of an Action object.
- The Component dispatches the Function.
- The Function runs. It can have side effects with asynchronous API calls or dispatch Actions.

This Function will get executed by the Redux Thunk middleware from package called <code>redux-thunk</code>.
<h3>Redux Thunk</h3>
Redux Thunk middleware allows us to write Action creators that return a function instead of an action.
So we can:
- perform asynchronous dispatch:
<pre><code class="language-javascript">
const _increment = () => ({
    type: 'INCREMENT'
});

const increment = () => {
    return (dispatch) => {
        setTimeout(() => {
            dispatch(_increment());
        }, 1000);
    };
}</code></pre>



https://grokonez.com/frontend/react/react-redux-firebase-crud-operations-example
Daily Developer Jokes - Wednesday, Mar 31, 2021
Tags: jokes, dailydeveloperjokes
Published: 2021-03-31 12:00:18

---
title: "Daily Developer Jokes - Wednesday, Mar 31, 2021"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
cover_image: "https://private.xtrp.io/projects/DailyDeveloperJokes/thumbnail_generator/?date=Wednesday%2C%20Mar%2031%2C%202021"
published: true
tags: #jokes, #dailydeveloperjokes
---

Generated by Daily Developer Jokes, a project by [Fred Adams](https://xtrp.io/) ([@xtrp](https://dev.to/xtrp) on DEV)

___Read about Daily Developer Jokes on [this blog post](https://xtrp.io/blog/2020/01/12/daily-jokes-bot-release/), and check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/).___
### Today's Joke is...
![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e1258e86d537.png)

---
*Have a joke idea for a future post? Email ___[xtrp@xtrp.io](mailto:xtrp@xtrp.io)___ with your suggestions!*

*This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit.*

<!-- 
Joke text:
___Q:___ How does a developer make a cheer?

___A:___ ["hip","hip"] // (hip hip array!)
 -->
Why go digital with low-code instead of paying to a 3rd party
Tags: webdev, productivity, technology, development
Published: 2021-03-31 11:45:56

No need to overpay to a third-party vendor or distract your IT team from their core work when going digital. 

Digitize your business with low-code to achieve:
- Higher developers' productivity.
- Improved team collaboration.
- Less time-to-market.
- Better customer experience.
- Cost-efficiency, etc. 

[More about the benefits](https://uibakery.io/post/6-digital-transformation-benefits-with-low-code?utm_campaign=ui_bakery%20-%20article%20-%20blog%20-%20cacq%20-%20lowcode_digital_transform%20-%20views&utm_source=DevTo&utm_medium=webdev&utm_content=article_release)
Relative Time Format
Tags: javascript
Published: 2021-03-31 11:45:35

The relative Time format is often used in social media, blogs, and chat applications. Earlier we have to make some functions to get relative time. Now It can be achievable by Vanilla JavaScript. 

> `Intl.RelativeTimeFormat()` enables localized formatting of relative times without sacrificing performance.

### A Quick Example

```
const rtf = new Intl.RelativeTimeFormat('en');

rtf.format(10, 'second');
// 'in 10 seconds'

rtf.format(-10, 'minute');
// '10 minutes ago'
```

The `Intl.RelativeTimeFormat()` constructor creates `Intl.RelativeTimeFormat` objects.

### Syntax
`new Intl.RelativeTimeFormat([locales[, options]])`
### Parameters

##### locales [Optional]
A string with a BCP 47 language tag, or an array of such strings. For the general form and interpretation of the locales argument, see the [Intl page](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#locale_identification_and_negotiation).

##### options [Optional]
An object with some or all of the following properties:
- **localeMatcher**
The locale matching algorithm to use. Possible values are "lookup" and "best fit"; the default is "best fit". For information about this option, see the Intl page.
- **numeric**
The format of output message. Possible values are:
"always" (default, e.g., 1 day ago),
or "auto" (e.g., yesterday). The "auto" value allows to not always have to use numeric values in the output.
- **style**
The length of the internationalized message. Possible values are:
"long" (default, e.g., in 1 month)
"short" (e.g., in 1 mo.),
or "narrow" (e.g., in 1 mo.). The narrow style could be similar to the short style for some locales.

Here is an example with some option properties: 

```
const rtf = new Intl.RelativeTimeFormat('en', { numeric: 'auto' });

rtf.format(-1, 'day');
// 'yesterday'

rtf.format(0, 'day');
// 'today'

rtf.format(1, 'day');
// 'tomorrow'

rtf.format(-1, 'week');
// 'last week'

rtf.format(0, 'week');
// 'this week'

rtf.format(1, 'week');
// 'next week'
```

Also, This is supported by all modern browsers. You can check compatibility [here](https://caniuse.com/?search=RelativeTimeFormat)

References: 
1. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat
2. https://v8.dev/features/intl-relativetimeformat
React Redux Firebase Authentication - Google Account Sign in/Sign out example
Tags: react, firebase, authentication
Published: 2021-03-31 11:42:21

https://grokonez.com/frontend/react/react-redux-firebase-auth-example-google-account-sign-in-sign-out-example

React Redux Firebase Authentication - Google Account Sign in/Sign out example

In this tutorial, we’re gonna add Firebase Authentication to a React Redux Application with Google Account Sign in/ Sign out.

Related Posts:
- <a href="https://grokonez.com/frontend/how-to-use-react-firebase-database-crud-operations-in-react-webpack">How to use Firebase Database CRUD Operations in React Webpack</a>
- <a href="https://grokonez.com/frontend/react-redux-firebase-crud-operations-example">React Redux – Firebase CRUD Operations example</a>

<!--more-->
<h2>Firebase Authentication</h2>
<h3>Overview</h3>
Firebase Authentication provides backend services, easy-to-use SDKs, and ready-made UI libraries to authenticate users to your app. It supports authentication using passwords, phone numbers, identity providers like Google, Facebook, Twitter...
<h3>Google Account Sign in/Sign out</h3>
The easiest way to authenticate users with Firebase using Google Accounts is using Firebase JavaScript SDK. To do this, follow these steps:
<h4>Enable Google Sign-In in Firebase console</h4>
- Go to <a href="https://console.firebase.google.com" target="_blank" rel="nofollow">Firebase console</a>, open the Auth section.
- On the <strong>SIGN-IN METHOD</strong> tab, enable the <strong>Google</strong> and click <strong>Save</strong>:

<img src="https://grokonez.com/wp-content/uploads/2018/04/react-redux-firebase-auth-example-enable-google-sign-in.png" alt="react-redux-firebase-auth-example-enable-google-sign-in" width="483" height="456" class="alignnone size-full wp-image-12042" />

<h4>Create an instance of the Google provider object</h4>
<pre><code class="language-java">
firebase.initializeApp(config);
const googleAuthProvider = new firebase.auth.GoogleAuthProvider();
</code></pre>

<h4>Authenticate with Firebase</h4>
<pre><code class="language-java">
firebase.auth().signInWithPopup(googleAuthProvider).then(result => {
    // Google Access Token.
    const token = result.credential.accessToken;
    console.log(token);
    // user info.
    const user = result.user;
    console.log(user);
    // ...
}).catch(error => {
    const errorCode = error.code;
    const errorMessage = error.message;
    const email = error.email;
    // Firebase Auth Credential type
    const credential = error.credential;
    // ...
});
</code></pre>


https://grokonez.com/frontend/react/react-redux-firebase-auth-example-google-account-sign-in-sign-out-example
Joint Webinar: How Pipe Uses Hasura To Help Companies Grow On Their Terms
Tags: webinar, graphql
Published: 2021-04-05 05:54:18

---
title: Joint Webinar: How Pipe Uses Hasura To Help Companies Grow On Their Terms
published: true
date: 2021-03-31 11:19:23 UTC
tags: webinar,GraphQL
canonical_url: https://hasura.io/blog/hasura-pipe-webinar/
---

 ![Joint Webinar: How Pipe Uses Hasura To Help Companies Grow On Their Terms](https://hasura.io/blog/content/images/2021/03/blog_share_image-1.png)

Learn how fast-growing [Pipe](https://pipe.com) is using Hasura in this joint webinar on Wednesday April 7, 2021 at 11:00 AM PST / 2:00 PM EST.

[**Register for the webinar**](https://hasura.io/events/webinar/hasura-pipe)

* * *

Pipe is a fintech startup that’s transforming how companies fund their growth by unlocking their biggest asset - revenue. Through Pipe’s platform, companies can trade their monthly or quarterly contracts for their annual value upfront, instead of taking on highly dilutive equity and restrictive debt.

They're also using Hasura to balance delivery velocity, scalability, and to manage the stringent security requirements for financial services.

Come learn more about Pipe, and how they’ve built a scalable and modern architecture, and how they’re using Hasura to easily create GraphQL APIs to ship features quickly.

_Bring your questions - we’ll also have live Q&A!_

- **Learn About Pipe.** Discover how Pipe is unlocking a new asset class, the challenges they faced, and why they chose GraphQL for their API.
- **Architecture.** Learn how Pipe architected their solution and the benefits they gained by utilizing Hasura.
- **What’s Next.** See where Pipe is headed next and their technical vision for achieving it.

[**Register for the webinar**](https://hasura.io/events/webinar/hasura-pipe)

## Presenters

**Peter Downs, Director of Engineering at Pipe**

Peter is the Director of Engineering at [<u>Pipe</u>](https://pipe.com/), joining as one of the company’s first engineering hires. Prior to Pipe, Peter worked at Stripe and numerous tech startups including, Coinbase, B12 and more. Peter holds a degree in Computer Science from MIT.  
  
**Steven Yi, Head of Product Marketing at Hasura**

Steve leads product marketing at Hasura.  Steve has held leadership roles at Microsoft, Red Hat, and multiple startups - ranging from software architecture & development, developer tools, cloud, mobile development, and AI.
Why did I choose to become a Software Engineer?
Tags: beginners
Published: 2021-03-30 00:25:29

To begin my story, it will have to begin few years ago where I started taking some workshop after work to understand what does software engineer do? and what is coding in General? That was when I realized how coding is a like a language, but it is almost an everyday tool we used just as simple as speaking. I was so intrigued that it was almost solving a crossword puzzles because you are trying to figure out what goes in the boxes and how it connects with the other boxes using the same letter to form a word that is connected to the meaning.

As I begin my journey, one thing for sure it is going to be long and full of obstacles especially someone with not many experiences in the world of Coding and Programming. It been two weeks into my course of software Engineering, and we started with JavaScript which I find quite complex but interesting, I recently learn that JavaScript plays a big role and has an everyday usage that we use constantly may it be through school, through social media or even at work, it is constantly plays an important role in our everyday society. I am happy to start with something important and that has a huge impact in our world, and I can't wait to dive into it more to understand and just maybe one day create my own JavaScript Project that people can use in their everyday life. 

Between juggling work and class, it is quite hard, but it is worth it. For the classes, I do like how the course is organized and the numbers of resources available that can help with each lesson. I must be honest for some lesson it may take me an hour to know the lesson and finish the lab but for some it may take be up to three hours. But it is better for me because I need to make sure I understand the lesson and to make sure what I do in my labs the program works with all passing checkmarks. With the resources I have and with the instructor and my fellow classmate to help, it should be smooth sailing but if anything, I can also use google to help me which it did help me on some cases. 

My journey may just started...but I can't wait to learn more and use my knowledge in the future because I want to be a software Engineer every day because to me it is title to another world beyond our world, where there is endless possibility of creating and also repairing. 

To all the Software Engineers, you have my utmost respect, and to all the future Software Engineers, this is just the beginning.
Importância do Teste de Software
Published: 2021-03-31 11:12:44

- __Redução de Riscos:__  <Enter>
Há inúmeros riscos quando uma empresa está desenvolvendo um Software. Esses riscos podem ser de prejuízos financeiros, de segurança e privacidade, de imagem. Mas, certamente o maior dos riscos é quando envolve uma perda financeira ou uma perda massiva de clientes. Quando existe uma política forte de Teste de Software, esses riscos podem ser reduzidos drasticamente, pois os defeitos podem ser evitados ou encontrados de forma antecipada antes de ir para o ambiente de produção.
É de extrema importância evitar que os defeitos cheguem até o usuário final, ou pelos menos garantir que o produto entregue tenha a maior qualidade possível, dessa forma evitamos que problemas maiores ocorram em decorrência de bugs.
<Enter><Enter>
- __Garante a Qualidade:__<Enter>
Um software que não passa pelas mãos de um QA ou Analista de Teste, está sujeito a chegar ao cliente com muitos defeitos que podem ser críticos, como citado acima no tópico de Riscos. Uma aplicação deve ser mais do que uma boa aparência, deve ter qualidade. A qualidade é o que vai conquistar o usuário final. Se um software é bonito e promete funcionalidades, o usuário cria uma expectativa que no primeiro defeito encontrado pode ser motivo para o usuário deixar de utilizar essa aplicação. 
Portanto, é muito importante garantir que o produto ou Software chegue ao usuário final com o máximo de qualidade, e isso é possível através de uma política forte de Qualidade dentro das empresas.
New Meteor Meetups
Tags: meteor, mongodb, javascript, watercooler
Published: 2021-03-31 11:11:14

Meteor Meetups have a new home!

With the on-going lockdowns, restrictions and uncertainty Alim Gafar approached me about establishing online Meteor Meetups in the same way we did [Meteor Impact](https://imapct.meteor.com). This is also to help to consolidate all the groups and allow easy sharing between them and do many other interesting things. We got support from [Meteor Software](https://www.meteor.com) and [Pathable](https://www.pathable.com) and a new home for Meteor meetups was born:

https://meetups.meteor.com/

So what do we have so far? First of we have dedicated pages to each [local group](https://meetups.meteor.com/groups) to share information about themselves and what companies and people are in the area. This will become more interesting once we start again moving to offline meetings.

Each group can use the Pathable platform to schedule online meetings and hangouts. With meetings recorded it will benefit other members of the community as well as they can see great stuff from other meetups.

We will kick-off the meetups with Meteor New York with an introductory [presentation](https://meetups.meteor.com/meetings/virtual/BfQpAkwGywcCrsTit) about Meteor Community, our new meetup platform and some announcements about Meteor Impact 2021.

We are now looking for group organizers and speakers. If you are interested in one of those, please don't hesitate to contact me! Our goal is to have each meetup group to meet at least once a quarter.

I hope to see you there!

--------
If you like my work, please consider supporting me on [GitHub Sponsors ❤️](https://github.com/sponsors/StorytellerCZ).
Recognizing Remote Romantic Bibliophilia
Tags: watercooler, career, motivation, books
Published: 2021-03-31 10:38:33

![One of my management bookshelves](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tpg2c5z2y0doyldgnvha.jpeg)

Attractive book spines in the background of remote video calls are a source of joy to me. And on more than one occasion, I snap a quick photo, secretly loving their collection too—a pendant into the soul of this beautiful, well-read person. I want [to learn](https://medium.com/the-innovation/deconstructing-my-reading-habits-cef9e7d82bad?sk=622a30d66e361ceaab6943ebd6f9761c) with them.

For most of the pandemic, I have been happy - *grateful* - being [remotely employed](https://dev.to/solidi/do-great-at-working-remotely-1oh9). But my book collection sits in a small bedroom, seen in a different context. That is because my wife is in that space, fighting COVID in projects that impacted vaccine formulation and mass production.

And I am out here as an [engineer manager](https://dev.to/solidi/what-is-an-engineering-manager-anyway-4and) at my kitchen table, the team questioning my frequent house-bound geographical migrations in jest. Sometimes mimicking their virtual backgrounds of the places I've sat. I love them all.

But I wonder, are the engineers on *her* calls think that [Mythical Man-Month](https://medium.com/hackernoon/the-decision-hypothesis-aa512e0113) is an archaic titled process of medicine formulation? And for all the books I've seen, have they read through *their* titles so prominently displayed?

Regrettably, my collection has not been well-read. I'm ashamed of it. I'm trying to correct it. But I write this to end that. I am going to commit.

**No book seen in my remote view will be left unread.**

Regardless, my [book collection](https://github.com/solidi/learning-notes/blob/master/books/reading-list.md) will continue to grow like unabated technical debt. And all these beautiful book spines leave permanent imprints on my Amazon cart. Oh, and that book I saw on someone else's remote bookshelf yesterday? That's on its way... borne from the brief moments on Slack, Zoom, Teams, or the endless Webex news media interviews.

I recognize that every book in my collection started from a conversation. But lately, I am suffering from a one-way conversation disorder. ***Remote romantic bibliophilia disorder***.
List of Web Component libraries and systems
Tags: webcomponents, webdev, polymer
Published: 2021-03-31 10:06:54

Web components are seeing huge adoption lately, so this is a short list of the libraries and design systems I've come across so far. There will be some I have forgotten, this is definitely an incomplete list, so feel free to comment the rest!

- [Material Design](https://github.com/material-components/material-components-web-components) (Google)
- [vaadin](https://github.com/vaadin/vaadin)
- [FAST](https://github.com/microsoft/fast/tree/master/packages/web-components/fast-components) (Microsoft)
- [Fluent UI](https://github.com/microsoft/fluentui/tree/master/packages/web-components) (Microsoft)
- [GitHub elements](https://github.com/github/github-elements) (GitHub)
- [Lion](https://github.com/ing-bank/lion) (ING)
- [Spectrum Web Components](https://github.com/adobe/spectrum-web-components) (Adobe)
- [Lightning Web Components](https://github.com/salesforce/lwc) (Salesforce)
- [Clarity](https://github.com/vmware/clarity/tree/master/packages/core) (VMWare)
- [Patterns](https://github.com/axa-ch/patterns-library) (AXA)
- [Patternfly](https://github.com/patternfly/patternfly-elements) (RedHat)
- [Boston University Libraries](https://github.com/bulib/bulib-wc)
- [Shoelace](https://github.com/shoelace-style/shoelace)
- [wired-elements](https://github.com/rough-stuff/wired-elements)
- [auro](https://github.com/AlaskaAirlines/auro) (Alaska Airlines)

In particular, we have used material design's web components for many years now and can highly recommend them. They are a great example of best practices and good web component architecture being put into use.

Similarly, Vaadin has been around for a long time in the web component community and is still going strong.

For anyone wanting to learn best practices and good architecture of web components, I'd recommend reading through the source of any of these libraries.