teleren/devto huggingface dataset:
Learn Git Workflow from the Basics and Branches to Forks and Pull Requests
Tags: git, github, beginners, commandline
Published: 2019-03-24 12:27:27

---
title: Learn Git Workflow from the Basics and Branches to Forks and Pull Requests
published: true
description: This is a four part series of hands-on tutorials covering Git workflow for beginners.
tags: git, github, beginners, commandline
canonical_url: http://jarednielsen.com/
---

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

This is a four part series of hands-on tutorials covering Git workflow for beginners based on exercises I wrote for [my bootcamp students](http://jarednielsen.com/advice-coding-bootcamp-students/). I found them to be successful in the classroom and hope they are useful as articles.

* [Learn Git Workflow Basics](http://jarednielsen.com/learn-git-workflow-basics/)

* [Learn Git Workflow Centralized Collaboration](http://jarednielsen.com/learn-git-workflow-centralized/)

* [Learn Git Branch Workflow](http://jarednielsen.com/learn-git-branch-workflow/)

* [Learn Git Fork & Pull Request Workflow](http://jarednielsen.com/learn-git-fork-pull-request/)

The Basics tutorial assumes Git (or Git Bash) is installed and you are familiar (but not necessarily proficient) with the command line.

It's hard to learn collaborative Git workflows on your own, so the Centralized and Branch tutorials are written for two to work through together. You don't need a partner to follow along, but you won't be able to complete all of the operations unless you configure separate GitHub accounts.

The Fork & Pull Request tutorial uses a real-world example contributing to an open-source project.

Feedback is appreciated. Cheers!


---

I write a weekly newsletter where I share articles about programming, problem solving and lifelong learning. [Join now](http://eepurl.com/cP8CMn)
Introduction to Drizzle | Ethereum Dapp Tutorial with Drizzle (Beginner)
Tags: ethereum, dapp, drizzle, react
Published: 2019-03-24 11:43:41

---
title: Introduction to Drizzle | Ethereum Dapp Tutorial with Drizzle (Beginner)
published: true
description: 
tags: Ethereum, Dapp, Drizzle, React
---

[In this video](https://youtu.be/QH_yLPYQEs4) I am going to introduce you Drizzle and we will build an Ethereum Dapp with it and React. Drizzle is a great framework but it can be a bit hard to understand for beginners, and it has a couple of outdated tutorials / docs. In this video, I will explain you in a simple way how it works, and tell you the caveats to avoid when reading some outdated docs. We will cover the following topics:

* What is Drizzle?
* When do you need it?
* What are the integrations with other frameworks?
* What are its components?
* How it work?
* Dapp tutorial with Drizzle

[![Introduction to Drizzle](https://thepracticaldev.s3.amazonaws.com/i/vph6axr2h0olf7v2sw8r.png)](https://youtu.be/QH_yLPYQEs4)
Digital Counter
Tags: javascript, css
Published: 2020-05-11 08:18:34

---
title: Digital Counter
published: true
date: 2019-03-24 07:30:00 UTC
tags: JavaScript, CSS
canonical_url: https://drmsite.blogspot.com/2019/03/digital-counter.html
---

{% replit @annoyingmouse/Digital-Flip-Counter %}

I'm still working with [grid layouts](http://drmsite.blogspot.com/2018/07/getting-ie11-to-play-nicely-with-grid.html) and making sure they work properly in IE11... I'm also concerned with petrol prices at the minute at my local BP Garage... so I got to playing with digital readouts in preparation for making a CSS grid calculator and developed [this](https://repl.it/@annoyingmouse/Digital-Counter). I'm using [lodash](https://lodash.com/docs/4.17.11) merely because it helps with all the nice array functionality which we don't have in IE11.
Chrome 74 beta supports dark mode in Windows
Tags: chrome, google, news
Published: 2019-03-24 05:51:32

---
title: Chrome 74 beta supports dark mode in Windows
published: True
description: Google has released the first beta version of Chrome 74, and it comes with support for Windows dark mode.
tags: #chrome, #google, #news
cover_image: https://thepracticaldev.s3.amazonaws.com/i/d7fyy6tsimqzjnee50lq.png
---
In a post on Google Developers blog about the feature, Developer Advocate Thomas Steiner explained the technology behind the feature:

<blockquote>"...with flashing ads, fancy parallax effects, surprising reveal animations, autoplaying videos, etc., the web sometimes can honestly be quite overwhelming... Happily, unlike in real life, there is a solution to that. The CSS media query prefers-reduced-motion lets developers create a variant of a page for users who, well, prefer reduced motion. This can comprise anything from refraining from having autoplaying videos to disabling certain purely decorative effects, to completely redesigning a page for certain users."</blockquote>

[Learn more about Chrome 74 beta "Dark Mode".](https://www.engadget.com/2019/03/23/chrome-74-beta-dark-mode-windows/)
Short Podcast on a Mini Hackathon Experience.
Tags: podcast, inspiration
Published: 2019-03-24 04:37:16

---
title: Short Podcast on a Mini Hackathon Experience.
published: true
description: This week I took part in a mini Hackathon, it proved very productive for not only creating a new product but expanding my skills. This short podcast shares my thoughts on why and how it benefits creativity and soft skills.
tags: podcast, inspiration
---

This week I took part in a short hackathon, it was a very interesting experience. Creating something from scratch in a very short time frame can be a great way to expand your skills and learn to interact with a diverse group of people.

Listen to this episode to hear my thoughts and experiences of the event.

Thanks for listening.

[https://anchor.fm/peter-witham/episodes/Hackathon-Experience-e3hn7g/a-a48kb6](https://anchor.fm/peter-witham/episodes/Hackathon-Experience-e3hn7g/a-a48kb6)
Space-time tradeoff Emoji Note
Tags: computerscience, emoji, beginners, sketchnotes
Published: 2019-03-24 04:07:04

---
title: Space-time tradeoff Emoji Note
published: true
description: Understanding Space-time tradeoff on Wikipedia using emojis
tags: computerscience, emoji, beginners, sketchnotes
---

Anthony has shared wonderful tips on interviewing at Google.


{% link https://dev.to/anthonydmays/interviewing-at-google-heres-6-things-you-absolutely-need-to-do-22lo %}

Within the fourth tip, [Brainstorm solutions and their time/space complexity](https://dev.to/anthonydmays/interviewing-at-google-heres-6-things-you-absolutely-need-to-do-22lo#4-brainstorm-solutions-and-their-timespace-complexity), Anthony stressed on "[space-time tradeoff](https://en.wikipedia.org/wiki/Space%E2%80%93time_tradeoff) principle", which I was vaguely familiar with.

While attempting to understand it, I drew a [sketchnote](http://rohdesign.com/sketchnotes/).

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

As it's not sharable, I came up with emoji version.

# Space-time Tradeoff Table
⏰🔽💽🔼 | (faster + more space) |  vs  |  ⏰🔼💽🔽   |  (slower + less space)
---------|----|----|------|---------
🙄📑|   (Lookup table)        |         | 🔃💻 | (Recalculation)
💾 x 1|    (Uncompressed Data)  |          |  💾 x 0.5 |  (Compressed Data)
🏪🖼|    (Stored Image)       |          | 🔃📜 | (Re-render)
➿➡➰ |(Loop Unrolling)   |             | 👨‍💻 x 0.5 | (Smaller code)


# Gist of each tradeoff

1. 🙄📑(Lookup table) vs. 🔃💻 (Recalculation)
Saving computed data in memory saves time but increases the space usage.

1. 💾 x 1 (Uncompressed Data) vs. 💾 x 0.5 (Compressed Data)
Faster to access uncompressed data as no decompression step is needed but requires more space.

1. 🏪🖼 (Stored Image) vs. 🔃📜 (Re-render)
Storing image in cache is faster than re-rendering but requires more space (in disk/memory).

1. ➿➡➰ (Loop Unrolling) vs. 👨‍💻 x 0.5 (Smaller code)
[Loop unrolling](https://en.wikipedia.org/wiki/Loop_unrolling) can optimize execution speed at the cost of increased binary size.


It might be a bit too much of emojis but helped me to understand a bit better what tradeoffs are available.

Feel free to share your version of table or sketchnote  🙂
Create a Simple Image Classifier with ml5js
Tags: machinelearning, ml5, javascript, beginners
Published: 2019-03-24 03:43:43

---
title: Create a Simple Image Classifier with ml5js
published: true
description: create a simple image classifier
tags: #machinelearning #ml5 #js #beginners
---

In this case, I will show you how to create a simple image classifier app with p5js and ml5js.

First, what are p5js and ml5js?

I would say it's Processing for js(Actually there is processing.js).  
https://p5js.org/   
Here at ITP, most students who don't have any experience of programming start using p5js to learn coding.

ml5js is a wrapper of tensorflowjs, so that allows us to use tensorflowjs easily, but it means that we cannot do everything with ml5js as well as tensorflowjs.
https://github.com/ml5js/ml5-library 


`index.html`
Very simple html. just load libraries.
In terms of ml5js, it has been updated recently, but I haven't updated the code, so this app needs to use v0.2.1.

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/addons/p5.dom.min.js"></script>
    <script src="./p5.speech.js"></script>
    <script src="https://unpkg.com/ml5@0.2.1/dist/ml5.min.js" type="text/javascript"></script>
    <title>img_rec</title>
</head>
<body>
    <script src="./sketch.js"></script>
</body>
</html>
```
`sketch.js`
This app is using MobileNet to classify objects.  
```js
let classifier;
let video;
let status = '';
let results = '';
const resultsNum = 5;
const voice = new p5.Speech();

function setup() {
    createCanvas(windowWidth, windowHeight);
    video = createCapture(VIDEO);
    classifier = ml5.imageClassifier('MobileNet',  video, modelReady); status = 'loading...';
}
function draw () {
    image(video, 0, 0, width, height);
    fill(255, 0, 0);
    textSize(24);
    text(status, 20, 30);
}

const modelReady = () => {
    status = 'loaded model!';
    classifier.predict(video, gotResult);
}

const gotResult = (err, results) => {
    if (err) {
        console.error(err);
        status = err;
    }
    // console.log(`results: ${results}`);
    status = `class: ${results[0].className}, accuracy: ${results[0].probability.toFixed(4)} \n`;    
    voice.speak(`${results[0].className}`);
    classifier.predict(video, gotResult);
}

```

### demo
Actually, this application tells you what he detects via camera.
https://thepracticaldev.s3.amazonaws.com/i/chmbw4svkmdcmdyxsyb6.gif
Developers[] : Programming Wisdom from an Array of Developers
Tags: software, development, wisdom, survey
Published: 2019-03-24 00:20:17

---
title: Developers[] : Programming Wisdom from an Array of Developers
published: true
description: Enhancing the developer community by sharing the wisdom and knowledge of the industry's best and well known developers
tags: software, development, wisdom, survey
---

# Introduction

There's a lot of development wisdom out there.  It's on blogs, in books, and here on dev.to.  But there's a lot of programming wisdom in the heads of all of you fine people, too.  

I'm starting a new project to try to get that wisdom out of your head and into the open spaces so that we all can benefit from it.  I'm calling it `Developers[] : Programming Wisdom from an Array of Developers`

# What Can You Do?

You can help.  You can fill out this survey: 

[https://forms.gle/vVYDSGYfNUM39RhL7](https://forms.gle/vVYDSGYfNUM39RhL7)

The purpose of the survey is to pick your brain about ten questions.  Those questions are:


	1.  What is your favorite programming language and why?
	2.  What one piece of advice would you give to a rookie developer?
	3.  What is the most difficult programming challenge you've ever encountered?
	4.  What is your favorite open source project and why?
	5.  What would you say to the developer that was you five years ago?
	6.  What one book should every software developer read?
	7.  What is the worst advice that you commonly hear given to developers?
	8.  Describe your favorite or most memorable "aha!" moment that you've had as a developer.
	9.  What is one weird or unusual thing you always do when you code?
	10. What have you done as a developer of which you are most proud?
	11. Bonus Question:   What is the answer to the one question that I should have asked you?

Okay, I have an "Off by One Error" -- there's a bonus question in there for you.

Please feel free to answer as completely and expansively as you like.  The more you write, the more wisdom you will impart, so don't hold back.

Please also feel free to share this link with your developer friends and on other developer sites.  

My goal is to take the best responses and [create blog posts out of them at my blog](http://www.arrayofdevelopers.com).  I may even take the cream of the crop and make a book out of them.  


Your wisdom, knowledge, thoughts, ideas, admonitions, warnings, and aphorisms will all be gratefully considered and appreciated.  I look forward to seeing your responses.
Blogging with Hugo and GitLab (2): Local Development Setup
Tags: webdev, tutorial
Published: 2019-04-08 06:07:10

---
title: Blogging with Hugo and GitLab (2): Local Development Setup
published: true
tags: ["webdev", "tutorial"]
canonical_url: https://loadbalancing.xyz/post/blogging-with-hugo-and-gitlab-local-development-setup/
---

While you can edit pages online in GitLab (e.g., through Web IDE, which also allows to preview Markdown pages), a local development environment of Hugo provides the best support of "what you see is what you get".
<!--more-->

## Environment

* macOS Sierra 10.12.6.
* Hugo v0.54.0.

## Create a local repository

With the website repository hosted on GitLab, we can clone the repository to local.

1. Clone your website repository to local.
```
git clone https://gitlab.com/username/username.gitlab.io.git
```

2. Configure your GitLab account email within the local repository, which will be used as the identification for all change commit.
```
git config user.email "example@email.com"
```
The updated account information can be verified in `.git/config`:
```
[user]                                                                           
email = example@email.com
```

## Install Hugo to local

1. Install Homebrew in macOS.
```
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
```

2. Install Hugo.
```
brew install hugo
```
Verify the installation by viewing the Hugo version:
```
hugo version
```

## Start the Hugo server

Start the Hugo server with "drafts" enabled, which will show all pages including drafts on the local server.
```
hugo server -D
```
Now you will be able to view your website locally at: *http://<span></span>localhost:1313*.

The Hugo server will keep running until you press Ctrl+C to stop it. Any saved changes will be immediately reloaded.
Automate the most boring thing with Python's subprocess module
Tags: python, subprocess, automate
Published: 2019-03-21 23:51:16

---
title: Automate the most boring thing with Python's subprocess module
published: true
description: A lazy introduction to Python's subprocess module
tags: Python, subprocess, automate
---

You have heard of the [subprocess][subprocess] module in the Python Standard Library, haven't you? How it:
> allows you spawn new processes, connect to their input/output/error pipes, and obtain their return codes.

Not only that, it also intends to replace older modules and functions like `os.system` and `os.spawn*`, which to be honest, I have no experience using.

Basically, the subprocess module allows you to launch other programs from your code and drive them to whatever end you desire. Think of doing fun things like:

1. controlling a browser from your code via the [webbrowser][webbrowser] module or even a third party library like [selenium](https://github.com/SeleniumHQ/selenium)
2. automating server deployments or administration tasks with [Fabric](http://www.fabfile.org/)
3. Running an android emulator from your code.
4. Yeah, I mean, you get the idea!

The [documentation][subprocess] has all the information you need if you desire a deep dive. If that is you, thank you for coming :)

Those of us who just want to stand by the riverbank and scoop some water are the ones reading this sentence and the ones below it.

Jokes aside, what brought us to this point is that I have a couple of repositories I collaborate on with other colleagues. All these repos live in the `Projects` subdirectory inside my home directory. The goal is to be able to run a `git pull` on all those repos at the beginning of my work day automatically. The other alternative will be to `cd` into a project directory, run `git pull`, `cd` out and into the next one, etc. That, my friends, is very boring!

Without much further ado, here is the code:
 
```python

from subprocess import check_output, CalledProcessError
from pathlib import Path

project_dir = Path.home() / 'Projects' / 'work'

for d in project_dir.iterdir():
    if d.is_dir(): # this check is not really needed
        try:
            out = check_output(["git", "pull", d], cwd=d)
            res = out.decode()
            print(res.splitlines()[-1])
        except CalledProcessError as exc:
            pass

```

In a nutshell, I am going through all the directories(repos) in my work directory, running a `git pull` on them. I am also decoding the output(by default output is in bytes) and printing the last element in the output list(calling res.splitlines turns the output into a list).
If there is an error, I pass it like it didn't happen.

That is all, believe me! I can run that little script from anywhere and have my repos updated. 
Maybe I can even take this further by checking the output to see if there was really an update on the repo. If so, I can open that particular repo in a code editor or on a browser. But what's the point?



[subprocess]: https://docs.python.org/3/library/subprocess.html
[webbrowser]: https://docs.python.org/3.6/library/webbrowser.html#
Is it possible to share npm packages between multiple projects
Tags: help
Published: 2019-03-23 20:42:00

---
title: Is it possible to share npm packages between multiple projects
published: true
description: 
tags: help
---


I'm playing with react, trying to create many mini apps exploring different react feature. Creating a new react project and installing the same packages over and over again seems to be too much. 

Is there a way to reuse the same node modules for a different project? This is what I think I want

```
/node_modules
/project1
  - package.json - where I run npm start from
/project2
  - package.json - where I run npm start from
/project3
  - package.json - where I run npm start from
```

From my google research, I've tried having this on every `package.json` but it doesn't work


```
  "scripts": {
    "dev": "NODE_PATH=$HOME/to/my/parent/folder/node_modules/",
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
```

Is there a way to do it?
What was the first programming language you fell in love with?
Tags: discuss, programminglanguages
Published: 2019-03-23 16:31:48

---
title: What was the first programming language you fell in love with?
published: true
tags: discuss, programminglanguages
---

The question of favorite programming language and different variations on that question has been asked dozens of times. This one is a little different. What I'm interested in is not what language you love (feel free to share that too) but was it the first language you learned or your 23rd?

I recently [reflected](https://dev.to/goober99/right-tool-for-the-job-but-chances-are-the-right-tool-is-perl-ck8) on choosing the right tool for the job. In that post, I explained Perl is the language I first fell in love with, and it's still my go-to language. Perl was my first programming language. Kind of. I learned JavaScript first, but those were the days before Node, so I considered JavaScript more of a browser tool like HTML and CSS. Perl was the first language I learned that I could actually do stuff outside the browser with.

Is there something about your first language that always holds a special place in your heart? Or did it take you several languages before you found the one that clicked for you? Did you have a language that you fell in love with that was later replaced by another language you liked even better? Have you not found that language yet?
What are your biggest obstacles/questions for moving from NodeJS to Rust?
Tags: discuss
Published: 2019-03-23 15:32:41

---
title: What are your biggest obstacles/questions for moving from NodeJS to Rust?
published: true
tags: discuss
---

NodeJS is the perfect entry for building web applications. I am getting many messages lately that people want to give Rust a try and implement their first web service in it. I would love to hear from the dev.to community what your biggest hurdles are or which questions need to be answered before you feel comfortable jumping in!
Worldstar: generate world map of your GitHub stargazers
Tags: showdev, opensource, node, github
Published: 2019-03-23 15:20:16

---
title: Worldstar: generate world map of your GitHub stargazers
published: true
description: Simple tool that produces an SVG image with world map chart of GitHub repo stargazers
tags: showdev,opensource,node,github
---

[Worldstar](https://github.com/dyatko/worldstar) is a neat CLI tool that produces an SVG image with world map chart of GitHub repo stargazers. You can simply enjoy it or add to your README [as arkit done](https://github.com/dyatko/arkit#fun-stats-stargazers-map-by-worldstar).

[![d3 stargazers map](https://thepracticaldev.s3.amazonaws.com/i/ispuxe29vr14i69z1dyf.png)](https://github.com/dyatko/worldstar)