teleren/devto huggingface dataset:
Implement Queue using Array - Object oriented JavaScript
Tags: javascript, programming, codenewbie, algorithms
Published: 2021-06-17 16:10:23

👋🏾 Hey There!

In today's post, we look into how we can implement a `queue` using just an `Array` in **JavaScript**.

---
If you end up liking this post, feel free to follow me on 🐦**twitter** where I post JavaScript tips for the **visual learner** like this one:

{% twitter 1282646430780284928 %}
---

So let's begin 👐🏽

### The lesser-known Array methods
Most developers know about the JavaScript Array methods like `push()` or `pop()` but are not aware about the lesser known methods: `shift()` and `unshift()`.

While **push** and **pop** work at the rear end of the Array, **shift** and **unshift** work at the front. 

![Array methods](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u17pima0w04kgr8p7b1r.png)

You see where I am going with this, we can treat the native JavaScript Array as a queue or a stack based on the methods that we chose to use. But in this method, we are going to do it the **object-oriented** way!

### The `Queue` class
We will be creating a **Queue** class definition. As a part of that definition, we will be emulating the `enque()` and `deque()` methods.

``` javascript
class Queue {
  constructor() {
    this._arr = [];
  }

  enque(num) {
    this._arr.push(num);
  }

  deque() {
    return this._arr.shift();
  }
}
```
In the above class, we are using an internal `_arr` array that is not exposed to the external world outside the **Queue**. The only ways to interact with the array are the **enque** and **deque** methods!

If we look at how the methods are implemented, we are just treating the array as a queue, using the `push()` method to add to the queue and the `shift()` method to remove from the opposite end. 

### Using the `Queue` class
The `Queue` class that we created can be used as follows:
``` javascript
let que = new Queue();
que.enque(2);
que.enque(5);
que.enque(6);
que.enque(10);

que.deque(); // returns 2
que.deque(); // returns 5

// 6 and 10 are still in the queue
```
And that's all, we've successfully implemented a queue data structure using a JavaScript Array and some object oriented Javascript.

