teleren/devto huggingface dataset:
Learn Anything FAST In Just 4 Steps 🔥
Tags: programming, career
Published: 2019-07-23 11:58:54

---
title: Learn Anything FAST In Just 4 Steps 🔥
published: true
description: This technique helped me unconsciously to learn fast and remember things I learnt nearly 8 years ago
tags: #javascript #programming #discuss #career
cover_image: https://thepracticaldev.s3.amazonaws.com/i/wfjyqs8wqwdrwovuso7z.png
---

I can guarantee many of you already do this unconsciously but putting the process to the madness has really helped me speed up my learning - coming from someone who wasn't the fastest learner.

Lets kick it off

## 1. Choose a concept

Find a topic that intrests you like Dala Analytics, Machine Learning, Backend Engineering, DevOps - A topic you're passionate about

## 2. Teach it to a child

Yep, try teach devops to a child and explain what docker is to a kid and you'll be hit with so many questions, it'll really test your understanding. And that's the magic, when you really understand your concepts - you can mutate the words you use to describe something.

That power comes from control of your knowledge

Once you go through the first cycle of learning, definitely try explain it to someone young or unaware of the topic at all. You will be forced to remove ANY form of jargon, you start using analogies and examples.

As humans, we learn by example, hence why every concept in school was matched with an example. Think back and remember the number of times in an Exam you remembered things through examples vs the actual theoretical concept.

## 3. Identify Gaps

There will be gaps in your analogies that you can't fulfil the first time around, its good - it means you're learning and evolving your examples.
Go back and revise the topics till you can draw familiarity.

My udemy course I taught people how redux is similar to an elevator vs passing props in components which is similar to using the stairs. One is directly going from point A to point B almost "skipping" levels, whilst the other you're forced to hit every floor.

Something as simple as that results in feedback as such

