teleren/devto huggingface dataset:
Which UI Framework Should You Use in Your Next Project?
Tags: javascript, frontend, react, vue
Published: 2021-03-19 23:33:38

When creating a new front-end project, the question of choosing which framework to use always come to mind. Should I choose React or Vue.js? What about Angular? Is it still a good idea to use Vanilla JavaScript?

If the back-end does most of the business logic and you’ll make just a couple of small DOM manipulations, then you’re just fine going vanilla. If the front-end is simple enough, there’s no need to add extra bloat to your project.

But if the DOM changes become more complicated, Vanilla code can easily become a hot mess. When the front-end handles the business logic, then you need to use a UI framework with a state management pattern or library.

React is the absolute king of UI frameworks and in most cases, you can’t go wrong with it. But in most cases, React needs a build toolchain in order to work. That’s particularly true for its JSX syntax.

This is just fine for large applications, but if your project is small, it could be overkill.

And here’s when Vue.js enters the chat. This is also a UI framework and you can do the same things as React, but you don’t need a toolchain to use it. A simple `<script>` tag is more than enough to add Vue.js to your new project.

Vue.js scales well, and you can keep using it as your project grows larger.

The drawback is that, as Vue.js is not as popular as React, there are fewer libraries that work with it. Thankfully, the Vue.js team also provides libraries for URL routing (Vue Router) and state management (Vuex).

Angular is different from React and Vue.js because it does more than just UI. It’s a complete, very opinionated framework and it’s meant for large single-page applications. It also has a steeper learning curve than React.

Angular relies on TypeScript, the superset of JavaScript that adds strict type checking to the language. Definitely, it’s for big projects.
Add Robots.txt to your Django Project
Tags: django, tutorial
Published: 2021-03-19 23:05:56

1) Create a robots.txt file in the templates > app folder
```
User-Agent: [name of search engine crawler]
Disallow: [disallowed URL]
Disallow: [disallowed URL]
Sitemap: https://domain.com/sitemap.xml
```

2) Specify the User-Agent (i.e. Googlebot, Binngbot, Slurp)
Use an * to specify all user agents.
```
User-Agent: *
```

3) Disallow URLs or directories
```
User-Agent: *
Disallow: /page1
Disallow: /directory/
```

4) Allow URLs
```
User-Agent: *
Disallow: /directory/
Allow: /directory/page
```

5) Add the sitemap
```
User-Agent: *
Disallow: /directory/
Disallow: /page1
Disallow: /page2
Sitemap: https://domain.com/sitemap.xml
```

6) Add the robots.txt to the urls.py
```python
from django.urls import path
from . import views
from django.contrib.sitemaps.views import sitemap
from .sitemaps import ArticleSitemap
from django.views.generic.base import TemplateView #import TemplateView
app_name = "main"
sitemaps = {
    'blog':ArticleSitemap
}
urlpatterns = [
    path("", views.homepage, name="homepage"),
    path('sitemap.xml', sitemap, {'sitemaps': sitemaps}, name='django.contrib.sitemaps.views.sitemap'),
    path("robots.txt",TemplateView.as_view(template_name="main/robots.txt", content_type="text/plain")),  #add the robots.txt file
]
```

