teleren/devto huggingface dataset:
Working with NextJS, Firebase and SCSS (Part 1)
Tags: nextjs, firebase, scss, github
Published: 2022-03-03 21:46:48

So, I made a blog website where everyone can post there experience in the car they have and the experience of fixing something in it. The website is called The Car Heart.  [The Car Heart
](https://thecarheart.vercel.app)

How did I do it? It was so hard! 

1. The first step was finding the stack I needed. If it didn't include images I would have picked MongoDB. If it wasn't for my likes I would have picked React. But I love NextJS more. Why not Tailwind? I don't like CSS libraries because they make me feel less of a developer. 

2. Initiating in GitHub
I made a GitHub repository for my project. After I used Vercel for hosting it. 

3. Adding the Routes
By adding all the routes I was able to manage my data before using Firebase. 

4. Lay the basic SCSS file system
When I write code I put all the SCSS files in one big file to be able to manage my systems.

5. Initiating Firebase
I used Firebase Auth, Storage and Firestore. I used each of them in a way that connects them. I stored the user data in Firestore, the blogs too. I used the storage to store all the images. Then I added authentication for the website.

Part 2 next week.
WEB 2.0 & 3.0, What's the difference?
Tags: blockchain, crypto, web3
Published: 2022-03-02 22:37:34


##Brief
Over the past years, the internet has changed the world and the lives of people. Most don't go a day without some kind of interaction with the internet be it social media, online shopping, gaming, and the world wide web have solidified a place in all our lives, but it's always changing.

**Web 2.0** (a.k.a. “The document Web or social web”) is a static controversial writable phrase of the worldwide web (WWW). It uses keyword search to find information  powered by search engines. It facilitates interactions between the users and their sites.

On the other hand, **web 3.0** (a.k.a “The metadata Web or intelligent web” is a highly mobile, three-dimensional executable phrase of the worldwide web (WWW) with interactive services, dynamic applications and “machine-to-machine” interaction. It is a semantic web that focuses on individuals using content management systems along with artificial intelligence.

With this massive adoption in place, we must follow along or afford to be left behind. Sites like [Blockgames](https://blockgames.gg/), [Nestcoin](https://nestcoin.com/),  [Zuriteam](https://zuri.team/) and even [Youtube](https://www.youtube.com/watch?v=M576WGiDBdQ) have an abundance of resources and mentors to help everyone tech inclined or not to key in to the many use cases of web 3.0.
10 Youtube channels that help you to master CSS, HTML and JavaScript.
Tags: webdev, css, html, javascript
Published: 2022-03-03 21:08:39

To be a web developer you need to have good skills in CSS, HTML  and JavaScript. in this post, I will state 10 of the top YouTube channels that aid you to improve your web development skills.

1- [Easy Tutorials](https://www.youtube.com/channel/UCkjoHfkLEy7ZT4bA2myJ8xA/videos)

![Easy Tutorials](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v939px0ihnss3s0yze7k.PNG)
2- [Online Tutorials](https://www.youtube.com/channel/UCbwXnUipZsLfUckBPsC7Jog/videos)

![Online Tutorials](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z43wqp2ngwhhb5krers1.PNG)



3- [Online web ustaad](https://www.youtube.com/c/OnlinewebustaadCom/videos)
![Online Tutorials](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gdnzdv636nwrbioi9rfi.PNG)




4- [Web dev](https://www.youtube.com/channel/UCZc238wXqeN2M2uXQaY9MEw/videos)

![Web dev](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a7mb10ls9kslaljbqp6o.PNG)




5- [DarkCode](https://www.youtube.com/channel/UCD3KVjbb7aq2OiOffuungzw/videos)


![DarkCode](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2nq5qqe2sp73w9gnjrql.PNG)
 
6- [Skillthrive](https://www.youtube.com/c/Skillthrive/videos)

![Skillthrive](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wr6jxq8z6flay9llbxu1.PNG)


7-  [PRAROZ](https://www.youtube.com/c/PraRoz/videos)

![PRAROZ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rk7fqsctog4ozxtewvzu.PNG)


8-[Tutorials Dev](https://www.youtube.com/c/TutorialsDev/videos)

![Tutorials Dev](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/91rzgyh6qj2uyu95sbrk.PNG)

9-[Mr. Web Designer](https://www.youtube.com/c/MrWebDesignerAnas/videos)

![Mr. Web Designer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lpstt53genz79zz7iqre.PNG)

10-[CodingNepal ](https://www.youtube.com/c/CodingNepal/videos)

![CodingNepal](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yudjz5m5kfd83kbyaw9w.PNG)


Do you know another youtube channel? Share it with us.


If you enjoyed this article you can follow me on [Twitter](https://twitter.com/chemlali_assia) where I Tweet about Web Development Tips & Resources.
Does UX designers push forward minimalism
Tags: design, discuss, webdev
Published: 2022-03-03 21:04:53

Are we confusing less is more with laziness in design research?
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jer1n9gd2w796gu0klkt.png)

Using templates and premade designs for web development and development in general agilizes the workflow and even if working with a design or just a mvp the template can stay while polishing the work.

For most cases small companies work around design systems that are based around css frameworks, making easy to setup templates, most css frameworks are plain and minimalist, or material design, this is a lack of creativity in a lot of senses, in the other case designer go for a riskless aproach, using easy to go layouts and minimal structures to setup plain and serious pieces which can be programmed in low time, even for wysiwyg resources like wordpress or wix the majority of the designs made with these systems are minimal, even the concept of that software is around minimalism, to work with what you get, what you can see.

taking risks in creating intrincated designs for products can lead to further research and increase in costs, not only for UI designers or product designers but for marketing and UX, and for something that has to deploy fast, you cant take that hassle

So... Is minimalism design and/or plain design systems the result of fast iterations and laziness? Maybe.

Big companies are taking this approach too, because most minimalism designs are most readable, easy to go, and... easy to comprehend...? But isnt the reason for branding to be complex but at the same rememberable? and minimalism lacks in that, a pair of lines and a circle doesnt make an impactful design .

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kxidamd4jlpdytu26e9d.png)
 
It is an easy to comprehend design, but easy to forget too, lacks impact, doing something different can lead to more impactful results, maximalism is not dead, is there for people who wants give a little more effort for better results and satisfaction.

As designer, you wont be remembered on how many problems did you solve, but how many creative solutions you gave.

I am not against minimalism, i am against overcharging certain trends , or using the wrong tools.
Rust for "poor devs"
Tags: rust
Published: 2022-03-03 19:47:33

SO, basically I stumbled upon [this](https://gist.github.com/badboy/222302b6b40ba6afc412).

I was quite inspired by it and decide to take a deep dive my self.

I went to the rust playground, opened dev tools, click the network tab and clicked the run button on the page. A fetch request popped up.
![rust playground network request](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ukjnnof7rlh000u39qrc.png)
So, I just right clicked it, copy>copy as node.js fetch.

Opened a node js project in vs code, imported node fetch and pasted the request.

Then added some command line arguments and tinkered with the fetch and boom!

Added a watch system and a system to take inputs as the playground couldn't take std inputs.

And there you have it, [QuickRust](https://github.com/imagineeeinc/q-rust), a rust compiler (interpreter) for places where the rust compiler can't go.

If you have any suggestions or want to contribute, open a issue or a pull request.

I have plans for other compiled languages in the future like Kotlin and Go.
Striking Differences between Web 2 and Web 3
Tags: web3, blockchain, sematic, ai
Published: 2022-03-03 19:35:18

**What is Web 2.0?**  Web 2 refers to the second generation of internet service, which enables the interactions of users with content on the web. It encourages collaboration or /and interactions of users. A company collects and collates user’s data in exchange for services. In peer-to-peer transactions, this encourages e-commerce and set the stage for social media platforms e.g.  facebook, twitter, snapchat,  whatsapp etc.

**What is Web 3.0?** This is a more advanced approach to web 2.0; it is also known as sematic web(machine can read, understand and interprets data directly),this is the third generation of the internet. This arranges all type of data, making it readable for humans and machines. It has the interoperability function (interaction between computer system or softwares),  unlike the web 2.0 where machine cannot understand data. A practical example in web 2.0 is a machine knows there is a heading and italic but doesn’t know the heading is the title in an article and the italic is the name of the author. In web 3.0, the machine knows what is what. e.g. trustwallet, metamask, ethereum etc.

**Comparison between web 2.0 and web 3.0**
1. Web 2.0 is the version of the internet that allows you access to certain services in exchange for your personal data, see this as a transactional kind of service. While web 3.0 is the latest version of internet that allows anybody participate without monetizing their personal data.
2. In web 2.0, permission is usually given before accessing services while in web 3.0, permission is not required. Anybody can access it anywhere in the world without your location been known.
3. There are various forms of regulations and censoring in web 2.0. No regulations, no censoring in web 3.0 since it is decentralized. 
4. Data supplied in web 2.0 can be misused as you don’t really know what your data are been used for while in web 3.0, there is no misuse of data because you didn’t give it in the first place.
The above differences and comparison are to mention but a few, there are still more useful ones. I hope you find this article helpful.

Between i'm running blockchain program at Blockgames (https://blockgames.gg) ,  courtsey of Zuri team (https://zuri.team/) in partnership with Nestcoin (https://nestcoin.com/). Thanks to all that made this possible.

                                                                                                                              		
--Willyfaith.
What did you learn this week?
Tags: beginners, webdev, codenewbie
Published: 2022-03-03 19:30:43

## Fundamentals of JavaScript 
This week and a little of last week, I began learning JS. Starting with variables, how they are little boxes or buckets that store items to memory. The 100 ways (it seems that is) to write a function. Some things need () and some do not. Still working on loops though. 

The biggest takeaway so far for me is JS is a human language. So we have to be really specific when we want to use it to tell a computer what to do. I didn't understand the syntax or logic right off the bat. That is frustrating but I'm not supposed too. It's new, I'm new to this. But everyday I delete and rewrite my little exercises until it makes sense. Those little A-HA moments are so precious right now. I wake up excited to get back to my computer to code. That feeling might not last forever but I sure hope it sticks around for a long, long time. 

## What day am I on since I started this learning to code journey? 

Well my Habit Tracker tells me I've been at this for 100 days! I'll take that. Can't stop, won't stop now! If only I could workout that consistently we'd be getting somewhere. I'll add working out to my Habit Tracker. 

If you're just getting into this like me, don't stop. Watch a few YouTube videos if you need an extra push. Check out Code Newbie's podcast. They've got some really good ones in there about people just like us who made it.
Nevertheless, Michelle Coded in 2022
Tags: wecoded
Published: 2022-03-03 19:15:31

My biggest technical achievement so far as a product designer is getting a certification in Front End Web Development during March of 2020 while doing IVF. I strive to be a "bilingual" product designer who designs as efficiently as possible for dev handoff. If a dev says "you did half the work" to me after a kickoff, then I have succeeded!

I’m excited about learning React and working in component-based product design. I am a Figma tutorial addict and can't wait to teach myself the newest features.

I encourage all female product designers to empower themselves by learning code! It's the best way to have a quiet room full of male developers :)
SOME AWESOME FEATURES OF JAVASCRIPT ECMAScript 2016 (ES7)! 
Tags: javascript
Published: 2022-03-03 19:05:18

Javascript ES7 was a cake on top of the ES6 update. In my previous blog [ES6 way of coding Javascript!](https://dev.to/wordssaysalot/es6-way-of-coding-javascript-2kl2) , I discussed a few useful features that were added to JavaScript in order to make our lives easier. Now, Let's have a look at some of the features that ES7 has to offer!


## EXPONENTIATION OPERATOR
The exponentiation operator, **, was introduced in ECMAScript 2016(ES7).
Performs exponential calculation on operands, Same algorithm as Math.pow(x, y). It returns the first argument raised to the power of the second argument.

With ES7 with can do  ( base** power )

```
const value = 2**5
console.log(value) //32
```


## ASYNC FUNCTIONS
ES7 given us the way to make any function 'asynchronous' explicitly. Very useful when we want wait for asynchronous request like http request, setTimeout etc.

```
function wait(){
   return new Promise((res, rej) => setTimeout(res, 2000));
}
async function asyncMania(){
   console.log("1"); 
   await wait();   /// It will wait for promise to get resolve 
   console.log("2");
}
```

## Array.prototype.includes()

Surprised right? Yes the include() method in Array was introduced with ES7.
Used for checking if the given element is in array or not.

Array.prototype.includes() checks the array for the value passed as an argument. If the array contains the value, it returns true; otherwise, it returns false.

```
const arr = ['Hello', 'World', '!']
console.log( arr.includes('Hello') )        //true
console.log( arr.includes('Hello !!') )    // false
```

## Object.entries()
Takes an object as parameter and returns a Array of arrays of key, value pairs.

```
const myObj = {name: "Ritesh Kumar", username: "@wordsaysalot"}
console.log( Object.entries(myObj) )

//OUTPUT
//[ ['name', 'Ritesh kumar'], ['username', '@wordsaysalot'] ]
```


## Add Paddings in String !
String.prototype.padStart() and String.prototype.padEnd() allows you to add padding to the string towards left and right side.

```
const myStr = "Hello"

console.log( myStr.padStart(10) )  //"_________Hello"
console.log( myStr.padEnd(10) )   // "Hello__________"

console.log( myStr.padStart(10, 'tests')) // "testsHello"
console.log( myStr.padEnd(10, 'tests'))   //  "Hellotests"
```

## Trailing commas
Last but not the least :) You can have trailing commas in function parameters.

```
const myfun = (a,b,c,)=> console.log(a,b,c)
myfun(1,2,3)    //OUTPUT: 1 2 3
```

### Conclusion
Over time, JavaScript has grown in popularity, and its community is continuously expanding. I tried to cover some of the key features brought to JS by ES7, but there is always more to learn.<br>
**Thanks for reading the article! I hope you guys found this article useful.**
How to Base64 encode and decode data in Golang
Tags: go, webdev, tutorial, beginners
Published: 2022-03-03 19:05:00

In this post, I'll show you Base64 encoding and decoding in Golang.

Base64 encoding schemes are commonly used when there is a need to encode binary data that needs to be stored and transferred over media that are designed to deal with ASCII.

This is to ensure that the data remain intact without modification during transport.

Read more about the Base64 encoding scheme [here](https://developer.mozilla.org/en-US/docs/Glossary/Base64).

Golang provides built-in support for base64 encoding and decoding with a package `encoding/base64`.

Let's see the code for base64 encoding and decoding in Golang.

Create a new folder called `base64-encode-decode`.

```bash
mkdir base64-encode-decode

cd base64-encode-decode

touch main.go
```

Open the `main.go` and import the necessary packages.

```go
package main

import (
    "encoding/base64"
    "fmt"
)
```

The package `encoding/base64` provides 2 functions for encoding and decoding data in Base64 format.

`EncodeToString` encodes the passed data in Base64 format and returns the encoded data as a string.

```go
func (enc *Encoding) EncodeToString(src []byte) string
```

`DecodeString` decodes the passed data (string) and returns the decoded data as a byte slice.

```go
func (enc *Encoding) DecodeString(s string) ([]byte, error)
```

Let's add the code to encode and print the encoded data.

```go
func main() {
	text := "Hello World - Go!"

	encodedText := base64.StdEncoding.EncodeToString([]byte(text));

	fmt.Printf("Encoded Text: %s\n", encodedText)
}
```

The above code will print the following output:

```go
Encoded Text: SGVsbG8gV29ybGQgLSBHbyE=
```

Now, let's add the code to decode the encoded data and print the decoded data.

```go
decodedText, err := base64.StdEncoding.DecodeString(encodedText);
if err != nil {
    panic(err)
}

fmt.Printf("Decoded Text: %s\n", decodedText)
```

The above code will print the following output:

```
Decoded Text: Hello World - Go!
```

Here is the complete working code.

```go
package main

import (
	"encoding/base64"
	"fmt"
)

func main() {
	text := "Hello World - Go!"

	encodedText := base64.StdEncoding.EncodeToString([]byte(text));

	fmt.Printf("Encoded Text: %s\n", encodedText)

	decodedText, err := base64.StdEncoding.DecodeString(encodedText);
    if err != nil {
        panic(err)
    }

	fmt.Printf("Decoded Text: %s\n", decodedText)
}
```

I hope you found this article insightful.

***

:point_right: My blog [kirandev.com] (https://www.kirandev.com/)

:point_right: Follow me on [Twitter](https://twitter.com/tokirankrishnan)

:point_right: Find me on [Github](https://github.com/devkiran)
Build NFTs on Stellar during 48-hour hackathon
Tags: javascript, blockchain, challenge, opensource
Published: 2022-03-03 18:41:03

Interested in exploring NFTs but don’t know how to code in Solidity and/or want to avoid high gas fees? Join us on March 11-13 and **build innovative and accessible NFT experiences** on [Stellar](https://stellar.org) using [all kinds of programming languages](https://developers.stellar.org/docs/software-and-sdks/) including JavaScript! Looking just to get started? Mint your art into an NFT for less than a dollar and compete against other artists for prizes.

As the main sponsor for this year’s [SXSW’s Finance 3.0 Summit](https://www.sxsw.com/conference/summits/#fintech), the [Stellar Development Foundation](https://stellar.org/foundation) is sponsoring a **[48-hour hybrid hackathon](https://stellarnft.devpost.com)** that challenges experienced and newcomers alike to build a project on Stellar that incorporates the use of NFTs.

$10,000 worth of [XLM](https://stellar.org/lumens) (Stellar's native currency) in prizes will be awarded to the best implementations of the challenges below! Additionally, all submitters will receive a one-of-a-kind NFT badge to prove your participation. Build something cool, try something new, get rewarded, and get your name out there!

> Register today at [stellarnft.devpost.com](https://stellarnft.devpost.com/)! 

To initiate the hackathon and learn how to get started, register [here](https://www.eventbrite.com/e/create-innovative-nfts-on-stellar-with-javascript-tickets-265322937047) for this helpful workshop on how to code royalty payments into NFTs using JavaScript.
Código limpo e refatoração
Published: 2022-03-03 18:19:43

Estou começando a estudar mais sobre o assunto, e percebi que certas coisas que sempre me deixaram desconfortáveis na hora de programar são princípios de Código Limpo / Refatoração.

Uma das minhas maiores dificuldades sempre foi aceitar o TDD, quando começei a programar não existia muito padrão e naquele tempo não era cobrado testes e sim a entrega da tarefa feita e funcionando em produção (arquivo alterado no FTP). E realmente existia muito retrabalho.

Começei a atuar com testes bem timidamente a alguns anos, e quando vou programar algo já começo a sentir falta de teste para garantir que estou no caminho certo e não vou me perder programando horas sem sentido nenhum.

Mas quando tenho que mexer em código antigo para resolver um "Bug" ou melhorar o desempenho. Os testes fazem muita falta, pois sempre há o medo de quebrar algo, é claro que nesse caso o indicado é fazer o teste antes de começar a mexer, porém tem casos que é muito complicado testar, pois uma função faz muitas coisas ou usa código de terceiro de mais.

Mas com os conceitos de "Clean Code" estou  conseguindo resolver essas coias mais facilmente.
Simple Plain Text Diagrams in HTML
Tags: webdev
Published: 2022-03-03 18:16:44

---
canonical_url: https://waylonwalker.com/til/mermaid-html/
published: true
tags:
- webdev
series: til
title: Simple Plain Text Diagrams in HTML
---

Since GitHub started supporting mermaid in their markdown I wanted to take another look at how to implement it on my site, I think it has some very nice opportunities in teaching, documenting, and explaining things.

The docs kinda just jumped right into their mermaid language and really went through that in a lot of depth, and skipped over how to implement it yourself, turns out its pretty simple. You  just write mermaid syntax in a div with a class of mermaid on it!

``` html
<script src='https://unpkg.com/mermaid@8.1.0/dist/mermaid.min.js'></script>
<div class='mermaid'>
graph TD; a --> A A --> B B --> C
</div>
```

>  You  just write mermaid syntax in a div with a class of mermaid on
>  it!

The above gets me this diagram.

![The mermaid diagram as displayed on my site](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mx2wemcisa9andm2jxwu.png)
 
> I cannot add scripts to dev.to, but you can see the real results on [my website](https://waylonwalker.com/til/mermaid-html/)

This feels so quick and easy to start getting some graphs up and running, but does lead to layout shift and extra bytes down the pipe.  The best solution in my opionion would be to forgo the js and ship svg.  That said, this is do dang convenient I will be using it for some things.