teleren/devto huggingface dataset:
The 7 Most Popular DEV Posts from the Past Week
Tags: top7, bestofdev
Published: 2018-09-24 17:33:13

---
title: The 7 Most Popular DEV Posts from the Past Week
published: true
description: A round up of the most-read and most-loved contributions from the community this past week.
tags: icymi, bestofdev
cover_image: https://thepracticaldev.s3.amazonaws.com/i/sfwcvweirpf2qka2lg2b.png
---

#1. One small step 👣🌙

Celebrating the brave JavaScript developers who changed web-development forever.  Looking at the origins of JSON, Promises, and other game-changing advancements.

{% link https://dev.to/stereobooster/thats-one-small-step-for-a-developer-one-giant-leap-for-the-web-4b28
 %}

#2. Branch management 🌴

Darío introduces a few git branching strategies that will help you stay organized and collaborate effectively.

{% link https://dev.to/hardkoded/how-to-organize-your-git-branches-4dci
 %}

#3. Finally 🤞

Anna talks about `finally` and the differences of how its used in Promises vs. try/catch.

{% link https://dev.to/annarankin/finally-in-promises--trycatch-2c44
 %}

#4. Readable Code 📖

Jason distills 20 years of experience into 10 practices for writing code that is more readable and less complex.

{% link https://dev.to/gonedark/10-practices-for-readable-code-143a
 %}

#5. You the real MVP 🏆

Tiffany talks MVPs (_minimum viable products_), explaining the benefits of building in the open, fighting perfectionism, and more.

{% link https://dev.to/twhite/mvps-and-iterating-your-way-to-a-finished-product-2p35
 %}

#6. Why you should be hiring junior developers 🙌🏽

The "we only hire seniors" strategy is wrong on so many levels.  Isaac breaks down why your company should be reaping the benefits of hiring junior developers.

{% link https://dev.to/isaacandsuch/if-you-dont-hire-juniors-you-dont-deserve-seniors-48kb
 %}

#7. ❄ Bundle Up ❄

Ever wonder what's actually going on under the hood with Webpack?  Adarsh dives in with helpful diagrams and examples.

{% link https://dev.to/sadarshannaiynar/demystifying-webpack-2f5n
 %}

_That's it for our weekly wrap up! Keep an eye on dev.to this week for daily content and discussions...and if you miss anything, we'll be sure to recap it next Monday!_
Module Monday 14: Gallery 5-panel, Code displayer, Elegant form & more
Tags: showdev, opensource, webdev, javascript
Published: 2018-09-24 16:07:11

---
title: Module Monday 14: Gallery 5-panel, Code displayer, Elegant form & more
published: true
description: Module Monday 14
tags: showdev, opensource, webdev, javascript
cover_image: https://res.cloudinary.com/component/image/upload/b_rgb:f6f6f6,c_pad,h_370,w_880/v1537599266/gallery-5-panel_50_myulcd.gif
canonical_url: https://guide.anymod.com/v1/module-mondays/2018-09.html#Module-Monday-14
---

## Weekly web modules you can use anywhere 🖼️💻📽️💬📰

