teleren/devto huggingface dataset:
My Express application folder structure and setup for fullstack projects
Tags: webdev, react, mongodb, node
Published: 2021-08-10 05:28:25

So far I've been using Nodejs and Express in the back-end for all my full stack projects. I saw a lot of repositories and developers code to get an understanding of what a good folder structure should look like.

Why bother with folder structure?
Its all about the structure, it makes code maintainable and we can easily pin-point bugs, when they arise in the code base. It makes it easy for contributors to help grow the code base efficiently.

![Folder Structure for Express MVC backend](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tgod1bq59gble6mvg6tx.png)

A quick breakdown of the folders and files.
At the root of the project we have a `configuration` folder that houses the `config.js` file and we can access the `.env` file by using `dotenv` package, safely and securely without compromising security of sensitive data like the database url, hashing secret and other keys that are critical to the development of our application.

```javascript
require("dotenv").config();

const config = {
  env: process.env.NODE_ENV || "development",
  port: process.env.PORT || 3001,
  mongoUri: process.env.MONGODB_URI,
  jwtSecret: process.env.JWT_SECRET || "YOUR_SECRET_KEY",
  braintreeId: process.env.BRAINTREE_MERCHANT_ID,
  braintreePublicKey: process.env.BRAINTREE_PUBLIC_KEY,
  braintreePrivateKey: process.env.BRAINTREE_PRIVATE_KEY,
};

module.exports = config;
```

Next, we can come to the MVC architecture of the application. The Model-View-Controller is at the heart of the application, the views are handled in the client folder with React. 
Models are where we define our database Schema or the structure of the way we want to store specific data into our database, In this project I have used MongoDB for the databse, it is a collection of documents and each document is an instance of the model we define. 
Controllers are the way we interact with the database to create, read, update, delete data to and from the database. All of the logic of how our server processes incoming requests and responds to users requests is handled by the controllers.
Finally, Routes folder houses all the endpoints that we expose to query data and send information to the server, it contains different controller logic as middleware to sanitise and ensure that requests to the server are processed in the correct order.

What is Model-View-Controller?
This is a design pattern that is commonly used for web-applications and is one of the most popular design patterns. The View part in a MERN (Mongo, Express, React and Node) application is handled in the front-end by React library. The express based backend which is running in Node is where we have the Controllers, Routes and Models.

Try using this approach in your next project, please share other interesting design patterns for full-stack web development projects ^_^
Blog Posts and Videos
Published: 2021-08-10 05:18:48

