teleren/devto huggingface dataset:
Scrimba JavaScript Passenger Counter App
Tags: javascript, html, css
Published: 2021-09-19 13:50:40

I recently started a JavaScript course on scrimba. As part of this course I was required to create a passenger counter app. It was relatively easy. 

I completed this again locally. 

#### This was my HTML code: 

``` html 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Passenger Counter App</title>
    <link rel="stylesheet" href="index.css">
    <script src="index.js" defer></script>
</head>
<body>
    
    <div class="container">
        <h1>People entered:</h1>
        <h2 id="count-display">0</h2>
        <div class="row">
            <a href="#" class="btn" id="increment-btn" onclick="increment()">Increment</a>
            <a href="#" class="btn" id="save-btn" onclick="save()">Save</a>
        </div>
        <p id="entries-log">Previous entries: </p>
    </div>
</body>
</html>
```

#### This is my CSS styles: 

```css
*, *::before, *::after {
	box-sizing: border-box;
}

:root {
	--primary-dark: #23242b;
	--btn-1: #c40000;
	--btn-2: #01750b;
}

body {
	margin: 0;
	min-height: 100vh;
	text-align: center;
	color: var(--primary-dark);
	background-image: url(station.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	font-family: 'Segoe UI', Tahoma, Verdana, sans-serif;
}

h1 {
	letter-spacing: 0.125em;
	text-transform: capitalize;
}

h2 {
	font-size: 4rem;
	margin: 0.75em 0;
}

.btn {
	color: #FFFFFF;
	padding: 0.75em 1.8em;
	text-decoration: none;
	display: inline-block;
	border-radius: 0.25em;
	text-transform: uppercase;
	font-weight: bold;
	letter-spacing: 2px;
}

.btn + .btn {
	margin-left: 0.25em;
}

#increment-btn {
	background-color: var(--btn-1);
}

#save-btn {
	background-color: var(--btn-2);
}

#entries-log {
	font-weight: bold;
}
```
#### This is my JavaScript Code:

```javascript
let countDisplay = document.getElementById('count-display');
let entryLog = document.getElementById('entries-log')
let count = 0;

// Increment count being displayed
function increment() {
    count++;
    countDisplay.textContent = count;
}

// Save and log entries of people entering the station and reinitialize count
function save() {
    entryLog.textContent += count + " - ";
    count = 0;
}
```
Tips Menulis Surat Lamaran Kerja
Tags: surat, lamaran, kerja
Published: 2021-09-19 14:05:02

Contoh surat lamaran kerja yang baik dan benar sangat penting bagi Anda yang ingin diterima di perusahaan impian Anda. Ikuti tips yang bisa Anda ikuti untuk diperhatikan oleh HRD!

Salah satu berkas penting yang harus Anda persiapkan saat melamar pekerjaan adalah surat lamaran Anda.

Banyak orang yang masih belum mengerti cara menulis surat lamaran kerja.

Surat lamaran kerja harus disiapkan untuk Anda yang siap memasuki dunia kerja.

Setelah Anda menemukan lowongan yang cocok, langkah selanjutnya adalah menulis lamaran kerja yang baik dan akurat.

Cara menulis surat lamaran kerja sangat sederhana.

Namun banyak juga yang mengalami kesulitan mengingat banyaknya faktor yang harus diperhatikan.

Diawali dengan tata bahasa, format surat, dan diakhiri dengan isi keseluruhan surat lamaran.

Bagaimana cara saya melamar pekerjaan? Surat harus jujur, jelas, detail dan tidak berlebihan.

Hal ini agar lamaran pekerjaan Anda dapat menjadi daya tawar dan diapresiasi oleh perusahaan.

Source: https://www.cvsurat.my.id/
Lessons I have learnt from Project Management
Tags: management, project, lessons
Published: 2021-09-19 14:00:20

In smaller companies, we often have to be both the developer and project manager at the same time. This has made me to become a more all-rounded engineer and possess skills that are not technical-related, such as communication, project timeline management and resources allocation skills. Throughout these project management experiences, I would like to share some valuable lessons that I have learnt. 

1) Do not rely (or over-trust) project manager / coordinator from clients.

