teleren/devto huggingface dataset:
Get compiler help, even with “stringly” typed parameters in ReasonML
Tags: reason, quicktip, refactoring
Published: 2018-09-10 20:38:12

---
title: Get compiler help, even with “stringly” typed parameters in ReasonML
published: true
description: A quick tip for happy refactoring when you're changing semantics without changing types in ReasonML
tags: ReasonML, Quick Tip, Refactoring
---

Sometimes types aren’t enough to help the compiler help you. Sometimes you need to change a function parameter from one string to another string (for example, you want a user’s ID all of a sudden, instead of their name). The semantics are critically different, but the type system has no way to help you pass in the right thing, and you’re left to wanter the codebase on your own, searching out every invocation of the function and hoping you don’t get failed requests because you passed “Sally Mae” to the user service instead of “aw3432refq23f23qfqa23f” (what, your user IDs don’t look like that?)

For example, say the old function looked like this:

```
let getUser = (userName: string): Js.Promise.t(Js.Json.t) => {
	UserService.getUser(userName)	
};
```

But now you need it to look like this:

```
let getUser = (userId: string): Js.Promise.t(Js.Json.t) => {
	UserService.getUser(userId)	
};
```

Uh oh! The only thing that changed was the name of the “userName” parameter to be “userId”. You save the file, the compiler reports 0 errors, you ship, and the app breaks.


In this case, we can use ReasonML’s labelled arguments to tell the compiler that we need to change all of the invocations of this function.

```
let getUser = (~userId: string): Js.Promise.t(Js.Json.t) => {
	UserService.getUser(userId)	
};
```

See that little `~` you threw in there? Adding a tilde (what a strange word) at the beginning of the function name requires that any function callers specify the correct name of that parameter on invocation, and that’s enforced by the compiler. So now at the call site, which looks like this:

```
getUser(user.name);
```

You get a compiler error! Every call site gives you a compiler error. You get a wry smile on your face as the terminal leads you through 263 errors, each one fixed simply by changing the code to:

```
getUser(~userId=user.id);
```

Except you probably don’t have the user in scope at one of the call sights, and you have to spend the next three months refactoring your application code to get the userId there, instead of the user name. It's okay, it happens.

But, finally, the compiler reports 0 errors. You ship your app. You get no complaints, and you head out for a dip at the beach with your besties. 🏝

Have fun!
Moving project’s components/services into packages (the separation of concerns)
Tags: javascript, npm, webdev
Published: 2018-09-10 19:06:09

---
title: Moving project’s components/services into packages (the separation of concerns)
published: true
description: Component-based software engineering (CBSE), also called as component-based development (CBD), is a branch of software engineering that emphasizes the separation of concerns with respect to the wide-ranging functionality available throughout a given software system.
tags: javascript, npm, webdev
---