In this post:
1. [Why I Blog](#why-i-blog)
2. [Video Blogging](#video-blogging)
3. [More Possibilities](#more-possibilities)

Last week we had a meeting with the head of Career Services at HR. He provided a lot of good info on the process that we're going to be embarking on with his team and after his presentation, he fielded questions.

I took the opportunity to talk about this blog, specifically my daily posting schedule and my reasons for blogging.

##Why I Blog
Well first, HR recommends that we maintain an engineering journal. It's a way to record what we're experiencing and learning, and it'll provide a source of material for our resume and interviews.

I also remember reading or hearing somewhere that it's another piece for hiring managers to evaluate and get to know you through. If you think well, and communicate that through writing, perhaps someone who's looking for those qualities will be more interested in speaking with you, if they've read or skimmed your blog.

Beyond that very specific purpose - improving hire-ability - I've enjoyed blogging as a ritual, or commitment. It's satisfying watching my list of posts grow, and to flex the follow-through muscles that make it possible. It's not easy to do, and that also gives it an extra layer of merit.

I shared some of those thoughts and asked if he agreed with my strategy of writing with the job process in mind.

My sense from his response was, yes, there is merit in maintaining a blog and that can be a distinguishing feature. He also suggested another idea.

##Video Blogging
Rather than writing text-posts, he explained that there's value in another medium - video. If I were to record a code walk-through or breakdown and was able to articulate my decision making and thought-process, well, those are attractive qualities. What's more, in the event that there were code verbalizing parts of an interview that didn't go so well, you might have some legacy credibility from demonstrating those skills, and that might give you the benefit of the doubt. Of course, that type of video is great practice for verbalizing and make it more likely that you're prepared to speak eloquently about coding challenges you've faced, or even to talk through code during the interview.

##More Possibilities
Well, thinking about video posts has got the wheels turning. What other possibilities exist for demonstrating desirable and hire-able qualities?

Senior Presentations
Code Reviews
Help Sessions
Live Coding

These could all prove to be assets.
Create a Netflix clone from Scratch: JavaScript PHP + MySQL Day 15
Tags: php, javascript, webdev, tutorial
Published: 2021-08-10 04:59:38

Netflix provides streaming movies and TV shows to over 75 million subscribers across
the globe. Customers can watch as many shows/ movies as they want as long as they are
connected to the internet for a monthly subscription fee of about ten dollars. Netflix produces
original content and also pays for the rights to stream feature films and shows.

In this video,we will create a Constant Class

{% youtube uM8CYV8aH2E %}

If you like my work, please consider
[![Buy me a coffee](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jm11knj7d8zwcvo150q2.png)](https://www.buymeacoffee.com/cglikpo)
so that I can bring more projects, more articles for you

If you want to learn more about Web Development, feel free to [follow me on Youtube!](https://www.youtube.com/c/ChristopherGlikpo)
Regression Testing Approach and Tools
Tags: softwaretestingcompany
Published: 2021-08-10 04:58:59

When it comes to a software solution, periodic updates to the functionality and features of the program are essential. When a product’s life cycle progresses, maintaining a balance between iterative testing and sprint work (agile software development) and effectively managing conflicts can be difficult. This is where regression testing comes in, so that it can be set.
Rails enums - different approaches
Tags: ruby, rails, enums
Published: 2021-08-09 08:22:02

---
title: Rails enums - different approaches
published: true
tags: ruby,rails,rubyonrails,enums
canonical_url: https://blog.corsego.com/rails-enums-basics
---

Enums are a Rails feature, not a Ruby feature.

- good - we get validations for available options, can fire actions and scopes
- bad - use integer to represent strings

## Option 1

post.rb

```
  enum status: %i[draft reviewed published]

```

migration:

```
  add_column :posts, :status, :integer, default: 0

```

In this case, the order of enums is very important:

0 = draft 1 = reviewed 2 = published

If we add new values - add at the end of the array!

## Option 2 - fix integer values to specific strings (better)

post.rb

```
  enum status: { draft: 2, reviewed: 1, published: 0 }

```

## Option 3 - map enum to strings (the best)

post.rb

```
  enum status: {
    draft: "draft",
    reviewed: "reviewed",
    published: "published"
  }

```

migration:

```
  add_column :posts, :status, :string

```

## a few methods that can be called:

```
post.draft! # => true
post.draft? # => true
post.status # => "draft"

post.reviewed! # => true
post.draft? # => false
post.status # => "reviewed"
post.reviewed? # => true

Post.draft # => Collection of all Posts in draft status
Post.reviewed # => Collection of all Posts in reviewed status
Post.published # => Collection of all Posts in published status

```

Other good posts on the topic:

- [https://edgeapi.rubyonrails.org/classes/ActiveRecord/Enum.html](https://edgeapi.rubyonrails.org/classes/ActiveRecord/Enum.html)
- [https://sipsandbits.com/2018/04/30/using-database-native-enums-with-rails/](https://sipsandbits.com/2018/04/30/using-database-native-enums-with-rails/)
- [https://naturaily.com/blog/ruby-on-rails-enum](https://naturaily.com/blog/ruby-on-rails-enum)
Two diagrams showing the current Rust network ecosystem
Tags: tokio, rust
Published: 2021-08-10 04:37:16

---
title: Two diagrams showing the current Rust network ecosystem
published: true
description: rust web ecosystems
tags: tokio,rust
---


Today I drew two diagrams to show the current Rust Web ecosystem.

## tokio ecosystem

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


As you can see from the diagram, the tokio ecosystem is now complete with the basic core components for web services and web development. Especially with the introduction of the Axum framework, tokio is close to being complete in the Web ecosystem.

Axum's middleware uses the tower abstraction directly, which has the following advantages:

1. the use of a unified Service and Layer abstraction standards, to facilitate everyone to prosper the ecology
2. reuse the tokio / hyper / tonic ecosystem

axum's routing mechanism does not use property macros like rocket, but provides a simple DSL (chain call). Routing is based on iterations and regular expressions to match, and routing performance should be similar to actix-web.

A convenient extractor is also provided, as long as FromRequest is implemented it is an extractor and very easy to implement.

There are also some others advantages.

In a word, Axum is, in my opinion, a milestone for Rust in the Web development field, and it strongly drives the tokio/tower ecosystem. It's not quite mature yet, but it has a lot of potential.

## Others Web Frameworks

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

`actix-web` itself adds a layer of runtime threads as Actor to manage multiple threads, each thread is actually running a tokio single thread `block_on` , so that between the threads can not task stealing , lost the advantages of tokio task scheduling , in exchange for the performance of wireless thread context switching . This is the main difference between actix-web and other frameworks. actix-web's middleware also borrows from Tower Service, but it is not as generic as tower.

The advantage of `rocket` is a well-developed API, especially for handling forms very well. Unlike other frameworks, rocket has strong constraints on middleware in order to achieve security and correct goals, and it is not as free to implement middleware as Axum. This also predestines it to be more difficult to form an generic ecosystem. rocket is not performance oriented at the moment, maybe it will be optimized for performance in the future after 1.0.

How to choose your own web framework, combined with your scenario and preferences to choose it.
Make 21% more money during the week at your Pub using music data
Tags: datascience, bigdata, music, business
Published: 2021-08-10 04:11:15

Everyone knows beer and music go hand in hand. At the point when you plunk down to have a drink, it is likely because you’re relaxing. Music is also used to relax, as it occupies brain space that is normally consumed with stressful thoughts, such as work. Thus, people often listen to music while drinking beer.

As a pub owner, surely you already knew this. But what you don’t know is that you can convert this human nature to increase revenue while keeping your customers happy if you know the rules of the game!

Findings

“94 UK pubs took part in research, a mixture of ‘music’ pubs and non-music pubs. On Friday and Saturday, the average sale was 48% more in music pubs. Even on weekdays, the average sale was up 21% in music pubs. On average music, pubs made the equivalent of $545 (AUD) more per day on drinks sales alone. At weekends this rose to as much $1,188 AUD per day.”[1]

******But the key factor is, You can’t expect the 21% increase by playing “any song” or the “Top 50-week” or “Taylor Swift” on Spotify!!!!!!!!!********

You live in 2021 where everything is data. If you’re still one of the businesses without a loyalty card system and you haven’t decided on a way to collect behavior data of your customers, You are gonna regret it in 2 years!!

Why in two (2) years? Because “Live Music Restaurant” and “Live Music Pub” are skyrocketing in google search results with the beginning of 2021.

At Cestine Music Analytics, We believe “Music is Not Just Instruments Anymore”. They are unstructured data files that we can start analyze after certain steps. And then we can consider the demographics of your customers, break it down by days/time they come in, and create a model to predict the best music/songs to play, which decade the music should be from, does it have to be acoustic, Instrumental only, More tempo,.. etc.

The bottom line is — You need to have a curated playlist to play at your pub for your customers for each day of the week! Because you should seriously consider upskilling the pub game to the next level.

Follow Cestine Music Analytics for all the new updates regarding Music Data Analytics (This is the very first article of more to come in this domain) and connect with me on LinkedIn.

Thank You.
Creating a custom hook in React to control form input
Tags: javascript, webdev, beginners
Published: 2021-08-10 03:56:47

There are numerous ways to make a form input controlled from not controlled. The internet is mostly just a collection of forms ^_^ and one solution to make interacting with form inputs is to use the following approach...

Suppose we have a form with a single input field
```html
<form>
<input type='text' id='username'/>
<button type='submit'>Send</button>
</form>
```

In the above example we are sending the field 'username' to our backend or to some end-point on submitting this form. To do this we must have two things a 'onSubmit' event and a way to keep track of the data entered into the input field of the form, one approach is...
```jsx
const [value, setValue] = useState('')

<form onSubmit={handleFormSubmit}>
<input value={value} onChange={({target}) => setValue(target.value)} type='text' id='username'/>
<button type='submit'>Send</button>
</form>
```
The above snippet is making use of the 'useState' hook to make this component stateful. We are then passing the value and onChange event handler to the input field to keep track and store the value enetered into 'username'

This approach works fine and good but we will have to define multiple 'onChange' event handlers if our form gets more input fields and as the complexity grows the components code will start to look messy. 

One thing we can use here is custom hooks, that is we create a function that utilises the react-hooks and customise its behaviour to suit our needs. One approach to do this is like so...
```javascript

import {useState} from 'react'

export const useField = (type) => {
 const [value, setValue] = useState('')
 const onChange = (event) => {
  setValue(event.target.value)
 }
 const reset = () => {
  setValue('')
 }

 return {
  type,
  value,
  onChange,
  reset
 }
}
```

Now we can import this custom hook into any component where we want to use input fields, like so...
```javascript
import useField from '..file its being exported from'
```
Then we can use it in our react component, like so..
```javascript
const {reset, ...username} = useField('text')
```
```jsx
<form onSubmit={handleFormSubmit}>
<input {...username} type='text' id='username'/>
<button type='submit'>Send</button>
</form>
```
Now one way to implement the `handleFormSubmit` is like so...
```javascript
const handleFormSubmit = (event) => {
 event.preventDefault()
 let userObject = {
  username: username.value
 }
 // send data to backend
 reset()
}
```
We can call the reset method after successfully sending form-data to the backend and the input field is reset to an empty string.

Using this approach we make the code much cleaner and dont need to use multiple useState hooks within our components which clutters the code.

Try this in your next form in React! ^_^
SKILLS THAT MUST HAVE AND NEED IN THE WORLD OF WORK !
Tags: skill
Published: 2021-08-10 03:51:33

 Skill dalam dunia kerja yang sangat berguna di era milenial sekarang, kemampuan yang kamu miliki berpotensi untuk mendapatkan pekerjaan yang paling dibutuhkan di indonesia.

Apa Skill Saya?  masih belum tau kemampuan apa yang kamu miliki dalam dunia kerja, skill adalah keahlian dasar atau kemampuan yang dimiliki seseorang untuk melakukan sebuah pekerjaan, misalnya melukis, mengoprasikan komputer, dan sebagainya karena memang setiap orang memiliki skil yang berbeda dengan yang lain.

Skill Yang harus dimiliki dan dibutuhkan dalam dunia kerja di era milenial sekarang ini

Teknologi Komputer
Pada umumnya semua perusahaan pasti mengoprasikan komputer dengan ini skill yang kamu miliki dalam bidang ini tentunya di butuhkan oleh perusahaan. Namun dalam dunia kerja kamu tidak cukup mampu bekerja di perusahaan jika hanya bisa sekedar mengoprasikan komputer saja, melainnkan kamu juga harus memahami beberpa hal di antaranya :
Source:https://www.infolokerjabar.my.id/
How to Load More Data on Demand in Flutter Event Calendar
Tags: flutter, dart, webdev, mobile
Published: 2021-08-10 03:39:11

Learn how to load more data on-demand in Syncfusion [Flutter Event Calendar](https://www.syncfusion.com/flutter-widgets/flutter-calendar) widget easily. This video explains how to use the SfCalendar’s loadMoreWidgetBuilder property and how to override the handleLoadMore method of CalendarDataSource abstract class, to perform load more data on demand in the SfCalendar widget.

{% youtube yxiNLruP7CI %}
Carolina scatta delle foto assolutamente sorprendenti e innovative
Published: 2021-08-10 03:28:36


Carolina scatta foto assolutamente sorprendenti e innovative, catturando momenti ed espressioni uniche, la creazione di foto è semplicemente impareggiabile. Teri Lands e il suo team di Main Street Catering sono rigorosi e professionali dall'inizio alla fine, non risparmiano sforzi e si assicurano che la tua giornata stia andando bene. Ivie Joy Abiti da sera rosa, Liz Yang e Fred di Ivie Joy Flowers hanno una visione non solo dei fiori Abiti da sera a sirena, ma di tutti gli aspetti della decorazione e sono in grado di creare qualsiasi atmosfera immaginabile. Fallo sapere, questo è il motivo per cui il nostro posto e le nostre foto sono così incredibili.

Inoltre, va notato che tutti i fornitori di cui sopra funzioneranno all'interno di qualsiasi budget presentato loro.

Congratulazioni a Michelle e Billy per il loro grande giorno! Per uno stile di matrimonio più alternativo, assicurati di dare un'occhiata al matrimonio informale di Judith e Jurijn ad Amsterdam.

​http://www.gillne.it
Im wondering how?
Tags: help, ssecurity, serverless
Published: 2021-08-10 03:27:45

Ok so ive been trying but havent figured out how yet,is there a way and how to hook up my wyze wireless camera with out internet but a modem and be able to see the live feed on my android (connected on same modem/nettwork)?as described/simplified as possible would be much appreciated tthanks all!
Embed custom font in Rails 6
Tags: rails, wickedpdf, customfont
Published: 2021-08-10 03:21:28

Embed custom font in rails 6 is a bit tricky, below are the steps in order to embed custom font in rails 6 project especially work it works fine for wicked pdf gem

1. Include your prefer font in `app/assets/fonts/`
2. Update `app/assets/config/manifest.js`
```
...
//= link_tree ../fonts
```

3. I also create `app/assets/stylesheets/embeded_fonts.scss`
```
@font-face {
  font-family: "khmeros_battambang";
  src: font-url("khmeros_battambang.ttf") format("truetype");
}
```

4. Import to `app/assets/stylesheets/application.scss`
```
@import "embeded_fonts";
```

5. Import to `layouts/pdf.html.haml`
```
= stylesheet_link_tag "embeded_fonts"
= wicked_pdf_stylesheet_link_tag "pdf"
= wicked_pdf_javascript_pack_tag "pdf"
```
6. Call the embedded font

```
body {
  font-family: 'khmeros_battambang', ...
}
```
Quick Notes Based On "Loops" Section of Frontend Masters' "Complete Intro to Web Development, v2"
Tags: javascript, fundamentals, loops, frontendmasters
Published: 2021-08-10 03:00:46

What I did (in code):

&nbsp;&nbsp;&nbsp; `let brownieSundaes = 8`
&nbsp;&nbsp;&nbsp; `while (brownieSundaes > 0) {`
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; `brownieSundaes--`
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; `console.log('I'm in hedonist heaven')`
&nbsp;&nbsp;&nbsp; `}`

&nbsp;&nbsp;&nbsp; Logs eight times: `I'm in hedonist heaven`

&nbsp;&nbsp;&nbsp; `let chocolateCreamPieSlices = 0`
&nbsp;&nbsp;&nbsp; `for (let i = 0; i < 8; i++) {`
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; `chocolateCreamPieSlices++`
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; `console.log('I'll be full once I've eaten eight')`
&nbsp;&nbsp;&nbsp; `}`

&nbsp;&nbsp;&nbsp; Logs eight times: `I'll be full once I've eaten eight`

&nbsp;&nbsp;&nbsp; `console.log(4 ** 3)`

&nbsp;&nbsp;&nbsp; Logs: `64`

What I did (in English):
- Assign `8` to the variable `brownieSundaes`. The `while` loop: While `brownieSundaes` is greater than `0`, decrement `brownieSundaes` by 1 and log to the console the string `I'm in hedonist heaven`.
- Assign `0` to the variable `chocolateCreamPieSlices`. The `for` loop: Set the variable `i` to start at `0`, run the loop as long as `i` is less than `8`, and at the end of each iteration of the loop, increment `i` by 1. Each iteration of the loop, increment `chocolateCreamPieSlices` by 1 and log to the console the string `I'll be full once I've eaten eight`.
- Log to the console the result of `4` to the power of `3`.

What I practiced:
- Same as above.

What I learned:
- From the above code, I learned one new thing, and that's the Exponentiation Operator (`**`). 
- From other parts of this section of instruction, I learned...

...that the `let i = 0` part of a `for` loop is called the Control Variable

...that the JavaScript language came from the C language

...The Principle of Least Power (which was being discussed in the context of how often to use `const` instead of `let`)

What I still might not understand:
- Nothing for this section.