As a software consulting company, we often have to deal with the project manager from the client side. According to my experience, not all the project managers possess IT / software knowledge and therefore you might want to explain most of the things in layman terms. Ensure that both parties have the common understanding before proceeding with the implementation (in order not to hear some statements like: 'Oh... this is kinda different from what we discussed...' in the future).  

2) Single source of truth + meeting notes

You might want to use a proper documentation tool to keep track of all the discussed matters. Solely by emails is not a good option as we receive tons of emails everyday and some important information might be buried down the email threads. Docs management tool such as Confluence, is useful to document down proper product requirements and meeting notes. Besides, send the updated requirements docs to all the parties to ensure everyone is one the same pace and understanding.

3) Try not to amend the original requirements after the project kickstarted, unless both parties agree to delay on the timeline

We often easily agree on extra requirements that users / clients bring up DURING the development phase of the software or features. The whole project might be delayed due to these "extra little" requirements and most of the time these responsibilities fall upon our shoulders. This is my personal experience where I helped to fulfil some extra requirements throughout the development phase (which was not agreed in the original product requirements), and ended up with the consequences that users were not able to test them in time. If there are new requirements being brought up during the development phase, we should always negotiate these for the next phase of the project, else all parties have to agree on the delay of project timeline before implementing.

**Do follow me for more future articles on web design, programming and self-improvement** 😊
Smooth Bezier on Canvas
Tags: javascript, canvas, bezier, math
Published: 2021-09-19 13:44:22

