teleren/devto huggingface dataset:
15 Days of CSS Challenge
Tags: css, tutorial
Published: 2021-09-13 17:19:26


Jen Kramer and Erika Lee who brought us 30 Days of HTML just posted 15 Days of CSS. These will be short daily CSS lessons. 

Today's challenge was [semantic HTML of a Nav bar](https://jen4web.substack.com/p/semantic-navbars). We need to build a Nav bar so we can later use CSS. Use the link to check out the blog, I won't copy their content here just share the link and show what I did. I also won't blog on it daily. Maybe at the end of the week when there's more to see. Today we learned about using a list to make links into a navigation bar.

## What I did 
```html
<h1>
<a href="https://informatics.indiana.edu/index.html">IU Luddy School of Informatics, Computing, and Engineering Department of Informatics</a>
</h1>

<nav>
  <ul>
    <li><a href="
      https://informatics.indiana.edu/about/index.html">About</a></li>
    <li><a href="https://informatics.indiana.edu/apply/index.html">How to Apply</a></li>
    <li><a href="https://informatics.indiana.edu/programs/index.html">Programs</a></li>
    <li><a href="https://informatics.indiana.edu/courses/index.html">Courses</a></li>

    <li><a href="https://informatics.indiana.edu/career-prep/index.html">Career Prep</a></li>
    <li><a href="https://informatics.indiana.edu/research/index.html">Research</a></li>

    <li><a href="https://informatics.indiana.edu/faculty-directory/index.html">Faculty Directory</a></li>
    <li><a href="https://informatics.indiana.edu/contact/index.html">Contact</A></li>
  </ul>
</nav>  
```


