teleren/devto huggingface dataset:
How to Configure Yarn on Netlify
Tags: yarn, netlify
Published: 2019-07-24 06:37:32

[Netlify Build](https://www.netlify.com/products/build/) is a great platform for running static site builds in conjunction with your Git workflow and Headless CMS content updates (via Webhooks). It makes running cloud-based builds of JavaScript Static Site Generators very slick, but it's not without its pitfalls.

Many of the popular generators use Yarn as a package manager which can be configured via Netlify's [`netlify.toml`](https://www.netlify.com/docs/netlify-toml-reference/) configuration file, like so:-

```toml
# netlify.toml

[build.environment]
  YARN_VERSION = "1.17.3"
  NODE_ENV = "production"
```

**Note**: the "Yarn approved" method of specifying the required version is via the [`yarn policies set-version` command](https://yarnpkg.com/lang/en/docs/cli/policies/).

Running the build step in an environment other than local development had me wondering whether to install packages as `dependencies` or `devDependencies`. With the environment variable `NODE_ENV` set to `"production"` Yarn will _only_ install dependencies specified in the `dependencies` section of the `package.json` file, and not those within `devDependencies`.

Perhaps `NODE_ENV` could be set to `"production"` within the scope of the build command? For example:-

```json
{
  "scripts": {
    "build": "NODE_ENV=production ..."
  }
}
```

The cleanest solution (in my humble opinion) is to set the [`--production` flag](https://yarnpkg.com/lang/en/docs/cli/install/#toc-yarn-install-production-true-false) to `false`, like so:-

```toml
# netlify.toml

[build.environment]
  YARN_VERSION = "1.17.3"
  YARN_FLAGS = "--production=false"
  NODE_ENV = "production"
```

You can find out more about configuring build environment variables within the [Netlify documentation](https://www.netlify.com/docs/build-settings/#build-environment-variables).
Jack of all trades
Tags: motivation, career, discuss
Published: 2019-07-21 23:30:18

I find it hard to focus on just one thing. Therefore I know a little about a lot. What is everyone's feedback on this. Is it best to master one thing or to dab in a little of this and that? Don't get me wrong I have spent extra time on some stuff like HTML CSS C#. I also work good in Visual Studio, Unity, Gimp, Blender, Linux OS "Backtrack from past life". By no means am I a expert but I can get around and make stuff work. I'm currently learning Google Cloud Platform. This makes for a strange resume and mostly not hireable. My take is that being able to learn and use multiple resources would make me adaptable and able to grow with the company.
[HELP!] Name for a collaborative writing tool
Tags: discuss, writing, saas, help
Published: 2019-07-21 22:46:15

I'm trying to build a collaborative writing tool, I'm searching for names but I feel whatever I think is all taken.

Can you help me with this?

I would be grateful for all those who suggest. 😁😄😄😄

And all those who suggest, will get an early access of the tool, as soon as the UI is ready.😄

Right now I only have the backend ready, but can't decide a name so I can come up with branding and start building the frontend.😅
What are your favorite tools/libraries for writing TypeScript
Tags: typescript, discuss, javascript, fullstack
Published: 2019-07-21 21:27:08

What are your favorite, or must have tools for writing TypeScript? I am just starting to pick it back up again after a long time and am not as familiar with the ecosystem anymore.

I will need to play with VS Code And IntelliJ to see which one I like more for TS. I have both. 

There are obvious libraries I feel like Jest for writing tests. Or webpack for managing assets. But what other libraries and tools are your must have for writing full stack TS?

(I am looking at Vue.js and tailwind for the front end)
hiccup -- Edit will always bring me back to an older version
Tags: help, question, discuss
Published: 2019-07-21 20:44:18

---
title: hiccup -- Edit will always bring me back to an older version
published: true
tags: help,question,discussion
---

Please take a look at 
https://dev.to/suntong/grub4dos-to-boot-iso-disk-image-57ho
in which there are three reference entries at the bottom. 

However, if I do "Edit" from that page, 

the reference will become my first attempt:

`Ref: https://ubuntuforums.org/showthread.php?t=2398574`

Tried many times, including closing it and opening it in a new browser window, but the results are always the same.

What is so special about my this post, or there is a system wise hiccup in dev.to? Thanks
How do you react when receiving feedback?
Tags: career, discuss
Published: 2019-07-21 20:38:47

[en-US]
When someone gives you feedback whether positive or negative, how do you react to it?

Do you understand that this is part of the process of personal and professional growth or depends on who gives the feedback?


[pt-BR]
Quando alguém lhe dá um feedback positivo ou negativo, como você reage a isso?

Você entende que isso faz parte do processo de crescimento pessoal e profissional ou depende de quem dá o feedback?
Grub4dos To Boot ISO Disk Image
Tags: boot, linux, grub4dos, iso
Published: 2019-07-21 20:16:07

---
title: Grub4dos To Boot ISO Disk Image
series: grub4dos_for_linux
published: true
tags: boot,linux,grub4dos,iso
---

Using `grub4dos` to boot Ubuntu Ubuntu 18.04 ISO disk image, here is the entry for the file `MENU.LST`:

```
title Ubuntu 18
  fallback 6
  find --set-root /iso/ubt1804.iso
  map --heads=0 --sectors-per-track=0 /iso/ubt1804.iso (0xff)
  map --hook
  root (0xff)
  kernel /casper/vmlinuz file=/cdrom/preseed/ubuntu.seed boot=casper iso-scan/filename=/iso/ubt1804.iso splash
initrd /casper/initrd.lz
```

NB, 

- For Ubuntu 64bit from 14.04 to 17.10  `vmlinuz.efi` was used, so `kernel` has to be `/casper/vmlinuz.efi`, but
- For older versions and 18.04+ use `/casper/vmlinuz`
- For Ubuntu 32bit, it has always been `vmlinuz`
- For smaller ISO disk images, or your RAM is extremely big, you can use `--mem` for the `map` command to put the whole disk into system memory, like this:    
  `map --mem /iso/smallcd.iso (0xff) || map --heads=0 --sectors-per-track=0 /iso/smallcd.iso (0xff)`

Ref: 

- https://ubuntuforums.org/showthread.php?t=2398574
- and some other two which I have [lost](https://dev.to/suntong/hiccup-edit-will-always-bring-me-back-to-an-older-version-3had).
Refresh Service Worker
Tags: javascript
Published: 2019-07-21 18:56:57

Have you ever enabled a service worker and then realised that your updates are not showing because of caching. I have.

According to [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API "Service Worker API") a service worker will update every 24 hour or so or when all pages/instances are closed.

This can be a problem if you have made recent changes or the website is added to home screen. There could be reasons not to force update the service worker whenever a new one is available, so a better solution is to prompt the user to update (if they want to).

## How to detect when a new worker is available

There are two parts to manage this. The service worker must listen for messages from the browser (client refreshing), and the browser must listen for new service workers.

### Service worker

To listen for messages inside the service worker we need to add an event listener for the message event.

In my solution I send an object to the service worker with an action property. So when the service worker receives `action: 'skipWaiting'` it knows to activate the pending worker.

``` javascript
self.addEventListener('message', function(event) {
  if (event.data.action === 'skipWaiting') {
    self.skipWaiting();
  }
});
```

### Browser

First you need a button to click.

``` html
<button class="refresh-worker hidden">A new service worker is available, click to reload</button>
```

I recommend to hide it with CSS. If JS or service workers are not supported it has no purpose and can stay hidden.

``` javascript
const refreshButton = document.querySelector('.refresh-worker');
let newWorker = null;
    
refreshButton.addEventListener('click', (event) => {
  event.preventDefault();
  newWorker.postMessage({ action: 'skipWaiting' });
  window.location.reload();
});
```

First we need a reference to the button (for click handler) and a variable to put the service worker in when it's available.

When the button is clicked we send a message to the worker telling it to skip waiting and activate the new worker. Then we refresh the page.

Next we must listen for service worker updates so we know when to display the button and prompt the user to update.

```javascript
// Register service worker:
navigator.serviceWorker.register('service-worker.js')
  .then(function(registration) {
 		// Listen for updates:
    registration.addEventListener('updatefound', () => {
      newWorker = registration.installing;
			// Listen for when the new worker is ready:
      newWorker.addEventListener('statechange', () => {
        switch (newWorker.state) {
          case 'installed':
            if (navigator.serviceWorker.controller) {
 							// Display button:
              refreshButton.classList.remove('hidden');
            }
            break;
        }
      });
    });
  });
}
```

When the worker is ready to be activated we can display the button and inform the user that a new version is available.
The PWA game
Tags: offlinefirst, frontend, progressivewebapp, webdev
Published: 2020-07-26 15:23:33

---
title: The PWA game
published: true
date: 2019-07-21 18:52:40 UTC
tags: offlinefirst,frontenddevelopment,progressivewebapp,webdevelopment
canonical_url: https://medium.com/@mattclaffey/the-pwa-game-856477e09728
---

[![](https://cdn-images-1.medium.com/max/1642/1*0nSLsocpWbYsxQDPB7lP0Q.png)](https://medium.com/@mattclaffey/the-pwa-game-856477e09728?source=rss-a21dfccbfdd4------2)

Offline is becoming a standard thing to do in web applications because they allow your website to feel like an app. In the modern web most…

[Continue reading on Medium »](https://medium.com/@mattclaffey/the-pwa-game-856477e09728?source=rss-a21dfccbfdd4------2)
Just getting started with pyxel
Tags: python, pyxel
Published: 2019-07-21 18:48:50

---
title: Just getting started with pyxel
published: true
description: how to get started with pyxel
tags: python,pyxel
---

I got the idea for this post from this tweet https://twitter.com/kitao/status/1152919321032589317
It is harder to read but still super cool.

pyxel is a fun way to learn/play with Python. You can write programs that are easy to interact with and not need to think about graphics programming.

See here for the github repo: https://github.com/kitao/pyxel

To get started do a pip install

```
pip install pyxel
```

Then type this in and run it
```
import pyxel
from random import random as r
pyxel.init(64,64)

def update():
    if pyxel.btnp(pyxel.KEY_Q):
        pyxel.quit()

def draw():
    pyxel.cls(0)
    pyxel.line(r()*64,r()*64,r()*64,r()*64,7)
 
pyxel.run(update,draw)

```

You will end up with something like this:
![](https://thepracticaldev.s3.amazonaws.com/i/wzev521vrpb9ccvi9rsn.gif)
Pushing Left, Like a Boss — Part 5.6 — Redirects and Forwards
Tags: programming, tutorial, beginners, security
Published: 2019-07-21 18:42:56

---
title: Pushing Left, Like a Boss — Part 5.6 — Redirects and Forwards
published: true
description: The 5th section of this series details various examples of secure coding.
series: Pushing Left Like a Boss
tags: programming, tutorial, beginners, security
---
###This series, and my blog, have moved! [Check it out](https://wehackpurple.com/g8tg)!

Recently removed from the [OWASP Top Ten](https://www.owasp.org/index.php/Top_10_2013-A10-Unvalidated_Redirects_and_Forwards), [unvalidated redirects and forwards](https://www.owasp.org/index.php/Unvalidated_Redirects_and_Forwards_Cheat_Sheet) are a sub-set of the problem of poor input validation. If you properly [validate all input](https://www.owasp.org/index.php/Input_Validation_Cheat_Sheet), including input in the address bar and/or obtained from the user, you will not have this problem.

![DevOps Zurich meetup, 2017](https://thepracticaldev.s3.amazonaws.com/i/k9ytxhiy6a173anogdty.jpeg "DevOps Zurich meetup, 2017")
######DevOps Zurich meetup, 2017

###[Read the rest on my NEW blog!](https://wehackpurple.com/3k3m)!
Java Code Review - CSV4J
Tags: java, codequality
Published: 2019-07-21 18:41:02

## CSV4J
Hey guys, So I've just finished implementing a new lightweight, dynamic CSV Java library as an opensource project. So I was wondering if anyone here can do me a favor and take a look at this pull request 

`https://github.com/OmarMuhtaseb/csv4j/pull/1`

to review the code and to compare it to the best practices of Java development.
I'm really open to every kind of comments that anyone wanna add, whether it's about documentation or about another perspective how things can be done.

Giving me such reviews and comments will be extremely beneficial for me to help me write better code.
What an organization wants from you?
Tags: career, github, langua
Published: 2019-07-21 17:59:55

Suppose tomorrow is your interview at a mid-level company like "xyz pvt Ltd.", in spite of all the preparations and technical brush-up, you may be still be lagging behind somewhere. Can you though of it? Some can say that their English is not good, on the other hand, your excuse may be that you're not well prepared for that.
We all have to admit, its been always occur to ourselves in at least 70% of the interviews we have given or will be in coming time. So, what will be the secret charisma that works in almost 60% of the organizations that make them hire you?

1. Power of persuading(Convincing power).
2. Teamwork.
3. Basic computer operations.

Yes! you read them right. These are the 3 key qualities which you must develop to increase your chances of hiring at a rate of more than 30% in most of the organization.
Creating a developer blog with Next JS 9
Tags: nextjs, typescript, marksy
Published: 2019-07-21 17:50:31

I wanted to test out the new [nextjs](https://nextjs.org/) version and built my blog up from scratch. Pretty happy about how it works, so my first article there describes how I did it :)

[BUILDING A DEVELOPER BLOG WITH NEXT JS](https://christianalfoni.com/articles/building-a-developer-blog)
Announcing Git Kata
Tags: git, kata, learn, showdev
Published: 2019-07-21 17:09:51

---
title: Announcing Git Kata
published: true
description: As a part-time computer science teacher, I often give workshops to learn about computers and their tools.
canonical_url: https://slashgear.github.io/git-kata/
cover_image: https://images.unsplash.com/photo-1556075798-4825dfaaf498?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2555&q=80
tags: git, kata, learn, showdev
---

As a part-time computer science teacher, I often give workshops to learn about computers and their tools.
Several times I met teams that had been using Git and Github for many years but were having a lot of trouble.
The basis was known but in practice.

> "Wait, stay still, I'll do that and you can get it back." 

> "I'm stuck working on the same file."

> "Pass me your file, I'll add it to my PR."

I'm pretty sure you've heard that before!
It may sound funny but it's quite symptomatic of a lack of practice and reflexes to have when you get to use Git.
Very often users know how to manage but do rather obscure things.

Often users know how to manage but do rather obscure things.
A former colleague preferred to do several `cherry-pick` to retrieve the work of one of his colleagues' successive commits rather than use a `rebase`.

What if I designed a workshop that would allow teams to learn the right reflexes together when using Git and Github?

I had the opportunity to participate in several Coding Dojo/Kata programming sessions and I wanted to be inspired by this model.
Instead of working on code, the workshop I designed focuses on git and its use.

**Here is the link to the workshop, available free of charge on Github.** 

{% github Slashgear/git-kata %}

It's all in the [README](https://github.com/Slashgear/git-kata/blob/master/README.md).

Leave me your opinions and feedback in comments.
Accessibility Tips: Setting language
Tags: a11y, html, frontend
Published: 2019-07-21 16:52:43

---
title: Accessibility Tips: Setting language
published: true
description: Setting the language on an HTML page or parts of the page
tags: #a11y #html #frontend
series: Accessibility Tips
---

It helps to set the language of a page when you're developing to meet WCAG 2.0 standards. Specifically, the [3.1.1 - Language of Page](https://www.w3.org/WAI/WCAG21/quickref/#language-of-page) rule.

You can accomplish this with the **lang** attribute on the **html** tag, like so:

```html
<html lang="en"></html>
```

Besides the [language code](https://www.w3schools.com/tags/ref_language_codes.asp), you can also add a [country code](https://www.w3schools.com/tags/ref_country_codes.asp) to make the language more specific. For example, this would indicate British English:

```html
<html lang="en-GB"></html>
```

If you would like to set a specific piece of content to a different language, use the **lang** attribute there as well. This will help screen readers pronounce the content correctly.

For example, a link to the Japanese version of a website would be pronounced "Nihongo", not "Ideographic Character Ideographic Character Ideographic Character".

```html
<a href="#" lang="ja">日本語</a>
```
Spaces
Tags: inclusion, diversity
Published: 2019-07-21 16:48:00

That second look

Not because I'm extraordinary

But because I look different

I take up space in your world

You want to contain me

Within spaces you don’t occupy

You like me from afar

But not all of me and what makes me

I am learning to push back

Though I'm at ease where I am

Dismantle the wall brick by brick

If not for me, then for those who come behind
A Project To Help Hong Kong
Tags: hongkong, help, protest, ddos
Published: 2019-07-21 16:40:42

Hi, I've recently hired a fiverr to help me create a project to help Hong Kong since the connection from Hong Kong to main communication platforms has been disturbed by ddos attack and protesters can't contact through the net, but the developer just done half of it and he didn't solve the bugs, can anyone help?

https://github.com/HKCHAT/HKCHAT

This is a open project and I hope to make it into a snapd package so everyone who can access the net can build a server to help the community.
What's hard about React Hooks for you?
Tags: discuss, react, reacthooks
Published: 2019-07-21 16:07:38

---
title: What's hard about React Hooks for you?
published: true
description: React Hooks are amazing, but require a learning curve... What's it been like for you?
tags: discuss, react, react hooks
---

As you've been using/learning about React Hooks, what have been the hardest parts for you? #discuss
what is a Selenium language binding?
Tags: selenium, testing, automation
Published: 2019-07-21 16:02:22

---
title: what is a Selenium language binding?
published: true
description: what is a language binding for Selenium
tags: selenium,testing,automation
---

Selenium is a specification more than anything else.

It is a set of rules/methods/interfaces (use your own language here that makes sense) that define how you can automate a web browser (like Chrome, Firefox or Safari).

The browser vendors (Google,Mozilla,Apple,Microsoft..) all agree/know about the specification and agree to implement it. When Selenium first started that was not the case...

There is an official w3c spec for Selenium if you want to read it. See here: https://www.w3.org/TR/webdriver1/

Practically though it is a way to automate a browser. There are some official languages that Selenium supports: Java and Python being the two I use the most. There are others like Javascript or C# ...

So the code that Selenium provides to you as a developer (the libraries) is called a Selenium language binding.

The bindings try to be idiomatic to the language you are working in. Meaning the Python bindings look like Python you would expect. The Java bindings look like normal Java code... the C# bindings look like well behaved C# and so on.

So based on that the bindings will be different. But the spirit is the same.
Turret Shooting Game
Tags: codepen, react, gamedev, showdev
Published: 2019-07-21 14:55:46

<p>Simple Description:</p>

<p>Shoot all the zombies! (They might stop spawning)</p>

<p>This is a shooting game with a non-moving turret character.</p>

<p>Just prevent the zombies to come near you. You'll lose your life point.</p>

<p>Description:</p>

<p>The zombies are getting hungry, and they even want to eat the brain inside of the turret (seriously? wt*?). This turret have a great brain, because he is an artificial intelligence (Supposed to be, but he's being controlled by you).</p>

<p>It will take 3 zombies for them to annihilate Turry's enormous brain.</p>

<p>But unfortunately, because he is a turret, he can't move at all. But at least, he can rotate and blast a fire (Oh that might burn the zombies).</p>

<p>The number of zombies are increasing when they spawn, though, there is a maximum value of spawn. Their spawn location is random, so beware of surprise attack! He might spawn just behind you.</p>

<p>Controls:<br>
Press  'left' key to turn anti-clockwise<br>
Press 'right' key to turn clockwise<br>
Press 'space' key to fire</p>

<p>All of the assets here are made by me, and I used either "CSS art" or "CSS 'box-shadow' art" to produce all of them.</p>

<p>I used ReactJS to do the logic/algorithm of the game.</p>

{% codepen https://codepen.io/takaneichinose/pen/qzQMZy %}
Get to know CSS and Flexbox properly before getting into JS (and Bootstrap)
Tags: opinion
Published: 2019-07-21 14:38:17

---
title: Get to know CSS and Flexbox properly before getting into JS (and Bootstrap)
published: true
description: After understanding CSS I built in few hours what took me days before
tags: #opinion
---

I recently came to realize that CSS is very important before diving into JS. I have worked with different frameworks like Bootstrap and Vuetify. But recently I decided to take one step back and take a course on CSS only.

I had a project which I struggled for days to create styling and all CSS stuff. I used Bootstrap for it but I had issues here and there that I couldn't fix. After finishing 60% of this course I re-made this project design with help of Flexbox and pure CSS, this time it took me only few hours to achieve what I achieved in days before. 

For example, I used to use px most of the time and I didn't know what is em and rem. I also didn't understand well what is position. 

So as some advise juniors to start with Vanilla JS before frameworks, I think the same applies to CSS and frameworks. Understand CSS well before getting into Frameworks. 

Happy coding.
What do you think of React Testing Library?
Tags: discuss, react, testing
Published: 2019-07-21 13:59:49

---
title: What do you think of React Testing Library?
published: true
description: The replacement for enzyme has been out for over a year now. What do you think?
tags: discuss, react, testing
---

I wrote [React Testing Library](https://testing-library.com/react) about a year and a half ago because I was teaching testing workshops and I wasn't happy with enzyme. I felt like there was so much I had to tell people to not use in enzyme (like the API was some kind of mine field). So I created React Testing Library and I've been very happy with it.

I'd love to hear what others think. And have you had a chance to use any other members of the [Testing Library Family](https://testing-library.com), like DOM Testing Library, Cypress Testing Library, Vue Testing Library, etc? I'd love to hear your thoughts on that too!