![Alt text of image](https://thepracticaldev.s3.amazonaws.com/i/xapcd0vjgubuewo9p5jk.png)

Whether starting a small project or having a huge one the separation of concerns is going to be a key point for easy maintenance, testability, reusability.

Why should you move components/services into packages? ☝️
[Check it out](https://hackernoon.com/moving-projects-components-services-into-packages-the-separation-of-concerns-1f42661eac6e)
Converting TTF fonts to WOFF2 (and WOFF)
Tags: fonts, ttf, woff
Published: 2018-09-10 18:43:44

---
title: Converting TTF fonts to WOFF2 (and WOFF)
published: true
description: Command-line utilities to convert fonts stored in TrueType format (.ttf) to the Web Open Font Format v2 and v1 (.woff2 and .woff) for use in modern web browsers
tags: fonts, ttf, woff
---

*My posts are usually notes and reference materials for myself, which I publish here with the hope that others might find them useful.*

Fonts obtained from foundries, including Google Web Fonts, often do not include font files in the web font format WOFF2, even when the font face is specifically licensed for use on the web; often the fonts are only provided in TrueType (.ttf) format.

Fortunately, it is not difficult to "convert" (really, just [encoding and compressing](https://en.wikipedia.org/wiki/Web_Open_Font_Format#Specification)) font files from TTF format to WOFF2, without relying on sketchy online services.

[Google maintains free software (MIT) command-line utilities to compress and decompress WOFF2 files.](https://github.com/google/woff2) The repository contains instructions to build and run the utility; but for redundancy's sake...

**Build:**

```
git clone --recursive https://github.com/google/woff2.git
cd woff2
make clean all
```

**Run:**

```
woff2_compress myfont.ttf
```
---
If supporting IE is necessary, [`ttf2woff` is a free software (MIT) legacy library available in NPM](https://github.com/fontello/ttf2woff) and is similarly easy to use:

```
$ npx ttf2woff myfont.ttf myfont.woff
```
CSS Media queries: grouped with rule-sets or grouped at the bottom?
Tags: css, discuss, frontend
Published: 2018-09-10 18:39:37

---
title: CSS Media queries: grouped with rule-sets or grouped at the bottom?
published: true
description: 
tags: #css,#discussion,#front-end
cover_image: https://thepracticaldev.s3.amazonaws.com/i/kb2yzrendcfo0a0072eg.jpg
---

I've been using CSS for several years, and I've always grouped my media queries at the bottom of any file they were in. For me, this prevented having to write multiple media queries for the same screen size (or range, as the case may be).

#### Grouped Media Queries Example
```css
/* general styles */
.selector-1 {
  padding: 10px;
}

.selector-2 {
  font-size: 18px;
}

/* responsive styles */
@media (max-width: 767px) {
  .selector-1 {
    padding: 5px;
  }
}

@media (max-width: 479px) {
  .selector-2 {
    font-size: 14px;
  }
}
```

I was also under the impression that adding more media queries would reduce performance (outside of having to load a larger CSS file).

Lately though, I've been seeing individual media queries grouped with related selectors.

#### Grouped By Selectors Example
```css
/* .selector-1 styles */
.selector-1 {
  padding: 10px;
}
@media (max-width: 767px) {
  .selector-1 {
    padding: 5px;
  }
}

/* .selector-2 styles */
.selector-2 {
  font-size: 18px;
}
@media (max-width: 479px) {
  .selector-2 {
    font-size: 14px;
  }
}
```

I do see the immediately obvious benefits to this, but I figured I'd ask for opinions on either or both, and whether there really is a performance impact as the number of media queries increases.

I should also mention that I tend to work on projects that involve a lot of CSS; I work mostly on WordPress websites with a lot of pre-existing CSS to work around. Just throwing that out there for some context.

___
To avoid any confusion, I'm referring to vanilla CSS specifically, not a pre-processor like Sass or LESS.
Should I break down my code if it'll only be used once?
Tags: programming, discuss, refactoring
Published: 2018-09-10 18:35:03

---
title: Should I break down my code if it'll only be used once?
published: true
description: Should I break down my code if it'll only be used once? This is a question I hear often. The tl;dr answer is **Always break down your code**.
tags: programming, discuss, refactoring
---
![Camera Broken Down](https://thepracticaldev.s3.amazonaws.com/i/n9364wt1qaj1cvphup2v.png)

Should I break down my code if it'll only be used once? This is a question I hear often.

The tl;dr answer is **Always break down your code**.

# Code is not written for the computer, it is written for humans

If we want to write code for computers we would code in machine language. But instead we choose to use high level languages like JavaScript, which are easier for humans to understand.

This is an important key to writing good software. Shift your mentality from writing code for computers to writing code for humans. Knowing the audience of your product (the code), in this case humans, will greatly improve the software you write.

# Write your code to be readable

Try to imagine a book with no paragraphs. Pause on this thought and really think about this.

If that idea sounds horrifying and that book sounds tedious to read then imagine that feeling multiplied by ten for a huge function or a massive class that someone has to read.

Don't write a book with no paragraphs or chapters, break your code into readable chunks!

# But this code is only used once

That code may be used only once _now_. But if you don't break your code down, you are _guaranteeing_ that code can never be reused in the future.

Nobody can predict the future. Give your code the opportunity to be reused later. That function you break out now could become a function you reuse tomorrow.

Maybe all that code you are writing today could have been avoided if your code was written to be reusable yesterday. Reflect on that.

# Think about unit tests

Your project has no tests so why should you write testable code?

Do you also want to ensure your code can never be tested in the future?

Just because a project has no unit testing today doesn't mean that it won't have tests at some point in the future.

Don't be the guy who's code will be untestable when the unit tests do come. Your name is forever on those commits. And the next developers will definitely `git blame` you.

# Summary

- Always break down your code.
- Write code for humans to read. They are your audience, not computers.
- Give your code opportunity to be reused in the future.
- Even if your project has no unit tests now, don't prevent your code from being tested in the future.
- Your name is forever on that commit, you will be judged.

[Read more of my functional programming-ish articles.](https://medium.com/@joelthoms)

Pet a cat

Follow me on Twitter [@joelnet](https://twitter.com/joelnet)

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

Camera Photo by [Alexander Andrews](https://unsplash.com/photos/cU2lda3kbls?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
isNaN('') = false 😅, how to handle it?
Tags: isnan, javascript, tricks, number
Published: 2018-09-10 17:37:46

---
title: isNaN('') = false 😅, how to handle it?
published: true
description: isNaN function returns `false` for empty string and `null`. So the article will explain how to handle the same
tags: isNaN , javascript, tricks, number
---

I recently noticed that `isNaN('')` and `isNaN(null)` both return `false` in JavaScript. It means that both empty string and `null` are valid numbers. So if you want to perform any number specific operation by just comparing the variable using `isNaN()`, it won't work. Here is an example:

```javascript
function formattedAmount(x) {
  if (isNaN(x)) {
    return "Not a Number!";
  }
  return "$ " + x.toFixed(2);
}

console.log(formattedAmount(""));
// output: Error: x.toFixed is not a function

console.log(formattedAmount(null));
// output: Error: Cannot read property 'toFixed' of null
```

This can be fixed using `Number()` function or `+` operator. It will create `Number` object of variable `x`. Hence both empty string and `null` will result into number `0` and accordingly, rest of the statement will be executed.

```javascript
function formattedAmount(x) {
  if (isNaN(x)) {
    return "Not a Number!";
  }
  return "$ " + Number(x).toFixed(2);
  // OR
  // return '$ '+ (+x).toFixed(2);
}

console.log(formattedAmount(""));
// output: "$ 0.00"

console.log(formattedAmount(null));
// output: "$ 0.00"

console.log(formattedAmount(12.126));
// output: "$ 12.13"
```

Hope you find it useful.

I made a quick check but didn't get why exactly in JavaScript `isNaN('')` is `false`. I would love to know if you have anything to say regarding that. Thanks for reading!

Proofread by @ron4ex
What is Your Opinion about CSS(-in-JS)?
Tags: discuss, healthydebate
Published: 2018-09-10 17:09:10

---
title: What is Your Opinion about CSS(-in-JS)?
published: true
description: 
tags: discuss, healthydebate
---

This seems to divide the web community.

Some people say CSS is to hard and CSS-in-JS is the savior.

Others say if you don't learn CSS you should leave the web and start developing for a different platform.

I'd like to hear your opinions about this, but try not to explode :D
Added release tags for chrome-headless docker container
Published: 2019-10-30 00:18:23

---
title: Added release tags for chrome-headless docker container
published: true
date: 2018-09-10 16:00:00 UTC
tags: 
canonical_url: https://justinribeiro.com/chronicle/2018/09/10/added-release-tags-for-chrome-headless-docker-container/
---

With over 314K worth of pull from DockerHub and after many requests, I finally got around to creating separate tags for [chrome-headless](https://hub.docker.com/r/justinribeiro/chrome-headless/) that target each of the channels for Chrome (stable, beta, and dev for linux).

On top of the addition of new release tags, I’ve also made some minor improvements to the docker image:

1. Added additional font support to allow symbols to properly render in Chrome
2. Cleaned up some up some of the GPU cache issues
3. Updated to debian:stretch-slim

The image size is hovering around ~280MB at this point and while I do have a slimmer version in mind, I’m not quite ready to merge that until I’ve had some time further testing with it. In the mean time, enjoy new updates and keep using Chrome –headless!
Module Monday 12: Horizontal timeline, Bulletin board, Quotation B & more
Tags: showdev, opensource, webdev, javascript
Published: 2018-09-10 15:24:14

---
title: Module Monday 12: Horizontal timeline, Bulletin board, Quotation B & more
published: true
description: Module Monday 12
tags: showdev, opensource, webdev, javascript
cover_image: https://res.cloudinary.com/component/image/upload/b_rgb:f6f6f6,c_pad,h_370,w_880/v1536536484/timeline_ro80sb.gif
canonical_url: https://guide.anymod.com/v1/module-mondays/2018-09.html#Module-Monday-12
---

## 5 open-source website modules you can use anywhere

Everything below is open source and free to use in any project you choose. [Anymod](https://anymod.com) lets you quickly add features to any website or web app.

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

### Horizontal timeline
Create an interactive timeline of events.
<a class="button" href="https://anymod.com/mod/nmmmr?v=20">View mod</a>
<a href="https://anymod.com/mod/nmmmr?v=20">
  <img src="https://res.cloudinary.com/component/image/upload/v1536536484/timeline_ro80sb.gif"/>
</a>

### Bulletin board
Add & edit notes to this customizable bulletin board.
<a class="button" href="https://anymod.com/mod/lrmda">View mod</a>
<a href="https://anymod.com/mod/lrmda">
  <img src="https://res.cloudinary.com/component/image/upload/v1536540666/notes_zffng4.png"/>
</a>

### Quotation B
Stylish quotation block with editable quote and author.
<a class="button" href="https://anymod.com/mod/bkbmk?v=20">View mod</a>
<a href="https://anymod.com/mod/bkbmk?v=20">
  <img src="https://res.cloudinary.com/component/image/upload/v1536542743/quotation_g7zgeb.png"/>
</a>

### Image overlay card
A simple card with custom image, text, and links.
<a class="button" href="https://anymod.com/mod/kbolm?v=20">View mod</a>
<a href="https://anymod.com/mod/kbolm?v=20">
  <img src="https://res.cloudinary.com/component/image/upload/v1536536485/card_soikfr.png"/>
</a>

### Embedded tweet
Easily embed a tweet anywhere on your site.
<a class="button" href="https://anymod.com/mod/rdbmb?v=20">View mod</a>
<a href="https://anymod.com/mod/rdbmb?v=20">
  <img src="https://res.cloudinary.com/component/image/upload/v1536543927/tweet_apwqfr.png"/>
</a>

<hr>

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

Happy coding ✌️
Quick-Fixing the Windows command line for JavaScript development
Tags: windows, setup, commandline
Published: 2018-09-10 14:50:48

---
title: Quick-Fixing the Windows command line for JavaScript development
published: true
description: A quick fix if you are fed up with CMD.EXE or PowerShell.
tags: windows, setup, command-line
---
A major issue with using Windows for web development is the lack of a nice unix-like shell environment. Although most of the JavaScript [NPM](https://npmjs.com) tooling also works with PowerShell or CMD, I have experienced some weird `Command not found` issues when working with some packages on a drive other than `C:\`.

An easy fix for that is to just use the bash shell that comes with git. It's more lightweight than installing a complete Linux/msys2/cygwin distribution and it suffices for most JavaScript development purposes.

I like to use the git bash in combination with [hyper.is](https://hyper.is) for a nice terminal experience. Just configure the shell setting to 
`'C:\\Program Files\\Git\\bin\\bash.exe'`. I'm using a darker version of rebeccapurple as the background color (#221133) 💁.

![Hyper terminal featuring git bash on Windows](https://thepracticaldev.s3.amazonaws.com/i/s2djuchb7joso51xoqkc.png)




If you are using vscode, you can adjust your integrated shell via settings.json accordingly:

```js
{
    "terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe",
    ...
}
```
The 7 Most Popular DEV Posts from the Past Week
Tags: top7
Published: 2018-09-10 14:18:19

---
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
cover_image: https://thepracticaldev.s3.amazonaws.com/i/sfwcvweirpf2qka2lg2b.png
---

#1. ✨ Like Magic ✨

Not only is Vue a great framework for web and mobile applications, you can use Vue to build applications for desktop as well! Natalia shares a thorough step-by-step guide.

{% link https://dev.to/vuevixens/building-a-desktop-app-with-vue-vuido-490n %} 

#2. 😍 Alias List 😍

A list of bash/zsh aliases that can help speed up your git workflow, from amending commits to rebasing. 

{% link https://dev.to/robertcoopercode/using-aliases-to-speed-up-your-git-workflow-2f5a %}

#3. Shapes and colors and more!

While using CSS images might always be the best decision for your app, they're definitely a lot of fun to make. Agathe walks us through the basics and helps us flex our CSS muscles 💪

{% link https://dev.to/agathacco/how-to-create-pure-css-illustrations-and-animate-them---part-1-1j1k %}

#4. Two buzzwords walk into a bar... 

Great post for anyone who needs a quick explainer on _what_ containers and serverless are, and their pros and cons. 

{% link https://dev.to/adnanrahic/containers-vs-serverless-from-a-devops-standpoint-e4n %}

#5. Complex & Incomplete

A deep dive into the ternary operator.

{% link https://dev.to/mortoray/we-dont-need-a-ternary-operator-309n %} 

#6. Write it out

Ail breaks down the writing process with lots of helpful tips that'll get you one step closer towards hitting publish. 

{% link https://dev.to/aspittel/my-blog-post-workflow-from-topic-to-publication-4n78 %} 

#7. Round 'em up

Anderson just finished creating an ES6 _Course_ -- here's a round up of resources that helped them along the way, all from DEV Community!

{% link https://dev.to/andersonjoseph/learn-es6-without-leave-devto-57o3 %}

_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!_
ハリネズミ本:1日目
Tags: ctf, diary, japanese, security
Published: 2018-09-10 14:03:50

---
title: ハリネズミ本:1日目
published: true
description: やったことのまとめと備忘録
tags: CTF,diary,japanese,security
---

# 書き始めた理由
私が飽き性だから(このブログもいつなくなるのかはわからない)
備忘録

# 書く内容
- やった本の名前
- 学んだこと
- 感想

# やった本
[セキュリティコンテストチャレンジブック　CTFで学ぼう!情報を守るための戦い方](https://www.amazon.co.jp/%E3%82%BB%E3%82%AD%E3%83%A5%E3%83%AA%E3%83%86%E3%82%A3%E3%82%B3%E3%83%B3%E3%83%86%E3%82%B9%E3%83%88%E3%83%81%E3%83%A3%E3%83%AC%E3%83%B3%E3%82%B8%E3%83%96%E3%83%83%E3%82%AF-CTF%E3%81%A7%E5%AD%A6%E3%81%BC%E3%81%86-%E6%83%85%E5%A0%B1%E3%82%92%E5%AE%88%E3%82%8B%E3%81%9F%E3%82%81%E3%81%AE%E6%88%A6%E3%81%84%E6%96%B9-%E7%A2%93%E4%BA%95-%E5%88%A9%E5%AE%A3/dp/4839956480/ref=sr_1_1?ie=UTF8&qid=1536586447&sr=8-1&keywords=%E3%82%BB%E3%82%AD%E3%83%A5%E3%83%AA%E3%83%86%E3%82%A3%E3%82%B3%E3%83%B3%E3%83%86%E3%82%B9%E3%83%88)

# 学んだこと
- Part0 イントロダクション
    - 0.1.1 CTF = Capture The Flag
    - 0.1.2 答えの文字列......フラグ(Flag)
    - 0.1.3 出題形式
        1. 攻防戦型(Attack-Defence)......攻撃と防御
        2. 問題出題型(Jeopardy)......ジャンルと得点
    - 0.2.1 [CTFTime](https://ctftime.org)
ページ上部の"Upcomming"からイベント情報
初めてならOn-lineのJeopardyがおすすめ
[SECCON CTF](http://www.seccon.jp)
    - 0.2.3 Writeupを読む
解けたものは自分のブログへあげる
    - 0.3 気を付けること
        - 競技のルール
        - 使用するサーバ、攻撃可能なサーバのアドレス
        - IRCや競技ウェブサイトの最新情報の確認  

    確認しないと不利になるだけではなく、ルール違反でペナルティを課されることがある
CTFによってはクラウド環境を使用しているのでネットワークスキャンの手法には気を付ける
    - 0.4.1 不正アクセス禁止法
        1. 他人のアカウント情報でシステムにログイン
        2. 認証システムに攻撃して突破
        3. ネットワークを通じてほかのシステムに攻撃して、乗っ取る  
  
    以上のことをすると不正アクセスとなる。ただし管理者の許可があれば例外。
    - 0.4.3 脆弱性を見つけたらIPAに言う
    - 0.5 守る側は"White Hat" 攻撃者側は"Attacker"
- Part3 ネットワーク
    -3.1.1 2つの出題形式
        1. 通信が記録されたファイル内からFLAGを探す問題形式
        2. サーバにアクセスしてFLAGを入手する問題形式

# 感想
わくわくしてきた
hyperConsole— Instantly load popular JS libraries into devTools and experiment.
Tags: javascript, webdev, opensource, productivity
Published: 2018-09-10 13:40:15

---
title: hyperConsole— Instantly load popular JS libraries into devTools and experiment.
published: true
description: hyperConsole— I made a tool to instantly load popular JS libraries into devTools and experiment
tags: javascript, webdev, opensource, productivity
---

I felt that it was too time consuming to experiment with different libraries.

So I made a tool that lets you load any library (that's on cdnjs) into your browser, so you can use your console to mess around with it.

It takes seconds. [Check it out](https://hyperconsole.itsarnavb.me/)

Here it is at work:

![A gif of hyperConsole at work](https://thepracticaldev.s3.amazonaws.com/i/logpsxn7dmqufuj2s7pc.gif)

Contribute here: https://github.com/lunaroyster/hyperconsole