Everything below is open source and free to use on any website, web app, or anywhere else. [Anymod](https://anymod.com) lets you quickly add features like these.

Click a mod to see it along with its source code.

## Gallery 5-panels
A beautiful, responsive image gallery with 5 panels.
<a class="btn btn-sm" href="https://anymod.com/mod/ooldr?v=20">View mod</a>
<a href="https://anymod.com/mod/ooldr?v=20">
  <img src="https://res.cloudinary.com/component/image/upload/v1537599266/gallery-5-panel_50_myulcd.gif"/>
</a>

## Code displayer (HTML/CSS/JS)
Present clear, formatted lines of code anywhere on your site.
<a class="btn btn-sm" href="https://anymod.com/mod/akbra?v=20">View mod</a>
<a href="https://anymod.com/mod/akbra?v=20">
  <img src="https://res.cloudinary.com/component/image/upload/v1537599314/code-display_xrmm3l.png"/>
</a>

## Vimeo embed
Add a full-screen Vimeo video wherever you want.
<a class="btn btn-sm" href="https://anymod.com/mod/dmadd?v=20">View mod</a>
<a href="https://anymod.com/mod/dmadd?v=20">
  <img src="https://res.cloudinary.com/component/image/upload/v1537599417/vimeo_wt58kt.png"/>
</a>

## Elegant form
Ready-to-use contact form that works anywhere.
<a class="btn btn-sm" href="https://anymod.com/mod/mkbar?v=20">View mod</a>
<a href="https://anymod.com/mod/mkbar?v=20">
  <img src="https://res.cloudinary.com/component/image/upload/v1537599417/contact_krl6ax.png"/>
</a>

## Content tabs
Add and organize your content with customizable tabs.
<a class="btn btn-sm" href="https://anymod.com/mod/nbdol?v=20">View mod</a>
<a href="https://anymod.com/mod/nbdol?v=20">
  <img src="https://res.cloudinary.com/component/image/upload/v1537599265/tabs_m95qw1.png"/>
</a>

<hr>

I post new mods [here](https://dev.to/tyrw) every (Module) Monday -- I hope you find them useful!

Happy coding ✌️
React Native Vertical ScrollView Example Android
Tags: react, reactnative, android, javascript
Published: 2018-09-24 15:52:08

---
title: React Native Vertical ScrollView Example Android
published: true
description: React Native Vertical ScrollView Example Android 
tags: #react #reactnative #android #javascript
---

Post Link : <a href="https://www.skptricks.com/2018/09/react-native-vertical-scrollview-example-android.html" > React Native Vertical ScrollView Example Android</a>

This tutorial explains how to create simple vertical ScrollView in react native application. The ScrollView is a generic scrolling container that can host multiple components and views. The scrollable items need not be homogeneous, and you can scroll both vertically and horizontally (by setting the horizontal property).

<a href="https://www.skptricks.com/2018/09/react-native-vertical-scrollview-example-android.html" > React Native Vertical ScrollView Example Android</a>


<img src="https://1.bp.blogspot.com/-wfBPaOry_No/W6j31Pmx6NI/AAAAAAAAB7o/2ud0L-1a73gqla4YdUkjwePIuNbYKX0lgCLcBGAs/s640/ver.png" />

<a href="https://www.skptricks.com/2018/09/react-native-vertical-scrollview-example-android.html" > Read More...</a>
DevTip: Two steps for using Workbox in a Chrome Extension
Tags: webdev, devtip, javascript
Published: 2018-09-24 14:54:17

---
title: DevTip: Two steps for using Workbox in a Chrome Extension
published: true
tags: webdev, devtip, javascript
---

Recently the Chrome team enabled using service worker in Chrome Extensions, which is great news! Now we can intercept the extension requests which is good especially for caching and performance.
One library that really shines in terms of service worker caching is [Google's Workbox](https://developers.google.com/web/tools/workbox/) but using it in a Chrome Extension is not that obvious so here is my tip:


{% twitter 1044233083900350464 %}


If you are using the webpack plugin for workbox simply add:
`exclude: [/.*/],` as part of your configuration

In your extension `manifest.json` set the following:
`"content_security_policy": "script-src 'self' https://storage.googleapis.com; object-src 'self'",`



Let me know how it goes for you :)
Delete a Git branch both locally and remotely [Shell aliases + functions] #OneDevMinute
Tags: onedevminute, git, shell
Published: 2018-09-24 14:36:40

---
title: Delete a Git branch both locally and remotely [Shell aliases + functions] #OneDevMinute
published: true
description: Delete a Git branch both locally and remotely [Shell aliases + functions] #OneDevMinute — Simple aliases and functions to make your life as developer easy.
tags: onedevminute, git, shell
---

Deleting a git branch locally is pretty easy, just do a `git branch -D branch_name` and you're done. But when you have already pushed that branch to remote, it becomes a bit more complex. You can't just delete the local branch and do a `git push` to be done with it. Instead, you have to do a `git push origin --delete branch_name` to delete it from the remote.

All of that becomes too much for a simple task of deleting a git branch. Which is why, just copy/paste the following in your `.zshrc/.bashrc` file and you'll be able to use `gcm`, `gbn`, `gbdel` commands to do all of this in a jiffy.

```sh
# FILE: .zshrc/.bashrc

################################################
# 🔥 #OneDevMinute
#
# Daily one minute developer tips.
# Ahmad Awais (https://twitter.com/MrAhmadAwais)
################################################

# Checkout to master
alias gcm="git checkout master"

# Create new branch and checkout.
alias gbn='git checkout -b'

# Remove git branch both locally and remotely.
# Usage: gbdel branch_name
function gbdel {
	# Branch name present?
	if [[ -z "$1" ]]; then
		echo "\n🤔 Oops… you forgot to provide the branch name"
		echo "👉 E.g. gbdel branch_name\n"
	else
		# Start deleteing.
		echo "\n⏳ Deleting…\n"
		git branch -D "$1" # Local delete.
		git push origin --delete "$1" # Remote delete.
		echo "\n✅ Git branch $1 was deleted from local and remote.\n"
	fi
}
```

- 📺 1080p on https://Youtu.be/sLif9Ll597s
- 👨‍💻 Code Gist: https://Ahmda.ws/2xvcyqP 
- 📨 Newsletter + site coming soon




> P.S. If you like my work, feel free to share it, like it. I am quite active on twitter you can find me cracking silly jokes there, maybe [follow me on Twitter](https://twitter.com/MrAhmadAwais) to connect and [subscribe to my YouTube channel →](https://YouTube/AhmadAwais)
> Peace! ✌️

🗣️ Comment below if you didn't get something.
React Progressive Loader
Tags: react, javascript, progressiveloader, pwa
Published: 2018-09-24 14:31:55

---
title: React Progressive Loader
published: true
description: 
tags: react, reactjs, javascript, progressive loader, pwa
---

Defer the load of non-critical images and components if they are off-screen.

This library makes possible to progressively load images, just like Medium does, and React components only when the user is ready to consume the content. Additionaly, take component based code splitting for free. Two at the price of one.

Get it while still hot https://github.com/yosbelms/react-progressive-loader
Stubbing responses from documented APIs. Worth it?
Tags: opensource, discuss, api
Published: 2018-09-24 14:31:29

---
title: Stubbing responses from documented APIs. Worth it?
published: true
description: Make sense to create a tool with such a purpose?
tags: opensource, discuss, api
---

On the project I currently work, we use swagger for documenting our API. The frontend team use this documentation to create the calls, send the given parameters and so on... 

It's a Contract First approach: since we have the contract defined both teams can start working together, since they are respecting the contract. 

The problem is: some endpoints returns complex objects, some API calls depends on different frontend data to be sent as headers or parameters. Because of this, frontend developers tend to be blocked waiting for the API endpoint to be ready to be called, because it's impossible to perform the call if the endpoint isn't implemented yet. 

One of our collegues suggested us to use some tool that creates enpoints with returned values according to our swagger documentation.


For example: we have in our swagger an endpoint such as

`GET /machine?name=foo&type=bar`


This tool would read it and then expose an enpoint such as

`GET tool.com/45er3z7/machine?name=foo&type=bar`


When this endpoint is called, an object with the swagger specification format will be returned.


Do you guys know any tool with this propose? It doesn't need to be open source.

Would be usefull to use such a tool? In our case I do think so. 

Some people suggested we coud build a tool to solve it... 

Personally I feel like it's a "super engineering" effort.



What are you thoughts on this situation and building a tool for such a pourpose?
We need a post-inbox era therapist
Tags: google, discuss, productivity
Published: 2018-09-24 14:01:12

---
title: We need a post-inbox era therapist
published: true
description: We need a post-inbox era therapist
tags: google,discuss,productivity
---

I'm devastated, i'm going to miss inbox so much.

**Google inbox was my killer productivity tool, It was my twin task and time management brother.**

I basically managed my life with it:

1. Reminders together with emails in same inbox.

2. Can change Reminders text.

3. Bundling, oh god this was sweet.

4. Repeating Snooze, yes, if something is important enough let it repeat.

5. Location Snooze (RIP), but it's memory is in my heart.

6. Google Keep Reminders.

7. Collecting interesting ideas like a snap in my inbox, snoozing thus keeping my inbox clean, the ability to update the text when needed.

At first I was confused what is Inbox, why is it better than gmail?

But then it took over my life.

Not sure how i'll manage my life back post March 2019.  I think there is potential for a new consultancy role "post inbox therapist" consultant.

My inbox got clean aka zero inbox only since I started using inbox instead of gmail.  Whenever I had an idea i just clicked "add reminder" and added it.

Every morning on train on my way to work I opened inbox and checked my new mail, dealt with it or snoozed to some better future time.

A coworker asked me for something, no problem, inbox my friend was reminding me of it, nothing was forgotten, no mail, no reminder, everything got handled.

An interesting website, just click share to inbox, and it appeared there nicely with website short description and image, sweet.

**Registered to a cheap mobile plan that would expired in two years?** quickly add with a snap reminder to 2 years - 1 month to change operator, it would then appear in my inbox together with my mail and all is fine.

**Remember to deprecated a server in two weeks?** Add a reminder, it would appear together with my mail.

**Got an important mail to reply due in 3 days** snooze, to evening then reply comfortably.

**Did I miss anything today?** Open inbox, all missed mails, snoozes from past, reminders, events are there, one app to rule them all.

Some old mails and tasks snoozed at me, I dealt with them with love.

So i started looking into apps, into gmail, into task management websites, and nothing compares to inbox, no one offers the real bundle, the repeating, the tasks, the emails, the snooze.

A short list of apps I looked at since and nothing supplied the functionality and smoothness i needed:

1. Google Tasks
1. Gmail
1. Asana
1. KanbanFlow
1. AnyDo
1. TickTick
1. Trello
1. Various IFTTT
1. OrgMode
1. More...

But, I ended up using none, nothing does the trick, nothing beats inbox or even get's close.

**So long google inbox, thanks for the time we had together, as it looks nothing compares to you, i'll always remember you.**

Kiss,
Tomer
Redesign of my portfolio
Tags: showdev, webdev, career, frontend
Published: 2018-09-24 13:54:51

---
title: Redesign of my portfolio
published: true
description: This is about showing my portfolio to other devs and getting their feedback.
cover_image: https://thepracticaldev.s3.amazonaws.com/i/esqzlm0nnkuqpchx9qem.png
tags: #showdev #webdev #career #frontend
---

{% github dhavalwd/dhavalvyas %}

## Little about me
I am a Front End Developer and an amateur photographer. I am always up for learning something cool/new.

## Little about my portfolio
I have been thinking about redesigning my website for quite some time. But I just didn’t want to start creating another HTML, CSS, JS static website. My main aim was to create a new website and learn any new framework along the way. I started looking into Vue.js and it got me really excited honestly because of the easier learning curve than React personally for me. 

My portfolio is combination of  Nuxt.js and blog hosted on GraphCMS. It is being hosted on Netlify which I think is one of the best place to host your static sites right now. I have started working on this somewhere in February and still it is nowhere near to make it live but I did it anyway. I always felt that it’s not perfect and requires some change and all. But last Tuesday, I just decided to make it live.

It’s a very small website. Please feel free to review it and give your feedback.
Can you help? We need some stars...
Tags: wordpress, opensource, php
Published: 2018-09-24 11:35:52

---
title: Can you help? We need some stars...
published: true
description: To qualify for an OpenCollective account we need to reach a star count
tags: WordPress, Opensource, PHP 
---

We're hoping to open an account with [OpenCollective](https://opencollective.com) so we can be transparent about our spend at [ClassicPress](https://www.classicpress.net).

However, we need to reach 100 stars on our project to qualify for an account. **Would it be possible to star our [our GitHub repo](https://github.com/ClassicPress/ClassicPress) to help us reach that target?**?

Thanks very much in advance!
Appropriate Design
Tags: design
Published: 2018-09-24 10:15:52

---
title: Appropriate Design
published: true
description: How should we find the balance between too little design and too much?
tags: #design
---

In the bad old days of waterfall design was performed up front prior to the start of the coding. All the features of the system would be fleshed out and described before a line of code was written.

With Extreme Programming and Agile up front design gave way to iteration where the code was the design. Rather than thinking ahead to subsequent features only the immediate story would be considered. Refactoring was proposed as the mechanism to deal with the consequential design rework.

In this video I look at the different layers of software and the relationship between modules. Instead of an all or nothing approach we look at how to broadly define a structure and only design in more detail once we actually begin to develop the module. This is possible through design of interfaces or contracts between the different modules.
Hello, World!
Tags: welcome
Published: 2018-09-24 12:15:01

---
title: Hello, World!
published: true
tags: welcome
canonical_url: 
---

Hello everyone,

I just started this new personal blog in English language using WordPress: http://www.joanalbamaldonado.com/blog/

Hopefully, I will have free time every now and then to publish about programming, retrocomputing, retrogaming, BeOS / Haiku OS, antique collecting, handicrafts, cinema, survivalism and some other hobbies I have, about personal experiences and opinions, etc.

Previously, many years ago, I also had two blogs which are now quite abandoned: [Codéala otra vez, Sam](http://drogaslibres.blogspot.com/) (in Spanish) and [La Mussi per sempre](http://blocs.tinet.cat/la-mussi-per-sempre/) (in Catalan). I will try not to abandon this one… yet! ;)

If there is anyone reading this out there, thank you very much and feel free to drop a comment if you want, please.

Cheers,

Joan
Implementing the Stack Data Structure in Javascript
Tags: javascript, computerscience, datastructures, video
Published: 2018-09-24 09:35:38

---
title: Implementing the Stack Data Structure in Javascript
published: true
description: In this video, we are implementing the Stack Data Structure in Javascript.
tags: javascript,computerscience,datastructures,video
cover_photo: https://thepracticaldev.s3.amazonaws.com/i/gerjfqz3husmeuklgv70.jpg
---

In this video, we are implementing the Stack Data Structure in Javascript. While JavaScript Arrays can be used as a stack, this video is meant for educational purposes as we will go into more complex data structures in the future. 

A stack is a simple data structure which is a container of objects that are inserted and removed according to the last in and first out principle. Elements can be added and removed only from the top.

[Link to YouTube Video](https://www.youtube.com/watch?v=mnz05qPYzxo)
[Link to the CodeSandbox](https://codesandbox.io/s/pkl6pw3mo0?module=%2Fsrc%2Findex.js)

![Stack Data Structure](https://thepracticaldev.s3.amazonaws.com/i/mwcwre09s12vqa3gvl7a.png)

---

#### If this video was helpful, ❤️ it and [subscribe to my YouTube channel](https://www.youtube.com/channel/UClCm-WAOgN6XLwCpefSVezg?sub_confirmation=1).


{% link https://dev.to/theoutlander/how-to-improve-your-development-experience-ldl %}
Testing React Native app includes react-native-cookies with Jest
Tags: reactnative, jest, javascript
Published: 2018-09-24 09:00:10

---
title: Testing React Native app includes react-native-cookies with Jest
published: true
description: 
tags: reactnative, jest, javascript
cover_image: https://thepracticaldev.s3.amazonaws.com/i/ncufvwc48nwkju0eoj9x.png
---
When got an error below.
```
Test suite failed to run

    Invariant Violation: react-native-cookies: Add RNCookieManagerIOS.h and RNCookieManagerIOS.m to your Xcode project

      1 | import { Alert, AsyncStorage, FlatList, Platform, StyleSheet, Text, View } from 'react-native'
    > 2 | import CookieManager from 'react-native-cookies'
        |                                                              ^
```
Add **setup.js** anywhere on project root directory or somewhere.
```
jest.mock('react-native-cookies', () => {
  return {
    addEventListener: jest.fn(),
    removeEventListener: jest.fn(),
    openURL: jest.fn(),
    canOpenURL: jest.fn(),
    getInitialURL: jest.fn(),
  }
})
```
Modify **package.json**.
```
 "jest": {
    "preset": "react-native",
    "moduleDirectories": [
      "node_modules",
      "src",
      "test"
    ],
    "setupFiles": [
      "<rootDir>/setup.js"
    ]
  }
```
['Invariant Violation' exception when running tests](https://github.com/joeferraro/react-native-cookies/issues/16#issuecomment-348448319)
What code snippets do you use?
Tags: discuss, javascript, snippets
Published: 2018-09-24 08:37:47

---
title: What code snippets do you use?
published: true
tags: discuss, javascript, snippets
---

Hi. Sometimes, we create code snippets to help us. In a project, I needed to create an element and its attributes should have been set. I wasn't using jQuery or like libraries. I've created a JavaScript function like that.

```javascript
const element = (data) => {
	const el = document.createElement(data["tag"])
	
	if(data["type"]) {
		el["type"] = data["type"]
	}
	
	if(data["id"]) {
		el["id"] = data["id"]
	}
	
	if(data["class"]) {
		const classList = data["class"]
		
		classList.map(m => {
			el.classList.add(m)
		})
	}
	
	if(data["text"]) {
		el["textContent"] = data["text"]
	}
	
	if(data["html"]) {
		el["innerHTML"] = data["html"]
	}
	
	if(data["attr"]) {
		const attr = data["attr"]
		const keys = Object.keys(data["attr"])
		
		keys.map(m => {
			el.setAttribute(m, attr[m])
		})
	}
	
	if(data["event"]) {
		const attr = data["event"]
		const keys = Object.keys(data["event"])
		
		keys.map(m => {
			const eventName = "on" + m
			el.setAttribute(eventName, attr[m])
		})
	}
	
	if(data["addTo"]) {
		const target = document.querySelectorAll(data["addTo"])
		
		target.forEach((m, i) => {
			m.appendChild(el)
		})
	}
	
	if(data["style"]) {
		const attr = data["style"]
		const keys = Object.keys(data["style"])
		let styleCode = '';
		keys.map(m => {
			const props = attr[m]
			const prop_keys = Object.keys(attr[m])
			
			styleCode += `${m} {`
			
			prop_keys.map(p => {
				styleCode += `${p}:${props[p]};`
			})
			
			styleCode += '}'
		})
		
		const style = document.createElement('style');
		style.type = 'text/css';
		style.innerHTML = styleCode;
		document.getElementsByTagName('head')[0].appendChild(style);
	}
	
	return el
}
```

This function always works for me. If you want to use this function you can use like this;

```javascript
// Example Usage

element({
	'tag': 'button',
	'type': 'button',
	'addTo': '.test-body',
	'html': '<img src="https://cdn-images-1.medium.com/max/2000/0*uORWkYMjiF3LA-K8" />', // or text
	'id': 'user-card',
	'class': ['profile-link', 'avatar'],
	'attr': {
		'name': 'user-name',
		'value': 'Ali',
		'data-id': 1,
		'data-path': '/profile/1'
	},
	'event': {
		"click": `console.log(123)`
	},
	'style': {
		'.profile-link': {
			"color": "#fff",
			"background-color": "#000"
		},
		".profile-link:hover": {
			"color": "#000",
			"background-color": "#fff",
			"border": "1px dashed #000;"
		},
		".avatar": {
			"width": "300px",
			"height": "300px",
			"border": "1px dashed #e3e3e3;"
		},
		".avatar img": {
			"width": "285px",
			"height": "285px"
		}
	}
})
```

[Check it on the CodePen](https://codepen.io/aligoren/pen/MqdWPz?editors=1010)


Anyway, I wonder, what code snippets do you use?