{% codepen https://codepen.io/ZevanRosser/pen/wEwvdx  default-tab=js,result %}

Being able to draw smooth lines that connect arbitrary points is something that I find myself needing very frequently. This is a port of an old old snippet of mine that does just that. By averaging control points of a quadratic bezier curve we ensure that our resulting Bezier curves are always smooth.

It would be very cool if html5 canvas implemented the <a href="https://en.wikipedia.org/wiki/Centripetal_Catmull%E2%80%93Rom_spline" target="blank" rel="noopener">Catmull Rom Spline</a> but it unfortunately does not. The wonderful <a href="https://github.com/DmitryBaranovskiy/raphael/" rel="noopener" target="_blank">Raphael library</a> used to have support for it.


_See more stuff like this over @ [Snippet Zone](https://snippet.zone/)_
Professional video hosting

Tags: videohosting
Published: 2021-09-19 13:30:01



Ad-free hosting with high storage
Vadootv provides upto 10TB of storage to store courses, marketing videos or social ads

Get Started

How to host a video?
Video hosting in 3 steps?


Upload
Upload your video(s) in mp4, mov etc., on Vadootv with just one click


Optimise
We optimise videos to different formats & sizes to deliver on mobile, desktop or TV


Share
Share videos on your website, on facebook(social), emails, on our landing page and more

Customizable video player
Change the color, add your logo to make your brand standout, edit the look & feel of the player by removing the playbar, adding chapters, speed controls, and more — all with Vadootv's reliable & video player


Edit
Secure your videos.
Control who is able to watch your videos with password protection, domain security and HLS encryption.

Get Started https://www.vadoo.tv/features/video-hosting
How I solved the >>’ViewPropTypes’ is not exported from ‘react-native-web/dist/index’<< error in ‘react-native-snap-carousel’
Tags: reactnative
Published: 2021-09-19 13:16:04

##Introduction

I couldn’t find the fix for this error anywhere in the `react-native-snap-carousel` package, and it was really frustrating. 

Eventually, I solved it and I hope my quick fix helps other frustrated developers. If you have a better solution, please let me know.

##Solution

(1) Install [react-style-proptype](https://www.npmjs.com/package/react-style-proptype)

(2) Open the following files in the node_modules folder once you’ve installed `react-native-snap-carousel`:

`node_modules\react-native-snap-carousel\src\carousel\Carousel.js`

`node_modules\react-native-snap-carousel\src\pagination\Pagination.js`

`node_modules\react-native-snap-carousel\src\pagination\PaginationDot.js`

`node_modules\react-native-snap-carousel\src\parallaximage\ParallaxImage.js`

(3) Import `react-style-proptype` , as prescribed by the documentation, in each file mentioned above.

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

(4) Replace all instances of `ViewPropTypes ? ViewPropTypes.style : View.propTypes.style` with `stylePropType`.

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

(5) Delete the `ViewPropTypes` named import from `‘react-native’`

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

##Conclusion

Voila! Hopefully, this works for you too. If this helped, then please leave a like or comment. And once again, if you find a better solution, please let me know. 

If you liked this article, then please [support me] (https://www.buymeacoffee.com/hmcodes)
EEEEP. Tomorrow is the day
Tags: codenewbie, bootcamp, slightpanic, excited
Published: 2021-09-19 13:12:50

### So Tomorrow I start a 13 week boot camp with NorthCoders

To say I'm excited is an understatement, Don't get me wrong I've done coding in the past, from a little Minecraft modding in Java to HTML and JavaScript. I even dabbled in python for a little. I enjoy coding and I think I'm Good at it. I enjoy the challenge of solving problems and implementing solutions, so why am I nervous?

I think I'm nervous because this is the first time someone will really judge my code, Someone is going to take the time to not only teach me, but to also let me know if I'm actually any good.

My hopes for the boot camp is that I learn more than I Know now, I want to grow as a developer. I want to be able to be confident enough to attend interviews and confident enough to share my experience and knowledge with others. I've been through "tutorial hell" and back, I also suffer from a lot of Impostor Syndrome, When I code I have that nagging feeling in side the little whisper of "Am I good enough" I want to use the boot camp to finally beat that feeling.

I watched a video by James Q Quick that has helped me prepare and I think anyone planning on attending a boot camp should check it out too.

{% youtube xET89nLf_l0 %}



I feel like my kids felt when going into a new school, a little exited a little nervous. Let's just see what the next few weeks bring..

Scott 0/
Tips for Better Code Review
Tags: productivity, growth
Published: 2021-09-19 12:49:27

Code reviews can be really helpful to find issues before they head out to QA and also keep our code clean and efficient but sometimes they can be frustrating for the reviewer and the reviewee.

So, here are some tips for better code reviews!

### Keeping PR's small

PR should be small and easily reviewable, this decreases barrier for reviews and improves quality of review

This should help show direction and minimizes re-work. If you're looking to gather early feedback, github has [Draft PR](https://docs.github.com/en/github/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/about-pull-requests#draft-pull-requests) feature


### Focus on code not styling

This point may seem silly but it's quite true where styling isn't enforced by the language itself (for instance Go).

If this is a frequent issue in the code reviews. Try to settle styling guidelines eon either by building your own or using an existing one and automating it with CI.

### How can _we_ improve _our_ code

It's not about you, it's about the code. So don't take the reviews personally. Both sides i.e reviewee and the reviewer should assume best intentions.

Remember to use *we* and not *you*

### Actionable feedback

As a reviewer your comment should offer actionable feedback.
We've all had that one comment on our PR at some point in our life that made us think _"Okay, what the hell do I do with this?"_

Hence, the feedback should be actionable and a request not command.

**Don't**

_"This doesn't seem right_

**Do**

_"We're not sure about this approach, can you try XYZ? Here's an example or docs ..."_


### Who do I pick?

Picking right person for a review can be helpful. So before picking the reviewer be sure to ask your self _Who has the most context about this?_.

Assigning code owners can also be really helpful [(more on code owners)](https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-code-owners)

### Positive feedback

Code reviews don't have to be only about mistakes. They can also be about positive feedback.

For example:

_"This looks useful! I didn't know we can do that"_

_"Refactoring this was a great idea, thank you!"_


Lastly, remember to always be humble. Every code review can be a chance to learn something new. Have Fun!
Today's Daily Humor For Devs - Daily Developer Jokes
Tags: jokes, dailydeveloperjokes, watercooler
Published: 2021-09-19 12:00:15

---
title: "Today's Daily Humor For Devs - Daily Developer Jokes"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
published: true
tags: #jokes, #dailydeveloperjokes, #watercooler
---

Hi there! Here's today's Daily Developer Joke. We hope you enjoy it; it's a good one.

![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e125952bbb70.png)

---

For more jokes, and to submit your own joke to get featured, check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/). We're also open sourced, so feel free to view [our GitHub Profile](https://github.com/dailydeveloperjokes).

### Leave this post a ❤️ if you liked today's joke, and stay tuned for tomorrow's joke too!

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

<!--
Joke text:
___Q:___ Where did the API go to eat?

___A:___ To the RESTaurant
 -->
ES6 JavaScript: Part 1
Tags: javascript, beginners, angular, react
Published: 2021-09-19 11:56:08

One must know <b>ES6</b>, 

The <b>Modern JavaScript</b> concepts before learning or working on <b>JavaScript Framework</b> or <b>JavaScript Library</b>like <b>Angular</b> or <b>React</b>.

Explained about 

<li>Let </li>
<li>Const </li>
<li>Default Parameters </li>
<li>Spread Operator</li>
<li>Rest Operator </li>
<li>Object Literal </li>
<li>Template Literal </li>
<li>For Of</li>

{% youtube BAiU1b_4MtA %}
Vocabulary Building Day 16
Tags: gre, day16
Published: 2021-09-19 11:40:54

1. **torpor**(noun): a state of physical or mental inactivity; lethargy.
![alt text](https://www.wineverygame.com/words/images/torpor.jpg)
[Checkout Pronunciation](https://www.google.com/search?q=torpor&oq=torpor&aqs=chrome.0.69i59j0i433i512j0i20i263i512j0i512l7.2784j0j9&sourceid=chrome&ie=UTF-8)

2. **platitude**(noun): a remark or statement, especially one with a moral content, that has been used too often to be interesting or thoughtful
![alt text](https://dicotd.files.wordpress.com/2017/07/duckbilledplatitude.jpg?w=400)
[Checkout Pronunciation](https://www.google.com/search?q=platitude+meaning&oq=platitude&aqs=chrome.0.69i59j69i57j0i512l8.7868j0j9&sourceid=chrome&ie=UTF-8)

3. **incisive**(adjective): quick and direct.
![alt text](https://thesaurus.plus/img/synonyms/a532/incisive.png)
[Checkout Pronunciation](https://www.google.com/search?q=incisive&oq=incisive&aqs=chrome.0.69i59j35i39j0i20i263i512j0i512l7.21297j0j9&sourceid=chrome&ie=UTF-8)

4. **recondite**(adjective): little known; abstruse.
![alt text](https://i.pinimg.com/originals/d4/5b/a4/d45ba4559ff3733908d950b97d55addc.jpg)
[Checkout Pronunciation](https://www.google.com/search?q=recondite&oq=recondite&aqs=chrome.0.69i59l2j0i20i263i512j0i512l7.5344j0j9&sourceid=chrome&ie=UTF-8)
5. **meticulous**(verb): showing great attention to detail; very careful and precise.
![alt text](https://dxuoddg10rgxw.cloudfront.net/wp-content/uploads/2012/10/17022914/meticulous.gif)
[Checkout Pronunciation](https://www.google.com/search?q=meticulous&oq=meticulous&aqs=chrome..69i57j0i20i263i433i512l2j0i433i512j0i512l6.8607j0j9&sourceid=chrome&ie=UTF-8)
I hope this helps you if you are preparing for GRE exams.
An online shop API Node js 🤩
Tags: node, express, javascript, mongodb
Published: 2021-09-19 11:24:24

# onlineshop-api

An API for online store

## Features:

- Authentication
- Products listing
- Order placements

## Technology Stack:

- Node js
- Express Js
- MongoDB
- JWT

Github : https://github.com/saidMounaim/onlineshop-api

Follow me on github : https://github.com/saidMounaim/
My front-end Web development projects.
Tags: html, css, javascript
Published: 2021-09-19 11:22:00

Hello Everyone!!
I started my journey of web development by creating different projects along with learning. I believe that "Learning By doing" makes you perfect in your domain.
Check out all the basic frontend projects that I have created in the beginning of my learning.

 1.GirlScript program (Internship project) - 
  https://girlscript.github.io/Digital-Vidharba-Webpage/
 2.Netflix landing page clone- 
  https://tanwi1234.github.io/Netflix-clone/
 3.Number Guessing Game- https://tanwi1234.github.io/guessing-the-number-game/
 4.Calculator- https://tanwi1234.github.io/Neumorphism-calculator/

After doing all this mini project I understood  how to make a user interface of web app using Html,Css,JavaScript And different frameworks like ReactJS,Bootstrap.
check out all this project link if you are beginners it might be help you in your learning.
NestJS 8 ¿Qué hay de nuevo?
Tags: typescript, javascript, node, nestjs
Published: 2021-09-19 11:21:23

Hace muy poco se ha anunciado el lanzamiento oficial de NestJS 8. 

Este es un lanzamiento importante que abarca mejoras en toda toda la plataforma, incluido el framework, numerosas mejoras en los paquetes **@nestjs/graphql** y **@nestjs/config**, **CLI** y se ha actualizado toda la **documentación**.

Esta versión trae muchas características geniales y mejoras tan esperadas. Hay demasiados para enumerar aquí, pero echemos un vistazo de alto nivel a algunos de los mejores.

Si quieres ver la lista completa, click aquí:  [https://github.com/nestjs/nest/releases](https://github.com/nestjs/nest/releases) 




**API versioning**

Tradicionalmente, en las aplicaciones Node.js (y NestJS), el control de versiones de API nunca ha tenido una "forma correcta" de realizarse, ya que hay muchas formas de lograrlo.

En v8, podrás tener diferentes versiones de tus controladores o rutas individuales ejecutándose dentro de la misma aplicación. También se admiten 3 tipos diferentes de control de versiones: control de versiones de URI, control de versiones de encabezado y control de versiones de tipo de medio.


```javascript
@Controller({
  path: 'cats',
  version: '1', // 👈
})
export class CatsController {
  @Get()
  findAll(): string {
    return 'This action returns all cats for version 1';
  }
}
``` 



**Lazy-loading modules**

Por defecto, los módulos se cargan activamente, lo que significa que tan pronto como se carga la aplicación, al igual que todos los módulos, sean o no necesarios de inmediato. Si bien esto está bien para la mayoría de las aplicaciones, puede convertirse en un cuello de botella para las aplicaciones/workers que se ejecutan en el entorno sin servidor, donde la latencia de inicio es crucial.

La carga "lazy loading" puede ayudar a disminuir el tiempo de arranque al cargar solo los módulos requeridos por la invocación de la función sin servidor específica. Además, también puede cargar otros módulos de forma asíncrona una vez que la función sin servidor esté "caliente" para acelerar aún más el tiempo de arranque para llamadas posteriores (conocido como: deferred modules registration).




**Template literal types and ConfigService**

Con los tipos de literales de plantilla (template literals) ahora disponibles en TypeScript v4.2, podemos implementar una nueva función que nos permite inferir el tipo de propiedad de un objeto de configuración personalizado anidado, incluso cuando se usa la notación de puntos, como se muestra aquí:

```javascript
constructor(private configService: ConfigService<{ database: { host: string } }>) {
  const dbHost = this.configService.get('database.host', { infer: true });
  // typeof dbHost === "string"
}
```



**Upgraded dependencies**

Nest v8 finalmente ofrece soporte para Socket.io 4.0 y NATS v2 que no eran compatibles con v7. Además, Nest v8 utilizará la última versión de RxJS (v7).



Más y mejor en el post oficial de Nest:  [https://trilon.io/blog/announcing-nestjs-8-whats-new](https://trilon.io/blog/announcing-nestjs-8-whats-new)
Stop thinking about your work at night
Tags: mentalhealth, productivity, discuss, watercooler
Published: 2021-09-19 11:14:43

A week ago I saw a discussion where people talked about how they stay awake thinking about their code and how they dream about it sometimes.

Wondering why this happens and how to stop it, I tried to understand the psychology behind it by revisiting my own experiences with burnouts and mental health.

Checkout this thread to know more about the reasons you could be going through this and how to overcome this.

{% twitter 1439489693868040192 %}

If you have your own experiences to share, please make sure you add them in the comments below. If remote work is making things harder for you, check out my other article on [WFH best practices](https://dev.to/abh1navv/tips-for-an-efficient-and-productive-work-from-home-4374)

---

If you like this thread, Connect with me on Twitter for a one stop destination for all my threads and blogs.

Connect with other members of the tech twitter community to increase your growth manifolds.