teleren/devto huggingface dataset:
First day
Tags: javascript, webdev, css, beginners
Published: 2022-07-13 02:18:52

### Hello!

Hello to everyone in dev.to! 

### Who am i?

My name is Sungwoo Yoo, 19 years old fresh graduate from High School. I am also the CEO and founder of Cusvita Observe, a growing startup focused on improving the welfare of the elderlies. I have no prior experience with programming and development except copy pasting the code from a guidebook that came with the Arduino development kit. Now, I am planning to develop the whole system to create a working prototype. It would mean a lot to know what my startup's product and service is and how it was really designed. I will be sharing my progress and blocks here in dev.to and journal the achievements to even further push myself to strive for more. 


**My Goals are:**

1. Familiarize myself with html, css, and JavaScript.
2. Develop a working Android application
3. Be able to create, improve, and launch a website for my own startup.
4. Learn new things on the way and meet others to give and take help.
5. Log my journey in dev.to as much as possible. 
6. Ask for help and share new things I have learned with the community


I hope to receive honest feedbacks and wise advices from the experienced developers on dev.to! I wish to be able to share the final end result with everyone as the project comes to an end.


Thank you, very much.
 
 
Appreciatively, 
Sungwoo Yoo
Build A REST API With FastAPI, Beanie and MongoDB
Tags: python, fastapi, api, programming
Published: 2022-08-02 13:35:43


This video demonstrates how we can put together a REST API With FastAPI, Beanie, and MongoDB. Based on common Python type-hints, FastAPI is a cutting-edge, quick (high-performance), a web framework for creating APIs using Python. 

Based on Motor and Pydantic, Beanie is an asynchronous Python object-document mapper (ODM) for MongoDB.

We use the combination of these tools to build a simple CRUD API.
{% youtube 0vBluFlNipQ %}
2 Hours 10 JavaScript Projects ! Let's build :)
Tags: 100daysofcode, javascript, codenewbie, programming
Published: 2022-08-02 13:24:26

Hey guys, 
In this video we are going to build **10 JavaScript Projects in 2 Hours**. 
This video will give you a solid foundation of the JavaScript language. So go check that out now ! 

{% youtube KTGfHmyje5A %}



--- 
Support my channel:
💜 Join the Discord community 👨‍👩‍👧‍👦: https://discord.gg/fgbtN2a 
💜 One time donations via PayPal
Thank you! 🙏

---
Follow me on:
👉 My Blog: https://the-nerdy-dev.com
👉 Twitter: https://twitter.com/The_Nerdy_Dev
👉 Instagram: https://instagram.com/thenerdydev
Building In Public: Working with Boundaries
Tags: webdev, react, geojson, map
Published: 2022-08-02 13:10:00

Carta Maps is more than pins on a map – learn about boundaries.

The usual map builder is hyper focused on allowing you to add a single point (latitude and longitude) to the map, some even allow you to add some content around what lives at that point. For many use cases, this is enough functionality but Carta Maps goes beyond the point.

Introducing boundaries was a launch blocker, I was not going to launch without the ability to create unique boundaries based on real data. Carta Maps has boundary information for postal codes, counties and states and on the roadmap is getting neighborhood level information to continue enhancing the platform.

Boundaries can benefit many use cases by showing more than a single point and focusing on an entire area. A service business can show coverage areas by county. A real estate agent can feature specific postal codes where the hottest houses are available. A national company can display all the states they operate in. The use cases are truly endless.

Soon, you will be able to draw your own custom boundaries using everyday design tools like a pencil or paint brush. Fully custom annotations on maps will take Carta Maps to the next level.

