teleren/devto huggingface dataset:
Figure out: how 'junior' a junior developer is!!!
Tags: discuss
Published: 2020-11-04 19:53:28

0-->3 years developers are  counted as junior developers. 
You may ask a few questions or examine how they programme to distinguish good developers from this crowd of junior developers.

*Back-end:*
*Ask junior developer* to create a CRUD form with name, email and phone number. 
Language: Any
Framework :Not allowed.

*Once he create now check:*
1- Did he used client side validation?
2- Did he also added server-side validation of form fields?
3- Did he used CSRF token ?
4- Did he expired CSRF token with session or before session or he is not expiring?
5- Did he used function and classes in crud?
6-Bot check with captcha before submission of form?
7- Did he made an approach with oop ?
8) Is the all values tabulated by developer is looped at once from database or every pagination is requesting fresh values.

*Front-end:-*
1) Ask to write media query for some standard devices.
2) Ask him to use calc to calculate padding value of div by device width.
3) Create a modal + multiple modal in a page.
4) create collapsable navbar.
5) Write manifest for pwa.
6) Write Service worker for pwa.
7) Do he know tools like lighthouse or gtmatrix?
8) Does he used meta tags? 
9) Code quality as per seo.

*Devops*
1) Does he knows anything about load balancing? ( Hint him with HAPROXY)
2)Ask him to create a container with different resources.
3) Ask him to use iptables to listen a container / vm on any port.
4) Ask him about reserved ports like 80, 22,110 etc. Ask him is it possible to listen these ports of vm / container on any other port of host?
5) Ask him to write a shell script to download some softwares with shell scripts.
6) What are different popular Desktop Environments in linux. 
7) Convert a server into desktop.
8) How to take server backup on any other remote drive / server.
9) What OCI means in container technology.
10) Update GitHub and server files get updated by itself. Does he know how to achieve it?

Let me know your views.
Front end development vs. Back end development
Tags: frontend, backend, webdev, webdesign
Published: 2020-11-04 19:48:11

The website’s front end is everything you see and can interact with using a browser. So, creating this visual part is called front-end development. You could even say that designers creating user interfaces and planning experiences are also front-end developers, as they are working in collaboration on the same part of the project.
To create the front end, engineers use the combination of HTML (for basic page structure and content), CSS (for visual editing), and JavaScript (for making websites interactive). The same set of tools is used to create progressive web apps –  mobile apps that look and feel like a native one but are created with the use of front-end technologies.

On the other hand, the back end is everything that happens, well, backstage. It contains servers where your web pages are located and the underlying logic that governs the website’s functions and processes. 

The back end is built using a different set of technologies, including Java, PHP, Ruby, C#, and sometimes Javascript
Hacktoberfest Will Never End
Tags: hacktoberfest, opensource
Published: 2020-11-04 19:37:40

Successfully completed Hactoberfest challenge completed

I know very little about world of Open Source. Hactoberfest Helped me to explore it.
Contributions
Since i am from coding background i used my knowledge of C++ for Contributions. I have gave algos for stack and queue data structure and solved two more problems. 

Reflections
I learnt how to make a PR. How to communicate with the community. How to help Learn And Grow Together.

Thank You Hacktoberfest Organisers.
Waiting For More Such Events
Use theme (material ui) in overrides...
Published: 2020-11-04 19:34:54

Create your theme: 

import { createMuiTheme } from '@material-ui/core/styles';
import purple from '@material-ui/core/colors/purple';
import indigo from '@material-ui/core/colors/indigo';
import red from '@material-ui/core/colors/red';

<code> const theme = createMuiTheme({
  palette: {
    primary: {
      main: purple[500],
    },
    secondary: {
      main: indigo[500],
    },
    error: {
      main: red[500],
    },
  },
  typography: {
    fontFamily: '"Ubuntu sans-serif"',
  },
});
</code>

**Then, use it in overrides:**

<code>theme.overrides = {
  ...theme.overrides,
  MuiCssBaseline: {
    '@global': {
      html: {
        WebkitFontSmoothing: 'auto',
        backgroundColor: 'black',
        padding: '0',
        margin: '0',
        outline: 'none',
        boxSizing: 'border-box',
      },
      body: {
        fontFamily: 'Ubuntu sans-serif',
      },
      a: {
        textDecoration: 'none',
        color: theme.palette.error.main,
      },
    },
  },
};
export default theme;</code>

