teleren/devto huggingface dataset:
Are you suffering from JavaScript fatigue?
Tags: javascript, webdev
Published: 2022-04-08 15:45:56

Let's face it, the JavaScript ecosystem can be overwhelming.

New libraries appear all the time, **there are dozens of libraries to do the same thing.** How many date pickers can there be? 10, 20, 50? Keeping up with all the changes seems almost impossible. That is JavaScript fatigue.

If you want to avoid JS fatigue, **remember that you don't have to learn everything.** I think it's enough just to be aware of the new tools, what their use cases are, and their pros/cons.

With that information, the next time you create a new project and you have to decide which stack to use, you'll have those libraries as available options.

**You can also focus on those tools that appear in job postings,** especially if your main focus is to get a job. For example, there are lots of job postings that require React. If you want to become more employable, learning that framework is a good idea.

Every now and then, it's not a bad idea to pick up a library that you find particularly interesting, even if it's just to create a toy project. That's what I recently did with Svelte, for example. 

JS fatigue can be a big problem, but you can prevent it from happening.
---

If you liked this article, you'll love my JavaScript Newsletter.
Every other Monday, I'll send you easy and actionable steps to level up your JavaScript skills. Check it out: https://nicozerpa.com/newsletter
Amazon 6-Pager
Tags: productivity, web3, beginners, blockchain
Published: 2022-04-08 15:26:00

It has been a while since my last article. I have just gotten some new offers and decided to move on with one. Hard decision as I love all my colleagues at the current work place but it is a very rare and challenging position thus the decision was made. Hope all of you are doing great as well :)

Write up a short one to introduce something that came across my desk when I was reading a book "I Saw the Future At Amazon" by JJ Park (I am not sure whether this is the name of the book, as it was originally translated from Korean), called the "6-pager".

Traditionally (or what most of us do), we use Powerpoint presentation to present some business ideas, case studies, with all the point forms being listed in the slides. As the presenter, we then elaborate from the points by speech. For these occasions, some people might end up doing the slides at the very last minutes, and improvise during the presentation. This always ends up with an ineffective meeting as most of the participants do not get the clear picture of the discussion, including the presenter. 

In this book, the author introduced how Amazon does this as the presenter will be preparing a 6 pages of "transcript", written properly to describe in depth on the topics to be discussed in the meetings, as if anyone could fully understand without participating in the meeting. When the meeting starts, each of the participants will receive a set of 6-pager, and everyone reads the transcript for 15-30 mins, without anyone making noise. They will jot down the questions that they have, instead of asking the presenter directly like in a PPT presentation which sometimes interrupt the presentation. They might even find the answers in the following pages of the transcript themselves after reading the whole document. When the participants finish reading the 6-pager, the presenter doesn't have to go through all the details again, but proceed to the Q&A session. 

Besides, when we finished the PPT presentation, we sent the presentation slides to the participants for their reference. However, the slides only contain the main points, which they don't get the notes from the presenter. With 6-pager, the presenter has to properly prepare and write up the transcript in order to describe everything by words, so that all of the contents could be referred back in the future. 