Join the challenge at [15 Days of CSS](https://jen4web.substack.com/). Use Codepen to do the exercises then share the results and see what other developers are doing.

The HTML Challenge was fun and had some things I didn't know. They have released it as an eBook.
REST API Flowchart with Swimlanes
Tags: rest, api, flowchart, swimlanes
Published: 2021-09-13 16:42:55

---
title: REST API Flowchart with Swimlanes
published: true
description: Demonstrating flow of REST API by creating flowchart with swimlanes
tags: rest, api, flowchart, swimlanes
//cover_image: https://direct_url_to_image.jpg
canonical_url: https://www.therdnotes.com/rest-api-flowchart-with-swimlanes
---

## Thoughts

In one of the upcoming meeting, I was required to showcase the flow of one of the API I had built. Of course, opening the IDE and walking through the code isn't ~~a good~~ an option, when the audience is not of [active] programmers.  

So to present it visually, flowchart is the one that came to my mind first.  
But as a programmer those swimlanes from the sequence diagram, which helps me separate different systems, were also poking my brain a lot.  

So I decided to mix them.  

Below is how a typical REST API flow will look when pictured using flowcharts with swimlanes:

![REST API Flowchart with Swimlanes](https://raw.githubusercontent.com/raevilman/the-rd-notes/master/notes/rest-api/rest-api-flowchart-with-swimlanes.png)

Notice! <i>how the `client` swimlane is showing all the possible response codes</i>  
I liked the outcome. So thought of taking a note to be referred to in future.

## Bonus:
This diagram was created using `draw.io` software and you can find its source file [here](https://github.com/raevilman/the-rd-notes/blob/master/notes/rest-api/rest-api-flowchart-with-swimlanes.drawio).

---
HIH
~ [@raevilman](https://twitter.com/raevilman) 🐦
Typescript Enum
Tags: typescript, angular, react, javascript
Published: 2021-09-07 19:11:33

Enums are one of the few features TypeScript has which is not a type-level extension of JavaScript.

Enums allow a developer to define a set of named constants. Using enums can make it easier to document intent, or create a set of distinct cases. TypeScript provides both numeric and string-based enums.

Numeric enums
We’ll first start off with numeric enums, which are probably more familiar if you’re coming from other languages. An enum can be defined using the enum keyword.

```
enum Direction {
  Up = 1,
  Down,
  Left,
  Right,
}

```

Above, we have a numeric enum where Up is initialized with 1. All of the following members are auto-incremented from that point on. In other words, Direction.Up has the value 1, Down has 2, Left has 3, and Right has 4.

If we wanted, we could leave off the initializers entirely:


```
enum Direction {
  Up,
  Down,
  Left,
  Right,
}


```

Here, Up would have the value 0, Down would have 1, etc. This auto-incrementing behavior is useful for cases where we might not care about the member values themselves, but do care that each value is distinct from other values in the same enum.

Using an enum is simple: just access any member as a property off of the enum itself, and declare types using the name of the enum:

```
enum UserResponse {
  No = 0,
  Yes = 1,
}
 
function respond(recipient: string, message: UserResponse): void {
  // ...
}
 
respond("Princess Caroline", UserResponse.Yes);

```
official typescript documentation
Python Firebase auth (Sign up with email / password)
Tags: python, firebase, api
Published: 2021-09-13 16:44:21

**Check  [Python firebase authentication Definitive guide (2021)](https://blog.icodes.tech/posts/python-firebase-authentication.html)  for the full tutorial.**

To create a new user account on firebase Auth using python you need to send a POST request to this URL 
```
https://identitytoolkit.googleapis.com/v1/accounts:signUp
``` 
 then if the registration succeeded we will get a token to use it later.

Don't panic it's all easy

This is how you do it in python using requests module.
```
import requests

apikey='.....................'# the web api key

def NewUser(email,password):
    details={
        'email':email,
        'password':password,
        'returnSecureToken': True
    }
    # send post request
    r=requests.post('https://identitytoolkit.googleapis.com/v1/accounts:signUp?key={}'.format(apikey),data=details)
    #check for errors in result
    if 'error' in r.json().keys():
        return {'status':'error','message':r.json()['error']['message']}
    #if the registration succeeded
    if 'idToken' in r.json().keys() :
            return {'status':'success','idToken':r.json()['idToken']}
``` 
Now this is simple all you have to do is call the function like this :


```
NewUser('anemail@email.com','password')# use the email and the password

``` 
Output:

You will get something like this if everything is okay  :

```
{'status': 'success',
 'idToken': 'eyJhbGciOiJSUzI1NiIsImtpZCI6IjkwMDk1YmM2ZGM2ZDY3NzkxZDdkYTFlZWIxYTU1OWEzZDViMmM0ODYiLCJ0eXAiOiJKV1QifQ.eyJpc3MiOiJodHRwczovL3NlY3VyZXRva2VuLmdvb2dsZS5jb20vaGFja2Vybm9vbi1hcHAiLCJhdWQiOiJoYWNrZXJub29uLWFwcCIsImF1dGhfdGltZSI6MTYzMDA4NTAwOSwidXNlcl9pZCI6Ilk0Q3luTHFVNVRRZGRSSE52MDRzWU54ZWFpdTIiL'}
``` 

or
``` 
{'status': 'error', 'message': 'EMAIL_EXISTS'}
``` 
it means that the email already registered.

Read more [Python firebase authentication Definitive guide (2021)](https://blog.icodes.tech/posts/python-firebase-authentication.html)
TailwindCSS with ReactJS
Tags: tailwindcss, react, css
Published: 2021-09-13 16:43:49

<h1>Setting up Tailwind with React</h1>

We all know setting up tailwind with React is somewhat a pain for the beginners. I personally got into this problem too. Today here we will be setting up tailwindcss from scratch.

```txt
Note: This tutorial can also be used in a project made before
```

### Without talking anymore lets jump right into the tutorial

First we will start our react project in the normal way
```shell
npx create-react-app project-name
```
Right when you see the `Happy Hacking` Text in your screen, then you know that its done
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yyia2eh6onv1n4iw4dk8.png)

Cd into the Folder and lets start editing and stuffs!

Open your code editor. (Mine is VSCode)

Now open your terminal and Install the following things.

With NPM:
```shell
npm i -D tailwindcss postcss autoprefixer postcss-cli
```
With Yarn:
```shell
yarn add -D tailwindcss postcss autoprefixer postcss-cli
```
 
Now Create output.css and tailwind.css Files in the `src` folder like in the structure given below.

```txt
src/
├── styles/
         ├── output.css
         └── tailwind.css
├── app.js
└── index.js
```

Your folder structure should look like this
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wb5hvkcfuv8dgptyvdk5.png)
 

In the `tailwind.css` file, Paste this code.
```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

Leave the Output.css file empty because it will be taken care of Postcss.

Now enter the following two commands in the Command Line:
(Works with both yarn and npm)
```shell
npx tailwindcss init --full
```
and
```shell
npx tailwindcss init tailwindcss-config.js -p
```

Now we have to edit the Following Lines in `package.json`

```json
"scripts": {
    "start": "npm run watch:css && react-scripts start",
    "build": "npm run watch:css && react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "watch:css": "postcss src/styles/tailwind.css -o src/styles/output.css"
},
```

Now in order to wrap up and actually code in tailwind we have to import the following line in out `App.js` file.
```js
import './styles/output.css'
```

Now start the project and play with Tailwind yourself!
```shell
npm run start
```
or
```
yarn start
```

### We are all good. We can now use tailwind in our react project!








### HOLD UP! But there is no Intellisense :(

First of all it is all bland and there is no suggestions on what will we do.

For that we need to add a Extension in VSCode for Tailwind

Simply search Tailwind in the extensions tab and install the first one :)
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sbsy1u8dumj3zegpy41z.png)

Restart your code editor and now we have awesome Tailwind Intellisense!
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0zm6tnjyluydzj0ptnc3.png)
  


### 👑 Happy Hacking!

Follow me on Github at https://github.com/hasib-rashid
My favourite CDK parameter for large deployments is...
Published: 2021-09-13 16:41:53


Sometimes CDK Deployment takes a long time, because of the resource creation. Speaking of fsx file shares, CloudFront et.al...


## A time-consuming problem

When CDK starts an Deployment it creates a CloudFormation change set and executes it immediately.

That means, you have to wait for its completion. Unless...

You tell CDK *not* to execute the Change Set.

## An FSX Share CDK Stack

Assume we have a Stack named "fsx". An Amazon FSx might take 20 minutes to deploy. 

We deploy it (half-ish) with:

```bash
cdk deploy fsx --no-execute 
```

Then login into the AWS Console, to see the Changeset:

![CloudFormation Change Set](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iwkspiqmefgbo4s4v2he.png)

The good thing is: we can check whether the resources will be added, changed or replaced, which is vital in production sets. 

![Do or die](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ljsmoe8ycesykrw44khi.png)

Now when I start the execution, the Stack is deployed but doesn't block my terminal. 


## Great, but monitoring?

If I decide later I want to see the Stack log, I can use [cfn-tail](https://github.com/taimos/cfn-tail).


Together with [awsume](https://awsu.me/) and [cdkstat](https://github.com/megaproaktiv/cdkstats) I can have a terminal dashboard if a want to monitor the deployment on multiple accounts:


```bash
while true 
do
  clear
  awsume profile1
  cdkstat
  sleep 20
  awsume profile2
  cdkstat
  sleep 20
  awsume profile3
  cdkstat
  sleep 20
done
```

And the just watch the multi-account progress:

```bash
[profile1] Role credentials will expire 2021-09-13 20:30:42
Name                             Status                           Description
----                             ------                           -----------
fsx                              UPDATE_COMPLETE                  -
[profile2] Role credentials will expire 2021-09-13 19:01:13
Name                             Status                           Description
----                             ------                           -----------
fsx                              UPDATE_COMPLETE                  -
[profile3] Role credentials will expire 2021-09-13 19:01:43
Name                             Status                           Description
----                             ------                           -----------
fsx                              UPDATE_COMPLETE                  -
```

Happy watching!

## Thanks

Photo by Zdeněk Macháček on Unsplash
Node API using Vercel Serverless Functions
Tags: node, api, vercel, serverless
Published: 2021-09-13 16:36:49

---
title: Node API using Vercel Serverless Functions
published: true
description: A quick POC showcasing how to build and deploy node API using Vercel Serverless Functions
tags: node, api, vercel, serverless
//cover_image: https://direct_url_to_image.jpg
canonical_url: https://www.therdnotes.com/build-and-deploy-node-api-using-vercel-serverless-functions
---

This note is about how to setup, build and deploy an API using Vercel Serverless Functions.

## VLog
If you prefer to watch the video instead of reading article,  
its available at https://youtu.be/TE9MNxEeOI4  
Length: 14:38 mins  

For sure, the video version has some more info(verbose 😀) in it.


## Setup Vercel 

1. Create an account at Vercel.
2. install Vercel CLI and log in
```sh
yarn global add vercel
vercel login
```

## Setup Project
3. Initiate the project using below commands and add Vercel NPM module as dev dependency.  
```sh
mkdir node-api-using-vercel
cd node-api-using-vercel
yarn init -y
yarn add vercel -D
```

## Create API
Next, lets create an API endpoint `/hello`  
```sh
mkdir api
cd api
touch hello.js
```
Add the following code to `hello.js`  

```sh
module.exports = (req, res) => {
    res.json({
      msg: 'hello there, how are you!!'
    });
  };
```

## Test API
To test the API, start the local dev server using

```sh
vercel dev
```

Your API should be exposed on `localhost:3000/api/hello` and hitting this endpoint will return below response
```json
{
    "msg": "hello there, how are you!!"
}
```

## Path Segments
You can easily have path segments by naming your file like `[file_name.js]`.  
When a file's name is wrapped in the square brackets, it is treated as a (dynamic) path segment  
and its value is assigned to a variable with a name same as file name, `file_name` in above case.  
This variable is then passed under `req.query` object to the API code.

So if we create a directory `users` under `api` directory and  
then create a file `[user_id].js` file in it with following code

```js
module.exports = (req, res) => {
    const {
        query: { user_id },
      } = req;
    
      res.send({
          msg: `Hello ${user_id}!`
      });
  };
```

Now when we hit the endpoint `localhost:3000/api/users/123`, it will respond back as below  
```json
{
    "msg": "Hello 123!"
}
```

## Vercel Config
You can configure your Vercel Project with various options available at https://vercel.com/docs/cli#project-configuration  

But lets see one option `rewrites`.  

To avoid `api` being part of the endpoint, we can define a rewrite rule.  
For that create `vercel.json` in project root with following content.  

```json
{
    "rewrites": [
        {
            "source": "/users/:user_id",
            "destination": "/api/users/:user_id"
        }
    ]
}
```

Restart the server using `vercel dev` command.

Now you can call the API using `localhost:3000/hello`  
instead of `localhost:3000/api/hello`


---


Thats it about this note.  
HIH
Nuevo post en mi blog
Tags: css, html
Published: 2021-09-13 16:21:16

Hola, he subido un nuevo post en mi blog, ahi estare compartiendo los diferentes retos que tengo en el desarrollo web y tambien compartirte mis ideas.

Aca te dejo el enlace para que puedas leerlo, [blog](https://devproceso.hashnode.dev/el-reto-de-esta-semana)
Deploy ASP.Net Website on IIS in Our Local Machine

Tags: iis
Published: 2021-09-13 16:15:29

Introduction
 
First open your ASP.Net web application in Visual Studio.
 
Now in the top we have the option Build. Click on that and under Build you will find Publish Website.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g1arja5znfrzhhrpnmoh.jpg)
 
 
Click on Publish Website. Now open the publish web pop-up.
 
For Publish method select File System.
 
For Target location specify where to save your web application DLL file.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1za8foluajfzchktnd7j.jpg)
 
click on publish
 
Then click on publish.
 
Go to the target folder and in that location, you will see your web application DLL file.
 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/95fjdqof6otgkininp36.jpg)
 
Now open IIS manager. (Type inetmgr in the Run command.)
 
Right-click on Default Application and Add Application.
 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kvfjhe3yg9ts5hxra74v.jpg)
 
Enter Alias name then select an Application pool and Physical path.
 
Physical path
 
Now Double-click on default document.
 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nnmec1o3ilwdrud9mh45.jpg)
 
And add a start page of your web application. Here my application start page is EstimationSlip.aspx.
 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e9n631xswr66ijphcyfr.jpg)
 
Now right-click on your application and browse.
 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r5tqq997a5h5go7w63dy.jpg)
 
See your application without Visual Studio.
 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7ii1w64cd76we4rpffsh.jpg)
 
Enjoy!
Set structures in Dart
Tags: flutter, dart, tutorial
Published: 2021-09-13 15:35:51

Set structure is a type of list that we use to hold multiple data like `List`. *It has the same features as List.*

Unlike List;

* It is unordered.
* 2 identical elements cannot be found. (unique)

You can see the example below:

```dart
Set<String> names = Set();
List<String> words = [];

main() {
  names.add('Baran');
  names.add('Baran');
  names.add('Baran');
  names.add('Batuhan');
  words.add('Turgut');
  words.add('Turgut');
  words.add('Berk');
  words.add('Ege');

  print("Data defined by Set;");
  print(names);
  print("Data defined by List;");
  print(words);
}
```

The output is:

```
Data defined by Set;
{Baran, Batuhan}
Data defined by List;
[Turgut, Turgut, Berk, Ege]
```

Follow my blog for more [baransel.dev](https://baransel.dev/).
Python challenge_5
Tags: python, programming, webdev, challenge
Published: 2021-09-13 15:32:44

##Double letters
####level of challenge = 3/10

The goal of this challenge is to analyze a string to check if it 
contains two of the same letter in a row. 
For example, the string "hello" has l twice in a row, 
while the string "nono" does not have two identical letters in a row.

Define a function named double_letters that takes a single parameter 
The parameter is a string. 
Your function must return True if there are two identical letters 
in a row in the string, and False otherwise.

Hint

Use a for or while loop and keep track of the current index. 
In each iteration, grab the letter at the current index, 
And the letter after that, and compare the two.

####My solution
```
def double_letters(letters):
    for letter in range(len(letters)-1):
        if letters[letter] == letters[letter+1]:
            return True
    return False

print(double_letters("letters"))
```
####Another solution
```
def double_letters(string):
    for i in range(len(string) - 1):
        letter1 = string[i]
        letter2 = string[i+1]
        if letter1 == letter2:
            return True
    return False
```
####shorter solution
```
def double_letters(string):
    return any([a == b for a, b in zip(string, string[1:])])
```
```
def has_double_letters(letters):

    for letter in range(len(letters)-1):
        if letters[letter] == letters[letter+1]:
            print(f"There were tow {letters[letter]} at postion {str(letter)}")

print(double_letters("nono"))
```
Add your solution in the comment :)
Things You Should know About AlgoExpert
Tags: algorithms, softwareengineering, algoexpert
Published: 2021-09-13 15:32:29

Well, every CS graduate want be part of FAANG. In fact, that's a dream for many and an achievement for only few.

Nevertheless, In this digital era there are many helpers aroused to ease the process.

One such helper is Algoexpert.It was started by Clemen in the year 2017. He is also a software developer.

Last year in 2020, AlgoExpert has generated revenue more than $500K

That being the case, Are there really benefited persons out of AlgoExpert? 

Many are clearly claiming that it has got many problems from outside.

It's ok. AlgoExpert is mostly compared with Leetcode, which is another platform for preparing interviews.

However, On the other hand, Leetcode has now included video solutions in their curriculum which may further degrade AlgoExpert.

In this review post, we will debunk and weigh the real value of every thing about Algoexpert. 

Check the original link!
From No Code to Backend Developer. Getting started.
Published: 2021-09-13 15:21:37

---
title: From No Code to Backend Developer. Getting started.
published: true
description: 
tags: 
//cover_image: https://direct_url_to_image.jpg
---

On a Linux System, Mac, or WSL in Windows.
Use a simple text editor and terminal for a while.
Learn Python 3.7.
Use only the command line. This will help you learn Linux while learning the rest.

Start learning Python.

Best book to start with if you studied C or Basic or something like that in school, is Dive Into Python3, available for free as a website.
If no basic or C or any programming language exposure before,. Automate the Boring Stuff is good, available for free as a website.
By the time you have covered either books, you will know more than enough to know what to do next to learn more and from where.


Eventually start building small Python projects, and use Git and Linux with them.
When you are comfortable using basic Class and objects in Python, then depending on the project, learn the necessary Python libraries, as the need arises.
The libraries that you should eventually master in Python, beyond the language's built in modules, are Requests and Flask.

For the most part, while learning all this, you will only need to learn a few basic Git commands. So don't try to "master" Git in one go.

Once you are comfortable with all this - basic Linux and Git, advanced beginner level Python; learn basic SQL commands, which you can use with python's sqlite module. Use Sqlite files as practice to lightweight databases and refine your Linux, Python, and Git.
This includes Python Design Patterns and software architecture basics.

Look up the basics of Clean Code and follow them. Read Clean  Code by Robert Martin or Martin Fowler.

When you get stuck, quickly solve the problem using Google and doing what's necessary, but then read a little more, in-depth, right then. Do this every time you lookup something, so you can learn in small pieces and build on and with this knowledge. Practice reading official documentation not just blog posts and articles.

Don't overdo it to the point of boredom. 
The idea is to keep working on your project, and going a little in-depth on the things you had to look up.
Including Linux + Git through constant use, all the time in the background.


Then learn basic Docker.
Then learn basic PostgreSQL.

Increase the scope of you projects as you learn.