In that way you can use the pre-determinated colors just right here.
Illustrated Notes on Advanced JavaScript Fundamentals
Tags: javascript, fundamentals, es6, illustration
Published: 2020-11-04 19:27:35

---
title: Illustrated Notes on Advanced JavaScript Fundamentals
published: true
description: Illustrated notes from Tyler Clark's course on Advanced JavaScript Foundations
tags: javascript, fundamentals, es6, illustration
//cover_image: https://dev-to-uploads.s3.amazonaws.com/i/yptnlyus1kk7gwhacraa.png
---

![AdvJS_Devto_1](https://dev-to-uploads.s3.amazonaws.com/i/yptnlyus1kk7gwhacraa.png)

Being humans, we rarely learn things linearly. 

No one begins their JavaScript journey by reading the [TC39 language specification](https://www.ecma-international.org/ecma-262/5.1/) line-by-line like a pedantic masochist.

Instead we all cobble together a good-enough understanding, leaving holes here and there to fill in later.

If you're like me, you might have been stumbling through your JavaScript journey without 100% grokking prototypical inheritance, or how call, apply, and bind work on functions.

It's fine. Stuff mostly works.

Until it doesn't ¯\_(ツ)_/¯

At some point, it's useful to stop stumbling around and peek back at those holes.

I found [Tyler Clark](https://tylerclark.life/)'s egghead course on [Advanced JavaScript Foundations](http://bit.ly/advanjs) was the perfect opportunity to strengthen my JS foundations.

![Course illustration for advanced js foundations](https://og-image-egghead-course.now.sh/advanced-javascript-foundations)

While working through the course, I illustrated a set of notes to help me understand and remember all the concepts.

---


## Primitive Types & Autoboxing
![AdvJS_Devto_2](https://dev-to-uploads.s3.amazonaws.com/i/fi23jfu7sk6dg93ih5wn.png)

![AdvJS_Devto_3](https://dev-to-uploads.s3.amazonaws.com/i/iarcq081q6des3f8x1ab.png)

---

## Prototypical Inheritence
![AdvJS_Devto_4](https://dev-to-uploads.s3.amazonaws.com/i/y4qqxeck4g8sslji0i0i.png)

![AdvJS_Devto_5](https://dev-to-uploads.s3.amazonaws.com/i/21qod9kkjqmdags9lqkg.png)

---

## The `New` Keyword
![AdvJS_Devto_6](https://dev-to-uploads.s3.amazonaws.com/i/qwtl1to15pcq3mpnz3a5.png)

---

## The `.this` keyword
![AdvJS_Devto_7](https://dev-to-uploads.s3.amazonaws.com/i/9tukzo8br4ua12493pyp.png)

![AdvJS_Devto_8](https://dev-to-uploads.s3.amazonaws.com/i/32btc9ychevfztgfvufw.png)

![AdvJS_Devto_9](https://dev-to-uploads.s3.amazonaws.com/i/ou62u9mo4a64m78c9y6g.png)
         
---

These illustrations aren't perfectly designed to explain the concepts they're about, and instead work as shorthand notes for me.

Take a look at [Tyler's course](http://bit.ly/advanjs) if you want to dig into the concepts more.
Quickly switch projects
Tags: bash, productivity, vscode
Published: 2020-11-04 19:16:07

As I work on different projects at the same time, I want to be able to switch quickly between them. So if I need to work on _Project-x_ I just run in the terminal:

```bash
projectx
```

VS Code is opened at the right project, the web server starts and opens a browser on the correct URL.

This is easily done by adding an alias `projectx` to your `.bashrc` or `.zshrc` with the following contents:

```bash
alias projectx="cd /Users/tom/projects/project-x && code . && npm run dev"
```

_Bonus:_

How to get the right path? Run `pwd | pbcopy` in the root dir of your project.
How I replaced a nested for loop with flatMap
Tags: swift, programming, ios
Published: 2020-11-04 19:05:09

---
title: How I replaced a nested for loop with flatMap
published: true
description: How I transformed an array of arrays using flatMap instead of nested for loops.
tags: #swift #programming #ios  
canonical_url: https://monicagranbois.com/blog/swift/swift-flatmap/
//cover_image: https://direct_url_to_image.jpg
---

This is a short post about how I refactored a nested for loop using flatMap. I had a struct that defined name and quantity properties as shown below: 

```swift
struct Item {
  let name: String
  let quantity: Int
}
```


The actual code used a custom type rather than a String, but I've used String here to simplify the example. 

<!--more-->

I also had an array of Items. However, I wanted to create a new array that contained each Item's name for a count of its quantity. So, given the following: 


```swift
let myList = [
  Item(name: "Apple", quantity: 2),
  Item(name: "Banana", quantity: 1),
  Item(name: "Carrot", quantity: 3),
  Item(name: "Doughnut", quantity: 1)
]
```

I wanted a new String array containing the following:

 
> ["Apple", "Apple", "Banana", "Carrot", "Carrot", "Carrot", "Doughnut"]


My first attempt was using for loops:

```swift
var nameList: [String] = []
for item in myList {
  for _ in 0..<item.quantity {
    nameList.append(item.name)
  }
}

print(nameList)
```

However, I did not like the nested for loops.  It seemed verbose; I wanted to condense the code. Fortunately, Swift provides two things that make this refactoring possible:

1. An Array initializer that takes repeating and count parameters: [Array(repeating:count:)](https://developer.apple.com/documentation/swift/array/1641692-init)
1. The [flatMap](https://developer.apple.com/documentation/swift/array/3126947-flatmap) function

I thought of using [map](https://developer.apple.com/documentation/swift/array/3017522-map), but map would result in an array of arrays. For example:

```swift
let nameListMap = myList.map { Array(repeating: $0.name, count: $0.quantity) }
print(nameListMap)
```


> [["Apple", "Apple"], ["Banana"], ["Carrot", "Carrot", "Carrot"], ["Doughnut"]]


Not what I wanted. Fortunately, there is flatMap. FlatMap works like the map function, but it flattens an array of arrays. Just what I needed! So, the for loop could be replaced with the following:

```swift
let nameList2 = myList.flatMap{Array(repeating: $0.name, count: $0.quantity)}
print(nameList2)
```

> ["Apple", "Apple", "Banana", "Carrot", "Carrot", "Carrot", "Doughnut"]

The above code is doing the following:
1. For each Item in myList a new Array is created. It is populated with the Item's name for a count specified by the Item's quantity.
1. It then joins the arrays, resulting in a single, flat, array


Hurray!
Can we make searching for Hacktoberfest projects to contribute easier next year?
Tags: hacktoberfest
Published: 2020-11-04 19:01:39

It was the first time I participated. I've heard something about the Hacktobefest before, but never paid attention—not least because contributing to various projects is a part of my daily work and life and I never looked for events encouraging people to contribute.

I have to admit the PR spam drama was what got me curious enough to actually take a look. Initially I thought I'll use the challenge to make some PRs I was going to make but kept leaving for later.

Then came the rules change. I thought if I registered for that thing anyway, I can as well use it as a challenge to find new interesting projects. Indeed, I discovered [TL;DR pages](https://tldr.sh/) and added some OCaml tools to their collection.

It may actually be good that Hacktoberfest 2020 essentially _forced_ people to discover new projects if they want to participate. 
However, I found searching for projects much more difficult than it should be. The [/topics/hacktoberfest](https://github.com/topics/hacktoberfest) page doesn't provide an obvious way to search for more than one topic. I hope there _is_ a way to do that, but I couldn't find it it.
Without an easy way to customize the search query, all you can do is to "load more" and hope for something that interests you.

If next year's Hacktoberfest will also be opt-in, I hope searching for projects will be made easier.
Installing dotnet try in MacOS and try .NET Offline
Tags: dotnet, tutorial, try, opensource
Published: 2020-11-04 18:17:41

I read that Try .NET is an interactive documentation generator for .NET Core. Best of all is open source.

I wanted to be able to run dotnet try samples in macOS that I found in [Github](https://github.com/dotnet/try-samples) and same time being able to build a tutorial.

## Installed dotnet

Downloaded the current .Net Core and installed
https://dotnet.microsoft.com/download/dotnet/curren

## Installed the [dotnet try tool](https://www.nuget.org/packages/Microsoft.dotnet-try/) using the terminal

```
dotnet tool install --global Microsoft.dotnet-try --version 1.0.20474.1
```
## Cloned the repository

```
git clone https://github.com/dotnet/try-samples
```
I just set the current directory to one of the sample tutorials and ran code below

```
dotnet try

```
This launched the browser.

For more dotnet CLI commands I would recommend to visit [Microsoft docs](https://docs.microsoft.com/en-us/dotnet/core/tools/)
Material font icons on Xamarin Forms
Tags: materialize, icons, xamarinforms, mobile
Published: 2020-11-04 18:05:09

Hello devs 🖖, recently I'm searching how to use Materialize icons in my mobile app maked with Xamarin.Forms 4.8, but I could't find a great step by step. Therefore I will try to do it today.

### Font Source

You need to download the TFF font at [material design google repo](https://github.com/google/material-design-icons), so go to material-design-icons > font > MaterialIcons-Regular.ttf.

### Using font icon

Step 1. Put archieve `tff` on folder `Fonts` in your Xamarin Shared Project.

![image](https://user-images.githubusercontent.com/43295412/98149968-b08a6480-1eac-11eb-933a-59c652deea55.png)

> Don't forget to set build action as Embedded resource.

Step 2. Add `ExportFont` in your `App.xaml.cs` as below:

```c#
...

[assembly: ExportFont("MaterialIconsRegular.ttf", Alias = "Material")]
namespace MaterialApp
{
    public partial class App : Application
    {
        public App()
        {
            InitializeComponent();

            MainPage = new MainPage();
        }
        
...
```

> `Alias` is optional. 

Step 3. Use a materialize font in any page you need.

```xml
<StackLayout>
    <Label Text="&#xe87C;" FontSize="50" TextColor="Orange"
           FontFamily="Material" HorizontalOptions="Center" />      
</StackLayout>
```

> You will need the hexadecimal code, You can get it at [MaterialIcons-Regular.codepoints](https://github.com/google/material-design-icons/blob/master/font/MaterialIcons-Regular.codepoints "MaterialIcons-Regular.codepoints").

I like to search icons on https://material.io/resources/icons/?style=baseline and get theirs names, so I find the hexadecimal code at MaterialIcons-Regular.codepoints. (you can find it in google repo.)

That's all, folks.  :smile:
node-sass considered harmful
Tags: react, css, node, devops
Published: 2020-11-04 17:52:00

... to your developer and Continuous Integration experience due to its painfully slow installation process.

The [node-sass](https://www.npmjs.com/package/node-sass) during its installation `npm install node-sass` will:
1. Trigger the `node-gyp` if it won't be able to find binaries for your operating system.
2. Use Python 2.7 to run some scripts.
3. Run a painfully slow `postinstall` process (adds up to 1 minute to your CI build time).

So if your team is using various operating systems (Windows/Linux/MacOS) or using a Continuous Integration system just replace it with a much better alternative [sass](https://www.npmjs.com/package/sass).

[sass](https://www.npmjs.com/package/sass) is just a JavaScript package and has zero external dependencies.

### Create React App

I guess the reason why `node-sass` is still so popular is due to the [Create React App support for SASS](https://create-react-app.dev/docs/adding-a-sass-stylesheet). But you don't have to eject a CRA if you don't want to compromise your installation process or a build time. Simply use below command inside your app.

# TL;DR

Transparently replace your `node-sass` with `sass` and enjoy faster builds and quicker installs:

```
rm -rf node_modules
npm install node-sass@npm:sass -D --legacy-peer-deps
```
Hello World in all the languages I know
Tags: firstpost
Published: 2020-11-04 18:04:24

Hi, this is my first [dev.to](https://dev.to) post and today I am going to write hello world in all the languages I know.

#Bash
```bash
echo "Hello World!"
```

#C
```c
#include <stdio.h>
int main() {
  printf("%s", "Hello World!");
  return 0;
}
```

#C++
```cpp
#include <bits/stdc++.h>
using namespace std;

int main() {
  cout<<"Hello World!";
  return 0;
}
```

#HTML
```html
<h1>Hello World!</h1>
```

#Java

```java
public class HelloWorld {
    public static void main(String args[]) {
        System.out.println("Hello World!");
    }
}
```

#JavaScript
```javascript
document.write('Hello, World!');
```

#PHP
```php
<?php
    echo "Hello World!";
?>
```

#Python
```python
print("Hello World!")
```

#QBASIC
```qbasic
PRINT "Hello, world!"​
```

So this was the basic Hello World program in the languages I knew(this does not include frameworks like Flutter, Android, etc). I am not a master in all these languages, but I can understand most of them. Thanks for reading :)
How Learning to Code Gave Me A Growth Mindset
Tags: gratitude, webdev
Published: 2020-11-04 18:01:57

When I was seven, I was in a soccer league with my brother. I was scared of the ball. I would happily run in whatever direction the team was running, as long as I could stay far away from any tussles. Our coach would rotate us from position to position to give us a chance to understand the game better. 

I dreaded my turn as goalie, which brought inevitable contact with the soccer ball. I'd beg my coach "Can my brother take my turn?" 

My younger brother was an adept goalie who rarely let a ball past, so my coach often gave in and let him play instead of me.

This was one of many interactions that set the tone for my attitude towards challenging skills. (I still live in dread of pick-up frisbee games. Something to work on.) For a long time-- through my college years, in fact-- I thought that if I didn't master a skill right away, then I couldn't learn that skill, period. 

Then I tried learning to code. Independent problem-solving is central to software engineering. There's no way around it. 

Early on in my journey, I sought out the advice of senior developers. What advice would they give to their younger selves? Time and again, I heard "Imposter syndrome never goes away. Everybody's got it, so get used to it." You'd expect this to be common in a field that accepts professionals out of bootcamps or self-directed study, for sure, but I believe it's also because software developers are constantly trying to solve problems and failing. Again and again. 

It's an inherent part of the process. There was no room for my fixed mindset here. I should expect to fail once, a few times, several times before I succeeded. I could be working on a single bug for a week. My mindset needed to change if I was going to build up the endurance I needed.

It was tough, at the beginning. I had to fight the feeling of taking bugs in my code personally. I had to stare at my computer screen and say out loud to myself, "Ok. How interesting that my code is behaving like this. I wonder why?" instead of listening to the inner voice that told me I just wasn't cut out to code. I'm still working on it. 

I love what Carol Dweck [has to say about the growth mindset](https://www.goodreads.com/author/quotes/217172.Carol_S_Dweck). 
_“In the fixed mindset, everything is about the outcome. If you fail—or if you’re not the best—it’s all been wasted. The growth mindset allows people to value what they’re doing regardless of the outcome . They’re tackling problems, charting new courses, working on important issues. Maybe they haven’t found the cure for cancer, but the search was deeply meaningful.”_

Seeing meaning in struggle is at the heart of software engineering. I'm really grateful to be learning a growth mindset because of my coding journey. I'm finding that it affects other experiences in my life. 
I'm teaching myself Spanish. Sure, I can't roll my R's, but I'm motivated to practice. 

Who knows, maybe I'll take up soccer again. :)
How to lazy load images in html with pure Javascript?
Tags: html, javascript, showdev, tutorial
Published: 2020-11-04 17:58:37

Let's read this article at my [place](https://www.harshvats.dev/blogs/how-to-lazy-load-images-in-html) :)

If you just want to do image lazy loading without any understanding of the concepts involved because maybe this is your first time and you have to use in it your project then don't worry at all. I can assure you this article will give you everything already done so that you just need to copy paste.

#### 1. Copy paste this code just before closing body tag

```
document.addEventListener('DOMContentLoaded', function () {
        var lazyloadImages = document.querySelectorAll('img.lazy');
        var lazyloadThrottleTimeout;

        function lazyload() {
          if (lazyloadThrottleTimeout) {
            clearTimeout(lazyloadThrottleTimeout);
          }

          lazyloadThrottleTimeout = setTimeout(function () {
            var scrollTop = window.pageYOffset;
            lazyloadImages.forEach(function (img) {
              if (img.offsetTop < window.innerHeight + scrollTop) {
                img.src = img.dataset.src;
                img.classList.remove('lazy');
              }
            });
            if (lazyloadImages.length == 0) {
              document.removeEventListener('scroll', lazyload);
              window.removeEventListener('resize', lazyload);
              window.removeEventListener('orientationChange', lazyload);
            }
          }, 20);
        }

        document.addEventListener('scroll', lazyload);
        window.addEventListener('resize', lazyload);
        window.addEventListener('orientationChange', lazyload);
      });
```

#### 2. Replace image `src` attribute with `data-src`

If you have

> `<img src="<url>" />`

then replace it with

> `<img data-src="<url>" />`

#### 3. This is the last point. Add `class="lazy"` to all the images you want to lazy load.


Now you are good to go. Thank you for reading this article. I don't write articles for others, I write them for myself so I can use ready made code or revise my concepts. But if it helps you in any way then plz let me know [here](https://www.harshvats.dev/contact).
Day4 with Html/css and Javascript #help
Tags: help, html, css, javascript
Published: 2020-11-04 17:28:40

It's my day 4 documenting myself in this community and I really need some help with css and javascript.Idk what to work with to get best practice in css and javascript. I'm just really confused about what to work on with.Can any give me some suggestions to compete with this problem. 
And moreover I learnt new things in python css and javascript. I'm getting enough knowledge abt stuffs but how I'm gonna work with them. Hope everyone sees this🌟.