Check out [cartamaps.com](https://www.cartamaps.com) and let me know what you think!

Catch you on the flip side!

– Franco Valdes
One tap navigation anywhere - iOS Google Maps Shortcut
Tags: ios, shortcuts
Published: 2022-08-02 13:22:00

- I've recently started using Shortcuts and I'm finding the concept so powerful. 
- I've created shortcuts that let me tap an icon on my home screen and Google Maps pops up with driving directions to that location
- You can download the shortcut [here](https://www.icloud.com/shortcuts/b7d576f0127642d287a7a32f8872936a) and customise it for your own use
- I've done a full writeup on how it works [here](https://www.upsync.dev/2022/08/02/ios-google-maps-shortcut.html)
Day 29 - Assembly
Tags: 100daysofcode, web3, solidity, blockchain
Published: 2022-08-02 13:21:54

{% embed https://github.com/Envoy-VC/30-Days-of-Solidity noreadme %}

This is Day `29` of `30` in Solidity Series
Today I Learned About Assembly in Solidity.

Assembly ( also called assembler language ) refers to any low-level programming language that is converted to machine code using an assembler. Assembler languages are tied to either a physical or a virtual machine, because they implement its instruction set. An instruction tells simply the CPU to do some fundamental task, such as adding two numbers

Examples of processors are the Intel x86 or ARM. Intel x86 has around 1503 machine instructions. They are commonly referred as opcodes.

The Ethereum Virtual Machine (EVM), has also its own instruction set.

> **The EVM contains [141](https://github.com/wolflo/evm-opcodes) opcodes in its instruction set**

Solidity has an option to write an assembly language code inside the smart contract’s source code. With the help of Solidity assembly, we can directly interact with the EVM using the opcodes. Assembly provides more control over some logic which cannot be possible using only solidity, like pointing to the specific memory block. One of the main advantages is that it reduces the cost of the gas used to deploy the contract.

Solidity has two ways to implement the assembly language:

### **Inline Assembly** :

Inline assembly code can be written inside solidity code for more fine-grain control and especially used for enhancing the language via creating new libraries. Inline assembly can be inserted in between solidity statements in a way that EVM can understand. It can also be used when the optimizer is not able to produce efficient code. Solidity becomes easier when features like assembly local variables, functions calls, switch statements, if statements, loops, etc are used.

**Syntax**:

```solidity
assembly{
     // assembly language statements
}
```

Example -

```solidity
// SPDX-License-Identifier: MIT
pragma solidity ^0.8.7;

contract InlineAssembly {
    function add(uint a) public view returns (uint b) {

        // Inline assembly code
        assembly {
            // Creating a new variable 'c'
            // Calculate the sum of 'a+16' with the 'add' opcode
            // assign the value to the 'c'
            let c := add(a, 16)

            // Use 'mstore' opcode to store 'c' in memory
            // at memory address 0x80
            mstore(0x80, c)
            {
                // Creating a new variable
                // Calculate the sum of 'sload(c)+12'
                // means values in variable 'c' with the 'add' opcode
                // assign the value to 'd'
                let d := add(sload(c), 12)

                // assign the value of 'd' to 'b'
                b := d

            // 'd' is deallocated now
            }

            // Calculate the sum of 'b+c' with the 'add' opcode
            // assign the value to 'b'
            b := add(b, c)

            // 'c' is deallocated here
        }
    }
}
```

When we pass `5` as an argument to `add` function we get

```solidity
0:
uint256: b 33
```
𝐖𝐡𝐲 𝐅𝐥𝐮𝐭𝐭𝐞𝐫 𝐟𝐨𝐫 𝐲𝐨𝐮𝐫 𝐬𝐭𝐚𝐫𝐭𝐮𝐩𝐬’ 𝐌𝐕𝐏 ??
Tags: flutter, programming, discuss, career
Published: 2022-08-02 13:11:44

There are many benefits to choosing Flutter for your startup.

**Let’s see some:**

## 1. 𝗙𝗮𝘀𝘁 𝗴𝗼 𝘁𝗼 𝗺𝗮𝗿𝗸𝗲𝘁 𝘁𝗶𝗺𝗲:
Flutter has a very large community of developers, and for this reason, we can find (as well as create) high-quality code libraries ready to implement in your projects.
This, added to the rapidity of Flutter allow us to develop apps, resulting in really fast go-to-market times.
___

## 2. 𝗛𝗶𝗴𝗵 𝗾𝘂𝗮𝗹𝗶𝘁𝘆 𝗰𝗿𝗼𝘀𝘀 𝗽𝗹𝗮𝘁𝗳𝗼𝗿𝗺 𝗮𝗽𝗽 𝗮𝘀 𝗮 𝗿𝗲𝘀𝘂𝗹𝘁:
With a single codebase, you end up with 2 native apps for both Android and iOS with very good performances.

___

## 3. 𝗟𝗲𝘀𝘀 𝗶𝗻𝘃𝗲𝘀𝘁𝗺𝗲𝗻𝘁
Based on the previous point, you can easily understand that with Flutter you are paying once but you are getting literally 2 apps (Android/iOS), which you should have paid twice if you went for native app development.

___

Obviously, every startup is unique and has its best option. But if you need an app, spend less money and go to market fast, let’s take Flutter on the top options!
Live Letter counter
Tags: beginners, career
Published: 2022-08-02 13:09:00

It is a digital world of innovation where everything has the latest necessities. For example, all the documentation has been automized and most of the time you have to write in some restricted word and letter count. For this purpose, you need a quick [letter count ](https://contadorpalavras.com/)and it is very hard to manually count the words, characters, or letters. 
An online letter counter is the best tool that immediately counts the letters in your document without any mistakes. 
A letter counter tool is best for SEO content writers as it helps them to letters and characters in meta titles and meta-descriptions, and tags to maintain their text according to the criteria of Google and other search engines. Regular social media users will find it more beneficial for writing status, descriptions, usernames, and titles. visit here: https://contadorpalavras.com/melhor-contador-de-letra/
I/O redirections on Node.js via Git Bash for Windows (Windows-users oriented)
Tags: programming, bash, git, node
Published: 2022-08-02 13:05:49

NOTE : First of all this live document oriented to Windows users as we consider ourselves using Git bash **for Windows** !

```diff
node.exe --inspect=[127.0.0.1:port] # herein 127.0.0.1 roughly equals to localhost ; also [angle brackets must be omitted , used just to emphasize]
```

[All credits to: [Marco Eckstein & Phu Ngo](https://stackoverflow.com/questions/45112889/bash-node-js-stdin-stdout-redirection-error-not-a-tty/60776006#comment129269528_60776006)]

Question is why we need `.exe` rather than default `node`, is because on Git Windows (let me emphasize – WINDOWS) a `node` command for e.g. `node file_name.js` invokes itself through aliased **winpty** resulting in "side effects (architectural quirks?)" of IO redirections / piping being unrecognized as a part of tty usually resulting in stderr message on terminal such as :

> stdin: is not a tty

...

Much more of practical examples on I/O redirections or piping coming soon on this live document, stay tuned !
Building In Public: Carta Is Live
Tags: saas, webdev, product, launch
Published: 2022-08-02 13:03:00

Say hello to [Carta Maps](https://www.cartamaps.com/), a no code solution to help create and completely customize Google Maps. The general idea of Carta Maps started over 4 years ago, but the execution is very young. As an indie dev, dad of three with a full time job, it was my ambitious goal to take my 4 year old idea and create something spectacular for others to use.

I wrote my first line of code April 19, 2022 and launched a beta version of Carta on Jun 27, 2022. This is definitely just the beginning, there is a long list of features I would like to add and even more functionality to refine. Every time you think of a map, I want you to think of Carta. I’m excited to share the rest of the progress just like I’ve been sharing it so far.

Head over to [product features](https://www.cartamaps.com/features) & [pricing information](https://www.cartamaps.com/pricing) and check out the rest of the site. I am working on documentation and plenty of tutorial videos to help you build the best maps you can. If you have any questions or feedback, feel free to reach out via email or on twitter.


Best,

– Franco Valdes
This Week I Learned - 2022 #Week 31
Tags: git, javascript
Published: 2022-08-02 12:59:00

- TypeScript barrel files and how to reduce bundle size with #webpack ([source](https://twitter.com/joebell_/status/1554108255269699584))

- Git Commit Work In Progess — [gwip](https://towardsdev.com/5-remarkable-git-commands-that-will-boost-your-coding-productivity-e8635b20b4bf)
```bash
alias gwip='git add -A; git rm $(git ls-files --deleted) 2> /dev/null; git commit --no-verify --no-gpg-sign -m "--wip-- [skip ci]"'
```
Use class to write setup, and support vue2 and vue3
Tags: javascript, vue, vueclasssetup
Published: 2022-08-02 12:57:00

## vue-class-setup
Use class to write setup, and support vue2 and vue3    
Only 1.34 KiB after gzip compression

### Install
```bash
npm install vue-class-setup
# or
yarn add vue-class-setup
```

### Usage
```vue
<template>
    <p>{{ count.text }}</p>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { Setup, Hook } from 'vue-class-setup';

@Setup
class Count {
    public value = 0;
    public get text() {
        return String(this.value);
    }
    @Hook('mounted')
    public init() {
        this.value++;
    }
}

export default defineComponent({
    setup() {
        return {
            count: new Count()
        }
    }
})
</script>
```

### Computed
Using the get accessor or `computed` hook, it will be converted to `computed`
```ts
import { Setup, Hook } from 'vue-class-setup';

@Setup
class Count {
    public get time() {
        return Date.now();
    }
    @Hook('computed')
    public getTime() {
        return Date.now();
    }
}
```
### Custom setup
```ts
import { Setup, Hook } from 'vue-class-setup';

@Setup
class Count {
    @Hook('setup')
    public setup() {
        // Your code
    }
}
```
### How to use watch?
Watch parameters are complex, so decorators are not supported, but `setup` hooks are provided
```ts
import { watch } from 'vue';
import { Setup, Hook } from 'vue-class-setup';

@Setup
class Count {
    public value = 0;
    @Hook('setup')
    public setup() {
        watch(() => this.value, (value) => {
            // Your code
        })
    }
}
```

### [github](https://github.com/fmfe/vue-class-setup)
Open source, philosophy, hate & other random words
Tags: opensource, discuss, community
Published: 2022-08-02 12:49:29

Some time ago our team has released our first [open source library](https://github.com/krud-dev/shapeshift/) to the wild. We finished our first production ready version, posted it on Reddit and waited for the open source community to welcome us with open arms. After all, we are investing our own free time to create a great product to help others, and it's all for FREE.

Oh how naive we were... Of course some truly appreciated our contribution, yet others didn't understand what we are doing, and the crème de la crème just wanted to hate.

I think that in today's world it's hard to put your work out there. When you post your code you feel very vulnerable, a bit naked. It's like your soul is out there for everyone to see and criticize. And don't get me wrong, I think criticism is very important and it's one of the best ways to learn and grow.

On the other hand, it's very easy to completely dismiss someone else's work. It takes almost no time and costs nothing. Also I'm pretty sure some people enjoy it very much.

So when you meet someone like that, how should you react? The first instinct is to ignore or "yell" back, dismiss all criticism completely and move forward. I decided to do otherwise, breathe and count from 1 to 10, slowly, like my mom used to say, read it again, and think where it is coming from.

For example, in one of these scenarios a comment ended with "I would stay away from it" because of a disagreement with the project's coding style. Spoiler: after a few back and forths the conversation ended with "Good luck though!". How about that?

What is crazy and beautiful about programming. We think it is objective, that it is exact science and there is right and wrong. But the truth is, it is also art, and there is a huge subjective component to it.

What I realized is just that my coding philosophy is different. Even though we are still in a disagreement, it was fascinating to learn that there are completely different points of view for doing the exact same thing, and I learned a thing or two in the process.

What is the point of all of this? I think open source is amazing. For some reason we have crazy drive to develop stuff for free just to share it with the world and help others. Nonetheless, I think there is a lot of room for improvement in our discussions and critique. Maybe I'm naive again, however I still believe the community, our community can do better and hope for better communication between us all (and hopefully over a beer).

If you would like to check out our [open source library](https://github.com/krud-dev/shapeshift/) and leave feedback we would appreciate it greatly.
Create Personal Portfolio Using Github Api with Blog
Published: 2022-08-02 12:48:43

For a developer, a personal portfolio plays an important role to showcase his/her works, reach to potential clients or land a job. But making it requires a tremendous amount of works and time. Also maintaining it manually with the latest project is a pain.

What if you could create your portfolio in 5 minutes just by providing your Github username and even host it without any cost? Do you want to display your skills, job history, education history, or even dev.to posts to your website? Then you are in right place.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o05atub29jchkijdeusy.png)
Introducing GitProfile to kickstart your personal portfolio with Github Api and blog.
I made yet another habit tracker in flutter.
Tags: flutter, beginners, productivity, opensource
Published: 2022-08-02 12:47:25

Hey guys!
I have been learning and exploring flutter for about a month, And I made an app from it.

## Koduko

Its an Habit tracker made using flutter.

> _Yes, its a weird name._ 

## What does it do?
 
Well, it keeps track of your daily habits like GYM or working on a hackathon project. it reminds you and also shows stats, so that you can stay motivated. 

## is it any different from other habit trackers?

To be honest, No. It is not that different, it may have unique design or some extra feature but overall its just another habit tracker. Also as it is first flutter project, Can't complain😎.

## Features

- it has notification support.
- it has a Material 3 UI design.
- has no ads.
- dark mode 🌑.

### Links

- The app link : [App](https://github.com/Mazahir26/koduko/releases)
- Source Code : [GitHub](https://github.com/Mazahir26/koduko)
- Developer's GitHub : [GitHub](https://github.com/Mazahir26)

## Thank You

I hope you enjoyed my post. You can check out the project and tell me how you feel about it. and also found a bug? Raise an issue😁.

See you around👋.
Link: Management Maturity Model for Performance
Tags: performance, javascript, management
Published: 2022-08-02 12:44:36

---
title: Link: Management Maturity Model for Performance
published: true
description: 
tags: performance,javascript,management
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
---

Alex Russell, a pretty famous web guy who has put a lot of work into web standards, creating one of the early web component frameworks, and other contributions wrote this [Management Maturity Model for Performance](https://infrequently.org/2022/05/performance-management-maturity/). I can't relate to any of this, and I was quite confused. In talking to her majesty (the wife, she does web dev too in a Design role), we both remember early days performance was a huge deal, even before mobile. Now? No one seems to care.


That's why I was so surprised when I read these Dev Evangelists and others have this growing anti-SPA sentiment because they're concerned about perf, and not to "save the under powered mobile users", rather, to hit biz metrics to _make_ money vs. lose it. I chalked it up to "Oh, they must be ecommerce devs, I don't do that", but it's clear there are many others who have metrics where speed is a huge deal. I've done rewrites where the rewrite was slower, but it wasn't the UI's fault, always API. Still, I have a lot to learn. This post can help.

https://infrequently.org/2022/05/performance-management-maturity/
SQL Basics
Published: 2022-07-05 02:18:33

## What is SQL?
To learn the basics of SQL, we should probably first take a look at what SQL is and what it is used for.

SQL stands for Structured Query Language and can be pronounced by the letter S-Q-L or like "sequel". This language is used to pull (query) data from databases. It can also be used to create new tables or update existing ones. There are other uses when you become more familiar with it. If you're just starting out, it might be easiest to learn how to pull from tables first. It will make it easier to understand what makes a good table before jumping in.

It's also good to know that there are different versions of the SQL language. However, they all use the basic commands we'll be talking about.

To get started, you'll need a database with tables to pull from. I would recommend starting with [W3Schools](https://www.w3schools.com/sql/default.asp) since they have starter tables and exercises for you to practice. 

## The Basics
The very basics of SQL include just 3 command words.
`SELECT`
`FROM`
`WHERE`

* `SELECT` is our first statement that is used to select the data we need returned from the database. These will be the columns we want it to return or the columns we create based on aggregated data.

* `FROM` selects the table we want to pull our data from.

* `WHERE` is how we filter the data that we want returned. Any filters after WHERE will use the word `AND`.

![SQL Basic Commands Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vvsmn8cyu7umsqr8b68o.png) 

In our example here, we can see that I only want 3 columns returned to me with the SELECT statement - the id, age, and height. I want to pull from data FROM the table drivers_license and I want to filter the results returned to me WHERE only the ages are over 30 AND the height is less than 60.

For SELECT, there's also the option to use 'SELECT *'. Using the asterisk will return all of the columns. However, it is good practice to just return the data that is needed. That is also why it's good to filter tables to be as specific as possible in the data that needs to be returned since when you start working with larger data sets the data that's being returned, and the amount of time and money to query that data, can get out of hand pretty quickly. Build good habits now!

## Making Tables
Once you get comfortable with some of the basics on practice tables, you should jump into making practice tables as well. [W3Schools](https://www.w3schools.com/sql/sql_create_db.asp) also offers practice for making tables and querying them. 

But didn't you just say earlier not to jump into tables? Well, learning the basics of how to create a table will actually help you make better queries! Just don't overwhelm yourself and start with the basics of a query first!

## Practice, Practice!
For a fun game for practice querying - I would suggest [Knight Lab SQL Murder mystery game](https://mystery.knightlab.com/). It's fun, free, and has a walkthrough in case you need some help.