teleren/devto huggingface dataset:
JavaScript DOM - Part 3 - Get Element By ID [video + article]
Tags: javascript, webdev, beginners, codenewbie
Published: 2020-05-18 17:31:24

> This is going to be a multi-part Video + article tutorial series on JavaScript DOM. You're reading Part 3

You can read Part 2 here:
{% link https://dev.to/tharunshiv/javascript-dom-part-2-the-document-and-window-object-video-article-6pi %}

{% youtube G67f2oMDz6I  %}

## In the video
 
We will be using a project Stick-It Notes to learn the DOM commands in this course. We will also be learning how to build this website step by step after a while in this series.

**Project website:** http://bit.ly/stick-it-notes
**Project Code:** https://github.com/tharunShiv/stick-it-notes

## Difference between a class and an id

The same class can be used more than once for several elements, but a unique ID can be used only for one element. So when we are grabbing an element using ID, we will get only one element in return. 

**Syntax:** 
```javascript
document.getElementById('id-of-the-element')
```

**Example:**

```html
<p id="ts">The para to pick</p>
```

```javascript
let paragraphElement = document.getElementById('ts')
```

## What's the point in grabbing the element?

1. You can get to know the values or the content in the element [ coming up in the next article... ]

2. You can style the element 

**Example:**

```javascript
let paragraphElement = document.getElementById('ts');
paragraphElement.style.color = 'yellow';
```

You can change the color, the font size, background color, pretty much any CSS Style that you would apply normally. Note: we don't use hyphens here '-' as a separator between styles like background-color, font-size, font-family, etc., Instead, you've to remove the hyphen and capitalize the first word after it.

**Example:**

```javascript
let paragraphElement = document.getElementById('ts');
paragraphElement.style.backgroundColor= 'red';
paragraphElement.style.fontSize= '0.9rem';
```

You can access and do a lot more magic by grabbing the elements. We will explore and do stuff in this series. All you have to know now is that there is *getElementById* grabs only one element. And once you get that element, store it in a variable and use it for the purpose.

Next Part, where we discuss about what TextContent, innerText and innerHTML are and the differences between them.
{% link https://dev.to/tharunshiv/javascript-dom-part-4-innerhtml-vs-innertext-vs-textcontent-video-article-1b90 %}

Thank you for reading 😊
**Considering Subscribing to my YouTube Channel if you like the Video content: https://youtube.com/c/developerTharun**

Written by,

{% user tharunshiv %}
Xcode shortcut to open Derived Data folder
Tags: appdev, blog, code, extension
Published: 2020-05-25 03:11:59

---
title: Xcode shortcut to open Derived Data folder
published: true
date: 2020-05-18 17:18:58 UTC
tags: appdev,blog,code,extension
canonical_url: https://itscoderslife.wordpress.com/2020/05/18/xcode-shortcut-to-open-derived-data-folder/
---

Saving time with shortcuts like [opening terminal from Xcode](https://dev.to/itscoderslife/open-terminal-from-xcode-2k78), I created few more shortcuts to help my fellow Xcode users. Another one here is Opening Derived Data folder to access you project binaries or to do any thing else.

> Either you should know the path to Derived data folder and go to Finder _Cmd + Shift + G_ and then enter the path. Or you have to go to Xcode preferences -> Location Tab click on arrow in front of Derived Data path. Both these are cumbersome.
> 
> What if I help you create a **SHORTCUT ?**

This is how you do it. It’s a one time setup. Just like you did it for [Opening terminal](https://www.youtube.com/watch?v=MMeu3xeXZxM)

1. Create a 2 line shell script and give the file execute permission.  
2. Go to Xcode Preferences.  
3. Add a Behavior in Xcode. Name it and give a shortcut key.  
4. On the right side details pane check the Run option.  
5. From the adjacent drop-down menu choose the script you just saved in step 1.

Script:  
`#!/bin/bash
open ~/Library/Developer/Xcode/DerivedData
`

Command to give execute permission:  
`chmod +x /path/to/the/open_derived_data.sh`

If you are lazy like me here’s the gist, download and use it: [https://gist.github.com/itscoderslife/a3a5ca7e973bba575ba2d07b04338c80](https://gist.github.com/itscoderslife/a3a5ca7e973bba575ba2d07b04338c80)

Hope this is helpful.

> Other shortcuts
> 
> [Open in terminal](https://dev.to/itscoderslife/open-terminal-from-xcode-2k78)
> 
> [Open project folder](https://itscoderslife.wordpress.com/2020/05/18/open-project-in-finder-from-xcode)

 

Happy coding ![😉](https://s0.wp.com/wp-content/mu-plugins/wpcom-smileys/twemoji/2/72x72/1f609.png)

<style>.gist table { margin-bottom: 0; }</style>

[  
 ![Damodar Shenoy's DEV Profile](https://d2fltix0v2e0sb.cloudfront.net/dev-badge.svg)  
](https://dev.to/itscoderslife)
Open project in finder from Xcode
Tags: appdev, code, extension, ios
Published: 2020-05-25 03:11:38

---
title: Open project in finder from Xcode
published: true
date: 2020-05-18 17:08:26 UTC
tags: appdev,code,extension,iOS
canonical_url: https://itscoderslife.wordpress.com/2020/05/18/open-project-in-finder-from-xcode/
---

After being accustomed to the ease of [opening terminal from Xcode](https://dev.to/itscoderslife/open-terminal-from-xcode-2k78), I created few more shortcuts for all my favorite Xcode users. One of them is Open in the finder with single shortcut from anywhere in Xcode.

> YES! A **Shortcut** to open current project in finder

This is how you do it. It’s a one time setup. Just like you did it for [Opening terminal](https://www.youtube.com/watch?v=MMeu3xeXZxM)

1. Create a 2 line shell script and give the file execute permission.  
2. Go to Xcode Preferences.  
3. Add a Behavior in Xcode. Name it and give a shortcut key.  
4. On the right side details pane check the Run option.  
5. From the adjacent drop-down menu choose the script you just saved in step 1.

Script:  
`#!/bin/bash
open .
`

Command to give execute permission:  
`chmod +x /path/to/the/open_in_finder.sh`

If you are lazy like me here’s the gist, download and use it: [https://gist.github.com/itscoderslife/a671519577ac93fca55a506be7f2247a](https://gist.github.com/itscoderslife/a671519577ac93fca55a506be7f2247a)

Hope this is helpful.

> Other shortcuts
> 
> [Open in terminal](https://dev.to/itscoderslife/open-terminal-from-xcode-2k78)
> 
> [Open Derived Data folder](https://itscoderslife.wordpress.com/2020/05/18/xcode-shortcut-to-open-derived-data-folder)

Happy coding ![😉](https://s0.wp.com/wp-content/mu-plugins/wpcom-smileys/twemoji/2/72x72/1f609.png)

inspiration courtesy: The in-built Terminal of Visual Studio Code by Microsoft

<style>.gist table { margin-bottom: 0; }</style>

[  
 ![Damodar Shenoy's DEV Profile](https://d2fltix0v2e0sb.cloudfront.net/dev-badge.svg)  
](https://dev.to/itscoderslife)
Why you should intern at HNGi7
Tags: inclusion
Published: 2020-05-18 16:43:21

HNGi7 is an annual 3 months internship that comes up around June - September. It focuses on helping newbies and juniors upskill and become better developers. The 2020 edition starts on the 1st of June.

## Why is it so awesome?
1. You get to learn some necessary skills used in the professional world:
    * Leadership (possibly)
    * Teamwork
    * Speedy delivery
0. You get to build a portfolio
0. You get to experience deadlines and task reports
0. You make new developer friends.

Here's a quote from their official site
> The HNG Internship is an ambitious attempt to change the way education is done in Africa. It’s the bridge between learning to code and becoming the best in the world

Don't worry about **Africa** on the quote. Anyone can register.

They have a cliche but cool slogan **Changing the world, one intern at a time**.


Already excited? [Register now!](https://hngi7.hng.tech/)
Hurry, June is approaching.

## Not still convinced of the awesomeness? 
Think about it this way. You follow the approach of following tutorials and learning whatever interests you. This means you are probably learning randomly. You end up learning just the basics of Go, Python and Node without going deep.

If you follow a structured learning system with deadlines and projects, you get to learn the necessary stuff.

## The structure
The internship runs for 3 months with 10 stages. Interns who don't meet the expectation get evicted at each stage. Those who get to stage 10 are those with the highest grit. Passing through the program means your grit, patience and skills would be tested and improved.

Ok, I'd stop talking now. Just register and be upskilled. [Registration link](https://hngi7.hng.tech/)

P.S: It is an unpaid internship.
How to Work with Headers in API Request | 30 Days of API Testing | Day 18
Tags: testing, webdev, beginners, tutorial
Published: 2020-05-18 16:26:28

🚀Mastering API Testing(Full Course) -  https://www.learnapitesting.com

In this video of 30 Days of API Testing Challenge, We are going to discuss How to Work with Headers in API Request and API Testing with Postman example.

Link  : 
- https://en.wikipedia.org/wiki/List_of_HTTP_header_fields
- https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers

[![30 Days of API Testing](https://i.imgur.com/RAITVjc.png)](https://youtu.be/Ku3eJnOfmIo "30 Days of API Testing")

🚀 Day 18 Task: Share something about Headers in API Testing

🚀 Task 18. :  https://scrolltest.com/api/day18

🚀 All Task List : https://scrolltest.com/api/task

--
Be sure to subscribe for more videos like this!

[![ TheTestingAcademy](https://dev-to-uploads.s3.amazonaws.com/i/r7vcy6wbvyjbk1y1uu0o.png
)](https://www.youtube.com/TheTestingAcademy?sub_confirmation=1 "TheTestingAcademy")
The Go way to parse strings into dates is pretty confusing unless you live in a small fraction of the world
Tags: go
Published: 2020-05-18 16:22:29

When it comes to date formats, there is about 640 million people who prefer to order using `MDY`, and more than 5000 million that are doing other ordering systems: 

https://en.wikipedia.org/wiki/Date_format_by_country

This shouldn't need to be an issue, really. Let's take Python as an example and do a string to date operation both for our `MDY` friends and for the rest of the world too:

```python
    from datetime import datetime

    datetime_mdy = datetime.strptime('11/22/1980', '%m/%d/%Y')
    datetime_dmy = datetime.strptime('22/11/1980', '%d/%m/%Y')
    datetime_ymd = datetime.strptime('1980/11/22', '%Y/%m/%d')
```

No big issue. All operations output the exact same date. The formatting template is easy to check in https://strftime.org/ and multiple other resources. 

Enter Golang: 

```go
func main() {
	dateMdy, err := time.Parse("01/02/2006", "11/22/1980")
	if err != nil {
		panic(err)
	}
	dateDmy, err := time.Parse("02/01/2006", "22/11/1980")
	if err != nil {
		panic(err)
	}


	fmt.Println(dateMdy)
	fmt.Println(dateDmy)
}

```
As you see, the parsing introduces a "magic date" which you need to use to refer to the part of the date you need. That magic date is

    Mon Jan 2 15:04:05 -0700 MST 2006

You are supposed to remember this, because if you live in the minority of the world that does `MDY`, then Jan=1, so we can say something like:

    01/02 03:04:05 PM '06 -0700

Do you think this is easier? I think it might be for people used to think in `MDY`, but there is some confusing parts. For instance, `Monday` is not part of the magic number (`1 2 3...`) so it's hard to remember how to fit it in. Also, non `MDY` folks will trip often in the Day vs Month. 

Additionally I think this makes the code way less readable. I specially think here it's pretty bad:
```go
    time.Parse("01/02/2006", "11/22/1980")
```
Unless you know Go, you cannot know what is this parsing function doing and how. 

[This](https://www.pauladamsmith.com/blog/2011/05/go_time.html) blog post states that this is done like this to avoid context switching, but I have to disagree. I know we also have the format constants, but I don't think is that much more intuitive to discern whether you need `RFC850`, perhaps `RFC1123` or maybe you would be better off using `RFC822`. 

My conclusion is that there are many Go programmers that have created libraries to parse dates in the "old style". That could speak about the usefulness of that system and how people were disappointed with the current official way. 

https://github.com/vigneshuvi/GoDateFormat
https://github.com/bykof/gostradamus
https://github.com/takmongwai/go-strftime

Last, this post wouldn't be complete without concluding with this classic meme:

![DD/MM/YYYY is the best date format!](https://dev-to-uploads.s3.amazonaws.com/i/6gnzyh285b31v6n202fg.png)
What Are you Grateful for today? | 5/18/2020
Tags: watercooler, discuss, gratitude
Published: 2020-05-18 16:21:00

---
title: What Are you Grateful for today? | 5/18/2020
published: true
description: 
tags: watercooler, discuss, gratitude
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/utj3c0bf21exb7bloro3.png
---

Let's kick this week off right! What is something that you are grateful for?
Chrome Dinosaur Game with only HTML/Javascript
Published: 2020-05-18 16:19:05

I created the most basic game ever, inspired by the Chrome Dinosaur Game where you are a dinosaur jumping over cactuses. Instead you are a red div jumping over blue divs. Still fun tho! Watch my <a href="https://www.youtube.com/watch?v=bG2BmmYr9NQ">new youtube video</a> where I explain how I build it from scratch!
Javascript Sliding Div Game
Published: 2020-05-18 16:13:53

I created the arcade stacker game where you try to stack divs on top of each other and line them up perfectly. If you don't they keep getting smaller and smaller until you miss completely. Check out my <a href="https://www.youtube.com/watch?v=rsjyvE_E4a4">youtube video</a> explaining completely how I created this game!
100daysofcode Flutter
Tags: 100daysofcode, flutter
Published: 2020-05-18 16:02:45

day 70/100 of #100daysofcode #Flutter
Learning Flutter , courses Udemy from
@maxedapps

Today learn (animation build in) like slide animation, fadeanimation, hero, placeholder
https://github.com/triyono777/100-days-of-code/blob/master/log.md
Persisting and Multi-Reader IAsync Enumerable
Tags: csharp, dotnet, netcore
Published: 2020-05-18 15:47:34

It has been a while, but I have been busy.

Well not with my home page, which was there and then no longer is...
But I come, bearing gifts.

I am currently working with quite big lists, I download from Azure via it's Graph API. Until recently I used the usual suspects to store the downloaded data ... well ... mostly a List<T>.

And then I stumbled over `IAsyncEnumerable<T>`, which allows for using the data already, while it is only partially downloaded (yet).
The drawback: You will have to download it every time you access it.

Well in my case, I was going through the downloaded data multiple times and I thought I encapsulate it, to persists the downloaded data while downloading. So the second time I access it, it is already there.

It will depend on you use case, but I need one consistent set of multiple chunks/lists. So I either download everything once or do everything on the fly.
"Once" was my preference and I decided to create something that can support this use case.

Said and done. It took some time to make it thread safe. And since this introduces some runtime overhead, which is not always needed/wanted, I also decided to have two variants of it.

1. Single Threaded Access - which gives you an Exception, when trying to create another Enumerator, while the "old" one is stil in use (or at least not yet disposed).
2. The multi threaded one, which allows for multiple readers on the same underlying IAsyncEnumerable, persisting it's data along the way.

##Where can I get it?

You can look into the sources here: [GitHub - PersistingAsyncEnumerable](https://github.com/DerGuru/PersistingAsyncEnumerable)

Or get the NuGet Package here: [NuGet - PersistingAsyncEnumerable](https://www.nuget.org/packages/PersistingAsyncEnumerable/1.0.0)

##What kind of licence is it?
MIT. I just thought, It might help some one and it was fun for me to create it.

Have fun with it and I would love some feedback.
Which Time Tracking Apps Take Screenshots of Your Laptop?
Tags: productivity
Published: 2020-05-18 15:37:12

As a remote worker, I've been using time-tracking apps for 5 years. Last week, I decided to research which ones take screenshots of your laptop, and which don't.

[You can read about the results in this post.](https://www.integromat.com/en/blog/time-tracking-apps/)

Also, I was happy to learn that my current time-tracking software is a non-intrusive one. What about yours?
wHy yOu NeEd DenO
Tags: javascript, typescript, deno, react
Published: 2020-05-18 15:36:56

![The Hype Train](https://i.imgflip.com/1yvf39.jpg)

_All aboard the hype train._

**yOu nEeD DenO bEcAuSe oTheERWise YoU Won't GeT SeCuriTy AnD sECuRiTy Is VerY iMpOrTant. yOu AlSo NeeD to be USInG ReAcT WitH TyPeSCriPt And jAVaScRipt IN oRDer For YouR aPp To FiT WiTh EntRePrenEur StAnDards. NoDe Is GoinG tO DiE AnD EvEryOne WiLl be FoRcEd TO uSe deNo sO YoU SHOulD SwiTcH to DEnO NoW tO mAKe yOuR ApP MoRe MoDErN BeCause YoU HaVE To Be UsInG The LatEst TechNolOGies.**
Python __future__ module
Tags: python, builtin, modules, functional
Published: 2020-05-18 15:31:29

> Originally posted on [Ashraful's Blog](http://ashraful.dev/posts/python-__future__-module.html)

## :question: What is __future__ module btw?
* __future__ is python built-in module.
* It serves three purposes, 
* To avoid confusing existing tools that analyze import statements and expect to find the modules they’re importing.
* To ensure future statements run under release prior to 2.1 at least yield runtime exceptions
* __future__ will allow you to use a feature from the future.

> I know it sounds crazy for the first time you heard. But it's real. Let's dig into this.

## :fire: More about __future__.
__future__ module introduced from python 2.1. On the source of cpython's `__future__.py` there is defined each future feature like following,
```python
FeatureName = _Feature(OptionalRelease, MandatoryRelease, CompilerFlag)
```
Where, normally, OptionalRelease is less than MandatoryRelease, and both are 5-tuples of the same form as sys.version_info
```
sys.version_info(major=3, minor=8, micro=1, releaselevel='final', serial=0)
```

## :collision: Okay! Enough talk. Let's see the usage.
Suppose, you are using python2(Though python 2 is dead. Just take it an example). You want to use the print function from python3. But how you can do it? Here comes the __future__ module.

Python 3 Console
```
>>>
>>> print('Hello', 'World', sep=', ', end='\n')
Hello, World
>>>
>>>
```

In python2 you need to do the following,
```
>>>
>>> from __future__ import print_function
>>>
>>> print('Hello', 'World', sep=', ', end='\n')
Hello, World
>>>
```
Here, I have imported print_fuction from __future__ module. Then it's working as expected from python3. I hope you got it.

## :flushed: Available future functions
`nested_scopes`
`generators`
`division`
`absolute_import`
`with_statement`
`print_function`
`unicode_literals`
`barry_as_FLUFL`
`generator_stop`
`annotations`

See the source [here](https://github.com/python/cpython/blob/3.8/Lib/__future__.py)

Good Luck :smiley:
Supercharge Whatsapp™ Web with hotkeys and a dark theme 🚀
Tags: showdev, opensource, webdev, productivity
Published: 2020-05-18 15:23:27

---
title: Supercharge Whatsapp™ Web with hotkeys and a dark theme 🚀
published: true
description: refined whatsapp: A chrome extension that adds slack-like hotkeys and dark mode to Whatsapp™ Web
cover_image: https://user-images.githubusercontent.com/6417910/82126610-6d87e800-97cb-11ea-8201-50ced4a2de0b.png
tags: showdev, opensource, webdev, productivity
---

When switching between slack and Whatsapp, @rheaditi and I have found ourselves trying to use slack hotkeys to do things on Whatsapp Web way too often.

Introducing [refined-whatsapp](https://chrome.google.com/webstore/detail/refined-whatsapp/alkoadailhkkeiaadmlkbhbegegjhiok), a chrome extension that we built for ourselves and others like us. This extension adds:

- ⚡️ Hotkeys: 
  - Start a new chat with: "Cmd/Ctrl + K"
  - Temporarily hide current chat with: "Cmd/Ctrl + L"
  - Show/hide the Chats Sidebar with: "Cmd/Ctrl + \"
  - Search through messages with: "Ctrl + Space"
  - View chat info with: "Cmd/Ctrl + I"
- 🌚 Dark mode for Whatsapp™ Web!

The extension is [available to download on the Chrome Web Store](https://chrome.google.com/webstore/detail/refined-whatsapp/alkoadailhkkeiaadmlkbhbegegjhiok).

Check out our twitter post, which has a video 🎬 to see these hotkeys in action! 

{% twitter 1261988831441510401 %}

The code is open source! If you find any issues / have ideas, do feel free to report them on Github or raise a PR if you wish to contribute!

{% github campvanilla/refined-whatsapp %}
VimTrick: The clipboard register
Tags: vim
Published: 2020-05-18 15:08:12

Ever need to copy something into and out of Vim? There's a built-in way to do that and it's called the * (star) register. The star register is a register like any other in Vim but it's contents are that of your system clipboard.

You can get data out of Vim by putting it on your system clipboard:

* `“*yy` - Yank the current line into your * register, the system clipboard
* `“*yap` - Yank Around Paragraph: copies the whole paragraph, method, or function

And you can get data out of system and into Vim by pasting it from your system clipboard:

* `“*p` - Paste from the system clipboard below the current line
* `“*P` - Paste from the system clipboard above the current line

I've got a full write up and a short screencast over on [VimTricks](https://vimtricks.substack.com/p/vimtrick-the-clipboard-register).
NSI_GLOUTONS (Greedy Algorithm)
Tags: codepen
Published: 2020-04-27 11:11:43

{% codepen https://codepen.io/henry-letellier/pen/GRpWWoY %}
This is My first completely working <b>html/JavaScript/CSS</b> webpage hosted by codepen.
You can follow me on <b>YouTube</b>: http://bit.ly/34iZAK9
The program is written in French but is easily understandable
<!--This is the French description of what the algorithm is supposed to do-->
L’algorithme glouton consiste à donner les pièces de plus grande valeur possible (tant que cela ne dépasse pas la somme totale) puis continuer avec les pièces de seconde plus grande valeur etc.
L’ensemble dans lequel sont stockés les objets (des pièces de monnaie) est une tirelire , et ce n’est pas par catégorie que sont classées les pièces, mais avec pour but de totaliser une somme donnée.
D’ordinaire , pour payer 13 centimes , on donne une pièce de 10 centimes , une pièce de 2 centimes et une pièce de 1 centimes .
Mais que faire lorsqu’on n’ a qu’une pièce de 5 centimes et pas de pièce de 10 centimes ?
Plus généralement, on peut se demander de combien de manières différentes , on peut former 13 centimes ?
You can find the <b>French version</b> here: (https://codepen.io/henry-letellier/pen/GRpWWoY)


<!--English description-->
Greedy algorithms determine minimum number of coins to give while making change. These are the steps a human would take to emulate a greedy algorithm to represent 36 cents using only coins with values {1, 5, 10, 20}. The coin of the highest value less than the remaining change owed, is the local optimum. (In general, the change-making problem requires dynamic programming to find an optimal solution; however, most currency systems, including the Euro and US Dollar, are special cases where the greedy strategy does find an optimal solution.)
You can find the English version here: (https://codepen.io/henry-letellier/pen/YzyVgQq)