teleren/devto huggingface dataset:
5 resources you can use to learn HTML, CSS, and JavaScript by building projects
Tags: webdev, html, javascript, css
Published: 2021-06-03 12:40:07

_If you found value in this thread you will most likely enjoy my tweets too so make sure you follow me on [Twitter](https://twitter.com/VladPasca5)  for more information about web development and how to improve as a developer. This article was first published on my [Blog](https://vladpasca.hashnode.dev/)_

1 -  javascript30.com by @wesbos 

This is the course I'm currently taking and I love it.

It contains 30 projects that will help you learn JavaScript better and faster

You'll get the HTML and CSS file so you can focus only on the JavaScript part if you want to


2 - frontendmentor.io by @frontendmentor 

This is the best platform you can use to practice your HTML, CSS, and JavaScript skills

How it works👇🏻

1.You choose your challenge

2.Then you code the design

3.Lastly you submit your solution so you can get feedback from others


3 - @freeCodeCamp projects

At the end of each section, they give you some projects you can build

5 of them are with HTML and CSS - https://www.freecodecamp.org/learn/responsive-web-design/#responsive-web-design-projects

And another 5 of them are with JavaScript - https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/#javascript-algorithms-and-data-structures-projects


4 - fun-javascript-projects.com by @chrisdixon161 

This is a free series of fun JavaScript, HTML, and CSS projects

What you will build👇🏻

-Tip Calculator

-Running Tracker App

-Guess the Number

-Music Player App

And more

If you already learned the basics, this is perfect for you!

5 - udemy.com/course/50-projects-50-days by @florinpop1705 and @traversymedia 

Sharpen your HTML, CSS, and JavaScript skills by building 50 quick, unique and fun mini-projects

You'll learn👇🏻

-Flexbox, CSS animations, custom properties

-DOM manipulation, events, array methods

And more

### The end

_I hope found this useful and if you did please let me know. If you have any question feel free to DM me on  [Twitter](https://twitter.com/VladPasca5) ._
How to Animate a Waving Hand Emoji in TailwindCSS
Tags: tailwindcss, react, webdev, tutorial
Published: 2021-06-03 12:22:34

I recently spent time polishing the mobile reponsivness for my personal site, [https://alexkates.dev](https://alexkates.dev), and I wanted to add a little animation flair to some empty space next to my Hero introduction. 

## 👋 TL;DR 👋
I made the waving hand emoji actually wave using TailwindCSS. 
You can [find the source code here](https://github.com/alexkates/waving-hand-tailwind).
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tagjk9topwthxbud9747.gif)

## Setup
The majority of the Setup is taken [from the TailwindCSS setup guide](https://tailwindcss.com/docs/guides/create-react-app). The most jarring part is [the use of Craco](https://github.com/gsoft-inc/craco) instead of the standard react-scripts.

### Scaffold CRA, TailwindCSS and Craco
```shell
npx create-react-app waving-hand-tailwind

cd waving-hand-tailwind

npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

npm install @craco/craco
```

### Update package.json
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ucl5titkaemx5kk2ho67.png)

### Configure craco.config.js
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vkp30r2wjvmx53g1h94h.png)

### Configure tailwind.config.js
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gvlkvtehuudnjnqwby1w.png)

### Include TailwindCSS in index.css
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t57lq180mkatxtz1htwd.png)

## Build

### Create the Wave Animation

Let's break down what is happening here.

We are extending the TailwindCSS configuration in order to bake in a new animation.

The keyframes section defines exactly how the animation transforms during the lifetime of the animation. At 0%, rotate 0 degrees; at 15%, rotate 14 degrees, etc.

Finally, the animation definition for `wave` to use the wave keyframes, transform for 1.5s, and loop infinitely.

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

### Update App.js

Lastly, let's add a new span with the hand emoji.

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

### Start Your App
```shell
npm start
```

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