--- 
{% link https://dev.to/comscience/top-react-boilerplates-for-2021-21ce %}
100 Days of Code (Next.js)
Published: 2021-06-17 16:06:18

## My Commitment

I commit to following the rules of 100 Days of Code to the best of my abilities. I will code for a minimum of ah hour for every day for the next 100 days.

## What I am Doing

I am using these next 100 days to learn, explore, and build with [Next.js](https://nextjs.org/)! I have been using React.js for a while now, and I am excited to explore what Next.js has to offer.

I have a couple of projects in mind that I want to develop in Next.js to help me learn.

-  My portfolio site, [cameronthompson.io](https://cameronthompson.io)
-  Link Saver, [Repo](https://github.com/cdthomp1/link-saver-shortcut)
-  Recipe App, [Repo](https://github.com/cdthomp1/next-recipe-app)
-  A Secret Project 🤫

I have made a project board in [Notion.so](https://notion.so) to track my progress. You can see it here: [My Board](https://www.notion.so/abebf9463f324f839a957cdf771a5c53?v=da05b5cb944b4dbe9925f0670f337d5b)!
Hopefully when you check it out, you can see my active progress! There is a card labeled `Sign in Sheet`, go ahead and drop a comment and say hello and connect with others! (please be respectful 🙂)

## My Hopes

My hope while I am working on this challenge, is to become a better developer in a few ways, planning, documenting, and learning from others.

### Planning

On my board you will see that I have a some plans to make further plans on the projects that I will be working on. In the past, I generally just jump into a project with very little of a plan, this leads to scope creep that derails me often. I hope that I can plan better and stick to it so I can finish my projects!

### Documenting

I hardly add comments in my code, and my commit messages are neglected as well. During these next 100 days I hope to write good code comments and commit messages. In addition to those, I will also write a small summary of what I have done for the day, which can be found here on my site! I will also tweet a very short tl;dr on twitter with a link to the full article.

### Learning from Others

I get stuck. A lot. Often times out of arrogance when it comes to reading documentation, a little bit of ignorance sprinkled in there. I am apart of the [Learn Build Teach](https://discord.com/invite/vM2bagU) discord chanel, which is an awesome community to get help for all things web dev related! I will be able to ask questions there as well as other outlets like twitter or [dev.to](https://dev.to)

## Final Thoughts

I know this journey will not be easy, I know there will be some blockers that get in my way. I need your help to keep me accountable to this challenge. I genuinely do! I appreciate it! Happy Coding!
Employee vs Contractor
Published: 2021-06-17 15:54:15

Do you want to be an employee or a contractor and what are the pros and cons of each?  Are you even qualified and ready to be a contractor?  How do you determine what is a reasonable contractor hourly rate?  This video answers all those questions and more while reviewing the business and personal options to help you decide which is best for you.

For contractors I also discuss the formula for financial growth, what to do when there is no work, business structures, and some accounting options including FEIE.

{% youtube ZQaEKln9K18 %}
Quick Introduction to *a concept* in C++
Published: 2021-06-17 15:48:06

I've been writing C++ programs since past 5 years now (I didn't realize it has been that long until I typed this out) and have come across various concepts that beginners seem to struggle with. 

To help my fellow programmers in the community, I started a series of articles called **Quick Introduction to *a concept* in C++**. These articles are generally 2 to 5 minute reads that cover a `specific concept` in C++ in simple words, contain examples and point to comprehensive resources as well.

I read and reply to comments often, and you can suggest any topics you'd like to be covered in this series.

Here is a list of all the articles currently in the series :
(I'll keep updating this list as and when I write new articles)

[Quick Introduction to namespaces in C++](https://dev.to/guptaaastha/quick-introduction-to-namespaces-in-c-2pmg)
[Quick Introduction to using in C++](https://dev.to/guptaaastha/quick-introduction-to-using-in-c-4n73)
[Quick Introduction to typedef in C++](https://dev.to/guptaaastha/quick-introduction-to-typedef-in-c-5362)
[Quick Introduction to header files in C++](https://dev.to/guptaaastha/quick-introduction-to-header-files-in-c-4fda)
[Quick Introduction to class in C++](https://dev.to/guptaaastha/quick-introduction-to-class-in-c-57je)

>Why don't you use the **series** feature provide by dev.to?
Simply because it breaks the flow of the article. Different articles in the series are crowded on the top of the current article, which diverts the attention of the reader. I personally do not like that and therefore take the pain to update this post every time I write a new article in the series **Quick Introduction to _a concept_ in C++** :)

Consider reacting to the articles with a like, unicorn or a comment and sharing it with your friends if you like them and appreciate my efforts put into writing them. This helps the article reach more people who might benefit from these; no pressure though, I appreciate you just reading my article irrespective of you sharing or reacting to it.

As always, thanks for giving this article a read and I'll see you in the next one 😄
Dataset for scene change detection
Published: 2021-06-17 15:41:42

| Part | Description    |
| --- |:------------------:|
| [BBC Dataset](https://aimagelab.ing.unimore.it/imagelab/researchActivity.asp?idActivity=19)|<ul><li>>550 minutes</li><li>11 videos</li><li>~4500 scene changes</li><li>366x288 resolution</li></ul> |
| 4K videos|<ul><li>>25 minutes</li>   <li>5 videos</li>   <li>~200 scene changes</li>   <li>4K resolution</li></ul>|
| Other  videos|<ul>   <li>45 minutes</li>   <li>15 videos</li>   <li>~400 scene changes</li>   <li>1280x720 resolution</li></ul>|
| Summary|<ul><li>~620 minutes</li>   <li>31 videos</li>   <li>~5100 scene changes</li>   <li>4K to 366x288 resolutions </li></ul>|
Jest with React, Next JS
Tags: react, nextjs, testing
Published: 2021-06-17 15:36:39

Intorudction:
what is jest !
- Jest is a delightful JavaScript Testing Framework with a focus on simplicity.
- It works with projects using: Babel, TypeScript, Node, React, Angular, Vue and more!
 
what is react !
- JavaScript library for building user interfaces.

Why Test?

1) The first purpose of testing is to prevent the 
   reappearance of a bug that had previously been fixed.
2) Testing ensures the functionality of complex components 
   and modular applications.
3) Testing is required for the effective performance of a 
   software application or product.


Getting Started:
- First:

-Install Jest using yarn: yarn add --dev jest
-Install Jest using npm: npm install --save-dev jest
// yarn is recommended
// you can make one of this two command with any projects mentioned above

- Second:

-check your package.json file to be
![p-js](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a5yygzql444bpw3i27gr.png)
 
- Third:

-create file called sum.js with this content
![sum](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iiliazh0cloqew1ylc0w.png)
 

- Fourth:

-create a file named sum.test.js with this content
// it must be *.test.js
![test](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lztwq4gcj7g1qm22lzzu.png) 

- Finally:

-run yarn test or npm run test in terminal
then you will find this message appear in the terminal
PASS  ./sum.test.js
✓ adds 1 + 2 to equal 3 (5ms)

congrats you have learned above how to make testing with jest

- Testing Jest with React Apps:

1) npm i @testing-library/react react-test-render jest-dom --save-dev
2) create two files:
 - button.js (file contain the code you wan to test it)
 - button.test.js (file contain the test cases for the code)
![Screenshot from 2021-06-27 13-22-05](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v147iazf36g2yqjkhyfq.jpg)

note: the two files can be in separate places, can contain any name with this format *.js or *.test.js

3)let's look inside the JS file and the test file.
![btnComponent](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ok5jdg5h8b57fn7oj3le.png)
 ![btnTest](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nn1rgvg6gpixuk2gczbd.png)
 
  
4) check your package.json as i mentioned above.
5) run npm test in your terminal.
this message will appear in the terminal
Test Suites: 1 passed, 1 total
Main Branch #2
Tags: softwaredevelopment, productivity, projectmanagement, programming
Published: 2021-06-24 17:11:13

---
title: Main Branch #2
published: true
date: 2021-06-17 15:31:27 UTC
tags: softwaredevelopment,productivity,projectmanagement,programming
canonical_url: https://blog.shiftleft.io/main-branch-2-48502689024b
---

#### Expected Delivery

![](https://cdn-images-1.medium.com/max/1024/1*RCJMwMcey3lZabJP2j3vXw.jpeg)

Main Branch is a comic strip for developers produced by James Gilbreath, Jason Green, and Vickie Li.

* * *
Day 114
Tags: 100daysofcode, programming
Published: 2021-06-17 15:29:10

Day 114/200 of #200DaysOfCode #100DaysOfCode #100daysofcodechallenge 

- Solved two problems on Codewars.

1 - Greatest Common Factor of an Array (6 kyu)
2 - Greatest common divisor (7 kyu)
Window and this keyword ?
Tags: javascript, tutorial, codenewbie, webdev
Published: 2021-06-17 15:04:42

Table of content
- Shortest program in JavaScript
- window keyword
- This keyword
- Working behind the scenes

# What is the shortest program in JavaScript ?

Running an empty file in JavaScript is the shortest program in JavaScript. 

Create a JavaScript file with `.js` extension and compile the file using Dev Tools in the browser and the magic you would see that even though you have not written a piece of code but your JavaScript engine in the browser will create a complete new Global Execution context with all the methods and API available to you by your browser.

Isn't it interesting?.

# Window Keyword

This is a functionality provided by JavaScript engine. basically window is the class in which various functions and methods are encapsulated.

These functions and methods can be used anywhere inside our JavaScript program.

# This Keyword

This is an another functionality provided by JavaScript engine. `At the Global level this points to window keyword and their functionality`.

This is how JavaScript runs --> A global Context is created --> window object is created on initialised by the browser --> the this variable points to the window is created and the complete shortest program of JavaScript runs.

# Working behind the scenes.

Steps are:  

-  Global Space creation:  Anything not inside and block scope or a function scope is said to be in or bounded with Global Space.

`Window keyword is Global Space`.

So, everything outside the function will be under `window` keyword object or `Global State Object`.

Let's see an example to understand it better.

```js
var a = 10;  // Global space
function b() {  // Global space
  var x = 10;  // Not in Global space
}
console.log(window.a);  // Global space
console.log(a); // Global space
console.log(x); // Global space
```

Points to be noted: 

- Everything that is inside Global Space are accessed inside `window` object.
- Everything that is outside Global Space are not accessed inside `window` object.

Conclusion:  This vs window points to the same global space.

This concludes the blog if you like the content please support me: 

Read more blogs: [utkarshwhocodesblogs](https://utkarshwhocodesblogs.netlify.app)

Happy Coding!
Adios FontAwesome, Hola Tabler Icons
Tags: css, html, javascript, webdev
Published: 2021-06-17 14:58:05

[Tabler Icons](https://tablericons.com/) es una nueva manera que encontré de poder utilizar icons en tus proyectos web. Consta de **1280** iconos gratuitos en formato SVG que puedes usarlos desde ya. 

Es posible parametrizar los iconos cambiando desde el color hasta el tamaño y el grosor. Dale una chance, es super fácil. 

![img](https://repository-images.githubusercontent.com/243546335/6463da80-5f41-11ea-8f72-bb8d5dd26f29)
70% Discount on the Transformers NLP Course
Tags: python, machinelearning, datascience, deeplearning
Published: 2021-06-17 14:55:08

[Discount here!](https://www.udemy.com/course/nlp-with-transformers/?couponCode=MEDIUM)

Transformer models are the de-facto standard in modern NLP. They have proven themselves as the most expressive, powerful models for language by a large margin, beating all major language-based benchmarks time and time again.

In this course, we learn all you need to know to get started with building cutting-edge performance NLP applications using transformer models like Google AI's BERT, or Facebook AI's DPR.

We cover several key NLP frameworks including:

* HuggingFace's Transformers
* TensorFlow 2
* PyTorch
* spaCy
* NLTK
* Flair

And learn how to apply transformers to some of the most popular NLP use-cases:

* Language classification/sentiment analysis
* Named entity recognition (NER)
* Question and Answering
* Similarity/comparative learning

Throughout each of these use-cases we work through a variety of examples to ensure that what, how, and why transformers are so important. Alongside these sections we also work through two full-size NLP projects, one for sentiment analysis of financial Reddit data, and another covering a fully-fledged open domain question-answering application.

All of this is supported by several other sections that encourage us to learn how to better design, implement, and measure the performance of our models, such as:

* History of NLP and where transformers come from
* Common preprocessing techniques for NLP
* The theory behind transformers
* How to fine-tune transformers

We cover all this and more, I look forward to seeing you in the course!
Making website design for a transcription service in 2 days
Tags: webdesign, design, figma
Published: 2021-06-17 14:37:39

---
title: Making website design for a transcription service in 2 days
published: true
description: Making a Product: Transcripto, ep. 4
tags: webdesign, design, figma
cover_image: https://assets.mkdev.me/posts/covers/000/000/012/original/mkdev_article.png
---
'Making a Product: Transcripto' is an mkdev.originals web series that will see a small team of two making a working product step by step, from conception to designing and coding to the release! Join Kirill and Leo on the journey of creation of TRANSCRIPTO, a small but useful service for transcribing audio into text.

In ep. 4, after Kirill created a piece of code outlining the shape of the future application, Leo is getting inspired and gaining strength to transform the AI-suggested style into an acceptable web design:

{% youtube UX5avclYKuU %}

***

* [Episodes 0 & 1](https://dev.to/mkdev/the-road-to-mvp-planning-first-steps-and-brainstorming-the-product-features-in-miro-kb9): Introduction & The Road To MVP.
* [Episode 2](https://dev.to/mkdev/how-to-design-a-logo-for-your-startup-with-the-help-of-an-artificial-intelligence-40l5): How to design a logo with the help of an AI.
* [Episode 3](https://dev.to/mkdev/how-to-build-a-transcription-service-prototype-in-90-minutes-with-ruby-on-rails-and-aws-3884): How to build a service prototype in 90 minutes.
* [Episode 4](https://dev.to/mkdev/making-website-design-for-a-transcription-service-in-2-days-3m4): Making website design in 2 days.
* [Episode 5](https://dev.to/mkdev/the-impostor-syndrome-episode-adding-features-with-ruby-on-rails-and-having-fun-with-figma-and-css-2f4m): The Impostor Syndrome.
* [Episode 6](https://dev.to/mkdev/how-to-calculate-aws-stripe-costs-define-the-price-for-your-product-and-make-a-profit-on-the-way-1f8d): How to calculate AWS & Stripe costs.
* [Episode 7](https://dev.to/mkdev/is-there-a-place-for-a-small-startup-launch-without-a-big-promotional-budget-202n): Startup Launch.
* [Episode 8](https://dev.to/mkdev/aws-copilot-and-another-6-ways-to-easily-deploy-apps-to-aws-1njb): AWS Copilot.
* [Episode 9](https://dev.to/mkdev/you-ve-launched-a-new-product-now-what-4dkm): Now what?
Easy Ways to Make Captcha in Laravel 8
Tags: webdev, laravel
Published: 2021-06-17 14:34:32

In this article I will share how to create or apply a captcha to the register feature in laravel 8 to ensure that the register is human. In this experiment, I will use the laravel captcha package from Mewebstudio.

Read more at [Codelapan.com](https://codelapan.com/post/tutorial-cara-mudah-membuat-captcha-di-laravel-8)
Looking Back on Our First DEV Community Bug Smash
Tags: opensource, meta, devbugsmash
Published: 2021-06-17 14:05:34

In May, the Forem team launched our first DEV Community Bug Smash. This community-wide collaboration was all about improving the [Forem repository](https://github.com/forem/forem), encouraging more contributions from the community, and having fun in the process. Thank you to everyone who participated by smashing bugs and helping other contributors with their questions!

## DEV Community Members who Smashed Bugs!

### Eli H Schei (@elischei)
> _”I've been coding for years, but I'm new to the whole open source thing so I decided that the bugsmash would be a fun way to get more involved.”_

Eli took the time to investigate two of the bugs in our repository. Their investigation led to them finding out that both of those bugs were no longer valid! 

Check out Eli’s post to learn more about their first contribution.

{% post https://dev.to/elischei/well-that-was-easy-my-first-contribution-to-bugsmash-54po %}

Bugs Eli Smashed 🐛
{% github https://github.com/forem/forem/issues/4079 %}
{% github https://github.com/forem/forem/issues/8757 %}

### Joe Avila (@javila35)
> _“My biggest challenge in contributing to open source is believing in myself.”_

Joe helped fix a recurring error for our comment component. While working on this PR, the team was able to identify another issue that will be worked on separately. To see what bug Joe worked on and how he smashed it check out his post.

{% post https://dev.to/javila35/smashing-my-first-bug-4629 %}

### Arun-kc (@arunkc)
> _“The community members were really helpful and encouraging. Especially rhymes, I'm really thankful for your help.”_

Arun-kc helped create a fix for a more readable “published date” for people using our API. 
They are new to contributing to open source. Check out their post to learn more about their experience and reflections after their first contribution.

{% post https://dev.to/arunkc/the-first-bug-i-smashed-in-bug-smash-4fc6 %} 

### Monica Mateiu (@metamoni)
> _“Apart from the warm, fuzzy feeling that you've done something nice, the most valuable thing you'll get from open source contributions are the lessons you'll learn.”_

Monica chose a bug that many community members had commented on already. They took the time to read through the discussions before coming up with a good solution to smash the bug. You can read more about their experience and how they implemented a fix in their post. 

{% post https://dev.to/metamoni/improving-skip-navigation-on-dev-2bca %}

## Future Bug Smash Events
Thanks again to everyone who participated and helped clean up Forem's repository. Keep an eye out for more Bug Smash events in the near future. 

In the meantime, if you would like to learn more about contributing to open source check out this stream from @nickytonline and me.
{% youtube npDJGF1-w3w %}

You can also check out this wonderful post by DEV community member @ceeoreo 
{% post https://dev.to/codesandboxio/how-to-make-your-first-open-source-contribution-2oim %}