![](https://thepracticaldev.s3.amazonaws.com/i/hgb9abx8t2ue33gszkoh.png)

## 4. Review & Simplify

Re-assess your initial approach and add patterns that fix your original story. Simplify it as much as possible and explain it again and again until its natural.

-- 

True power of authority is using simple words to explain complex things - not complex words to explain simple things.

Here's a view of the Feynman Technique which I highlighted above!

Hope this helps you! And I definitely would love to hear your thoughts/additions in the comments section  💪

![](https://thepracticaldev.s3.amazonaws.com/i/osu3pzzeko4rz4ywd1n8.jpg)

If you liked this, definitely follow me on for the similar stuff:

twitter: twitter.com/@veebuv 
linkedin: linkedin.com/in/vaibhavnamburi
instagram:_veebuv
Daily Challenge #21 - Human Readable Time
Tags: challenge
Published: 2019-07-22 13:23:49

---
title: Daily Challenge #21 - Human Readable Time
published: true
series: Daily Challenge
description: Turn seconds into readable time.
tags: challenge
---

Today's [challenge](https://www.codewars.com/kata/52742f58faf5485cae000b9a) is from davazp on CodeWars.

>The function will accept an input of non-negative integers. If it is zero, it just returns `"now"`. Otherwise, the duration is expressed as a combination of `years`, `days`, `hours`, `minutes`, and `seconds`, in that order. 

>The resulting expression is made  of components like `4 seconds`, `1 year`, etc. The unit of time is used in plural if the integer is greater than 1. The components are separated by a comma and a space (", "), except the last component which is separated by `" and "`, just like it would be written in English. For the purposes of this challenge, a year is 365 days and a day is 24 hours. Note that spaces are important. 

>The challenge is much easier to understand through example:
`format_duration(62)    # returns "1 minute and 2 seconds"`
`format_duration(3662)  # returns "1 hour, 1 minute and 2 seconds"`

Definitely a useful bit of code to have. It's much easier to work in seconds sometimes while coding, but easier to read human time in actual use.

Good luck!

***
_Thank you to [CodeWars](<https://codewars.com/>), who has licensed redistribution of this challenge under the [2-Clause BSD License](<https://opensource.org/licenses/BSD-2-Clause>)!_

_Want to propose a challenge for a future post?  Email **yo+challenge@dev.to** with your suggestions!_
no-math intro to quantum programming
Tags: quantumcomputing, learning
Published: 2019-07-23 11:27:57

The playlist is growing! Hope it's helpful for those in classical software development to start getting into quantum programming!

https://www.youtube.com/playlist?list=PLsedzcQz4wyXR5w6woPazwoMsjk9gmzXY

Let me know how you like it!
how to take a screenshot of your Selenium test with Python
Tags: selenium, testing, automation
Published: 2019-07-23 11:25:25

---
title: how to take a screenshot of your Selenium test with Python
published: true
description: 
tags: selenium,testing,automation
---

One thing you will want to do is save a screenshot from your Selenium test. You can use the image as an artifact to prove a test is passing or failing. An image of your test can also prove useful for debugging things visually.

```python
from selenium import webdriver

driver = None
try:
    cpath = "e:\\projects\\sel\\chromedriver.exe" # note 1
    driver = webdriver.Chrome(cpath)
    driver.get("https://google.com")
    driver.save_screenshot("google.png") # note 2
finally:
    if driver is not None:
        driver.close()
```

Note 1 - I have my chromedriver.exe in the directory "e:\projects\sel", you will need to change this value to match where chromedriver.exe is located on disk.

Note 2 - This is the line where the image is generated. The name of the image is passed to the function in this case I named the image "google.png." You can choose any name you like.

The image format used is PNG (portable network graphics) https://en.wikipedia.org/wiki/Portable_Network_Graphics

The one thing to note that this picture will be "above the fold" and not a full page image.
CoverFlow
Tags: animation, collection, coverflow, moveable
Published: 2019-07-23 11:00:24

Swipe animation like tinder using collection view

CustomFlowLayout Controller is subclass of UICollectionViewFlowLayout with the custom animation and layout.

**Usage**

1. Add native UICollectionView to the your view controller Xib.

2. Create your custom Collectionview cell.

3. Register your custom collection view cell in your View controller.

4. Set Custom Layout Flow of Collection view and alloc in your ViewController viewDidLoad() method and Explain in details Point 2 below.

Want to know how we made this adding Like and Dislike functionality on swipe left and right? Simple check out code here: **[CoverFlow](https://github.com/Mindinventory/CoverFlow)**
Using Proxy’s get() Trap for Easy Defaults and Even method_missing!
Tags: javascript, proxy
Published: 2019-07-23 12:22:05

---
title: Using Proxy’s get() Trap for Easy Defaults and Even method_missing!
published: true
tags: javascript,proxy
canonical_url: https://blog.neverendingqs.com/2019/07/23/defaults-with-proxy.html
---

[Proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy)’s`handler.get()` trap is very powerful. Here are some examples of what it can do.

## Counter

Need to keep a counter of something? The following example shows how many of each animal appears in a list.

```javascript
const animals = [
  'dog', 'cat', 'mouse', 'cat', 'dog',
  'dog', 'mouse', 'cat', 'cat', 'dog',
  'mouse', 'cat', 'mouse', 'dog', 'dog'
];

const counter = new Proxy({}, {
  get: (obj, property) => obj[property] || 0
});

animals.forEach(animal => counter[animal] += 1);

console.log(JSON.stringify(counter, null, 2));
```

```json
{
  "dog": 6,
  "cat": 5,
  "mouse": 4
}
```

## Arrays

Or how about grouping things together in an object of arrays?

```javascript
const data = {
  posts: [
    { name: 'post1', tags: ['tag1', 'tag2', 'tag3'] },
    { name: 'post2', tags: ['tag2', 'tag5', 'tag7'] },
    { name: 'post3', tags: ['tag3', 'tag6', 'tag7'] },
    { name: 'post3', tags: ['tag2', 'tag3', 'tag6'] },
    { name: 'post3', tags: ['tag1', 'tag4', 'tag5'] }
  ]
};

const postsByTag = new Proxy({}, {
  get: (obj, property) => obj[property] || []
});

data.posts.forEach(post =>
  post.tags.forEach(tag =>
    postsByTag[tag] = postsByTag[tag].concat(post.name)
  )
);

console.log(JSON.stringify(postsByTag, null, 2));
```

```json
{
  "tag1": [
    "post1",
    "post3"
  ],
  "tag2": [
    "post1",
    "post2",
    "post3"
  ],
  "tag3": [
    "post1",
    "post3",
    "post3"
  ],
  "tag5": [
    "post2",
    "post3"
  ],
  "tag7": [
    "post2",
    "post3"
  ],
  "tag6": [
    "post3",
    "post3"
  ],
  "tag4": [
    "post3"
  ]
}
```

## Ruby’s `method_missing`

You can even imitate Ruby’s [method\_missing](https://ruby-doc.org/core-2.6.3/BasicObject.html#method-i-method_missing) by making decisions on the fly!

```javascript
const greeter = new Proxy({}, {
  get: (obj, property) => {
    if(property.startsWith('print')) {
      const toPrint = property.split('_').slice(1);
      return () => toPrint.forEach(p => console.log(obj[p]));
    } else {
      return obj[property];
    }
  }
});

greeter.firstName = 'Jane';
greeter.lastName = 'Doe';
greeter.helloWorld = () => console.log('Hello World');

greeter.helloWorld();
greeter.print_firstName_lastName();
```

```
Hello World
Jane
Doe

```

These are only a small set of examples of the `handler.get()` trap. What are some things you have done with the `Proxy` object?
Welcome to `::marker` Psudeo-Element!
Tags: discuss, css, emoji
Published: 2019-07-23 10:57:45


A few days ago, `::marker` psudeo-element became supported by Firefox 68.

I'm wondering now if:


* `::marker` [is/could be] able to change the default icon of radio buttons and check boxes in a web page in a _standard way_, without any trick or workaround? 🤔
* `::marker` is going to be a standard way to represent icons in web pages (e.g. in a toolbar or a pagination panel)?
React Navigation and StackNavigator to navigate Error
Tags: help, react, newbie, reactnative
Published: 2019-07-23 11:36:15

---
title: React Navigation and StackNavigator to navigate Error
published: true
tags: help,react,newbie,react-native
canonical_url: https://medium.com/@awuloero13/react-navigation-and-stacknavigator-to-navigate-error-5191f5da4c62
---

I am trying to use React Navigation and StackNavigator to navigate around my app. I have a picture with onPress={() =\> navigate(‘Swipe Screen’), and I was hoping that would take me to the Swipe Screen, it was clicking but not navigating What do I need to add in order to get this working?  
I already added navigation={this.props.navigation} to the parent Component  
below [https://gist.github.com/AORECLAUSE/1aa6927877fcbd3901b19e35a15bb6df/revisions](https://gist.github.com/AORECLAUSE/1aa6927877fcbd3901b19e35a15bb6df/revisions)
How to fixed Warning Version pom.xml
Tags: java, springboot, pomxml, maven
Published: 2019-07-23 10:42:33

---
title: How to fixed Warning Version pom.xml
published: true
description: remove warning line in pom.xml
tags: java , spring-boot, pom.xml, Maven
---

![](https://thepracticaldev.s3.amazonaws.com/i/7bvjiojah15dbw8vy861.PNG)

```
<!--$NO-MVN-MAN-VER$-->
```
![](https://thepracticaldev.s3.amazonaws.com/i/woqjvrk0nbe9mhks4211.PNG)
What intermediate/advanced CSS resources do you find essential?
Tags: discuss, css, webdev, help
Published: 2019-07-23 09:49:51

I have found myself guiding traditionally non-web-based developers doing mostly intermediate front-end tasks. The discrepancy in skills and knowledge of CSS and how to properly use it between developers means I am spending a lot of time going over things such as pseudo elements, flex-box and css grid amongst others, and I am running short on time for my own work.

Im looking for any intermediate/advanced resources or courses to point others (and myself) towards when they are trying to get their head round some of the newer, less used or less well known parts of CSS, as well as a solid foundation.

Free courses preferred, although good paid resources are an option. Thanks!
Golang: Defer Gotchas and Hack
Tags: go
Published: 2019-07-23 09:30:34

---
title: Golang: Defer Gotchas and Hack
published: true
description: Not a real hack
tags: golang
---

## Sample Program

```golang
package main

import "fmt"

func main() {
	p := person{"john", 15}
	defer printPerson(p)
	updateAge(&p, 20)
}

type person struct {
	name string
	age  int
}

func printPerson(p person) {
	fmt.Printf("Name: %s, Age: %d", p.name, p.age)
}

func updateAge(p *person, newAge int) {
	p.age = newAge
}

```

Run the program.

```console
$ go run main.go

Name: john, Age: 15
```

I was expecting 20, but I got 15. This is because *"The arguments to the deferred function (which include the receiver if the function is a method) are evaluated when the defer executes, not when the call executes."*. See [effective go - defer](https://golang.org/doc/effective_go.html#defer).

This means that the time that `defer printPerson(p)` was called, that `p` is already *set in stone*.

## Workaround

Now, put `printPerson(p)` under an anonymous function.

```golang

func main() {
	p := person{"john", 15}
	// defer printPerson(p)
	defer func() {
		printPerson(p)
	}()
	updateAge(&p, 20)
}
```

Run the program.

```console
$ go run main.go

Name: john, Age: 20
```

Why? The documentation only says *the arguments to the deferred function are evaluated when the defer executes*. In the modified code above, that deferred function is the anonymous function, and not the function `printPerson`. Hack!
“State of Remote Developers 2019” Survey (win an Amazon giftcard!)
Tags: survey, remote, developers
Published: 2019-07-23 08:55:25

---
title: “State of Remote Developers 2019” Survey (win an Amazon giftcard!)
published: true
description: 
tags: #survey #remote #developers
cover_image: https://thepracticaldev.s3.amazonaws.com/i/yotb4fjx724sibp5lm9d.png
---

Share *your* experience and complete the **5-minute “State of Remote Developers” survey before Monday, August 12th**! In our final report, we'll compare insights on how remote developers work and what support they need to excel, with the perspective of technical leaders.

###**[SURVEY HERE](https://codemntr.io/devto-stateofremotedevs)**

You'll be entered to **win a $75 Amazon giftcard**. Two winners will be contacted mid-August.


*In your opinion, what is the one biggest obstacle that prevents companies from adopting remote work?*
There's Such A Thing As Too Many Open Files
Tags: devops, linux
Published: 2019-07-23 08:33:42

---
title: There's Such A Thing As Too Many Open Files
published: true
description: TIL about file open limits and how they affect network connections.
tags: devops, linux
---

I learned something new about Linux today! I ran into a problem when an OS process opened too many files. It turns out that also prevents opening a new socket while making network connections. The limit for how many files a process can open includes sockets because they are both *[kernel handles](https://unix.stackexchange.com/a/157353)*. The default limits were a little low for me so I wanted to raise the limits, not only per process but across the whole system.

To check the limit per process, run `ulimit -n`. 1024 in my case.


To change it, add these two lines to `/etc/security/limits.conf`:
```
* soft nofile 4096
* hard nofile 10240
```
The soft limit is the number files a process can open normally. The hard limit is the maximum amount a user can configure, in case they temporarily need more resources. The first parameter is the user the limit will apply to and a `*` can be used to change the limit for all users.

To change the limits for the entire system, add `fs.file-max = 1048576` to `/etc/sysctl.conf`.

That was a fun one to track down!
Developer mindset kicking in during daily activities
Tags: motivation
Published: 2019-07-23 08:26:45

Today I experienced a moment when I became totally aware of that my developer mindset (or instincts) are constantly kicking in during daily activities and wanted to share with you, as I bet it happens to you a lot too.

I wanted to listen to a song and asked Alexa to play it for me; but she could not able to find the sing as its name is an altered English word. So I thought I could make her play the whole album and skip songs until the one I wanted to listen, however the song is the last song of a record with 13 tracks! I was at a point where I had to ask Alexa to skip songs for 12 times which is a nightmare for me. 

That moment my developer mindset kicked in and I figured out there is a possibility that I could reach that target song sooner if I asked Alexa to shuffle the album. So, I was listening to that awesome song just after 5 skips. I felt like I was coding without a keyboard and figured out that I've been doing the same thing during several other occasions and had the same feeling.

I'd love to hear in what ways other developers having the same feeling in their daily lives.
JavaScript debugging with Chrome DevTools
Tags: javascript, debugging, devtools, howto
Published: 2019-07-23 12:20:14

---
title: JavaScript debugging with Chrome DevTools
published: true
tags: JavaScript,debugging,devtools,howto
canonical_url: https://42coders.com/javascript-debugging-with-chrome-devtools/
---

## Introduction

Tracking down what happens in JavaScript code is not always trivial, especially when many event handlers and/or asynchronous ajax calls are involved. Using console.log in these cases can be tiresome and ineffective, in this article I am going to show the basics how to use Chrome DevTools for debugging JavaScript.

## Getting started

Open the inspector (Cmd+Option+i or Ctrl+Shift+i), and navigate to the Sources tab, and choose the JavaScript file you want to debug on the navigation bar on the left hand side.

[![](https://42coders.com/wp-content/uploads/2019/07/dev_tools.png)](https://42coders.com/wp-content/uploads/2019/07/dev_tools.png)

Add breakpoint by clicking on the line number:

[![](https://42coders.com/wp-content/uploads/2019/07/breakpoint.png)](https://42coders.com/wp-content/uploads/2019/07/breakpoint.png)

Run the code in the browser, when the debugger stops, you can use the usual things to debug your code including:

- Step into function – F11
- Step over – F10
- Step out of function call – Shift + F11
- Watch variables
- Inspect local variables

## [![](https://42coders.com/wp-content/uploads/2019/07/debugging.png)](https://42coders.com/wp-content/uploads/2019/07/debugging.png)

 

## Additional useful features

I’ve recently learned some very handy features to use while debugging.

#### debugger

Adding debugger; command to the code the debugger stops executing the code, it is a very quick way to add a breakpoint, no need to browse the source files in the devtools.

#### console.table()

Similar to the console.log, but it shows the variable as a table, useful to quickly check values of complex variables.

#### Pretty print

If you need to inspect/debug minified code (especially in production) devtools can pretty print the minified code by clicking on the curly braces in the bottom left corner of the main debugger window:

[![](https://42coders.com/wp-content/uploads/2019/07/minified.png)](https://42coders.com/wp-content/uploads/2019/07/minified.png)

The pretty printed output is not as clean and useful than the original source code, but it is more understandable/debuggable than the minified version, it looks like this:

[![](https://42coders.com/wp-content/uploads/2019/07/pretty_print.png)](https://42coders.com/wp-content/uploads/2019/07/pretty_print.png)

There are many more features of the devtools, if you are interested please check the official documentation here: [https://developers.google.com/web/tools/chrome-devtools/javascript/](https://developers.google.com/web/tools/chrome-devtools/javascript/)

The post [JavaScript debugging with Chrome DevTools](https://42coders.com/javascript-debugging-with-chrome-devtools/) appeared first on [42 Coders](https://42coders.com).
Go Talk To Your Customers
Tags: customer, perspective, growth
Published: 2019-11-05 07:29:18

---
title: Go Talk To Your Customers
published: true
tags: customer, perspective, growth
canonical_url: https://www.samjarman.co.nz/blog/see-your-customers
---

Recently was my companies 4th birthday as a released product, and yesterday the team did some fun stuff! Asides from the amazing lunch at local restaurant, I must praise my CEO and CTO on doing what I've always believed to be one of the best leadership exercises: they took the whole team (including devs) to meet a customer in person. We learned about many role types who use our software, and their gripes with it and how far into the adoption they were.  
  
And the best thing of course happened: We developed a lot more empathy. We quickly started writing code in our heads to fix their problems, and we had notes for Monday for things to research.  
  
Developers often lose sight of the customer, and it's understandable but not excusable. This very much helped with that. I would 100% recommend a similar exercise at your place of work.  
  
If you've read the amazing Give and Take by [@AdamMGrant](https://twitter.com/AdamMGrant), you'll know that when you show your employees the results of their work, motivation is increased. Many studies confirm this empirically. So yeah, fun, motivating day. Thanks boss!
Null vs Undefined in JavaScript in 1 min
Tags: javascript, beginners, webdev
Published: 2019-07-23 07:56:52

---
title: Null vs Undefined in JavaScript in 1 min
published: true
description: Null vs Undefined in Javascript
tags: JavaScript, beginners, webdev
canonical_url: https://gopikrishna.dev/blog/null-vs-undefined
---

*Note: It's my first blog post, constructive criticism would be welcome 🙂*

I always had a small confusion between `null` and `undefined` in JavaScript.

Now, Let's dive into the topic.

When we declare a variable without assigning any value to it, its value will be `undefined` by default.

```js
let color;
console.log(color); //undefined
```

But when we assign `null` to a variable, we are explicitly assigning a "nothing" or "empty" value to it.

For example, we have a `userDetails` variable which stores the details of an user.
At first, it doesn't have any data, so we are assigning `null` to it.

```js
let userDetails = null;
```

Later we fill the `userDetails` variable with the response from our function `getUserDetails`. The function may be a call to an API or accessing `localStorage` for details etc. Here it’s just a simple function which returns an object.

```js
function getUserDetails() {
  return {
    userName: 'gk',
    id: '1',
  };
}

userDetails = getUserDetails();
console.log(userDetails); // {userName:"gk", id:"1"}
```

If the value is unknown at the time of variable definition, it's always best to use `null`.

This article was originally published on my [blog](https://gopikrishna.dev/blog/null-vs-undefined). 

Thank you.

### Reference
[undefined](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined) - MDN
[null](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/null) - MDN
[Javascript Grammer](https://twitter.com/js_tut)