Thanks for reading! If you found this useful feel free to follow [me on twitter](https://twitter.com/thealexkates).
Introduction and Types of DBMS
Tags: database, computerscience
Published: 2021-06-03 12:21:49

**What is data?**
Data is a real type object or entity.

**What is information?**
It is processed, structured, organized and interpreted data

**What is Database?**
Database is a collection of tables, records and key constraints.

**What is DBMS?**
1. DBMS is a software for storing data in a database.
2. DBMS allows to update, modify and create data in the database.
3. DBMS also provides **security and protection** to the database.
4. DBMS acts as a **middle layer** between the database and the user.

**Advantages of DBMS**
1. Minimal of data redundancy(repetition).
2. Easy access to data from database using query language.
3. It facilitates backup and recovery.
4. Better Data Integrity(maintaining consistency).
5. Use of Integrity Constraints(Keys). 
6. It increases consistency and reduces errors

**Disadvantages of DBMS**
1. Complex and Time consuming to design DBMS.
2. Cost of hardware and software is high to run DBMS software.
3. DBMS consumes large amount of Main Memory and disk space to run efficiently.
4. Initial training is required for all users to use DBMS.

**Examples of DBMS**
1. SQL Server
2. Oracle
3. MySQL
4. DB2

**Components of DBMS**
1. Software
2. Hardware
3. Data
4. Procedure
5. Users

**Applications of DBMS**
1. Railway Reservation System
2. Library management system
3. Banking
4. Education sector
5. Credit card transaction
6. Social media sires
7. Finance
8. Online Shopping
9. Human Resource management
10. Manufacturing
11. Telecommunication (eg. TRAI->Telecom Regularity Authority of India)

**Types of DBMS**
1. Hierarchical DBMS (Tree-like structure)
2. Network DBMS (Graph-like structure)
3. Relational DBMS (Related)
4. Object Oriented DBMS


**Hierarchical DBMS** - It is a system in which the data elements have a **one to many relationship (1 : N)**.
This DBMS organizes data in a tree-like structure, similar to a folder structure in your computer system.

**Network DBMS** - It is a system in which the data elements have a **one to one relationship (1 : 1)** or **many to many relationship (N : N)**.
This DBMS also has a hierarchical structure, but it organizes data in a graph-like structure.
This DBMS is the most widely used database system before the introduction of relational DBMS (RDBMS).

**Relational DBMS**
1) This DBMS was introduced by **E.F Codd** in **1970**.
2) In this DBMS, every data item of a table is related to every other data item in another table **(OR)** Every table is linked (logically) with every other table.
3) Example : SQL Server, MySQL, Oracle

**Object-Oriented DBMS** - Every data is stored in the form of objects.Inheritance, Encapsulation and other properties of Objects can also be achieved. 

If you read so far....
Thank You!
I'll see your beautiful face in the next article!
[PT-BR] Entenda de uma vez por todas o que são Game Engines
Tags: showdev, braziliandevs, gamedev, beginners
Published: 2021-06-03 12:21:19


**O Que São Game Engines?**

Game Engines são softwares ou um conjunto de bibliotecas capazes de unir todos as ferramentas necessárias para a criação de um jogo em tempo real. As game engines geralmente têm um motor gráfico para renderizar gráficos 2D ou 3D, um motor físico para detectar colisões e fazer animações, bem como suporte para som, inteligência artificial, gerenciamento de arquivos e programação.

_Okay, agora já entendemos o que são game engines mas como escolher o software perfeito para o meu jogo?_

**Características importantes que você deve observar ao escolher uma engine:**

* Linguagem de Programação

Algumas engines utilizam uma linguagem de programação própria, outras utilizam linguagens existentes como C#, C++, Java, JavaScript, etc. Existem também engines que não necessitam de programação.

* Nível de aprendizagem

Existem engines mais simples voltadas para desenvolvedores novatos, enquanto outras, mais complexas, atendem aos grandes estúdios e desenvolvedores com mais experiência.

* Recursos

Algumas engines permitem apenas a criação de jogos 2D, outras não oferecem tratamento de física, ou exportam apenas para uma plataforma. As mais completas fornecem todas as funções necessárias e exportam para qualquer plataforma.