I found this method amazing, did a search up on the internet and saw an amazing article by Jesse Freeman, which gives a complete walkthrough and strategies of applying this 6-pager method. You can check out this article [here](https://writingcooperative.com/the-anatomy-of-an-amazon-6-pager-fc79f31a41c9).

That's it for the sharing today! I have started diving into the development of dApps and Web3 related technologies and I can't wait to share more with you guys when the time comes. I shall try my best to translate them in a beginner-friendly way to you guys and all of my non-technical friends who are interested in blockchain technology. Stay tune!

[Follow me on Medium](https://dylanoh.medium.com)
Accessible Toggle
Tags: html, css, a11y, tutorial
Published: 2022-04-08 15:25:41

## Intro 
_Toggle_ is a TRUE/FALSE switch that looks like a... switch... Similar control you can find in your smartphone settings probably.

Under the hood, since it's a TRUE/FALSE type of a control, it's basically just a more fancy styled `input[type="checkbox"]`.

And here's why it's tricky to make it accessible.

## Usual way

**Usually**, to build such a toggle with HTML & CSS you need a visually hidden checkbox within a fancy styled `label` element. And that's what most of the tutorials will tell you.

`label` element makes sure that the entire toggle is "interactive" (i.e. clickable). 

You can't just hide the checkbox with `display: none` because it would make it invisible to assistive technologies. So here's the trick to make it invisible to screens yet accessible:

```
label.toggle {
    position: relative;
    ...

    [type="checkbox"] {
        position: absolute;
        left: -10000px;
        top: auto;
        width: 1px;
        height: 1px;
        overflow: hidden;
    }

    ...
}
```

## The Problem and The Solution

And here's a caveat: our toggle (which is a checkbox) is wrapped with `label` therefore it's **required** (by the a11y police 👮) to provide an actual text description. But we don't want our component to dictate how that text description should look like... Because it might be used in several different ways: 

- sometimes text might be in front of a toggle, sometimes after it, and sometimes above it,
- sometimes text might be longer and styled and sometimes not.

Hence we can't use `label` 🤷‍♂️. But if we use regular `div` or `span` instead, then we lose the "clickability" of our toggle.

So the actual trick is to enlarge the checkbox to be as big as the toggle wrapper (that `div` or `span`) and hide it differently:

```
div.toggle {
    position: relative;
    ...

    [type="checkbox"] {
        width: 100%;
        height: 100%;
        opacity: 0.00001;
        ...
    }

    ...
}
```

First we make sure checkbox takes full width and height. Then we **almost** hide the checkbox with `opacity: 0.00001;`.

Opacity can take values between `0` (fully invisible) and `1` (fully visible). We use value very close to 0 so it's basically invisible on the screen but visible to assistive technologies.

That's it folks. Below is a full demo :)

{% codepen https://codepen.io/ludwiczakpawel/pen/bGavoZR %}

^ try to remove that opacity property to see the actual checkbox placement.

---

Couple notes: 

- You could practically use any element to create toggle if you also sprinkle it with JS. But I wanted to avoid it.
- Keep in mind, all form elements should be placed inside `label`, but in the World of Components, we don't really want such a low-level component to dictate how everything around it should look like. Components should be self-contained and not affect its surroundings (at least that's my philosophy).
#66 Days of Data
Tags: python, datascience, ankitgupta, mrankitgupta
Published: 2022-04-08 15:20:46

## **Learning Python**  👨‍💻

D 51 to 53 of #66daysofdata 📈

Today completed with Matplotlib - #dataviz, Architecture, Concepts, Pyplot & Subplot, Functions, 7 Types of plots, Multiple plots 👨‍💻

Checkout 👉 [My #66 Days of Data timeline on Github](https://github.com/mrankitgupta/66DaysOfData)

Say me Hi! 
I'll be glad to connect on 
👇

**Twitter** @ [MrAnkitGupta_](https://twitter.com/MrAnkitGupta_)

**Github** @ [MrAnkitGupta](https://github.com/mrankitgupta)

**LinkedIn** @ [MrAnkitGupta](https://www.linkedin.com/in/mrankitgupta)
webgl context, canvas and blazor pages
Tags: blazor, webgl
Published: 2022-04-08 15:11:43

When I developed my simple game [PolySnake](http://github.com/3mam/PolySnake), I decided to experimenting with Blazor. Creating port for server and webassembly don't took me too much time. But as usual, supporting different platform is tedious task.

Problem I had, is lose connection between **gl** context and **canvas**. This happen when **page** is changed. When switching pages is happening, **html** components from previous page are removed.

Return to previous page causes components to be creating agin. But for **webGL** is not thad same **canvas**.
And sadly **webGL** context it does not allow to by signed to other **canvas**.

For me initializing everything one more time is not good idea. This is not efficient and require heavy changes in architecture of my game. 
And I started thinking, that I can creating **canvas** in javascript. This **canvas** will be alive that long as is required. And only need is attached that **canvas** to other component.

This component take focus and handling keyboard inputs. Now when **page** will be changed, 
that same **canvas** will be reattach to proper place.

This is how it is looking in my code [Index.razor](https://github.com/3mam/PolySnake/blob/main/BlazorWasm/Pages/Index.razor) and [main.js](https://github.com/3mam/PolySnake/blob/main/BlazorWasm/wwwroot/main.js)
:empty Selector In CSS
Tags: javascript, beginners, programming, css
Published: 2022-04-08 15:10:24

The :empty CSS pseudo-class represents any element that has no children. Children can be either element nodes or text (including whitespace). 

HTML Code - 
```
<div> Hello World !!!</div>
<div> <!-- Empty --> </div>
<div> GoodBye World !!! </div>
```

CSS Code -
```
div:empty {
     background-color: #ff0000;
}
```

Output - 


![:empty Selector Demonstration](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wz3gmd7ava3pew8824f7.PNG)
Push unrelated changes
Tags: discuss
Published: 2022-04-08 15:06:42

---
title: Push unrelated changes
published: true
tags: discuss
---
You're working on dedicated branch for specific task, and you're facing a typo, commented code, or more serious issue like performance or incorrect logic, which has nothing with the task you're working on. 
Would you do these fixes on the same branch? or for VCS reasons, would you open a new branch and commit changes there?
Spotify, Bandcamp and Hanging Out
Published: 2022-04-08 14:21:01


We need more unpolished spaces online. We need more spaces to hang out. 

For a lot of "Web 1.0" people would exchange geocities URLs that would just be collections of DragonBall Z gifs. We'd be proud of getting a glitter effect to sparkle over our MySpaces. An ugly Neopets page didn't feel so embarassing. 

As software engineers we should create more spacers for users to create and engage deeper. 

Think about Spotify and Bandcamp. It's hard to compare the two; Spotify in 2019 had about 130 million subscribers and Bandcamp sold 5 million digital albums. An easier way to think about the two is to ask anyone if they've heard about Bandcamp, and you're going to find a lot more "nope"s than if you ask around about Spotify. 

Spotify is just easier to use than Bandcamp. There's an element of hanging out incorporated into Spotify with the Discover playlist. It's easily integrated into apps like Discord, where in less than five minutes of set up you can queue a playlist for your voice channel. 

Bandcamp's strength is it is beloved by its users. They pay their artists more fairly. The company is profitable and growing. 

I would love a Bandcamp, or any space where the user is invited to create. Maybe you can fiddle with your all time favorite bands. Spotify has those year end music charts (which feel very similar to the Last.Fm scrobbler). 

People love sharing what they love. People love hanging out. And in the case of Bandcamp, I think they should lean into this old internet vibe of just hanging out.
Weekly 007
Tags: weeklyretro
Published: 2022-04-08 14:57:29

### Monday

Office Day with my Team!
I spent the day in the office with everyone in my team.
I love to work remotely, but time to time is good to see the colleagues face to face.

### Tuesday

Arranged items on DevOps, some experiments for Red Origin.

In the evening we delivered our first episode of “GitHub Stories”. It’s a new format (monthly) where we try to tell a story about GitHub and stuff around it.
We started with the first guest: Davide Mandelli.
In the future we will have some sessions in italian and some sessions in english.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/voam2kk4m1z7qiovd9uz.png) 

### Wednesday

I spent the morning to understand how to retrieve sign-ins information from Azure AD with the Graph API and change some business logic in Red Origin.

In the afternoon I delivered a sessione about the integration between **GitHub and Visual Studio 2022** at https://vschamp.com

I really enjoy the short event! 🙂

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/weyw9wcljgsuicf92jnx.png) 

### Thursday

We received a lot of feedbacks from one of our first customer for Red Origin.
I spent the morning to organize them on our backlogs and I have to plan a release date for every features.

In the afternoon I hosted a new episode of AMA for UGIdotnet.
Today the guest was Luciamo Mammino and I was happy to had him in our live.

[https://ugidotnet.org/tv/episodio/2950/Ask-Me-Anything/Node-js-design-patterns-AWS-e-altre-cose-fantastiche](https://ugidotnet.org/tv/episodio/2950/Ask-Me-Anything/Node-js-design-patterns-AWS-e-altre-cose-fantastiche)

### Friday

I published a new article about My Visual Studio 2022 Settings on my blog and I got a lot of shares on LinkedIn :)

{% embed https://dev.to/kasuken/my-visual-studio-2022-settings-n25 %}

I spent the day to refactor a lot of the Red Origin code.
Especially I have optimized the dependency injection and fix a lot of redundant code.

I think I will continue the next week on this topic.
Game time
Tags: productivity, agile, teamwork
Published: 2022-04-08 13:31:46

Weekly on a Friday afternoon, we spend half an hour virtually playing online games as a team. Sounds great, right? When we started working remotely back in the spring of 2020, we realised that we missed the sociality that you get from office-based working. So, this was the perfect excuse to enjoy some social time while working in a distributed, virtual team.

It's nice to have a bit of face time where we're all relaxed, and it means we get to know each other better and improve working relationships. This is especially important when new people join. Also, it's just a bit of fun - work hard, play hard!

Half an hour is enough time to allow us to blow off steam but doesn’t take too much time out of the working day. Obviously, if we have any customer related meetings or high priority tasks then they take precedence and there’s no pressure to join every week. 

We have a few regulars, but it’s usually a mixed bunch of people across a few teams. Here's an average week with a somehow well-timed screenshot (promise it wasn't posed!).

![Meeting screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v05t7k58cy2efasnk497.jpg)

Our favourite games are: 

- [SmashKarts](https://smashkarts.io/) - Mario Kart but just shooting each other, no racing. It’s a 3D browser game with simple controls where you can have a private game just for your team. Warning - it gets pretty competitive!

- [Haxball](https://www.haxball.com/play) - Top-down football enjoyed by both football and non-football fans. It’s a 2D browser game with simple controls. Similarly to SmashKarts, you can have a private game just for your team.

- [Skribbl](https://skribbl.io/) - Pictionary. It’s reasonably straightforward and a good introductory game.

If we have enough people and we're feeling competitive, it's also fun to go into breakout rooms to discuss tactics. It means you don't get to roast the opposition on the fly, but it can make for a more interesting game - this works especially well with Haxball.

![SmashKarts game](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/boezjd6l4rj6genf0e98.png)

Other games that we’ve played in the past:
[Powerline](https://powerline.io/) - Massive snake browser game. It’s fun, but you can’t make private lobbies so there’s less team interaction.
[Among Us](https://innersloth.com/gameAmongUs.php) - Remember when this was a trend? I’m not sure that everyone got the hang of it, but it was fun at the time. It’s a bit like Cluedo , only as an app.
[Jackbox Party Pack](https://www.jackboxgames.com/party-pack/) - Lots of games in one. It is a paid for app, but only one person needs to pay. You can use your phone or computer. It’s really funny and not complicated to play.​​​​

---

##Join us
If you want to join in the fun, we’re often hiring - you can find all our job listings on [our website](https://learningpool.com/why-work-for-learning-pool/careers/).
Just want to try something
Tags: trycodeblock
Published: 2022-04-08 14:46:22

```
<html>

<head>
  <title>Trying Code Block</title>
</head>

<body>
So, this is how I post my code, huh?
</body>

</html>
```

```
<html>

<head>
  <title>Trying Code Block 2</title>
</head>

<body>
And this is how I post my code 2nd time in the same post? Interesting
</body>

</html>
```

I'm new in this community btw.
Automate a weekly new Twitter Followers Shoutout with Pipedream
Tags: javascript, productivity, tutorial, node
Published: 2022-04-08 14:44:55

Engage your Twitter audience with an automatic weekly shout out to your new followers. We'll show you how to build this workflow in 5 minutes on Pipedream.

{% embed https://youtu.be/4MzE5JGfsLU %}

In this episode we're featuring a brand new pre-built action for Pipedream Data Stores to store a list of new Twitter followers on your account in a given week.Learn more and get connected!

🔨  Start building at https://pipedream.com
📣  Read our blog https://pipedream.com/blog
💬  Join our community https://pipedream.com/community

Request to have your idea come to life (and get a shout out too) in a Pipedream Speed Run video:

https://www.jotform.com/220694247042049
Estimated Reading Time using Laravel Macro
Tags: laravel, webdev
Published: 2022-12-19 02:30:12

---
title: Estimated Reading Time using Laravel Macro
published: true
date: 2022-04-08 14:43:01 UTC
tags: laravel, webdev
canonical_url: https://divisidev.com/post/estimated-reading-time-using-laravel-macro
---

If you are building an information system that shares text-based content, you may need to add an estimated reading time for that content. Some time ago, Marcel Pociot shared a code snippet for the helper using macro in Laravel.

> Here's a nice little string helper macro for [@laravelphp](https://twitter.com/laravelphp?ref_src=twsrc%5Etfw) , that gives you the estimated reading time for the given text(s).  
>   
> 200 is the (pessimistic) avg. reading amount of words that an adult reads per minute. [pic.twitter.com/QKypiT5tnT](https://t.co/QKypiT5tnT)
> 
> — Marcel Pociot 🧪 (@marcelpociot) [May 5, 2021](https://twitter.com/marcelpociot/status/1389881758267625473?ref_src=twsrc%5Etfw)

The estimated reading time can help the reader estimate how long the user can read the content to completion.  
And here is the code snippet.

```php
Str::macro('readDuration', function(...$body) {
    $totalWords = str_word_count(implode(" ", $body));
    $minutesToRead = round($totalWords / 200);

    return (int)max(1, $minutesToRead);
});

$est = Str::readDuration($post->body). ' min read';
```
Perform Foundational Infrastructure Tasks in Google Cloud: Challenge Lab
Tags: gcp, cloud, googlecloud, lab
Published: 2022-04-08 14:36:54

The challenge contains 4 required tasks

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3ntq7aysl3b5q1k30x9p.jpg)
1. Create a bucket.
2. Create a Pub/Sub topic with given name.
3. Create the Cloud Function.
4. Remove the previous cloud engineer.


**1: Create a bucket**

1. Navigation menu > Cloud Storage > Browser > Create Bucket
2. Name your bucket > Enter GCP Project ID > Continue
3. Choose where to store your data > Region: us-east1 > Continue
4. Use default for the remaining
5. Create

**2: Create a Pub/Sub topic**

1. Navigation menu > Pub/Sub > Topics
2. Create Topic > Name: topic id > Create Topic

**3: Create the thumbnail Cloud Function**

1. Navigation menu > Cloud Functions > Create Function
2. Use the following config:
3. Name: CFtopic id Region: us-east1 Trigger: Cloud Storage Event type: Finalize/Create Bucket: BROWSE > Select the qwiklabs bucket
4. Remaining default > Next
5. Runtime: Node.js 10 Entry point: thumbnail
6. Add the code appropiately
7. Download the image from URL
8. Navigation menu > Cloud Storage > Browser > Select your bucket > Upload files
9. Refresh bucket

**4: Remove the previous cloud engineer**

1. Navigation menu > IAM & Admin > IAM
2. Search for the "Username 2" > Edit > Delete Role
Happy React: Reactions on your website for free
Published: 2022-04-08 14:24:35

I created a SaaS product to add reactions to your website. It’s free and very performant. You can use it on your blogs, documentation pages, or inside applications.

### 🚀 What?

[Happy React](https://happyreact.com/) provides a widget on your website for adding reactions. You can attach it to your blog post, so you can get reactions to see how people react to your content. This way you find out what your readers like and how your content performs. Also, it’s adding social proof of your content for other readers.

It’s not limited to posts or articles. You can add widget to documentation pages or any part of your application. Get feedback about how your users appreciate your work!

The widget is lightweight. Only \~**1kb** size of initial load. Widget is lazy-loaded by default. It has **ZERO** negative impact on Lighthouse scores!

![](https://cdn-images-1.medium.com/max/1600/1*WF9D-JMqW02pnvhxqCKNzg.gif)

You can customize the styles including the light and dark versions of your reactions. Also, you can customize what reactions and how many of them are displayed in your widget.

> **You can see how a widget is working under this post. Give it a try and leave your reaction!**

### 🤔 Why?

I wanted to add reactions to my blog. When I was searching for a solution I found many services offering ugly, heavy widgets to gather feedback about your website. I didn’t want to go that way. I wanted to integrate it with my current blog, which is minimal and without heavy JS loading.

I made the decision. I’m making my custom reactions widget! But there was another problem. I can make it within a weekend for my blog but I have other projects where I can use it too. That’s how the idea for Happy React begins!

### 💅 How?

That’s my favorite part of every application. How is it built? It’s built with [NextJs](https://nextjs.org/), [Tailwind](https://tailwindcss.com/), and [Supabase](https://supabase.com/).

That’s not the end, I made a widget to attach to the website with [Svelte](https://svelte.dev/). It’s incredibly performant and has a small footprint out of the box.

Lastly, there are other tools complete the whole development: [TruboRepo](https://turborepo.org/) and [Nextra](https://github.com/shuding/nextra).

### 👀 When?

Now! If you find it can be a good fit for your website, please [join the waitlist](https://happyreact.com/early-access). I’m collecting feedback about it, squashing bugs, and adding more features.

Let me know in the comments or on [Twitter](https://twitter.com/marcin_codes) what you think about it!

### 📋 Summary

Happy React is for every developer that wants to seamlessly add a reactions widget to its website. You can check [documentation](https://docs.happyreact.com/get-started) pages on how to add them to your project. I’m super excited about this project 🤩