[Detailed Tutorial](https://www.ordinarycoders.com/blog/article/robots-text-file-django)
Diagrams for documentation
Tags: docs, diagrams, excalidraw
Published: 2021-03-19 22:49:42

---
title: Diagrams for documentation
published: true
description: Use Excalidraw for your documentation diagrams and save the link to update it in the future.
tags: docs, diagrams, excalidraw
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rqrealvd85pr3fy6fskt.png
canonical_url: https://www.dropseed.io/process/diagrams-for-documentation/
---

Simple flowcharts or drawings are a good way to explain concepts without a ton of words.

Technical documentation is a lot more interesting (and helpful) when you mix in some visuals.

One of my favorite ways to do this is to use [Excalidraw](https://excalidraw.com/).
Excalidraw is an [open-source](https://github.com/excalidraw/excalidraw) whiteboard that strikes a balance between hand-drawn and professional.

- No login required
- Limited fonts and colors (a good thing!)
- Arrows automatically connect to other elements
- Works pretty well on iPad
- Drawings can be saved and shared with a link

I used to draw these kinds of things on my iPad, but my handwriting sucks and there aren't very clean ways to save and revise drawings in the future, especially for someone besides myself. Figma is another option here, but for simple diagrams that often gives me too many options which pull me into "high-fidelity" mode and then I get stuck.

The limitations of Excalidraw are a feature, not a bug.

Here's an example that I used on [dropseed/deps](https://github.com/dropseed/deps):

![Excalidraw for documentation example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rqrealvd85pr3fy6fskt.png)

And here it is being used on the [README](https://github.com/dropseed/deps/blob/master/README.md):

![dropseed/deps README with Excalidraw](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vy74p01kpnhlnvok2hpz.png)

The best part? There's a link to the drawing itself, commented out in the markdown:

```md
<!-- Edit in Excalidraw: https://excalidraw.com/#json=6195990008692736,unm4UYeUzdmbXTk_xcvIdQ -->
![deps overview flowchart](https://user-images.githubusercontent.com/649496/111809843-675b1000-88a3-11eb-8b5c-d85d71cb5a25.png)
```

Anybody can open that [Excalidraw link](https://excalidraw.com/#json=6195990008692736,unm4UYeUzdmbXTk_xcvIdQ) (including me), edit the drawing and contribute a new version to the README. No complicated software or design tools, and limited choices in fonts, colors, and style.
Devlog #0  Project Roman...
Tags: gamedev, csharp, epic
Published: 2021-03-19 21:46:16

Hello, I'm Roman, and I've been learning C# latley. So I decided to do a game. Currently, this game doesn't have a name, but there is an idea. 

ᴛʜᴇ ɪᴅᴇᴀ: my idea is pretty simple. It's a "Papers, Please" kind of game where you basically have to hire people regarding what society likes. For example, if the society starts liking 5 11' guys who like chocolate ice cream with a cherry on top, then you have to check on the person, likes, height, etc. Then you hire him. Basically like when on "Papers, Please" you have to check on the person's country, height, name, and everything. Well, I'm gonna leave you, people.

Have a heavenly day.
Day 333 : Cloud 10
Tags: hiphop, code, coding, lifelongdev
Published: 2021-03-19 21:42:02

_liner notes_:
- Professional : Pretty chill and productive day. Had a team meeting. Pushed some Web Components I made for our client SDK to our community GitHub repo. Also, published them to npm so that we can use them from a Content Delivery Network (CDN). When I worked on the Web Components, I published them to my personal work account. Today, I pushed them to the company's account. Then I changed the CDN links to the Web Components to the company's version in a demo I created to showcase them, and they still worked. Awesome. I was on cloud 10. haha

- Personal : Worked on the dashboard section of my side project last night. Got it so the interface changes depending on the role of the user logged in. I'm thinking there will be things I can't really create until the project is live. This way I can hopefully finish quicker and get this launched. Also thought about how I want to launch the project in the beginning. Also went through some tracks for the radio show.

![Huge mountains towering over a small seaside town in Hallstatt, Austria](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7uprvqty55ddbhen0mna.jpg)

So I downloaded the first episode "Falcon and Winter Soldier" from Disney+ to watch later tonight. Also, uploaded a bunch of old tracks to the cloud. I'm really taking advantage of the WiFi here. haha. Also downloading some last minute tracks to check out for tomorrow's radio show. My plan is to put together the tracks, watch "Falcon and Winter Soldier" while I eat dinner and then end the night working on my side project. My goal is to get files uploaded to storage and writing the location to the database.

Have a great night and weekend!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube e_iAmR43Qos %}
Error: Invalid hook call.
Published: 2021-03-19 21:39:26

Hello everyone! 
I am new to the community and happy to be a member as well.

Maybe my issue may have been handled already, yet to find it. I am getting the error below and I do not know how to solve it. I am new to react too.

I have followed the solutions here but still could not get it done. Please I need help. Thank you.
https://github.com/facebook/react/issues/13991

I did not know how to apply these
:
https://github.com/yarnpkg/rfcs/blob/master/implemented/0000-selective-versions-resolutions.md

https://classic.yarnpkg.com/en/docs/selective-version-resolutions/

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
Do you know the Fluent Interface Pattern?
Published: 2021-03-19 21:25:44

# Like a chain
## Use this type of pattern, allows the user call methods one by one in chain. Its very helpfull when you have a lot of methods inside the class.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ffurmxqjttm9n5mhwasy.png)


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pqcel3k38r60kvkp25n5.png)
Asking for advice. Switching from Mechanical engineering to Web Development.
Published: 2021-03-19 21:20:32

Hello Dev Community,

I'm Mahmoud Abdelkarem, a Mechanical Engineer on my way to switching careers to Frontend Web Development.

I wanted to make a post here asking for tips on how to efficiently make that jump, and I'd also love to hear your personal experience as well if you made a similar decision.

A short bit about me:

I started learning HTML, CSS, and JavaScript. And started building small projects with what I picked up from different resources.

Although it's taking a lot of effort so far, I'm enjoying it, especially when I see the results.

I was 19 years old the first time I tried to get into programming, I took a C language course, but it was difficult for me for some reason.

Maybe the language is too difficult for beginners or maybe because the instructor kept repeating the sentence: "as we know" and we didn't actually know.

Anyway, I gave up then and decided to continue with my study. First-year at college, I studied python, and it was so fun using Analytical thinking and logical chart. Although I understood the basics and enjoyed studying it, as a mechanical engineering student, I got too far from programming.

Through college years, I couldn't get back and try one more time in the field where I found my passion; Software Development. And after graduation, I started a career as a mechanical engineer.

I quickly realized that this is not the right career for me and that I would never enjoy working in it as much as I did with programming, so I started to get back to what I enjoyed doing.

I started learning HTML, and I was amused when I started using it to build a webpage. Then I started learning CSS, and I found what was messing with "the style" part.

And now, I'm learning JavaScript, and with that, I found what completes the webpage "The functionality"
filter duplicates from arrays
Tags: powershell, cli
Published: 2021-03-19 20:49:57

Hello again, it's been a while. Have several things on my plate, so it's only a short post again. 

If you want to get rid of duplicates in a powershell array you have to pipe the array into a select keyword with a -Unique parameter. 

```powershell
@("1","2", "3", "4", "2", "2", "2", "2", "5") | select -Unique
```

It will give you the following result: 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tq3h9ll3cvtiqpq6qs0l.PNG)
Daftar Sbobet - GOLDENBET88
Published: 2021-03-19 20:19:20

Daftar sbobet bola ini selain sangat menghibur, juga bisa memberikan keuntungan bagi para pemain yang berhasil memenangkannya. Sebab setiap kemenangan yang didapat akan dibayar dalam bentuk uang asli pula. Maka dari itu permainan tersebut kian diminati oleh banyak orang. Nah, untuk bermain kita bergabung bersama salah satu agen yang menyediakan akun login sbobet.

Jika sahabat juga merupakan salah satu penggemar permainan ini, disini saya merekomendasikan kepada sahabat untuk bergabung bersama GOLDENBET88. Sebab situs kami ini sudah terbukti sangat berkualitas baik itu dari segi pelayanan ataupun dari segi produk yang disediakan. Seperti produk permainan **[daftar sbobet](https://sbobet.town/)** yang merupakan situs terbaik dan terbesar di Asia saat ini.

Dalam melakukan pendaftaran akun permainan online sama saja. Dimana pemain dapat melakukan pendaftaran dengan 2 cara mudah yakni melalui layanan chat atau melalui halaman pendaftaran yang sudah disediakan di GOLDENBET88.

Ada beberapa data yang diperlukan dalam pendaftaran akun ini, diantaranya:

• Nama Rekening :
• No Rekening :
• Jenis Bank :
• No Hp / Kontak Wa :
• Email :
• Jenis Permainan :

Setelah mendapatkan akun permainan, sahabat dapat melakukan deposit dengan minimal deposit sebesar Rp 50.000. saja. So, jangan tunggu lama lagi, segera daftarkan akun permainan sahabat sekarang juga dalam memainkan game sbobet bola.
Touchbase with Base64
Published: 2021-03-19 20:18:34

Base64 is a method of representing binary data in an ASCII string format. This is achieved by converting a binary data into 6-bit character representation.

Base64 uses a specific algorithm for encoding which helps to convert the binary data into the desired output. This is a reversible algorithm, and we can retrieve the original data from a Base64 string by back-pedalling *(reversing the algorithm)*.

Let’s have a quick run-through on how this algorithm works. Just for fun we will convert the word ***“Base.64”*** into a Base64 string.

1. The very first thing that we would want to do is split the word into separate characters. So we have 7 characters n our selected word:
 * B
 * a
 * s
 * e
 * .
 * 6
 * 4

2. Now let’s convert each of the above into their corresponding binary values, you can also use the [Base64 Index Table](https://en.wikipedia.org/wiki/Base64#Base64_table) if you want:
 * 01000010
 * 01100001
 * 01110011
 * 01100101
 * 00101110
 * 00110110
 * 00110100

3. Now we need to form a single string out of the above by concatenating them one after the other. The resulting string will be as following:

    | 01000010011000010111001101100101001011100011011000110100 |
    | :------------------------------------------------------: |

4. Once we have done this, we have to carefully break it again so that each part has 6 characters. Something like this:
 * 010000
 * 100110
 * 000101
 * 110011
 * 011001
 * 010010
 * 111000
 * 110110
 * 001101
 * 000000

    *(Note: If your last part is less than 6 characters, append it with zeros. That'll do fine. Here we added 4 zeros “0000” to make it 6-bit bytes.)*

5. Now each part is of 6-bit bytes, prepend with “00”  and convert each part to 8-bit bytes:
 * 00010000
 * 00100110
 * 00000101
 * 00110011
 * 00011001
 * 00010010
 * 00111000
 * 00110110
 * 00001101
 * 00000000

6. Now it’s time to convert them to their corresponding decimal values:
 * 16
 * 38
 * 5
 * 51
 * 25
 * 18
 * 56
 * 54
 * 13
 * 0

7. The above list of integers you have received are called Base64 indices. You can map the Base64 indices to the [Base64 Character Table](https://en.wikipedia.org/wiki/Base64#Base64_table) and form your final Base64 string. So what are we waiting for? Let’s do that:
 * Q
 * m
 * F
 * z
 * Z
 * S
 * 4
 * 2
 * N
 * A

8. Now, do you remember we added 4 zeros to the last part in the 4th step? So for every two zeros we will append 1 padding character “=”. Voila! Now you have your final Base64 string for the word “Base64”.

|                         QmFzZS42NA==                     |
| :--------------------------------------------------------: |

Cool! Don’t you think? Now to decode a Base64 string you have to perform the same steps but backwards, if you do that correctly you will reach the actual string. I would suggest that you give it a try!

I'll just keep the Wiki Liquid tag for the Base64 Index Table, it might help:
{% wikipedia https://en.wikipedia.org/wiki/Base64#Base64_table %}
Geek Week Local Experience
Published: 2021-03-19 20:06:21

Geek Week Local

A great initiative by GFG Vit Bhopal Chapter. We were asked to be a part of the guild and then solve challenges.

The first thing of joining a guild was fun when we searched and interacted with people to join a team. It was really fun to do that and pitch others and persuade them to join the guild.

Then the tasks began and the first day was light. But then it was escalated. Day 2 brought some tougher and interesting challenges
Throughout everyday we learnt something new and improves upon ourselves.

I learnt a lot. Learnt to create Portfolio, Github , Bootsrap, firebase and what not.

So its a hell of a experience till now and expecting more such events by GFG.
#geekweeklocal
Start of an App
Tags: projectupdate, app, flutter, podcast
Published: 2021-03-19 20:54:51

---
title: Start of an App
published: true
date: 2021-03-19 20:02:12 UTC
tags: ProjectUpdate, app, flutter, podcast
canonical_url: http://justwriteapps.com/start-of-an-app/
series: Wrenchly
---

{% spotify spotify:episode:2KrtFauyyR4nr0Oq6yBTF0 %}

I'm sitting in my driveway changing out the rear brake pads of my Forester. All my tools are laid out, along with my repair manual and phone. The repair manual to lookup specifications and the phone to search for something if I get stuck.

I get the pads changed and I start to tighten the bolt holding the caliper to it's support. I looked at the torque specification a dozen times before I started this project. Now I have to open the manual up and flip through it because I just can't remember, and I don't want to get it wrong.

That was the moment when I realized, I should be able to get this from my phone. I keep all of the part numbers and fluid capacities in an app called aCar, but I can't store torque specifications, and I can't ask a digital assistant what those values are. Just that week I had listened to a talk about Voice experience design and the speaker mentioned called the "raw chicken" moment where a user was in their kitchen cooking, and they're holding raw chicken and they need to look up something.

This was my "raw chicken" moment, except it was grease. I decided to build an app designed for DIY mechanics. It can store part numbers, fluid types and volumes, and torque specifications that you can access via Google Assistant or Alexa. Also it will track fill ups and send reminders when services are about due.

I decided to call this new app Wrenchly--because naming things is hard and the domain [wrenchly.app](https://wrenchly.app) was available and cheap. So far I've finished fuel tracking, vehicle parts and specifications, all synchronized through the cloud.

 ![](https://justwriteapps.com/content/images/2021/03/history.png)

I'll be posting updates here as progress is made, but I hope to have it publicly available by the end of April. If you have any feature suggestions, let me know in the comments section.
Starting a Markdown Blog
Tags: markdown, slides
Published: 2021-03-19 19:58:18

Okay, this is a **start**. Based on this [Scrimba course](https://scrimba.com/learn/markdownblog).

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/or8k2apzde2yf8b9o4bx.jpg "Dolly - shows when hovering over image")

I don't know how to add an emoji.

---

I reject ~~*this*~~!

---

>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas **semper**. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. 

1. Quisque sit amet est et sapien ullamcorper pharetra.
1. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.
1. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.

## I wonder if code blocks could be used for poetry

```lang-en
This is
    a poem
 indented with
   blanks.
```

<!--
Send me email: <zabouti+devto@gmail.com>
-->
9 years on, I still google "javascript for loop"
Tags: honesty, discuss, watercooler
Published: 2021-03-19 19:49:58

---
title: 9 years on, I still google "javascript for loop"
published: true
description: This is a place of honesty, take a moment to admit your not-so-shameful 'shameful secrets' about the reality of working in tech.
tags: honesty, discuss, watercooler
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zlw382mc3wtbm8tl4nse.jpg
---

*cover image by [Libertinus Yomango](https://commons.wikimedia.org/w/index.php?curid=6837281)*

*also despite writing Markdown every day for the last three years, I messed up the link above in v1 of this article*

So, I'll admit it: sometimes I forget basic syntax. I think what gets me is the semicolons inside the parentheses. I feel like they should be commas? I don't know.

The point is that when I write for loops:

```
let str = '';

for (let i = 0; i < 9; i++) {
  str = str + i;
}
```

I always manage to mess up just enough that it's better to grab the syntax from the MDN than it is to write over again.

And really, it feels like a shameful admission but I don't feel embarrassed. H*ck I do stuff like this [on my livestream](twitch.tv/serverlessmom) and I don't think there's any reason that we shouldn't copy and paste basic syntax.

This is a place of honesty, take a moment to admit your not-so-shameful 'shameful secrets' about the reality of working in tech.
First game jam submission
Tags: python, showdev
Published: 2021-03-19 19:26:32

Today is a special day. I just submitted my first ever _completed_ game for my first ever game jam. It was a jam taking place this week on [Replit.com] (replit.com). I know online coding environments aren't the best, but for someone who's using a chromebook with nearly everything restricted, its been the only way for me to code. I just wanted to share this with you all here, and to see if anyof you wanted to take a look at the [other submissions] (https://replit.com/talk/challenge)