teleren/devto huggingface dataset:
CSS Flexbox Cheat Sheet 🔥
Tags: webdev, css, beginners, productivity
Published: 2021-06-09 16:23:17

Hi dev friends!

I made this cheat sheet to help my students. I shared it on Twitter [here](https://twitter.com/simonpaix/status/1402303521047842821 "here") and it got viral   so I thought it could help this amazing community here too :)

Let me know what you think 🙂

![learnpine_flexbox_cheat_sheet](https://github.com/simonpaix/images/blob/main/blog/Flexbox_CheatSheet_LearnPine.png?raw=true)
Do you know how Does a Website Work on React JS?
Tags: react, javascript, frontend, framework
Published: 2021-06-09 16:21:53

<a href="https://reactjs.org/" target="_blank">React.js</a> takes DOM to the next level by keeping in memory a virtual representation of a UI and synchronizing it with the real DOM. Means when the page is loaded, an empty container (HTML) is loaded first, and then React renders the page content into it. If some part of the page changes, only the data for this part of the page is reloaded (not the whole page), and the update and rendering of the necessary parts of the page are carried out on the client-side. It speeds up loading and rendering and makes the sites very responsive.
How to handle errors effectively in React JS?
Tags: react, reactnative, javascript
Published: 2021-06-09 15:48:55

#Can you guess what is wrong with this code ?
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eq3iisb4j6ufpdk9rq8m.png)

###If you ship this code to production, your users will see a white screen in your entire application.

 ![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qgzvibvu0ktkzk4kgbz4.png)
 
And if you run this application in your development server you will get error like this-

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2fv3zq2n2jy6lysj0x8w.png)

>So how to handle such errors so that our application doesn't crash in the production

One way is to add try/catch block in all our components inside the render or return statement. This can solve the issue.

But if our application is large and we have 100 components in our application , adding try/catch to all the components would be tiresome.

###Here comes the role of React Error Boundary.

Error boundaries are React components that logs runtime errors anywhere in our child components and display a fallback UI instead of the component tree that crashed.

*But to use React Error Boundary it has to be class component.*

Fortunately! we have a plugin [react-error-boundary](https://www.npmjs.com/package/react-error-boundary) to use it in our functional components.

So, let add react-boundary in our application.

App.jsx file

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e3zwehq003grh4txehv9.png)
 
errorHandling.jsx

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1cwxgy6dejt60vkdduxc.png)
 

After we add the React error boundary plugin in our application, it will start logging for runtime error  and we can add a fallback UI if any error occurs.


Finally! Instead of bank white screen we are able to see the fallback UI if any runtime error occurs.
 

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p71nmoxnxx7x2m7xzwom.png)
7+ Cool CSS Buttons For Web Design
Tags: html, css, sass, responsive
Published: 2021-06-09 16:08:32