* Custo-benefício

Os valores de licença vão desde as gratuitas até as que custam vários milhares de dólares.

**Engines Populares Atualmente**

![engines](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/358pep4lp8umzo65835s.png)

Caso queira realizar um projeto comigo (ou até mesmo bater papo), não hesite em me enviar uma mensagem, acesse o link das minhas redes sociais abaixo: ⤵️

[Instagram](instagram.com/celycodes)
[Twitter](twitter.com/ceIenny)
[GitHub](https://github.com/celenny)
[LinkedIn](https://www.linkedin.com/in/celenny)
Fireact v2.1 release, the open-source project built on React + Firebase + Stripe
Tags: react, saas, firebase, opensource
Published: 2021-06-03 12:14:04

I have released a new version of **Fireact**, the version 2.1.0.

If you haven't heard of Fireact, it's an open source project for building SaaS web applications. It's built on React, Firebase and Stripe. It comes with out-of-the-box features that includes:

- Single-sign-on supporting Google, Facebook, Microsoft and a wild range of sign-in methods.
- Stripe integration to manage subscription accounts and payments.
- Supporting multiple subscription accounts per user
- User permission management in subscription accounts
- User permission framework for the development of your SaaS functionalities

Here is an introduction article of the project https://dev.to/chaoming/react-firebase-stripe-fireact-the-open-source-project-for-your-next-saas-product-1b84

Here is project Github URL: https://github.com/chaoming/fireact

## What's new in version 2.1.0

The new version included a new feature to support tax rates for implementing sales tax, GST and VAT for subscriptions based on the country and state the users are in.

As a developer, you don't need to worry about the complexity of the subscription payments and taxes as the project will take care of them. All you need to do is to configure the tax rates in Stripe and Firestore database.

### Adding a tax rate in Stripe

You can add a tax rate in Stripe UI under the **Products** menu. Once a tax rate is added, there is tax rate ID generated by Stripe.

### Adding a tax rate in Firebase

Create a new collection called “taxes” in Firestore, and use the Stripe tax rate ID as the document ID for each tax rate document in Firestore.

Below is the JSON object of the Australia GST tax rate in Firestore:

```
{
    "applicable": [
        "AU"
    ],
    "rate": 10
}
```

Below is the JSON object of the California Sales Tax rate in Firestore:

```
{
    "applicable": [
        "US:CA"
    ],
    "rate": 7.25
}
```

Each tax can be applied to multiple countries or states. For country wide tax, put in the 2-character country code in the `applicable` array. For state specific tax, put in the 2-character country code and state code with a colon as separator in the `applicable` array.

You can find all the available country code and state code in the `/src/inc/country.json` file.
Day 15/30 : Neumorphic Login Form Design using HTML and CSS
Tags: html, css, webdev, tutorial
Published: 2021-06-03 12:13:03

Welcome to Day 15 of this [Challenge](https://dev.to/somanathgoudar/30dayschallenge-30-days-extreme-html-css-challenge-50k1). This is what I created today. 

**➜ Here is the Demo :**
![Neumorphic Login Form Design](https://1.bp.blogspot.com/-LfzcisMFxlY/YKipHhL_AFI/AAAAAAAAAFQ/uubvCyhyI-wJC7L2Smt93SmLN4Kax-WvwCLcBGAsYHQ/s600/15.gif)

**➜ Video Tutorial :**

{% youtube 8oxFH0GpiAQ %}
**➜ Source Code :**
https://www.futurecodersweb.com/2021/06/neumorphic-login-form-design-using-html.html

**➜ Instagram Post and Reel for Day 15 :**
[See Post and Reel](https://www.instagram.com/future_coderss/)

------------------------------------------------------------------

Hey, If You don't know what is happening here. Don't Worry, I am doing a crazy challenge 😅. Read More about it from the post below.

{% link https://dev.to/somanathgoudar/30dayschallenge-30-days-extreme-html-css-challenge-50k1 %}

**Support Me :**
👉 Buy me a Coffee: https://www.buymeacoffee.com/somanathgoudar
👉 [Follow Me on Instagram](https://www.instagram.com/somanath_goudar/)
👉 [Follow Future Coders on Instagram](https://www.instagram.com/future_coderss/)
👉 [Subscribe to My Main Channel](https://www.youtube.com/channel/UC_nTrhTr5fnBGjOxnkPUmmA)
👉 [Subscribe to Channel Created for this Challenge](https://www.youtube.com/channel/UCzGSyMOf2jPt1MkNBB3SJ3g)

------------------------------------------------------------------
How to bring buttons to the right hand side
Published: 2021-06-03 12:11:43

This is my current css, if i remove width: 100%, the buttons will come to right side. how do i overcome this.
element.style {
    display: flex;
    border-bottom: 1px #D5DEE3 solid;
    float: right !important;
    width: 100%;
    clear: both !important;
    overflow: visible;
}
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ad70rsm4q4bqytaq0mkc.png)
JavaScript Interview Question #45: Сurrency formatting in JS
Tags: javascript, beginners, codenewbie, webdev
Published: 2021-06-03 12:07:31

![javascript interview question #45](https://learn.coderslang.com/js-test-45.png)

How to format a string into a local currency in JavaScript? What’s the output?

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

In the first line, we create a constant `price` of a type `BigInt`. This type is often used in finance as it can safely store numbers above the `Number.MAX_SAFE_INTEGER`.

Then, we try to format the number `99n` into a local currency using the function `toLocaleString`.

To make sure the formatting goes well, we need to pass two arguments into `toLocaleString`:

- locale, for example, `en-US`, — defines the output format
- object with the formatting options

One of the formatting options, could be `style: 'currency'`. If you specify this option, then the number will be formatted as a currency of a specific region:

 ```javascript
console.log(99n.toLocaleString('en-US', { style: 'currency', currency: 'USD' }));
console.log(49n.toLocaleString('de-DE', { style: 'currency', currency: 'EUR' }));
console.log(19n.toLocaleString('en-IN', { style: 'currency', currency: 'INR' }));
 ```

These numbers are formatted differently:

```
$99.00
49,00 €
₹19.00
```

But, if you look attentively into the original code snippet, you’ll notice, that the options don’t have the `currency` field. Without it, the formatting doesn’t make sense and won’t work.

The error will be thrown and the conversion from `BigInt` to a local currency string won't happen.

---

**ANSWER**: An error `TypeError: Currency code is required with currency style.` will be logged to the console.

Get my [free e-book](https://learn.coderslang.com/free-ebooks/) to prepare for the technical interview or start to [Learn Full-Stack JavaScript](https://js.coderslang.com)
Daily Developer Jokes - Thursday, Jun 3, 2021
Tags: jokes, dailydeveloperjokes
Published: 2021-06-03 12:00:27

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

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

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

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

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

<!-- 
Joke text:
___Q:___ What do you call a busy waiter?

___A:___ A server.
 -->
Tech-oriented job boards with quality offers and salaray ranges disclosed?
Tags: react, tech, jobs, career
Published: 2021-06-03 11:53:47

---
title: Tech-oriented job boards with quality offers and salaray ranges disclosed?
published: true
description: 
tags: react, tech, jobs, career
---

So as I’m looking for new opportunities that could be remote too, I want to look at offers in other countries, particularly those considered a very high income and with good working conditions (Norway, probably? UK? Switzerland?).

Does anyone know a good job board - can be country-specific - with quality offers and salary ranges disclosed?

If you just go google you will only find mainstream websites where you won't find anything interesting, not to mention with salary range included.

Here are two good examples (I'm not affiliated) but seems they are mostly oriented to Polish market.

https://nofluffjobs.com

https://justjoin.it
How to design a logo for your startup with the help of an artificial intelligence
Tags: logo, design, ai
Published: 2021-06-03 11:42:52

---
title: How to design a logo for your startup with the help of an artificial intelligence
published: true
description: Making a Product: Transcripto, ep. 2
tags: logo, design, ai
cover_image: https://assets.mkdev.me/posts/covers/000/000/012/original/mkdev_article.png
---
'Making a Product: Transcripto' is an mkdev.originals web series that will see a small team of two making a working product step by step, from conception to designing and coding to the release! Join Kirill and Leo on the journey of creation of TRANSCRIPTO, a small but useful service for transcribing audio into text.

In ep. 2, while Kirill is busy writing the first lines of code, Leo comes up with reasons not to do his part of the work and delegates the creation of the logo to artificial intelligence:

{% youtube H9MXayQ3wP0 %}

***

* [Episodes 0 & 1](https://dev.to/mkdev/the-road-to-mvp-planning-first-steps-and-brainstorming-the-product-features-in-miro-kb9): Introduction & The Road To MVP.
* [Episode 2](https://dev.to/mkdev/how-to-design-a-logo-for-your-startup-with-the-help-of-an-artificial-intelligence-40l5): How to design a logo with the help of an AI.
* [Episode 3](https://dev.to/mkdev/how-to-build-a-transcription-service-prototype-in-90-minutes-with-ruby-on-rails-and-aws-3884): How to build a service prototype in 90 minutes.
* [Episode 4](https://dev.to/mkdev/making-website-design-for-a-transcription-service-in-2-days-3m4): Making website design in 2 days.
* [Episode 5](https://dev.to/mkdev/the-impostor-syndrome-episode-adding-features-with-ruby-on-rails-and-having-fun-with-figma-and-css-2f4m): The Impostor Syndrome.
* [Episode 6](https://dev.to/mkdev/how-to-calculate-aws-stripe-costs-define-the-price-for-your-product-and-make-a-profit-on-the-way-1f8d): How to calculate AWS & Stripe costs.
* [Episode 7](https://dev.to/mkdev/is-there-a-place-for-a-small-startup-launch-without-a-big-promotional-budget-202n): Startup Launch.
* [Episode 8](https://dev.to/mkdev/aws-copilot-and-another-6-ways-to-easily-deploy-apps-to-aws-1njb): AWS Copilot.
* [Episode 9](https://dev.to/mkdev/you-ve-launched-a-new-product-now-what-4dkm): Now what?
1-based vs 0-based array indexing
Published: 2021-06-03 11:39:54

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bh14byhpv55zhv4ycpl8.png)
How many 0-based indexing languages do you know? C,C++,C#….. I’m sure you can name a lot of languages which offer 0-based indexing.
Now if I rephrase the question and ask the same, How many 1-based indexing languages do you know?. I’m sure that you can’t name a lot of them.

>“​ FORTRAN arrays are 1-primarily based in contrast to many other programming languages..​ ”

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

**There are relative merits between 0-based and 1-based indexing of arrays​.** 

1-based indexing is actual indexing like in arithmetic.
0-based “indexing” isn’t indexing in any respect however pointer arithmetic.

1-based is intuitive and saves your intellectual ability.
0-based indexing is one in every of many mistakes of programming.

For any experienced developer, 0-based programming must not be an issue where as for a novice programmer 0-based indexing might be a big issue.

People have different opinion on which type of indexing is better.
For instance Dijkstra in his article “Why numbering need to start at 0“, argues zero ≤ i < N is a “nicer” variety than 1 ≤ i < N+1 and doesn’t actually care for 1 ≤ i ≤ N. This certainly doesn’t make an awful lot feel — there are not any aesthetic traits associated with conditional statements.
People’s Opinion?
[Link](​https://discourse.julialang.org/t/whats-the-big-deal-0-vs-1-based-indexing/1102/5​)

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ffm9rx79ouqnxryi1mgp.png)
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gru4c30qc822tq3i3ofv.png)
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5ic2es3c7z0f4qj9ujj5.png)
 
# Conclusion
So you must be wondering which one is better?
Well, some people like 0-based indexing while others like 1-based indexing. There might not be a right answer to this question.
Both types of indexing are done to get the same outputs regardless of the type of indexing.