teleren/devto huggingface dataset:
Simple attendace Management with Opencv
Tags: python, opencv, sql, beginners
Published: 2021-09-17 16:08:25

A few months ago I wanted to do a project related to Opencv but I couldn't find something that get me excited. 
I have a book where I write the ideas of projects that are interesting for me, then I pick some of them and are my resolutions of the year (among other things of course), and before the new year comes I'd done all of them.

As you could see in my previous post, the video chat was the project that I has to have done before starting with this. I took a course from freecodecamp to understand the fundamentals and how Opencv works.
When I got the core ideas I started to play with the methods, creating some short programs. Having some fun...

The idea is simple, in some hypothetical scenario the teacher start the program, then every student puts it in front of the webcam, and automatically an excel worksheet will be written and downloaded for the teacher. Avoiding the boring task of calling out every single student.


My project does that, obviously before doing that the teacher will have to register the students, after typing their last name and name the camera will open and take a few photos to create a model to train it so that the program can recognize each student.

#Previews

![Register an Student](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oo8vyn14gbaq7vqsqjmw.png)

After adding the student you can go back to the main window and you could start taking attendance.
![Preview of how it takes attendance](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u02920bq0zxzmc7r77s4.png)


When you finish (closing the window with the Esc key) it will show you the results and also created an Excel worksheet with the list of students.
![Showing the results](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/09gnldujnit1aic64qsf.png)

Respository: https://github.com/Josafath/attendance-system.git

I you liked the project give it a star in GitHub or give it love to this post. 🤍
Today I learned day 5
Published: 2021-09-17 16:04:03

Sparta Coding Club: Camp Learning for Tomorrow - Today I learned Day 5(9.17.2021.Fri)

# Notes for Future References 
## API:
- GET: read
- POST: create, update, delete

## AJAX
```
      $.ajax({
        type: "GET",
        url: "",
        data: {},
        success: function (response) {
          console.log(response)
   
        }
      })
```
- "Type" refers to a type of HTTP method it's using. 
- "url" for the url where you want to request data. 
- "data" for data to SUBMIT. In this case, the function is only for requesting, so no need for "data."
- "success" - "A callback function to be executed when Ajax request succeeds" reference: https://www.w3schools.com/tags/ref_httpmethods.asp

## Today's Event
1. A lecture from a backend developer about how to learn and improve as a programmer (e.g. reflection and feedback from others), and open source projects and git and github. 
2. A code review with study mates. 
3. An app-making-test with only one hour given. Only completed about 1/5 of it. Learned a lot about what I need to learn and improve. 
  * The test required some understanding of jquery, ajax, and flask. 

Note: I'm an aspiring developer from South Korea who just started a boot camp. I will be posting almost daily as a log to record my progress.
OAuth Tokens & Potlock gem
Tags: ruby, oauth, opensource
Published: 2021-09-17 15:57:25

## A bit of context 👋🏽

When calling Apis that use OAuth as authentication process, you need to generate an **access token**. And to get an access token, we have to use a **refresh token** stored in the server.

Here's the OAuth workflow to generate this **access token**:

![https://developer.ebay.com/api-docs/res/resources/images/ebay-rest/refresh_token_650x460.png](https://developer.ebay.com/api-docs/res/resources/images/ebay-rest/refresh_token_650x460.png)

_Image source: developer.ebay.com_
<br />
## So what was the need? 🤔

An access token **expires after a certain time**, in minutes, hours, days, depending on the provider. So we need to refresh it time to time.

The issue was that different processes were refreshing the token at the same time, **invalidating other's freshly generated access token**.

So we had to find a way to be sure that **only one process can refresh the token**. 
<br />
## Here comes the gem 🚀

Today we introduce our new gem: **Potlock - a Distributed Read-Write lock using redis**

_(available on Github here: [GitHub - potloc/potlock](https://github.com/potloc/potlock/))_

This brand new gem only allows one simultaneous reader or writer. And if the lock is taken, any readers or writers who come along will have to wait.

Here's an example of how we use this gem at [Potloc](https://www.potloc.com/):

```ruby
def token
  lock = Potlock::client.new(key: "snapchat_api")

  # Fetch the token, refresh it if not present
  token = lock.fetch { refresh_token! }

  # A token is invalid when empty or expired
  raise InvalidToken unless valid?(token)

  token
rescue InvalidToken => _e
  # Generate and save a new token
  lock.set { refresh_token! }
  token = lock.get
end
```

This way, we are sure that all the processes will have **the same valid access token and won't overwrite it at the same time** 🎉
<br />
_Interested in what we do at [Potloc](https://www.potloc.com/)? Come join us! [We are hiring](https://jobs.lever.co/Potloc) 🚀_
Help: Logical ID Changed in my CDK App
Tags: cdk, aws, troubleshooting
Published: 2021-09-17 15:52:42

---
title: Help: Logical ID Changed in my CDK App
published: true
description: 
tags: 
 - cdk
 - aws
 - troubleshooting
canonical_url: https://bliskavka.com/2021/09/17/cdk-logical-id-changed/
---

I recently came across a weird error in a private package CDK deploy:

`{dynamo table name} already exists in stack {current stack arn}`

Upon further investigation it turned out that one of our internal CDK modules for building the dynamo tables has changed how it was naming the construct, resulting in a different CloudFormation Logical ID. Since we were explicitly naming the table, the stack update could not complete, because the table already exists.

This app is a self-contained NPM module, so I wasn't able to modify the construct, but I came up with a workaround.

1. Back up the dynamo table data
2. Copy the raw stack yaml from CloudFormation and save it on your computer
3. Delete the table resource and references from the template
4. Update the stack with the new template using the CloudFormation web console
5. Verify that the table was deleted (and not retained) by CloudFormation
6. Redeploy the CDK app, which will create a new table
7. Restore the table data
FYP idea selection
Tags: node, reactnative, javascript, react
Published: 2021-09-17 15:48:05

Hello what's up guy's, Hope you all will be doing very well. I am final year student in CSE now we have FYP project. I want to make my FYP in MERN stack. I know know mevn stack too and some other languages but I am curios to build on MERN. What should I make? What are the new growing ideas related to web development? Your suggestion and help will be highly appreciated.
cli-ssg 0.0.1: Node.js based static site generator
Tags: opensource
Published: 2021-09-17 15:42:53

As a part of my open source journey, this week I created [cli-ssg](https://github.com/dhillonks/cli-ssg), an open source static site generator using Node.js. It is a command line tool to generate .html files from a given set of input .txt files.

# Features

:white_check_mark: Parse title from the input files
:white_check_mark: Ability to provide a custom output directory
:white_check_mark: Ability to provide stylesheet URL
:white_check_mark: Recursively parses input nested directories and files
:white_check_mark: Automatically generates index.html if multiple txt files are present in input directory

# Installation:
```
npm i
npm i -g .
npm link
```

# Usage
```
cli-ssg -i "sample_file.txt"
```
This processes text from <code>sample_file.txt</code> and generates <code>sample_file.html</code>
```
cli-ssg -i "sample_file.txt" -s "./stylesheet.css"
```
Same as above, however <code>sample_file.html</code> now uses <code>./stylesheet.css</code>
```
cli-ssg -i "sample_dir" -o "output_dir"
```
This processes all the <code>.txt</code> files in <code>sample_dir</code> and generates <code>.html</code> files for each of them. It also creates an <code>index.html</code> with relative links to each page, storing all these files in <code>output_dir</code>.

## Options

```
  -h, --help        Show help                                          [boolean]
  -v, --version     Show version number                                [boolean]
  -i, --input       Input file/folder to be processed        [string] [required]
  -o, --output      Output directory                [string] [default: "./dist"]
  -s, --stylesheet  CSS Stylesheet for the website                      [string]
```

## Examples

### Simple Example:

`cli-ssg -i ".\sample_input.txt" -o "custom_dir" -s "https://cdnjs.cloudflare.com/ajax/libs/tufte-css/1.8.0/tufte.min.css"`

#### sample_input.txt:
```
Sample title                   //<---first line followed by 2 empty lines treated as title


This is the first paragraph.
                               //<--- blank spaces treated as paragraph limits
This is the second paragraph.

This is the third paragraph
```

#### custom_dir\sample_output.html:
```html
<!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>Sample title</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link href="https://cdnjs.cloudflare.com/ajax/libs/tufte-css/1.8.0/tufte.min.css" rel="stylesheet">
    </head>
    <body>
      <h1>Sample title</h1>
      <p>This is the first paragraph.</p><p>This is the second paragraph.</p>
    </body>
    </html>
```

### Complex Example:
Using multiple text files in the input directory, the following website was created with an auto-generated index.html having links to each individual page:

https://cli-ssg.vercel.app/

### View it on GitHub:
https://github.com/dhillonks/cli-ssg
Stupid users or stupid design?
Published: 2021-09-17 15:33:04

As a developer, I often have to solve "bugs caused by users". A user mistakenly clicked a button that performed an unintended action a developer had to roll back. One might think the user is stupid but forgot to question the most important thing. Why the user did that in the first place?

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

This applies not only to digital products but to the real world too. That stupid door that you always push instead of pulling. Or the ketchup packet that you just can't open without tearing apart with your teeth - and sometimes leaving stains in your pants. Stupid things or stupid you?

Even the everyday things are poor in usability. And in the digital world, it is our responsibility to create products people can actually use. And they shouldn't need a manual to do so. The button that shouldn't be clicked was used because the design was bad - as the ketchup, and as the stupid door.

Jakob Nielsen, the guru of Web page usability by The New York Times, wrote 10 general principles for interaction design. They are called "heuristics" as they are broad rules of thumb and not specific usability guidelines. We can use this to create better, easy-to-use, and self-explanatory interfaces to our products.

1. Visibility of System Status
2. Match between System and the Real World
3. User Control and Freedom
4. Consistency and Standards
5. Error Prevention
6. Recognition Rather Than Recall
7. Flexibility and Efficiency of Use
8. Aesthetic and Minimalist Design
9. Recognize, Diagnose, and Recover from Errors
10. Help and Documentation

Next time blame the design, not the user.
DynamoDB Stream use cases
Tags: dynamodb, serverless, resources, aws
Published: 2021-09-17 15:10:48

---
title: DynamoDB Stream use cases
published: true
description: I asked on twitter what the use cases for streams were, here are some great answers
tags: ["dynamodb", "serverless", "resources", "aws"]
cover_image: https://user-images.githubusercontent.com/6509926/70553550-f033b980-1b40-11ea-9192-759b3b1053b3.png
---

This week, on Twitter, I asked the following question:

> I don't really understand @dynamodb streams. I need a use case that makes sense to me, so maybe a web app. What kinds of actions are best for this idea. Reporting services make sense, send an action after an 'update'. But beyond that, I need a reason that this is a cool.

This came up because I'm reading [The Dynamo DB Book](https://www.dynamodbbook.com/) by [Alex DeBrie](https://twitter.com/alexbdebrie). The book is fantastic and I'm learning a lot, but he is very enthusiastic about streams, and I didn't see any obvious use cases. The tweet had a bunch of replies so I'll try to note them here. 

### I'd just rather read this on twitter

[View the actual tweet](https://twitter.com/fitzsimons_dev/status/1437541367635398666?s=20)

### Highlights

- One response by [@astuyve](https://twitter.com/astuyve) was a super helpful thread. The example that made the most sense for me was Twitter for Pets. Check out that [whole thread here](https://threadreaderapp.com/thread/1437925409354567684.html)
- Another helpful post showed a web app example on Amplify(actually from dev.to). You can check out [the post here](https://t.co/2bsxBLbSSi?amp=1) and follow [@mtliendo](https://twitter.com/mtliendo) who is pretty great!
- [This helpful youtube](https://www.youtube.com/watch?v=eyjxZK-YHIk) talk was mentioned by [@edjgeek](https://twitter.com/edjgeek)

### Who to follow from this tweet

[@astuyve](https://twitter.com/astuyve), [@mtliendo](https://twitter.com/mtliendo), [@ryands1701](https://twitter.com/ryands1701), [@filmaj](https://twitter.com/filmaj), [@sachinpc](https://twitter.com/sachinpc), [@barney_parker](https://twitter.com/barney_parker), [@danilop](https://twitter.com/danilop), [@edjgeek](https://twitter.com/edjgeek), [@NoSQLKnowHow](https://twitter.com/NoSQLKnowHow), [@MorgantWillis](https://twitter.com/MorgantWillis), [@edelman215](https://twitter.com/edelman215), [@pier_sf](https://twitter.com/pier_sf)

### Final thoughts

I'm still getting comfortable with Dynamo and improving my understanding of Single Table Design, Streams, and all things Serverless. But, the amount of resources and folks that are willing to chat about how this works is pretty awesome.
cookieとセッションのアウトプット
Tags: login, session, cookie
Published: 2021-09-17 14:47:51

# はじめに
cookieとセッションの理解が曖昧なのでアウトプット
今回は概要のみで具体的にどこに、なんのデータが入ってくるかは書かない
## ブラウザとwebサーバー間の通信時は、前回の情報を保持しない
 ブラウザとwebサーバー間のデータのやり取り(HTTP通信)はステートレスで、前回の情報を保持しません。
 つまり、ECサイトでショッピングカートに商品を入れ、購入ボタンを押し、確認ページに飛ぶ際にはショッピングカートの情報を保持しなければなりません。
 しかしステートレスな通信では前回の情報を保持できないため、商品の情報を次のリクエスト時には忘れてしまいます。
## ECサイトでのステートレスな流れ
 [![Image from Gyazo](https://i.gyazo.com/9c5da80994c89d67dd1f4ea54fb2398f.png)](https://gyazo.com/9c5da80994c89d67dd1f4ea54fb2398f)
 [![Image from Gyazo](https://i.gyazo.com/59303811437bd7ffcca55cd4240c8f98.png)](https://gyazo.com/59303811437bd7ffcca55cd4240c8f98)

 上記のようにステートレスだと、前回のカートの中に入っていた情報を覚えていません。
 そのため２回目のレスポンス時には、カートに何も入ってない状態で返ってきてしまいます。
 これでは、ECサイトので購入の処理、ログイン状態の保持ができなくなってしまいます。
## cookieのおかげで前回の情報を保持できる
 状態を保持するためにcookieという仕組みがあります。
 cookieとはサーバーとwebサーバー間の状態を管理することができます。
 順序を下記に示します。
 1.webサーバーがwebブラウザに状態を区別するidを割り当てHTTPヘッダーに含め、レスポンスを返す
 2.ブラウザはリクエストを送るたびに、webサーバーから受け取ったidをHTTPヘッダに含めリクエストする
 3.サーバーはそのidからコンテンツの内容に紐付いている情報をもとに、内容を変化させユーザーに返す
 2,3を繰り返すことによって、状態を保持する事ができる。
## cookieを用いたステートフルな流れ
[![Image from Gyazo](https://i.gyazo.com/c8c8fbf12460d43d6f0f569f2c3717f2.png)](https://gyazo.com/c8c8fbf12460d43d6f0f569f2c3717f2)
[![Image from Gyazo](https://i.gyazo.com/d72db35d6dd91778ce5086f58246a809.png)](https://gyazo.com/d72db35d6dd91778ce5086f58246a809)

 最初のリクエスト時にwebサーバーはidを発行します。
 それをcookieとしてブラウザに返します。
 ブラウザは受け取ったcookieをヘッダーに含めリクエストします。
 ブラウザから受け取ったcookieのデータから、ブラウザを識別します。
 識別後、ブラウザごとに内容をカスマイズしてブラウザに返します。
## セッションとは
 セッションとはwebサーバーとブラウザ間の関連のある、一連の処理流れのことを指します。
 ECサイトの「商品をカートに入れる」→「購入確認ボタンを押す」→「注文を確定する」といった一連の処理流れのことです
 複数のブラウザから、一連のセッションを管理するにはセッションIDを用いて管理します。
 セッションIDとはブラウザを識別するためのIDのことです。
 ブラウザからwebサーバーにリクエストが来た際に、webサーバーが発行しcookieに格納後、ヘッダーに含めてレスポンスとして返します。
 セッションIDはどのブラウザがセッションのどこまで処理が進んだか管理することができます。
 セッションデータを用いて、ログイン情報や、ECサイトならカートに商品は入っているのかなどを参照します。
 セッションデータはセッションIDに紐付いているため、セッションIDさえ識別できればデータを取り出せます。

## おわりに
まだ理解があやふやです。
特にセッションまわり
今回は概要のみにしましたが、次回は厳密にどこにデータが入るかコードで示した記事を書きます。
Credit Card Payment UI With ReactJS
Tags: webdev, react, beginners, showdev
Published: 2021-09-17 14:36:22

> This is not a tutorial, or anything even informational. Just a place to share my project, hoping to inspire some creativity. Hopefully you learn about a new resource or try a new project. Repo is available! 

--- 

### Hey devs, we're pretty fortunate 😉

This badass platform gives us the ability to show off a project with the "#showdev" community tag and I am taking that opportunity!

--- 

### Resources 
- [Demo](https://credit-payment-ui.netlify.app/)
- [Repo](https://github.com/chansen17/creditCardPaymentUI)
- [Cleave.js](https://nosir.github.io/cleave.js/)
- [React.js](https://reactjs.org/)

### Try different credit card issuers:
- Visa cards start with 4
- Mastercards 51 
- Discover 6011 / or 65
- Diners Club 300 

---

### Features
1. ReactJS
2. JSX
3. Basic Javascript
4. Custom SCSS
5. Cleave.JS 
6. Dynamic rendering

--- 
### Something to point out

The FUNNIEST thing about the entire project, what I am also the most proud of, is the holographic sticker on the top left! It's a picture of raindrops on a window! 🤣 

--- 

### Conclusion 

Let me know what you think about it. So much more could be added to this. For example, I would like to add a rotateX animation that allows the user to instead enter their security code on the back, once they click on the form field! That would be cool. 

If you are practicing frontend development and using React, give it a go! It's really based on all the fundamentals of React and the basics of Javascript. 

Show off your project below if you end up giving a shot! I'm sure you can do something even better! 😎

---

#### Follow me on [Twitter](https://www.twitter.com/hyggedev) 
 for byte-sized web dev content! 

#### You should also follow my [Instagram](https://www.instagram.com/hyggedev/)
Dev-related stuff only! 

---

<a href="https://www.buymeacoffee.com/hyggedev" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-orange.png" alt="Buy Me A Coffee" height="41" width="174"></a>

--- 

### Check out these other beginner friendly articles also written by me! ⤵️

{% link https://dev.to/hyggedev/how-to-build-a-responsive-react-navigation-menu-with-styled-components-3682 %}

{% link https://dev.to/hyggedev/filter-your-react-data-with-basic-javascript-4i9 %}

{% link https://dev.to/hyggedev/great-beginner-friendly-api-s-to-start-practicing-frontend-development-52kl %}

{% link https://dev.to/hyggedev/how-to-stay-focused-as-a-self-taught-frontend-web-developer-7gp %}
Launch Sublime from the Command Line
Tags: sublime, terminal, linux, macos
Published: 2021-09-17 14:21:52

Sublime is a powerful source code editor. It is also used a lot to clip notes and stuff, thanks to it being very light weight.
As a developer, if you aren't using Sublime yet, I highly recommend you do.

Sublime Text comes with a CLI out of the box. For version 3 or 4, check in the directory `/Applications/Sublime\ Text.app/Contents/SharedSupport/bin`. There should be an executable named `subl`.
On that directory, try running `./subl` on a the terminal, it should launch Sublime Text for you. Btw, I hope you're using iTerm 2 with ZSH and not the Terminal that comes with Mac, if you're on Mac. If not, check out [this blog](../terminal-setup-on-mac/).
Now to move to this directory and then executing this command every time is not of a big help, we create a shortcut for us.

`$PATH` is an env variable that lists all the directories that the OS should look for, for an executable.
Run `echo $PATH` to check your env value. Pick any directory from there, for instance, I picked `/usr/local/bin`.

You now need to create a link from this directory to the executable. You can do that by running:

`ln -s /Applications/Sublime\ Text.app/Contents/SharedSupport/bin/subl /usr/local/bin/sublime`

This creates a [symbolic link](https://linuxize.com/post/how-to-create-symbolic-links-in-linux-using-the-ln-command/) between two files. For my case, the `/usr/local/bin/sublime` actually points to `/Applications/Sublime\ Text.app/Contents/SharedSupport/bin/subl`.

With this link being created, you can execute/run `sublime` from anywhere using the Terminal app and it will launch Sublime for you.

Now you can launch sublime from anywhere executing `sublime`, as well as open a particular file by mentioning the file name as well. Example:

```shell
touch test
sublime test
```
The above commands would create a file named `test` and would open it in Sublime Test.

Sublime CLI also comes in with a lot of other stuff, check `sublime --help` for more.

PS: a lot of sites mention the link command as: `ln -s "<the directory>" <target directory>`, however, for me, avoiding the quotes worked, and not the other way around.
Tutorial Purgatory 😢😢
Tags: webdev, tutorial, software, learning
Published: 2021-09-17 14:08:16

Tutorial purgatory

Do you know that feeling?

Like you’re stuck in this infinite loop of just watching tutorial after tutorial every single day, but you’re still not making any real progress towards becoming a developer🤔?

It's really common among developers🤪.

We've ALL been there🙂.

But the question is... how do you pull yourself out🤔🤔?

Thankfully, I got lucky and figured it out pretty soon when I was learning to code (but I still stumble on it sometimes when am learning something new)
So here’s the secret..
Projects.

BUILD PROJECTS.

Build a TON of them.

That’s it.

There’s no other way around it.

The more you build...

The more you break...

The more you learn…
Most times we watch alot or even download lots of tutorial videos on a language or framework or even a library 
but most of those who watch it STILL don't know how to build an application like that from scratch, why?

It’s because most people just watch a tutorial and code along.

You don’t think beyond the code, you just code it up.

Don’t just code.

Think.

Think about what you’re coding in your IDE or text editor.

What does this for loop do?

Why do we have this piece of code here?
Ask questions to yourself and do some research why is this like this and so forth...

When you do that, you understand how the code works and why we do it the way we do.

This is what YOU have to do.

Take the code into your own hands and mess around with it.

BREAK IT.

Debug it on your own…

Google it.

Ask Questions and ask more 

Figure out why it broke in the first place…

Now before you know it you’re building projects on your own.

Maybe you come up with a passion project that you’ve always wanted to build, and start working on that!

Keep taking on those clone applications to flex and build your skills, but start to customize them.

Make them your own.

Look for cool new features you could implement, find specific tutorials and figure out how to add them.

You’re thinking like a developer. That's great already.

And that’s really it.

Learn through projects and your growth will be MASSIVE.

Projects are what kept me out of tutorial hell as a new Software Engineer.
 
Real. World. Projects.

‘Cos not only do they unlock your learning... they also land you JOBS (On the long run we need funds actually).

That’s the real power of projects when you start taking this stuff seriously.

In conclusion
The fastest way to get out of tutorial hell is by building projects upon projects (try to finish one completely before going to another) add some extra features to the clone you are doing Change the colours use different style of icons or Change some design patterns.
And that's all.
If you got questions or confusion or anything you are free to hit  me up  would really love to help out as fast as I can.
Yusuf 
Tech enthusiast 
Twitter: Yusuf_software.