These CSS buttons are fully responsive for all devices. I created this for my own projects. I know bootstrap also has pre-made buttons but I like my own buttons. Available for download in code pen.
<iframe height="265" style="width: 100%;" scrolling="no" title="7+ Cool CSS Buttons For Web Design" src="https://codepen.io/shahriarcodes/embed/NWpBZZN?height=265&theme-id=light&default-tab=css,result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href='https://codepen.io/shahriarcodes/pen/NWpBZZN'>7+ Cool CSS Buttons For Web Design</a> by Shahriar Shakil
  (<a href='https://codepen.io/shahriarcodes'>@shahriarcodes</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>
My Experience With FreeCodeCamp
Tags: beginners, freecodecamp, javascript, tutorial
Published: 2021-06-09 16:02:12

A year ago I joined freeCodeCamp and since I've now gotten 4 certifications, I thought I'd share my personal experience and thoughts about it.

> #### What is freeCodeCamp?
>FreeCodeCamp is a free online platform for learning all sorts of topics from Web Development to Machine Learning. Check it out [here](http://freecodecamp.org/).

## My experience

My first FreeCodeCamp course was te Responsive Web Design Certification. I found the learning method very interesting. I find this learning method really good because you actually get a hands-on experience with what you're learning. This way I learned a lot about core web technologies such as HTML, CSS, and Javascript. 

Something I like a lot about freeCodeCamp is that you have the flexibility to create your own schedule and practice whenever you want and are able to. There is no penalty for spending a little more time in something. 

I have completed the **Responsive Web Design**, **Javascript Algorithms and Data Structures**, **Frontend Libraries**, and **APIs and Microservices** Certifications. So I can say I've experienced quite a bit of the freeCodeCamp platform. For the most part I have nothing but positive feedback. I have recommended this several people who have asked me for help in starting their own career in webdev. One of them is now very experienced and has moved onto React. 

## Suggestions

As much as there is good in this platform, there are some things that could be improved. 

### 1. Improve Redux section.

I struggled the most in the React-Redux section of the Front-end libraries certification because of explanations that i felt assumed previous knowledge of Redux. I felt they went a little too fast.

## Conclusion

Overall, I consider freeCodeCamp as one of the best platforms to start your web developer journey. It has clear, concise, and fast-paced explanations that are guaranteed to bump up your skills.

Thanks for reading my article and make sure to keep in touch for more upcoming articles.
LaTeX Cross Referencing: How to call elements?
Tags: latex, codenewbie
Published: 2021-06-09 15:56:06

Hello hello, how are you today?

In my [last post](https://dev.to/latexteada/latex-cross-referencing-2jga) I told you how to *label* the elements and I give you some conventions to refer those elements and avoid creating long names, in this post I tell you how to *call* those elements that you have labeled 

We have different ways to *call* those elements

- `\ref{name}` displays the number of the element which label name is *name*
- `\pageref{name}` displays the number of the page where the element, which label name is *name*, is located

In some post I will write about maths in LaTeX, and as I have said, you can refer equations too. To do this you can use either `\ref{name}` or 

- `\eqref{name}` to display the number of the equation in brackets

## Examples 

![primero](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x19r805xmtgca0itv0wx.png)

And you get 

![Screenshot from 2021-06-06 11-08-18](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v7i3dcvvb8u2fjngxiaw.png)

And 

![primero](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j1l1q6vuo2dc3nb2rsqk.png)

And you get 

![Screenshot from 2021-06-06 11-10-58](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v1wtl9op296hy9rikt1k.png)
prepareForValidation method in Laravel Form Requests
Tags: php, laravel
Published: 2021-06-09 15:53:51

Sometimes is necessary to validate a route param to execute an action, for example: "create or update a feature if user has a paid plan".

## Where I can validate this logic? 

Well, if you have a form request as a place to validate input data, it also can be used to validate data from a route param.

## A Route to create a feature

### Create a resource controller for the feature

```php
php artisan make:controller CreateAFeatureController -r
```

```php
Route::post('/create-feature'{account}', [CreateAFeatureController::class, 'store']);
```

### Create a custom rule to validate the account

```php
php artisan make:rule AccountHasAPaidPlanRule
```

### AccountHasAPaidPlanRule

As the route and controller can use route model binding the container can solve the account model automatically, but if you do not want to use it you can use eloquent to get the account.

```php
public function passes($attribute, $value)
{
    /** @var Account */
    $account = Account::findOrFail($value);
    return $account->hasPaidPlan();
}

public function message()
{
   return 'The feature requires a paid plan.';
}
```

### Make a form request

```php
php artisan make:request FeatureRequest
```

### FeatureRequest

```php
// set the route param {account} into the request to add rules on 'rules' method
public function prepareForValidation()
{
    $this->merge([
        'account' => $this->route('account'),
    ]);
}

public function rules()
{
    return [
        'account' => [new AccountHasAPaidPlanRule]
    ];        
}
```

The `prepareForValidation` method is also very handy when you need to validate some keys on `create` method and replace, or add more keys on `update` method of a controller, for example.

### Store method in CreateAFeatureController 

```php
public function store(FeatureRequest $request)
{
    Feature::create(['account_id' => $request->account->id])
}
```

You can freely use `$request->account` because, if the `account id` does not exists or the account does not has a paid plan it will throw a response with `status 422` and an error message.

Another advantage is that you can even reuse the same `formRequest` to update the feature in `update` method.

That is all folks! thanks for reading.
Collab Lab: Cohort 25 Recap (Spring 2021🌼)
Tags: collablab, juniordeveloper, webdev, beginners
Published: 2021-06-09 15:49:37

## We have an app 🎉!
Another season of collaborating, learning, and having fun reaches its end as we've wrapped up the Spring 2021 Cohort of Collab Lab!

The entire team, spread around the EMEA region, collaborated remotely while juggling work duties, travel, studying, and other life events to develop a stunning Smart Shopping App 🛒.

## Meet the team!
### Our developers 💻:
- [Chenemi](https://www.linkedin.com/in/chenemi-zekeri/) A Nigerian medical student who is particularly interested in open-source and applications solving healthcare or other social problems.
- [Cynthia](https://www.linkedin.com/in/ciradu2204/) An open-source enthusiast from Rwanda who aspires to use technology to link people to a variety of opportunities, including high-quality education and employment.
- [Ibrahim](https://www.linkedin.com/in/jimoh-ibrahim/) a Microsoft Student Partner from Nigeria. He's studying English education, but he's obsessed with technology and wishes to pursue a career in software engineering.
- [Katia](https://www.linkedin.com/in/katia-utochkina/) a journalism Ph.D. originally from Russia and currently living in the UK, who chose to plunge into web development.

### The mentors 🔭:
- [Alex](https://www.linkedin.com/in/alex-morton-creative/) - The lead mentor. Located in France, she did the heavy lifting for this cohort. 
- [Golfo](https://www.linkedin.com/in/faysvas) - A second-time collab lab mentor from Greece.
- [Julia](https://www.linkedin.com/in/juliaundeutsch/) - A former collabie from Austria who returned as a mentor. 

## The project 🧩:
The goal of the project was to create a Smart Shopping List concept following a blueprint of issues by the [Collab Lab](https://the-collab-lab.codes/) using React and Google Firebase.

For eight weeks, the four developers worked in alternating pairs and worked on a single issue. They worked like a professional remote team, communicating synchronously and asynchronously, reviewing each other's code, and holding Weekly Syncs at the end of each week to show their work.

It's amazing what teamwork can do in such a short timeframe. In the beginning, the team followed the project issues closely and then created their own issues in the final week to deliver a polished app, using mostly vanilla CSS with some SASS (quite a feat!). The team also made sure that the app was accessible even testing it out with a screen reader to make sure everything was working properly.

The developers leveled up as a group and individually during the project in a truly inspiring way!

The mentors had worked together before so there was excellent communication and collaboration from the beginning.

## Project Demo📱:
You can view the source code on [github](https://github.com/the-collab-lab/tcl-25-smart-shopping-list) and see a demo of the project [here.](https://tcl-25-shopping-list.web.app/)
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hrjhaag92do3lrujaoar.png)
Day 106
Tags: 100daysofcode, programming
Published: 2021-06-09 15:40:20

Day 106/200 of #200DaysOfCode #100DaysOfCode #100daysofcodechallenge 

- Solved two problems on Codewars.

1 - Positive to negative binary numbers (7 kyu)
2 - Password Check - Binary to String (7 kyu)
asdf install Erlang with docs
Tags: erlang
Published: 2021-06-09 15:27:35

[Erlang](https://erlang.org/doc/) เป็นอีกภาษาที่ทีมพัฒนาเขียน document เอาไว้ดีมากๆ มีให้ทั้งเป็น manpage, html, pdf และ chunks ที่เรียกดูได้จาก erl

ทีนี้ผมใช้ [asdf](https://github.com/asdf-vm/asdf-erlang) เป็นเครื่องมือในการติดตั้ง Erlang ซึ่งจะไปใช้ [kerl](https://github.com/kerl/kerl) อีกที แล้วถ้าอยากให้มันติดตั้ง document ให้ด้วยต้องใส่ env ให้ถูกต้อง

แต่ว่าในหน้า README ของ asdf erlang plugin กับ kerl ดันบอกว่าให้ใส่แค่ env ตัวเดึยวคือตัวนี้

```
export KERL_BUILD_DOCS=yes
```

แต่ลองแล้วก็ไม่เห็นจะได้ document แบบ manpage, html, pdf มาเลย แต่เจอว่าใช้งานผ่าน erl ได้

สุดท้ายไล่ดูโค้ดของ asdf erlang plugin กับ kerl จนเจอว่ามันต้องระบุประเภทของ format ของ document ด้วยผ่านอีก env คือ

```
export KERL_DOC_TARGETS="man html pdf chunks"
```

ซึ่งใส่หลาย format ได้

เท่านี้ก็ลง Erlang ผ่าน asdf แล้วได้ document ครบทุกประเภทแล้ว
Main Branch #01
Tags: comics, softwaredevelopment, programming, softwareengineering
Published: 2021-06-10 16:03:30

---
title: Main Branch #01
published: true
date: 2021-06-09 15:16:32 UTC
tags: comics,softwaredevelopment,programming,softwareengineering
canonical_url: https://blog.shiftleft.io/main-branch-01-ad4233c347e9
---

#### Meet the Manager

![](https://cdn-images-1.medium.com/max/1024/1*TcEGEhaj4zOR3KgJqi7XnA.jpeg)

Main Branch is a comic strip for developers produced by James Gilbreath, Jason Green, and Vickie Li.

* * *
On .NET Episode: Setting up Observability in Orleans
Tags: dotnet, opentelemetry, microservices
Published: 2021-06-09 14:50:53

As we continue to explore Microsoft Orleans, Reuben Bond returns to chat with Rich about how we can implement observability in our Orleans applications. He reviews concepts like OpenTelemetry, call filters, and much more.

{% youtube GKXiGhFBd90 %}

If you liked this video and would like to see some more of our .NET content, please subscribe to our [.NET Developers YouTube Channel](https://www.youtube.com/channel/UCvtT19MZW8dq5Wwfu6B0oxw).

## Useful Links
<ul>
<li><a href="https://channel9.msdn.com/Shows/On-NET/Building-real-applications-with-Orleans?WT.mc_id=ondotnet-c9-cephilli" target="_blank">Building real applications with Orleans</a></li>
<li><a href="https://www.youtube.com/watch?v=R0ODfwU6MzQ" target="_blank">Deep Dive into Microsoft Orleans</a></li>
<li><a href="https://channel9.msdn.com/Shows/On-NET/Inspecting-application-metrics-with-dotnet-monitor?WT.mc_id=ondotnet-c9-cephilli" target="_blank">Inspecting application metrics with dotnet-monitor</a></li>
<li><a href="https://channel9.msdn.com/events/dotnetConf/Focus-on-Microservices/Orleans-at-Microsoft?WT.mc_id=ondotnet-c9-cephilli" target="_blank">Orleans at Microsoft</a></li>
<li><a href="https://github.com/dotnet/orleans/pull/6853" target="_blank">GitHub Issue: Added distributed tracing support</a></li>
</ul>
Amazing Course Card Using HTML & CSS
Tags: html, css, webdev, beginners
Published: 2021-06-09 14:48:17

Hello Guys,

How are you today I created a Amazing Course Card with HTML & JS. This is simple course card that for beginners level I use Font awesome for icons and Poppins as a font If you find this useful in a post like and save this post also comments about your thoughts.

For more content follow me on Instagram  [@developer_nikhil27](https://www.instagram.com/developer_nikhil27/).

Thank you!

{% codepen https://codepen.io/NikhilBobade/pen/rNyrbdZ %}
Adding effects in Tone.js
Tags: javascript, webdev, music, tutorial
Published: 2021-06-09 14:20:59

Tone.js has a wide selection of filters and effects. In this article we are going over a few effects. 

## Distortion
To start off we create a simple distortion effect that will play in the beginning. 

```
const dist = new Tone.Distortion(0.8).toDestination();
const fm = new Tone.FMSynth().connect(dist);
fm.triggerAttackRelease("G1", "8n");
```

## FeedbackDelay

FeedbackDelay is a DelayNode in which part of output signal is fed back into the delay. 

```
const feedbackDelay = new Tone.FeedbackDelay("8n", 0.5).toDestination();
const tom = new Tone.MembraneSynth({
	octaves: 4,
	pitchDecay: 0.1
}).connect(feedbackDelay);
tom.triggerAttackRelease("A3", "32n");
```


## PingPongDelay 
Just as the name suggests it  sounds like a ping pong. PingPongDelay is feedback delay effect where the effect is echoed in one channel and is play next in the opposite channel. This is a PingPongDelay effect. 

```
const pingPong = new Tone.PingPongDelay("4n", 0.2).toDestination();
const drum = new Tone.MembraneSynth().connect(pingPong);
drum.triggerAttackRelease("C4", "32n");
```
Note that each delay is routed to a different channel. Effects can also be looped. 

```
const pingPong = new Tone.PingPongDelay("4n", 0.2).toDestination();
const drum = new Tone.MembraneSynth().connect(pingPong);

const loop = new Tone.Loop(time => {
	drum.triggerAttackRelease("C4", "32n");
}, "2n").start(0);
```

### Resources
More effects are in the [Tone.js documentation](https://tonejs.github.io/docs/14.7.77/index.html).
Rainyday.js:- Raindrops Effect With JavaScript
Tags: css, html, webdev, beginners
Published: 2021-06-09 14:41:43

Rainyday.js is a JavaScript library that makes HTML5 canvas to render an animation. So here we made raindrops effects in the Rainyday.js library using CDN.

In this element, we used HTML, CSS and for make effect we used JavaScript. Also, we used images on the js side with the help of img tag.

Make it yours now by using it, downloading it, and please share it. we will design more elements for you.

[Source Code](https://w3hubs.com/rainyday-js-raindrops-effect-with-javascript/)
Top 6 Leading Node.JS Frameworks
Tags: node, javascript, typescript
Published: 2021-06-09 13:57:06

You will come across as many as six top-quality Node.js frameworks well-known for their simplified and lightweight development process. Let’s talk about each one of them in brief.

1. Express.js

Express.js happens to be amongst the leading web app frameworks of Node.js. It is extremely flexible and lightweight that provides powerful features for mobile and web app development. This framework offers a layer of basic web app features without complicating the features of Node.js. You will come across lots of well-known frameworks based on Express.js.

 
2. Meteor.js

Meteor.js happens to be an open-source platform utilized by numerous developers for developing mobile and web apps. It is popular amongst developers for creating efficient, simple, and scalable JavaScript apps. The industry giants took more than 20 years to bring it to perfection. Meteor is an established open-source framework that enables you to create and scale effectively to serve numerous users out there.


 
3. Koa.js


Koa.js middleware stack will flow in a stack-like style, enabling a developer to execute actions downstream and then filter and control the response upstream. Koa is an innovative web framework created by the team responsible for making Express. It aims to be an expressive, smaller, and more powerful foundation for APIs and web applications. Koa enables developers to increase error handling to a great extent and ditch callbacks by using async functions. This framework is not known to bundle any type of middleware within it and offers an elegant set of procedures that help to make writing servers enjoyable and fast.

 
4. Sails.js


Sails.js happens to be amongst the most reputed MVC frameworks for Node.js. Although this framework has been designed to match the typical MVC pattern of Ruby on Rails, it requires support for contemporary apps’ requirements. It is known to offer features such as data-driven APIs along with a service-oriented and scalable architecture.

 
5. Hapi.js

Hapi.js is considered to be an open-source framework for desktop and web apps. It is usually used for building web services like websites, JSON API, and HTTP proxy apps. The mobile team created the framework at Walmart Labs. Mr. Eran Hammer, responsible for creating OAuth, happens to be the brain behind this particular technology. He designed it for handling their traffic for Black Friday events. The original Hapi versions used the Express framework.

 
6. NestJS

NestJS happens to be an open-source, versatile, extensible, and progressive Node.js framework intended for developing demanding and compelling backend systems. Presently, it is the fastest developing Node.js framework in TypeScript. Developers make use of NestJS for writing testable, scalable, and loosely coupled apps. It helps to bring scalable Node.js servers to an entirely new level.

 Learn more here: https://www.rlogical.com/blog/top-6-leading-node-js-frameworks/
I’ll attend the Perl and Raku Conference In the Cloud
Tags: conference, yapc, tprc, perl
Published: 2021-06-09 13:53:27

This year, I am unemployed so let’s try to attend and follow the [Perl and Raku Conference In the Cloud](https://perlconference.us/tprc-2021-cloud/). Feeling quite bored since those days, I am not too much into computer stuff but more like gardening, fixing my house, take care of my cat,  cooking and do wood work, but let’s try.

I bought a ticket.
D v C++
Tags: dlang, cpp, healthydebate, watercooler
Published: 2021-06-09 13:52:28

D was created as an alternative to C++. It supposedly "fixed" all the errors in C++. But did it *really*? Today we find out in D v C++.

#### Credits 😊
Thanks to @pranavbaburaj for some of these points.

## C++
C++. By far one of the most well known programming languages. One of its achievements was adding OOP to C. Let's look at some strong (and weak) points:
- ✔ &nbsp;Fast
- ✔ &nbsp;Compiled
- ✔ &nbsp;Game engine support
- ✔ &nbsp;OpenGL support
- ✔ &nbsp;Well known
- ❌ Somewhat complicated


## D
D was made to improve C++ but did it do a good job?
- ✔ &nbsp;Compiled
- ✔ &nbsp;OpenGL support
- ❌ No game engine support
- ❌ Not very well known
- ✔ &nbsp;Simple

Well, all of this evidence gives a clear winner. C++. If you disagree however, go comment down below with your reasoning! I would love to hear what you think.
How I've fixed the rainbow cursor appearing frequently on my Mac.
Tags: mac, rainbowcursor
Published: 2021-06-09 13:47:58

---
title: How I've fixed the rainbow cursor appearing frequently on my Mac.
published: true
description: fix rainbow cursor
tags: Mac, RainbowCursor
//cover_image: https://direct_url_to_image.jpg
---

Since few day's ago, the rainbow cursor get appearing frequently on my Mac. But, **Apple Diagnostic** reporting ADP00, no problem.

If this is **not** hardware matter, it must be software matter. If software matter, restoring backup version must be fix this, I.M.H.O.

I've restored by time machine up to the time that issue was not occurred. The result is, perfect! The rainbow cursor disappear!