teleren/devto huggingface dataset:
CodeSandbox Black, the best VSCode theme ever!
Tags: programming, vscode, themes, coding
Published: 2021-11-06 19:13:16

Designed in detail based on CodeSandbox, hope you enjoy it! Downloaded by over 20,000 developers worldwide.

I launched it on the Marketplace, and it would be fantastic if you checked it out and tried it yourself!
[CodeSandbox Black](https://marketplace.visualstudio.com/items?itemName=ziterz.codesandbox-black-theme)

## Preview

### React
<p align="center">
  <img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7yqzx9aq856erhsln7dz.png" alt="react"/>
</p>

### Vue
<p align="center">
  <img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mcqsds2wj5hdm5qain3a.png" alt="vue"/>
</p>

## Icons
<p align="center">
  <img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tc8xkehujw3vb4s084nb.png" alt="Material Icon"/>
</p>

Get Material Icons here [Material Icon Theme](https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme)

&nbsp;

## Fonts

<p align="center">
  <img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jelenpoutwyz24qz4zmf.gif" alt="MonoLisa"/>
</p>

Get MonoLisa fonts here [MonoLisa](https://www.monolisa.dev/)

&nbsp;

## Terminal

<p align="center">
  <img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dc7xttvn1xhrcqj9vv5d.png" alt="Oh My Zsh!"/>
</p>

Get Oh My Zsh for your terminal here [Oh My Zsh!](https://ohmyz.sh/)
Frontend Challenge #3, Three Column Card Component
Tags: webdev, beginners, codenewbie, challenge
Published: 2021-11-06 19:00:19

This is a brief description of the third frontend project I've completed from Frontend Mentors, 3-column preview card component. [Frontend Mentors](https://www.frontendmentor.io) is a online platform that provide front-end challenges that include professional web designs. You can play with the solution [here](https://jcsmileyjr.github.io/3-column-preview-card-component/).

## Step 1
Setup the general layout of the application with Flexbox. The three sections need to translate responsively from rows in mobile view to centered columns in desktop view. 
![setup layout](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hvt90cjyl8pdue4ht9dv.png)

## Step 2
Intentionally practicing using the BEM naming convention of block, element, modifier while adding styles to the content.
![BEM's HTML example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rb6egxqzyqhif49fa42w.PNG)

## Step 3
My biggest issue was making the design responsive. I'm still not sure why my try didn't work, but I had to add lots of style breakpoints to get responsiveness I desired. 
![GIF of responsive designing](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lgdjn4va0iobz9xa4d80.gif)

## Step 4
The final task is to add hover styles to the buttons. DONE!!!!
![Hover state for one of the buttons](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bj3bq8xydghhtgh6skxu.PNG)

## Final Outcome
![final version](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rfj73qdrnbys8ab7yp85.PNG)

## What I learned
1. Retouched the BEM naming conventions
2. Brief reminder of how to utilize a SVG image. 
3. Realized how much more practice I need with responsive designs

## Resources I used
- [Site about BEM](http://getbem.com/naming/) Recap of BEM naming conventions
- [Free Code Camp tips on SVG images](https://www.freecodecamp.org/news/use-svg-images-in-css-html/) for guidance using an SVG image.
Happy Birthday Images HD
Tags: help, webdev
Published: 2021-11-06 18:34:57

Happy Birthday Images HD - On this exceptional day, the birthday individual will give a treat to their companions. Individuals send glad birthday HD pictures, photographs, or pictures to wish their darlings on their birthday. In the event that you are searching generally advantageous and uncommon assortment of Birthday pictures to ship off your relatives, family members, or companions then you are at the correct spot. Look at the best birthday pictures, Photos, and Wallpapers beneath. 
Download HD Quality Images Here - https://www.happybirthdayimageshd.com/
VIDEO Inside Text In HTML5 CSS3
Tags: css, html, webdev, codenewbie
Published: 2021-11-06 18:28:34

Video inside text it’s like a super cool animation type of design/element. But it’s easy to make this kind of unique design.

So here we made Inside text in video using HTML and CSS with help of video. In this element, we used video tag and used CSS important properties. this is a responsive inside text video element for mobile and tab views.

Make it yours now by using it, downloading it, and please share it. we will design more elements for you.

[Source code](https://w3hubs.com/video-inside-text-in-html5-css3/)
What is JavaScript? JavaScript and Web Development?
Tags: javascript, webdev, node
Published: 2021-11-06 18:23:05


Whenever a web portal does far more than displaying static material on the screen— presenting regular content modifications, infographics, dynamic 2D/3D visuals, sliding multimedia jukeboxes, and so on — you can guarantee that JavaScript is being an active participant. It's the main module of a three-layer frame that is used in regular web technology solutions, the first two of which are HTML and CSS

HTML is the hypertext markup language that we have been using to give structure and legitimacy to our web content, such as establishing sections, format, and data tables, as well as inserting visual content.
CSS is a collection of rules and guidelines that we use to provide for customization to HTML content, such as changing theme colours and fonts and arranging material in rows or columns. Basically used for designing the web page.
JavaScript is a scripting language for creating dynamically updated material, controlling multimedia, animating pictures, and remarkably much everything else. 

How Would the Website Appear if JavaScript Wasn't Used?

All you'd have on the web if JavaScript didn't exist would be HTML and CSS. Only limited website constructions are possible with them together. Without JavaScript, your webpages and websites would be static, with CSS providing just the dynamic modifications such as animations.


Benefits of JavaScript:

The following are some of the Advantages of JavaScript:

1. You can authenticate user input before transferring the page to the server, resulting in less server interaction. This reduces server traffic, resulting in lower stress on your server.

2. Visitors get instant results; they wouldn't have to wait for the page to update to discover if they've missed something.

3. Increased active engagement: You may make UI that responds when the user moves their cursor through them or triggers things with the key.

4. To provide a Rich Interface to your site users, you can utilize JavaScript to incorporate features like roll elements and slideshows.


A Web application is divided into two parts:
Client-side 
Server-side

The Client-side is software that runs on a user's web browser, while server-side software operates on the server. Client-side web development focuses on interactivity and data visualisation, whereas server-side web development focuses on data management behind the scenes.

Client-side, server-side, and full-stack development are the three main types of web development. To make a website work, both client-side and server-side programmes are required. In order to create a well-designed and functional product, skilled professionals in these domains frequently need to collaborate closely.

JavaScript can be used on both the client-side and server-side. A truly wonderful creation.

Follow us:
Twitter: https://twitter.com/OurCodingHours?t=D4nR-rb1jXhbeq3UDo2q_Q&s=09

Instagram: https://instagram.com/ourcodinghours?utm_medium=copy_link
Patterns in the multiples of 2, 5, 10 and 3
Tags: math, numbers, patterns
Published: 2021-11-06 17:24:55


Recognizing patterns in the multiple of 2, 5, 10, and 3 is helpful. 

#### multiples of 2
```
2 x 1 = 2
2 x 2 = 4
2 x 3 = 6
2 x 4 = 8
2 x 5 = 10
2 x 6 = 12
2 x 7 = 14
2 x 8 = 16
2 x 9 = 18
2 x 10 = 20
```
The last digit of any multiple of 2 is 0, 2, 4, 6, or 8. so if you want to find out 456 is a multiple of 2, check the last digit is 0, 2, 4, 6, or 8. which is, in this case, is 6 and 456 is a multiple of 2. simple right?
``` 2 * 228 = 456```

#### multiples of 3
```
3 x 1 = 3
3 x 2 = 6
3 x 3 = 9
3 x 4 = 12
3 x 5 = 15
3 x 6 = 18
3 x 7 = 21
3 x 8 = 24
3 x 9 = 27
3 x 10 = 30
```
unlike the patterns of 2, 5, and 10 patterns of 3 is not based on the last digit. the pattern of 3 is based on the sum of the digits. if the sum is a multiple of 3 then the number is a multiple of 3.

e.g. `372 3+7+2 = 12` 12 is a multiple of 3. so 372`(3 x 124)` is a multiple of 3.

#### multiples of 5
```
5 x 1 = 5
5 x 2 = 10
5 x 3 = 15
5 x 4 = 20
5 x 5 = 25
5 x 6 = 30
5 x 7 = 35
5 x 8 = 40
5 x 9 = 45
5 x 10 = 50
```
multiples of 5 end with either 5 or 0.


#### multiples of 10
```
10 x 1 = 10
10 x 2 = 20
10 x 3 = 30
10 x 4 = 40
10 x 5 = 50
10 x 6 = 60
10 x 7 = 70
10 x 8 = 80
10 x 9 = 90
10 x 10 = 100
```
The multiples of 10 end with 0.

notice that the multiples of 10 are the numbers that are multiples of both 2 and 5. That's because `10 = 2 x 5`. the same principle applies to multiples of 6. if a number is a multiple of both 3 and 2 then that number is a multiple of 6.
7 Skills needed to become a front-end developer for Juniors 
Published: 2021-11-06 17:20:11

7 Skills needed to become a front-end developer for Juniors 
Hello everyone my name is Ramson Odoi and I am a frontend developer.
I would like to share with you 7 skills needed to become a frontend developer for juniors.Let get started!

[1/7] Learn HTML and CSS
Hypertext markup language (HTML) and cascading style sheets (CSS) are a websites skeleton.
While HTML gives structure to web pages, CSS helps style the HTML elements with the colour,
Fronts, typeface, and more.
[2/7] Learn Javascript 
This client-side programming language lets you add interactive features, including polls,slideshows,and forms, to a website. It also offers support for dynamic elements, including, but not limited to,page animation,scrolling,audio, and video.

[3a/7] Learn a Framework 
Frameworks are prewritten code modules for common website elements like login and search interfaces. 

They're easy to incorporate and are reusable.
Examples of popular javascript frameworks include AngularJS, Ember and ReactJS.

[3b/7] Learn how to use Libraries 
Libraries (plugins &extensions), are useful for adding prefabricated elements to a website. A good example is a countdown timer on a retail website. jquery is a commonly used open source JS library with plenty of customization options.

[4/7] Version control system 
A version control system is software specifically designed  to track changes made to code over time.
[5a/7] Cross-browser
Depending on various factors, a website's appearance may change across browsers. Developers use browse tools to address this issue.
Browser tools allows developers to test and fine-tune webpages in a way that is best suited to a particular browser.
[5b/7] Device testing 
Developers use responsive design techniques to change site layout and design depending on the type of device accessing it.
[6/7] Web performance optimisation (WPO)
A slow loading website can reduce user engagement drastically. Website performance optimisation techniques help ensure faster loading times through automation tools.
[7/7] Search engine optimization (SEO)
SEO: the practice of increasing traffic to a website organically through search results.
Generally, there is a separate team to supervise SEO practices. However,knowing the basics can help you determine where to place the different tags.
Thank you for reading!
Hello World com Terraform
Tags: terraform, beginners, iac, devops
Published: 2021-11-06 17:19:40

O Terraform trabalha com uma linguagem de configuração construida em blocos como os blocos [provider](https://www.terraform.io/docs/language/providers/index.html), [resource](https://www.terraform.io/docs/language/resources/index.html), [variable](https://www.terraform.io/docs/language/values/index.html) entre outros.  

O objetivo principal da linguagem Terraform é declarar recursos , que representam objetos de infraestrutura. Todos os outros recursos de linguagem existem apenas para tornar a definição de recursos mais flexível e conveniente.

Os blocos são contêineres para outro conteúdo e geralmente representam a configuração de algum tipo de objeto, como um recurso. Os blocos têm um tipo de bloco, podem ter zero ou mais rótulos e ter um corpo que contém qualquer número de argumentos e blocos aninhados. A maioria dos recursos do Terraform é controlada por blocos de nível superior em um arquivo de configuração. Em outras palavras o Terraform trabalha com encapsulamento e instancias de objetos.

Beleza, nada melhor do que um Hello World para começar uma nova linguagem né?

No terraform o resultado de uma execução e tratado como uma saida da propria execução.

Para definir uma saída, você abre um bloco de saída usando a palavra chave *output*. Você então começa o bloco *output* com {. Você só tem permissão para definir uma única propriedade chamada value. Qualquer valor que você der à propriedade value será enviado ao console após um sucesso terraform apply. Você então fecha o bloco de saída com }.

```terraform
output "message" {
    value = "Hello World"
}
```
A saida será essa: 

![output exemplo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aiavl59mrjtqzo0sp09j.png)

Para saber mais sobre a linguagem e só clicar [aqui](https://www.terraform.io/docs/language/index.html)

Vlw Flw
JavaScript OOP is weird
Tags: javascript, webdev, programming
Published: 2021-11-06 16:57:14

When I discovered Object-Oriented Programming in JavaScript, I was confused. At first, It seemed straightforward. Creating a class was pretty much like Java.

```
class Student { 
}
```

But right after this declaration, a lot of questions popped into my mind. I've realized something was missing: the access modifier public before class. So, I added it. Unfortunately, my code editor didn't like it. public was highlighted. When I hovered over it, I got this message.

```
The 'public' modifier can only be used in TypeScript files.ts(8009)
```

I was like "What ! I'm coding in JavaScript. Why Are you talking about Typescript ?". After a few searches on Google, I discovered JavaScript did not have the public keyword in its vocabulary. It was somewhat implicit.

I continued coding. I wrote my first constructor.

```
class Student {  
 
   constructor(name, faculty){   
      this.name = name;   
      this.faculty = faculty;   
  }
} 
```
Coming from a Java background and having done a few C++, it was weird. The constructor did not have the same name as the class and I'd initialized the instance properties name and faculty before declaring them upfront. I found out later that class fields existed. So, I could rewrite this code, the Java or C++ way. This put my mind at ease.

```
class Student {   
     name;   
     faculty;   
     
     constructor(name, faculty){   
       this.name = name;   
       this.faculty = faculty;   
     } 
}
```

Nonetheless, I wasn't quite satisfied. I was wondering about making my class fields private to comply with OOP Encapsulation Principle that encourages to restrain direct access to class elements such as fields, properties or methods. As for public, the private keyword doesn't exist in JS world. So, I told myself at the moment: "How come this language is so limited ?".

I was too eager to criticize until I found the #. All you have to do to make a property or method private is to put right before it the harsh (#) symbol.

```
import moment from "moment";

class Student {
  #name;
  #faculty;
  #birthDate;

  constructor(name, faculty, birthdate){
   this.#name = name;
   this.#faculty = faculty;
   this.#birthDate= birthDate;
  }
 
  #computeAge() {
    return moment(this.#birthDate, "YYYY-MM-DD").fromNow();
  }

  getAge() {
    return this.#computeAge();
  }
}
```
OOP in JavaScript is not canonical. You will have a lot of surprises if you're coming from a pure Object Oriented Programming language. Consider migrating progressively to Typescript, which is a superset of JavaScript, to have less headache.

---

If you enjoyed reading this post, we'll appreciate it if you could recommend it and share it with your friends. If you don't have ones, then just follow us, we'll be your friend.
A new highlighting feature of GitHub
Tags: news, github
Published: 2021-11-06 16:48:53

GitHub has introduced a new and possibly great feature. That is, highlighting the Code of Conduct in the sidebar like the License or Readme. 
![Code of Conduct](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bsqqrwjsic6i38mdq9jz.jpg)

As the response to Julia Ferraioli's (@juliaferraioli) status on [Twitter](https://twitter.com/juliaferraioli/status/1451653024359665668), GitHub shared the information on their [twitter status](https://twitter.com/github/status/1456635470339788803) that from today, if you have a "CODE_OF_CONDUCT.md" file in the root of your repo, they will highlight it. To learn more about it, you can visit [here](https://docs.github.com/en/communities/setting-up-your-project-for-healthy-contributions/adding-a-code-of-conduct-to-your-project).
Arrays Basics
Tags: javascript, webdev, beginners, programming
Published: 2021-11-06 16:34:15

In Arrays, we can store multiple items of the same type together.

<b>int A[5];</b> → means that we have declared an array of size 5
when we count arrays we count from zero , so here count is represented by index.

![count arrays](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rrpehg3a655j1mmthyvw.jpg)

<b>A[0]=14;</b> → means we have stored 14 at index 0
<b>A[1]=2;</b> → means we have stored 2 at index 1

We can declare above array easily by using code blocks
<b>int A[10]={3,5,6,7,8,9};</b> → this is called declaration + assigning the value

<blockquote>I would recommend you to study C language from <a href="https://www.geeksforgeeks.org/c-language-set-1-introduction/">GeekForGeeks</a> and learn about structures</blockquote>

<b>HINT :- To print all array values</b>

<code>
for(int i=0;i<5;i++){
  printf("%d", A[i];
};
</code>
Open Positions / Roles  / Internships
Tags: hiring, react, career, startup
Published: 2021-11-06 16:30:32

## Our Mission
Edvora is a long-term mission for the future of edtech plus in education, technology, finance, and enterprise, individually and incorporated. Edvora accelerates the pace of transformation with recent advancements in emerging technologies. It is the platform for everything and everyone to improvise, enhance, and access state-of-the-art models thereby redefining the prevailing structure with a better quality.

## Engineering
- [Frontend Engineer](https://www.edvora.com/careers/E01)
- [Full Stack Engineer](https://www.edvora.com/careers/E02)
- [Native Mobile Developer (Android / iOS)](https://www.edvora.com/careers/E03)
- [Frontend Intern](https://www.edvora.com/careers/E04)
- [Backend Intern](https://www.edvora.com/careers/E05)
- [Web Development Intern](https://www.edvora.com/careers/E06)

## Marketing
- [Business Dev Intern](https://www.edvora.com/careers/B01)
- [Marketing Intern](https://www.edvora.com/careers/M01)

## Design
- [UI UX Intern](https://www.edvora.com/careers/D01)

## Work Location
All roles are fully remote. You can be anywhere in the world to apply for these positions.

## Perks
- Performance based stipend and PPO 
- Work directly with our core team.

## How to Apply?
[Apply Here](edvora.com/careers)

Send us your complete application with the subject line as the role that you are applying for and a few details about you on careers@edvora.com
Native iOS / Android Developers
Tags: android, ios, swift, java
Published: 2021-11-06 16:23:54

[Application Link](https://www.edvora.com/careers/E03)

## Responsibilities
- Support the entire application lifecycle - concept, design, test, release, and support.
- Produce fully functional mobile applications writing clean code.
- Gather specific requirements and suggest solutions.
- Troubleshoot and debug to optimize performance.
- Design interfaces to improve user experience.
- Liaise with Product development team to plan new features
- Ensure new and legacy applications meet quality standards
- Research and suggest new mobile products, applications and protocols
- Stay up-to-date with new technology trend

## Requirements
- Proven work experience as a Mobile developer.
- Demonstrable portfolio of released applications on the App store or Play Store
- Functional knowledge of Android Studio and Xcode.
- In-depth knowledge of at least one programming language like Swift, Java & XML.
- Experience with third-party libraries and APIs.
- A keen eye for discerning small visual and functional discrepancies.
- Excellent analytical skills with a good problem-solving attitude.

## Experience
Java: 1+ years
XML: 1+ years
Swift: 1+ years
Open roles:

All roles are fully remote. You can be anywhere in the world to apply for these positions.

## Role Type
Full-Time

## How to Apply?
Send an email to careers@edvora.com with the subject line as the role that you are applying for and a few details about you.
Dev.to as a headless CMS
Tags: react, javascript, webdev, opensource
Published: 2021-11-06 15:41:15

It has been long since I wanted to develop a website for blogging. Everytime I sat with it the one thing that disturbed me is that I have to setup everything from scratch - i.e. design databases, choose a framework for writing my APIs, test my APIs and many more. I was never a fan of coupled CMS like Wordpress. 

## Dev.to

That is when I started writing on Dev.to. The reason why I chose Dev.to over Medium has to be the activity I could see on a daily basis. I know Medium is very popular and is good to make some money writing. The thing was I wasn't sure whether the blog will lead to anything at all, because of the multiple projects I could see that are pending in my list. 

I loved writing on Dev.to probably because of it's editor. No clutter, blackish background, markdowns possible. That is all that I ever needed I guess. So I started writing and soon I realized I don't have a nice home page if I wanted to show my blog off to my friends. And that is when I started wandering. And eureka. 

## The heavy-lifters

[Dev.to](https://dev.to/) actually has everything built in for you. They have APIs exposed publicly that you can use to create a nice front-end for your blog. The GET requests are free, while you need an API-Key for the POST/PUT ones I guess. But that didn't much matter to me as I just wanted people be able to read contents for the MVP.

It took well over a day to set things up. So the backend is powered by Dev.To (Thank you :D), the front-end is hosted on Netlify. It was made using ReactJs. The only cost I incurred was the custom domain I bought from GoDdaddy for 199 a year I guess. So that is it. Cheapest blog setup ever I guess. So essentially Dev.to does all the hosting for me. Thank you [Dev.to](https://dev.to/) developers for keeping the system in perfect condition always. 

[Here](https://developers.forem.com/api/) is the API documentation if you want to give it a go 

## How it ended

Here is how the blog looks like today. I am pretty sure I will start working on it soon again or atleast I hope.

Here is the desktop and mobile view of the blog. 
![Blog View](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/muc6h1rfk1zd2vpbita4.png)

You can access the blog over [HERE](https://www.thedecode.online/). I know there are a lot of improvements possible just as you open it. But it satisfied my use-case I guess - almost free blogger. 

In my next post I will bring in an even fancier way of doing things using [Strapi](https://strapi.io/). Till then - 

Happy coding!!!