teleren/devto huggingface dataset:
Where can I run JavaScript?
Tags: javascript, beginners, parwinder, syncmyblog
Published: 2020-06-21 22:15:13


Now that you know what JavaScript is and how awesome it can be, the question comes, where do I run it or work with it?

There are 4 key places where **I** run JavaScript daily:

1. **The browser console**:
   A browser's console is the easiest method for anyone trying to run JavaScript. Almost all browsers have developer tools that include a console to run scripts. Since most of us have access to a browser, this is the most convenient way of testing the waters.


    ![Browser Console](https://dev-to-uploads.s3.amazonaws.com/i/b65o1pb8a3aa27m3ja5o.png "Firefox Browser Console")

    If you would like to know how to get to the console in the browser of your choice, [check this handy guide out](https://support.monday.com/hc/en-us/articles/360002197259-How-to-Open-the-Developer-Console-in-your-Browser)

2. **Using your terminal**:
    Yes! The terminal. Install node, and it provides you with a [REPL](https://en.wikipedia.org/wiki/Read%E2%80%93eval%E2%80%93print_loop) interface

    ![Node Terminal](https://dev-to-uploads.s3.amazonaws.com/i/9j697jan1esrdis8rtb6.png "Node Terminal")

    Instruction on how to install NodeJS can be [found here](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)

3. **In an online sandbox**:
    There are a ton of online websites that provide you with a playground or sandbox to run your JavaScript code. Try them out! Here are some of my favorites: [PlayCode](https://playcode.io), [JSFiddle](https://jsfiddle.net), [Code Sandbox](https://codesandbox.io/) and [StackBlitz](https://stackblitz.com)

4. **Code editor**:
   If you do not have a code editor installed, you should. There are paid offerings like IntelliJ and WebStorm from JetBrains, but there are free options that will do just fine. [VSCode](https://code.visualstudio.com/docs/setup/setup-overview) and [Sublime Text](https://www.sublimetext.com/3) are the top two free code editors that I recommend.

    If you decided to install VSCode, there is an excellent plugin for it that lets you run JavaScript as you write the code (live feedback). [Check out Quokka](https://quokkajs.com/) and get [the plugin here](https://quokkajs.com/docs/#getting-started)

    ![Quokka in VSCode](https://dev-to-uploads.s3.amazonaws.com/i/vax92hgcgi6yjdsmen7s.png "Quokka in VSCode")

That's all for today, folks. If you have any questions, please feel free to reach out to me at `contact@bhagat.me`
Leetcode - Merge Two Sorted Lists (with JavaScript)
Tags: javascript
Published: 2020-06-21 22:05:47

Today I am going to show how to solve the Leetcode Merge Two Sorted Lists algorithm problem.

Here is the problem:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ceu7sk0eil2mq53ogh5v.png)

First, I create a dummy head node, which will help build a new linked list.
Then I compare the first elements of each list. I take whichever element is smaller and put it into a new linked list (= currentHead.next).
If one list was shorter than the other, then there are no longer two elements to compare. I therefore add the longer linked list to the end of the new linked list.

```javascript
function ListNode(val) {
      this.val = val;
       this.next = null;
}
 
var mergeTwoLists = function(l1, l2) {
    let dummyHead = new ListNode(0);
    let currentNode = dummyHead; 
    
    while(l1 !== null && l2 !== null){
        
        if(l1.val < l2.val){
            currentNode.next = l1;
            l1 = l1.next
        } else {
            currentNode.next = l2
            l2 = l2.next
        }

        currentNode = currentNode.next
    }
    
    if(l1 !== null) {
        currentNode.next = l1;
    } else if (l2 !== null) {
        currentNode.next = l2
    }
    
    return dummyHead.next
}

```
Make GitHub turn dark!
Tags: todayilearned, todayisearched, github, css
Published: 2020-06-21 21:38:54

Hi! Today I will share with you something I found on Github that might make the "dark mode" fans proud!

It's an extension that lets you change the CSS of a selected page you want, in this case, I'm changing the style of github.com to something more like an AMOLED theme.

Let's get right into it!

# Extension

First we need to download the [Stylus]([https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne?hl=en](https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne?hl=en)) extension.

That extension allows us to change the style of any page we want!

# CSS

Now we need to get the theme!

You can use the theme I created or the theme from the project I forked.

My AMOLED dark theme: [click here](https://raw.githubusercontent.com/matheusgomes062/github-amoled-dark/master/github-dark.user.css)

Nightmode dark theme: [click here](https://github.com/cquanu/github-dark/raw/master/github-dark.user.css)

# Final

Install it and now you can browse GitHub in AMOLED dark mode, or you can even search for other themes!

Thank you for your time! Hope I helped you today!
What is Javascript?
Tags: javascript, beginners, syncmyblog, parwinder
Published: 2020-06-21 21:25:14

## Definition

A direct quote from the Mozilla developer's network or [MDN](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript)

>JavaScript is a scripting or programming language that allows you to implement complex features on web pages — every time a web page does more than just sit there and display static information for you to look at — displaying timely content updates, interactive maps, animated 2D/3D graphics, scrolling video jukeboxes, etc. — you can bet that JavaScript is probably involved.

In short, it makes your pages feel more dynamic. A webpage generally speaking consists of three key elements:

1. **HTML** (Hypertext Markup Language): This allows you to create the structure of the web page
2. **CSS** (Cascading stylesheet): This is to make that web page look pretty 😊
3. **JavaScript**: Allows you to do anything dynamic with the page including fetching data from a server or making the page interactive

## History

JavaScript was not always known as JavaScript. It started with the name `LiveScript`. At the time of the creation of JavaScript, Java was a common language, and it was decided to add the word Java to it. It does not have any relationship with Java, in any case. There is a famous/corny saying

> Java is to JavaScript as a car is to carpet

As it evolved, it got to be known as [ECMAScript](https://en.wikipedia.org/wiki/ECMAScript). The name JavaScript is a trademark owned by Oracle Corp. in the United States. Don't believe me? [Check it out](http://tsdr.uspto.gov/#caseNumber=75026640&caseType=SERIAL_NO&searchType=statusSearch)

## Why is JavaScript popular?

When I say JavaScript is popular, I mean it. According to the [Stack Overflow 2019 developer's survey](https://insights.stackoverflow.com/survey/2019#technology), it is the most popular language. For 7 years in a row!

![Stack Overflow 2019 Developer Survey Results](https://dev-to-uploads.s3.amazonaws.com/i/ut3wr0364co90vlnuffk.png "JavaScript Fame")

So what makes it so famous?

1. It works well with the other two components of a webpage (HTML and CSS)
2. Minimal learning curve (which has been considered a good or bad for the language)
3. Supported by all major browsers and enabled by default
4. Works without any compilation or transpiling
5. It can run in the browser or server-side. It can run on anything that can support the JavaScript engine (V8, Trident, SpiderMonkey)

Hopefully, by now, I have sold you on the idea of JavaScript and why it is fun to work with. In the next few blog posts, we will go over the basics of running JavaScript and introduction to principles of JavaScript. As we take a deeper dive into these basics, you will also realize that it's relatively easy to make mistakes if you don't know what you are doing. We will learn from the mistakes of the past and try to be a better JavaScript developer.
Is Javascript Pass by Value or pass by Reference ?
Tags: javascript, interview
Published: 2020-06-21 21:05:01

It's a question which you will mostly  hear from your interviewer. But does JavaScript pass variables by *Value* or by *Reference* ? There are good chances that if you are fresher or new to Javascript you wouldn't answer this question correctly owing to vague knowledge of how Javascript works behind the scenes, but don't worry ,it's totally normal for a new person.
And the answer to this is that  Javascript pass variables by both  value and reference but it depends on the  data type  of the variable we are working with. Primitive data types such as *Strings, Booleans, Numbers, Null, , Symbol* they are passed by value on the other hand Non-primitive data types such as *Objects and Arrays* are passed by reference 
### But what really is pass by Value and Pass by reference ? 

#### Pass by value
 When the variables are passed by value we target the value being passed not the actual variable. Always remember only primitive data types in Javascript use pass by value 
``` 

var a = 1: 
function passByValue(a){
    a = 3
 }
passByValue(3)
console.log(a) // result is 1


```
Lets see another example 

```
let age = 55
let myAge = age
myAge = 27
age //55

```

#### Pass By Reference
When the variables are passed by reference it means we point to actual variable. Any changes on the variable will directly effect the original declared variable. Remember Non-primitive data types perform pass by Reference in Javascript.

```

const car = {
  color: 'blue'
}
const anotherCar = car
anotherCar.color = 'yellow'
car.color //'yellow

```
Figma to WebAssembly WebGL, a click away today
Tags: python, nim, javascript, webassembly
Published: 2020-06-21 20:26:00

---
title: Figma to WebAssembly WebGL, a click away today
published: true
description: Figma to WebAssembly WebGL, on a few clicks
tags: python, nim, javascript, webassembly
//cover_image: https://direct_url_to_image.jpg
---

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

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

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/8hj3z5ufn8l1edc4pmdg.png)


# Fidget

{% youtube IB8Yt2dqZbo %}


# Figma Plugin

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/3pn7r86s1vtcdptlvnju.png)

The Fidget plugin is Published, it should appear on the Plugins list soon, is waiting for final approval.


# Get started today

{% github treeform/fidget %}


# Hello World

**Hello World on the Browser:**
```nim
console.log("Hello World")
```

**Hello World on the Backend:**
```nim
echo "Hello World"
```


# Thank you for playing

[![](https://thepracticaldev.s3.amazonaws.com/i/4huq62a5r8tck64apdtd.png)](https://nim-lang.org)

- [For Python Developers](https://github.com/nim-lang/Nim/wiki/Nim-for-Python-Programmers#table-of-contents)
- [For TypeScript Developers](https://github.com/nim-lang/Nim/wiki/Nim-for-TypeScript-Programmers#table-of-contents)
- [Documentation](https://nim-lang.org/documentation.html)

There's bridged [Gitter](https://gitter.im/nim-lang/Nim), [Matrix](https://matrix.to/#/#freenode_#nim:matrix.org), [Telegram](https://t.me/nim_lang), [IRC](irc://freenode.net/nim), [Discord](https://discord.gg/ezDFDw2) for [Nim](https://nim-lang.org), come say *Hi*.

[Telegram en Español.](https://t.me/NimArgentina) [Discord en Español.](https://discord.gg/rNFg9pS)
Animating text over images in JS
Published: 2020-06-21 19:20:30

# Introduction

I've been building a personal blog site for my writing and photography, and it's been a great excuse to experiment with CSS that I don't always get a chance to use.

In this post, I'll walk through how to animate text over a background image. In my portfolio, I use it to animate over image previews of posts. It'll end up looking something like this:

![animation example](https://dev-to-uploads.s3.amazonaws.com/i/p4u71simwlpdpuj3psyo.gif)

# Solution

My solution uses React and Emotion, but the principal of how I animate over my image should be viable for any other front-end framework.

My approach was to create a container for the background image, and then lay a container on top of the background image. The top container is translucent until it is hovered over, and then it and the text it contains become opaque.

The html structure (here, written in jsx) looks like this:

```js
<BackgroundImg alt={alt_text}>
  <Hover>
    <AnimatedTitle>{title_text}</AnimatedTitle>
    <AnimatedParagraph>{paragraph_text </AnimatedParagraph>
  </Hover>
</BackgroundImg>
```

Using the `@emotion/styled` library, I made 3 CSS-in-JS styled components to represent these 3 blocks. Code with in-line comments below.

Note that `BackgroundImage` here is a wrapper component from `Gatsby.js` that does some nice image-load optimization functions in the background, but for your purposes you could use a `div`.

```js
// Styling and Animation for Desktop
const BackgroundImg = styled(BackgroundImage)`
  width: 33vw;
  height: 33vw;
  margin: 2vw 2vw 2vw 2vw;
`

const Hover = styled.div`
  height: 100%;
  width: 100%;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  /* The component is not opaque, but opacity transitions out for 300ms */
  background-color: #efece4;
  opacity: 0;
  transition: opacity 300ms ease-in-out;

  /* When the user hovers over the component, it becomes opaque over 300ms */
  &:hover {
    opacity: 0.95;
    transition: opacity 300ms ease-in-out;
  }

  /* All children (animated text) move to default position when component is hovered over */
  &:hover > * {
    transform: translate3d(0, 0, 0);
  }
`

const AnimatedTitle = styled.h2`
  /* Transform to 50px down on load, but user doesn't see this because div this text is in is translucent  */
  transform: translate3d(0, 50px, 0);
  transition: transform 300ms ease;
  text-align: center;
  margin-bottom: 10px;
`
const AnimatedParagraph = styled.p`
  transform: translate3d(0, 50px, 0);
  transition: transform 300ms ease;
  text-align: center;
  margin-bottom: 0;
  font-size: 12px;
  font-style: italic;
`
```




# Conclusion

This of course only scratches the surface of the transformations and animations CSS is capable of. Highly recommend the [MDN spec](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions) to anyone who wants a more thorough overview of CSS transforms and transitions. I hope this post has been helpful for anyone trying to solve a similar problem.
Looking for UI/UX advice
Tags: help, ux
Published: 2020-06-21 20:18:30

Hey! A few months ago, I started work on a custom captcha mechanism.
{% link https://dev.to/meatboy/create-your-own-captcha-part-3-canvas-13i8 %}
It should be maximum user friendly and easy to solve for human. So I picked the image recognition on canvas way to challenge the user. However, I am not sure about the UX aspects of my work. 

I would be very happy for any advice about what change in my project.

This is how it looks now:
![Captcha](https://dev-to-uploads.s3.amazonaws.com/i/ivjmlyo9s4xqnua2zdod.png)
Why I choose the planck keyboard
Tags: productivity, colemak, programming, softwaredevelopment
Published: 2020-06-21 20:13:28

It has been a while since I started my search for a keyboard replacement/upgrade in order to improve my day-to-day computer related activities (mostly coding and shell). Of all the keyboards I tried, none seem to provide the fastest and easiest way to input program-specific symbols and characters.

That being said, I would almost always require a good stretch of fingers before I could swiftly input something like … });[ . Expanding on this example, a standard keyboard would require the assistance of a Shift and possibly an Alt key - depending on the layout in use.

And so, with the goal set in mind, the long exploration started… 
Read the blog post [here](https://www.orbjet.org/post/2020-06-20/why-i-choose-the-planck-keyboard/)
Junior Developer Check List
Tags: discuss, hiring, career, recruiting
Published: 2020-06-21 20:09:02

---
title: Junior Developer Check List
published: true
description: Seeking clarity on basic requirements for landing a Junior developer role
tags: #discuss #hiring #career #recruiting
//cover_image: https://direct_url_to_image.jpg
---

Dear recruiters,

When hiring Junior talents what does your checklist look like?
Wizar devlog 20 - Cross plateform dungeon with Three.js for React
Tags: threejs, typescript, gamedev
Published: 2020-06-21 20:02:07

This week I worked on a boilerplate to have a three.js app running both on RN and Web.

*Edit: I screwed up the sandbox (no versioning on CSB at the moment :( ) in a way I can't return to a working state easily. I will update this link as soon as I get my next working version. But it will take some times!* :(
~~https://codesandbox.io/s/wizar-dungeon-r3f-onulw~~

I use [React Three Fiber](https://github.com/react-spring/react-three-fiber) and it was mostly a matter of dealing with resources loading to have both code running on Web and RN.

Once you get the minimal comon way to load asset on both platefom the code is straight forward, and you get exact same result on both plateform.

assets credits: https://0x72.itch.io/
Zen of Python
Tags: python
Published: 2020-06-21 19:58:57

Zen of Python is a set of 19 "core values" that guide the structure of the Python language for computer programs. 

There's an easter egg in Python, you can use `import this` to load the "Zen of Python".

The core values are:
```
Beautiful is better than ugly.
Explicit is better than implicit.
Simple is better than complex.
Complex is better than complicated.
Flat is better than nested.
Sparse is better than dense.
Readability counts.
Special cases aren't special enough to break the rules.
Although practicality beats purity.
Errors should never pass silently.
Unless explicitly silenced.
In the face of ambiguity, refuse the temptation to guess.
There should be one—and preferably only one—obvious way to do it.
Although that way may not be obvious at first unless you're Dutch.
Now is better than never.
Although never is often better than right now.[a]
If the implementation is hard to explain, it's a bad idea.
If the implementation is easy to explain, it may be a good idea.
Namespaces are one honking great idea—let's do more of those!
```
As usual with the internet, things evolve. For example, this became a <a href="https://www.youtube.com/watch?v=i6G6dmVJy74&feature=youtu.be">song</a> and a <a href="https://marketplace.visualstudio.com/items?itemName=detimo.zen&ssr=false">visual studio code extension</a>

Eitherway, this philosophy is the core of Python.  You can see the proposal from 2004 <a href="https://www.python.org/dev/peps/pep-0020/">PEP20</a>


**Beautiful is better than ugly**
Use OR instead of ||, use AND instead of ||

**Explicit is better than implicit**
Code is readable by anyone

**Simple is better than complex**
a simple solution is always better than a complex one. So you have `print("Hello")` instead of `sys.out.println("hello")`

**Flat is better than nested.**
When something is not flat, it's nested. A nested loop for example is

```python
for a in apples:
    for b in breads:
        for c in codes:
```

you can see this gets confusing fast, so flat is better than nested. 

**Readability counts**
If readability didn't matter, we'd all be writing in binary code. Readability matters when it comes to programming

You can see all these <a href="https://python-commandments.org/zen-of-python/">zen</a> principles are part of the Python design.
Passing Props in React
Tags: react, codenewbie
Published: 2020-06-20 06:56:57

# Components & Props
Props are inputs which are passed into **Components** and return React elements describing what should appear on the screen. Components helps with re-usability, by splitting the UI into independent sections. 

With this in mind let's use a simple app that returns a *div* element with an *h1* that displays a title and a *p* tag that displays the content.
```
const App = () => {
        return (
            <div>
                <h1>Changes in Service</h1>
                <p>We just updated our privacy policy here to better service our customers.</p>
            </div>
        );
    }
    
    // Renders the App component into a div with id 'root'
    ReactDOM.render(<App />, document.querySelector('#root'));
</script>


<!--The App component above will be rendered into this-->
<div id="root"></div>
```
# Passing a Prop to a Component
Next we'll define a function component called **Message** which accepts a single **"props"(properties).** The Message component will be used to extract the **h1** and **p** as a separate reusable entity in our app.

```
const Message = (props) => {
        return (
            <div>
                <h1>{props.title}</h1>
                <p>{props.content}</p>
            </div>
        );
    }

 // Renders the App component into a div with id 'root'
    ReactDOM.render(<App />, document.querySelector('#root'));
</script>


<!--The App component above will be rendered into this-->
<div id="root"></div>
```
# Rendering a Component
Now we can swap out the hard coded **h1** title and **p** content by calling our **Message** component inside our app.

```
const App = () => {
        return (
            <div>
                <Message title="Changes in Service" content="We just updated our privacy policy here to better service our customers." />
            </div>
        );
    }
    
    const Message = (props) => {
        return (
            <div>
                <h1>{props.title}</h1>
                <p>{props.content}</p>
            </div>
        );
    }
    

    // Renders the App component into a div with id 'root'
    ReactDOM.render(<App />, document.querySelector('#root'));
</script>


<!--The App component above will be rendered into this-->
<div id="root"></div>
```
The *h1* and *p* is being passed as a single object which we refer to it as **props.**

That's all for today, thank you guys for following along till the end. For more detail explanation, please checkout React Docs, link attached below. Happy coding. 😎
Reference [https://reactjs.org/docs/components-and-props.html]
WWDC Experiments
Tags: swift, github, wwdc, apple
Published: 2020-06-21 19:31:41

## Let's try things. 
I made a repo for the community to share our WWDC experiments! I always end up writing tons of weird, experimental and broken code during WWDC to try out the new stuff. Let’s see what we can come up with: [WWDC-Playgrounds](https://github.com/cambardell/WWDC-Playgrounds)