teleren/devto huggingface dataset:
Weekly Round-up #4
Tags: javascript, codenewbie, css, html
Published: 2019-06-09 19:19:08

<h1>Here we go again!</h1> 

Sorry for the late post everyone. This has been one hectic week. Quite the roller-coaster ride. I am a member of the USAF Reserve, and have been on a military exercise. Not a lot of coding has been accomplished. I will walk you through the past week up until Friday, which is how my regular Round-ups go. 

Let's got this round-up going! Lol.

<ul>
<li>Saturday & Sunday - Didn't accomplish any coding last weekend. I focused on time with my family while I waited for the green light to head to upstate NY for a military exercise.</li>

<li>Monday -  Finally got the green light. As I was headed to the airport, I learned that my little brother was being admitted tot he hospital after complaining about immobilizing stomach pains. He appendicitis, and the doctors said it needed to be removed. I got notified he was going into surgery right as I boarded the plane. My phone had a few messages saying everything had gone good in the surgery and my brother was in recovery.</li>

<li>Tuesday - Did some military stuff. Started taking notes on JS. Started diving through some JS tutorials in hopes of finding one that click. Started following <a href='https://flaviocopes.com/'>Flavio Copes</a> as he starts building an app from idea to production. Should be fun to watch how someone goes through these different stages.</li>

<li>Wednesday - No coding accomplished today. Thanks to how this exercise has gone my sleep schedule is shot. I did enjoy spedning time with my team at supper though. They're pretty good company.</li>

<li>Thursday -  Sleep schedule is still in the toilet. No coding today either. Went to a pretty neat place in the mall near where we're staying. Great food, good drinks and random trivia.</li>

<li>Friday - Found a <a href='https://www.youtube.com/watch?v=hdI2bqOjy3c&list=PLillGF-RfqbbnEGy3ROiLWk7JMCuSyQtX'>JavaScript Crash Course for Beginners</a> on YouTube that seems to have clicked. Going to get through it before diving into Wes Bos' <a href='https://javascript30.com/'>JavaScript 30</a> course.</li>
</ul>

That's it for the week. I do plan to continue, and finish,<a href='https://www.udemy.com/the-complete-javascript-course/'> The Complete JavaScript Course 2019</a> by<a href='https://codingheroes.io/'> Jonas Schmedtmann</a>. I was just trying to find different teaching styles for the basics. I really like The Complete JavaScript Course 2019 for the different projects Jonas runs you through. He has a basic budget app that I feel would give me some good groundwork for the budget app I would like to build for my portfolio.

I hope everyone has had a great week. Thank you for following along with me. Looking forward to giving everyone more content in the future. 

-Jeff
Refactoring z-index
Tags: css, webdev
Published: 2019-06-09 19:17:03

---
title: Refactoring z-index
published: true
description: Ever found a z-index of 999 in CSS and wondered if there really are 998 other elements below it? This is a post about how I have refactored CSS z-indexes to become sane.
tags: css, webdev
canonical_url: https://www.henriksommerfeld.se/refactoring-z-index/
cover_image: https://thepracticaldev.s3.amazonaws.com/i/lp92fyqqgi4904zr6k53.jpg
---


Ever found a `z-index` of `999` in CSS and wondered if there really are 998 other elements below it? 

> _One time I even stumbled upon a z-index of 2147483647_

One time I even stumbled upon a z-index of 2147483647. I thought that number looked familiar, _"isn't this Int32 max value? 🤔"_ Yes, a google search later my suspicion was confirmed: the highest z-index you can use is the maximum value of a 32 bit integer.

But, even if you _can_ use really high numbers for z-index, why _should_ you? The answer is simple: you shouldn't! High numbers are unnecessary and just makes it harder to see what's higher and lower, the difference between 99999 and 148851 can be hard to spot a glance. So, how can we make something better? 

## My refactoring

The first thing I did in the code base I was working on, was to collect all the indexes in a constants file. We were using [styled components][1], so my example is in javascript, but of course the same thing can be done in [Sass][2].

``` javascript
export const zIndexes = {
  AlertBox: 10,
  ModalOpacity: 100,
  PresentationContainer: 745,
  HamburgerMenu: 999,
  MenuOpacity: 999,
  Arrows: 9999,
  MenuWrapper: 12500,
  FullScreenButton: 99999,
  ProgressBar: 999999
};
```

Note that I ordered them by ascending index. By putting _all_ z-indexes in the same file, we have a great overview of them. The place I copied the values from, are now referencing a constant instead of having the actual value. I think this is also good from a readability standpoint - you don't have to care what the value is when looking at the styles for a component/class.

Next step is to take those numbers down to something simpler. If we have a new element that needs a value between the existing ones, we can just re-assign all of them, no biggie.

``` javascript
export const zIndexes = {
  AlertBox: 1,
  ModalOpacity: 2,
  PresentationContainer: 3,
  HamburgerMenu: 4,
  MenuOpacity: 4,
  Arrows: 5,
  MenuWrapper: 6,
  FullScreenButton: 7,
  ProgressBar: 8
};
```

[1]: https://www.styled-components.com/
[2]: https://sass-lang.com/
Are there any non-web Devs out there?
Tags: discuss, wuery
Published: 2019-06-09 18:54:19

---
title: Are there any non-web Devs out there?
published: true
description: can anybody hear me
tags: discussion, wuery
---

Every post on my feed seems to be web developer or front end heavy. There's the odd general tool but never seems to be any mention of backend languages or concepts. What gives? Is Dev.to for web Devs or Fe Devs or is it settings on my feed or are backend Devs so intrevert they aren't coming out to play?
Lets Build: With Tailwind CSS – Responsive Navbar
Tags: css, tutorial, design, video
Published: 2019-07-01 19:07:14

---
title: Lets Build: With Tailwind CSS – Responsive Navbar
published: true
tags: css, tutorial,design, video
canonical_url: https://web-crunch.com/lets-build-tailwind-css-responsive-navbar/
---

Welcome to another addition to my Let’s Build: With Tailwind CSS series. This installment will focus on using [PostCSS](https://postcss.org/) in a local development environment to create and configure a responsive navbar built entirely with Tailwind CSS.

{% youtube 025OldWcmbQ %}

Unlike previous tutorials where I hosted code on [Codepen](https://codepen.io/webcrunchblog/), this tutorial will reference a [playground Github repo](https://github.com/tailwindcss/playground) from [Adam Wathan](https://twitter.com/adamwathan) which uses PostCSS and a few other dependencies to allow for complete control of the Tailwind CSS framework. We’ll start off with the default theme but work to extend this in future installments.

Post CSS combined with autoprefixer allows us to create a build process that generates the utility classes provided by the Tailwind CSS framework. With these, I take a stab at creating a CSS-only responsive navbar that toggles state on mobile devices. We’ll harness a checkbox to create the dropdown effect that would otherwise be more suitable for JavaScript.

The navbar was built entirely with Tailwind except for a single selector that goes beyond the scope of the framework. Overall I’m very pleased with the results.

[Find the finalized code here](https://github.com/justalever/tailwind-navbar).

#### The Series so far

- [How to Install Tailwind CSS v1.0](https://dev.to/justalever/how-to-install-tailwind-css-v1-0-p42)
- [Let’s Build: With Tailwind CSS – Tweet](https://dev.to/justalever/let-s-build-with-tailwind-css-tweet-3ejh)
- [Let’s Build: With Tailwind CSS – Dribbble Shot](https://web-crunch.com/lets-build-tailwind-css-dribbble-shot)
- [Let’s Build: With Tailwind CSS – Responsive Navbar](https://web-crunch.com/lets-build-tailwind-css-responsive-navbar)

The post [Lets Build: With Tailwind CSS – Responsive Navbar](https://web-crunch.com/lets-build-tailwind-css-responsive-navbar/) appeared first on [Web-Crunch](https://web-crunch.com).
Which Server Framework do you prefer?
Tags: javascript, webdev, discuss, server
Published: 2019-06-09 18:36:40

---
title: Which Server Framework do you prefer?
published: true
description: Javascript Server Framework
tags: javascript, webdev, discuss, server
---

Which Server Framework do you prefer?
* Express.js
* Sails.js
* Hapi.js
* Koa.js
* Fastify.js
* Restify.js
* Loopback.js
Explain CI/CD like I'm five.
Tags: webdev, continousintegration, discuss, explainlikeimfive
Published: 2019-06-09 18:19:25

---
title: Explain CI/CD like I'm five.
published: true
description: Explanation of CI/CD, discuss, developer
---

Explaination of Continous Integration/Continous Delivery (CI/CD)
Windowsのメモ帳でソースコードを保存してはいけない
Tags: windows
Published: 2019-06-09 18:00:00

---
title: Windowsのメモ帳でソースコードを保存してはいけない
published: true
tags: Windows
date: 20190609T18:00Z
canonical_url: https://qiita.com/shiena/items/8c462b77aa9230893bd1
---
# 問題

~~Windowsのメモ帳で文字コードをUTF-8で保存すると必ずBOM有りになります。~~

このBOMが曲者で原因不明のコンパイルエラーになったり、差分比較ツールでファイルの先頭に謎の差分が出てきたり、Gitでバイナリ扱いになったりと何一ついい事がありません。

~~また、文字コードにUnicodeを選択して保存すると、実際はUTF-16で保存されます。
紛らわしいですね。~~

## 追記
![image.png](https://dev-to-uploads.s3.amazonaws.com/i/sv0ty07sq46qw0bxij5z.png)
Windows 10 May 2019 Update 1903のメモ帳からBOMなしUTF-8がデフォルトの保存形式になりました。
また紛らわしかったUnicodeがUTF-16 LEとUTF-16 BEになりました。

# 対処方法

## Windows 10 May 2019 Update 1903以降

メモ帳で保存時にUTF-8で保存する。

## Windows 10 May 2019 Update 1903より前

残念な事にメモ帳はBOM無しUTF-8で保存できません。
無用なトラブルを避ける為に、メモ帳の使用は避けましょう。

# 参考

* [バイトオーダーマーク(BOM)](http://ja.wikipedia.org/wiki/%E3%83%90%E3%82%A4%E3%83%88%E3%82%AA%E3%83%BC%E3%83%80%E3%83%BC%E3%83%9E%E3%83%BC%E3%82%AF)
* [メモ帳](http://ja.wikipedia.org/wiki/%E3%83%A1%E3%83%A2%E5%B8%B3)
* [「メモ帳」に多数の改善、BOMなしUTF-8がデフォルト保存形式に ～「Windows 10 19H1」 - 窓の杜](https://forest.watch.impress.co.jp/docs/news/1157696.html)
Should Pure Functions Be Self-contained
Tags: discuss
Published: 2019-06-09 14:54:38

---
title: Should Pure Functions Be Self-contained
published: true
tags: discuss
---

I my [last video about pure functions](https://dev.to/satansdeer/pure-functions-and-side-effects-2hi7) I said that to be pure a function should be self-contained i.e it should only access values from it's own scope. 

```js
function pureFunction(){
  return 'Some string literal';
  // Doesn't perform side effects, is deterministic
  // thus we can be sure that it's pure 
}

function thisWontBePure(){
  return pureFunction();
  // Isn't pure because calls function from global scope.
  // Even though the function we are calling here is pure.
}
```

So if you want a function to be pure it should only access values from it's arguments:

```js
function nowItsPure(anotherPureFunction){
  return anotherPureFunction();
  // Isn't pure because calls function from global scope.
}
```

What do you think about this? Can pure function call other pure functions from global scope and still remain pure?
Flattening a nested hash to a single hash in Ruby
Tags: ruby
Published: 2019-06-09 13:39:53

When using Ruby, you may sometimes need to flatten a nested hash like:

```ruby
{
  :foo => "bar",
  :hello => {
    :world => "Hello World",
    :bro => "What's up dude?",
  },
  :a => { :b => { :c => "d" } }
}
```

to a single hash like:

```ruby
{
  :foo => "bar",
  :"hello.world" => "Hello World",
  :"hello.bro" => "What's up dude?",
  :"a.b.c" => "d"
}
```

Today, I introduce a way to achieve it referring to [a post in Stack Overflow](https://stackoverflow.com/questions/23521230/flattening-nested-hash-to-a-single-hash-with-ruby-rails).

## Let’s implement

```ruby
def flatten_hash_from(hash)
  hash.each_with_object({}) do |(key, value), memo|
    next flatten_hash_from(value).each do |k, v|
      memo["#{key}.#{k}".intern] = v
    end if value.is_a? Hash
    memo[key] = value
  end
end
```

Using `Enumberable#each_with_object` recursively helps us achieve it.
Let’s deep dive into how it works.

## How it works

1. First, `key = :foo`, `value = "bar"` is given. the value is not a hash, so `memo` becomes `{ :foo => "bar" }` and the process continues.

2. `key = :hello`, `value = { :world => "Hello World", :bro => "What's up dude?" }` is given. The value is a hash, so `flatten_hash_from` is invoked again with the value.

3. After STEP 2, `memo` is `{}` again, which is different from the one in STEP 1. Then, `key = :world`, `value = "Hello World"` is given, which is not a hash, so `memo` becomes `{ :world => "Hello World" }`. Similarly, `key = :bro` is given next, then `memo` becomes `{ :world => "Hello World", :bro => "What's up dude?" } ` and the result is returned to STEP 2.

4. From STEP 3, the process goes back to `each` part with `key = :hello`. By `memo["#{key}.#{k}".intern] = v`, `memo` becomes `{ :foo => "bar", :"hello.world" => "Hello World", :"hello.bro" => "What's up dude?" }`.

5. Next, `key = :a`, `value = { :b => { :c => "d" } }` is given. The value is a hash then, `flatten_hash_from` is invoked recursively like STEP2.

6. `flatten_hash_from` is invoked with `key = :b`, `value = { :c => "d" }`.

7. `{ :c => "d" }` is returned to STEP 6.

8. `{ :"b.c" => "d" }` is returned to STEP 5.

9. From STEP 5, the process goes back to `each` part with `key = :a` and `{ :"a.b.c" => "d" }` is added to `memo`. It turns out `memo` is `{ :foo => "bar", :"hello.world" => "Hello World", :"hello.bro" => "What's up dude?", :"a.b.c" => "d" }`, then the process completed.

## References

- https://stackoverflow.com/questions/23521230/flattening-nested-hash-to-a-single-hash-with-ruby-rails
exports vs module.exports in Node.js
Tags: node, exports
Published: 2019-06-09 12:54:38

---
title: exports vs module.exports in Node.js
published: true
description: 
tags: node, exports
---

```javascript
exports.id = 1; //this is ok

exports = {id: 1}; //this is not ok

module.exports = {id: 1}; //this is ok
```

##WHY?

`exports` is simply a variable reference to `module.exports`. So we can change the properties of the `exports` object, but if we change the whole object, it would no longer be a reference to `module.exports`
Check whether a dependency is installed in your Node.js app
Tags: node
Published: 2019-06-09 11:52:56

---
title: Check whether a dependency is installed in your Node.js app
published: true
description: 
tags: node
---

You can use **require.resolve()** to check whether a dependency is available in your Node.js app without loading it. You can read more about it [here](https://nodejs.org/api/modules.html#modules_require_resolve_request_options)
How long is a new feature/page expected to take?
Tags: beginners, discuss, career, webdev
Published: 2019-06-09 11:33:34

One of my mentees just asked me 
"When working for a company, what is the expected timeline for a new feature/page?"

What would your answer be?

I've created a poll on Twitter if you're more into that: https://twitter.com/hugo__df/status/1137683451593863168?s=20
Cmd or Cmder? Which command line tool?
Tags: discuss, cmd, developer, windows
Published: 2019-06-09 11:32:44

---
title: Cmd or Cmder? Which command line tool?
published: true
description: Which Command Prompt do you prefer?
tags: discuss, cmd, developer, windows
---

Which tool do you prefer?
* Cmd
* Cmder
* Hyper
* Git Bash
* PowerShell
Pure Functions And Side Effects
Tags: javascript, programming
Published: 2019-06-09 10:32:31

---
title: Pure Functions And Side Effects
published: true
description: In computer programming pure function is a function that satisfies two conditions: It is deterministic, which means that for any given input it will always return same output. It has no side effects. Which means it doesn’t change outside world. Doesn’t perform input/output operation or change global variables.
tags: javascript, programming
series: Javascript for beginners
---

[Subscribe to my channel](https://www.youtube.com/channel/UC5hby9iDkwOTQM7PIjyjbgw?sub_confirmation=1)
Genymotion Emulator or Android Studio Emulator?
Tags: discuss, genymotion, android, reactnative
Published: 2019-06-09 09:25:10

---
title: Genymotion Emulator or Android Studio Emulator?
published: true
description: Emulator
tags: discuss, genymotion, android, reactnative
---

During development of React Native apps, which emulator do you prefer? Genymotion or Android Studio (In built) one.
VSCode or Atom?
Tags: discuss, atom, vscode, webdev
Published: 2019-06-09 09:22:18

---
title: VSCode or Atom?
published: true
description: Which IDE to Prefer
tags: discuss, atom, vscode, webdev
---

Which one do you prefer and why?
* VS Code
* Atom
* Sublime Text
* Brackets
* Emacs
* Notepad++
Benefits of a Component Library
Tags: webdev, discuss, productivity
Published: 2019-06-09 09:03:36

---
title: Benefits of a Component Library
published: true
description: Component libraries have many benefits. I'd like to discuss a less obvious one, reducing decision making by limiting choices.
tags: webdev, discuss, productivity
---

At my work we're currently starting to create a company-internal component library.  
It will be a bit of work, but significantly improve our UI development.

The most obvious benefits are:  
* Reduced code duplication
* Increased speed
* Improved UI consistency

One benefits that is less obvious, but underpins all those is **reduced decision making effort**. For designers, developers and the interaction of those groups.

In my opinion a component library is there to limit the possible designs, not just to have some base components.  
And with limited possibilities, the thinking process will be faster. Instead of literally endless options, designers only have a few. The same thing goes for developers. They see the design and know which components to use. Overriding styles is not an option, only if it is explicitly mentioned and approved by all stakeholders. 

If you're not thinking about component libraries as a way to limit design possibilities, you're only getting half the benefit.  
The logic will be abstracted, yes, but the styling will still often be overwritten, which might even need custom logic at some point.

This is how I currently believe we can get the most of our component library.

What is your opinion? Do you think it makes sense? Maybe it would be too limiting for a designer? That it'd hamper their creativity? Or even facilitate it?  
Do you know of any other benefits component libraries have?
Can I publish ES6 to npm?
Tags: javascript, discuss, node, webdev
Published: 2019-06-09 08:42:00

---
title: Can I publish ES6 to npm?
published: true
description: ES6 package but with a node-style resolution, not consumable by the browser, nor by the node. Is it ok?
tags: [js, discuss, node, webdev]
cover_image: https://thepracticaldev.s3.amazonaws.com/i/6ycpyjio2g6vwe0vxngf.jpg
---

Recently I wrote a [small library](https://github.com/stereobooster/css-modules-components) for fun, which implements [styled-components pattern](https://dev.to/stereobooster/styled-components-one-more-time-5g0l) for CSS Modules. I had a dilemma: how should I  publish it, should I compile it down to ES5 and CJS or UMD or publish more than one version at once, which tool to use for it. Previously I tried `kcd-scripts` (by Kent C. Dodds) and `microbundle` (by Jason Miller). 

This time I thought it would be a way to much trouble for a toy project. So I went ahead and [published it as ES6](https://unpkg.com/css-modules-components@1.0.1/index.js) (source code as is without minification or anything), **but** with node-style module resolution. 

Strictly speaking, it is not consumable by the browser, because of node-style module resolution. It is not consumable by node, because node support of ES6 modules is behind the flag. It is only consumable by bundlers, like webpack (CRA for example) and Parcel (actually I haven't tested it).

In my case, I have external dependency (React), but for example, [polished doesn't have external dependencies](https://github.com/styled-components/polished/issues/442).

**What are the downsides of publishing ES6?**  What your approach here? Tell me your thoughts

> Photo by chuttersnap on Unsplash
Supporting Altivec in stdsimd - quick notes
Published: 2019-05-25 22:28:34

---
title: Supporting Altivec in stdsimd - quick notes
published: true
description: 
tags: 
---

I already blogged about it [before](https://blogs.gentoo.org/lu_zero/2018/07/02/altivec-and-vsx-in-rust-part-1/) now I'm trying to complete it, few instructions per day.

## How we support Altivec intrinsics 

The Altivec intrinsics are sort of polymorphic: `vec_add(a, b) -> c` works for plenty of combinations of `a` and `b` (and `c`).

We want to support that in **rust** as well and that means we have to add plenty of traits and boilerplate (lots of it) to produce it.

Luckily we can leverage `llvm` low level intrinsics so the large part of the problem is wiring the low-level to an high level abstraction, here an example.

``` rust
pub trait VectorAdd<Other> {
    type Return;
    vec_add(self, b: Other) -> Self::Return;
}

impl VectorAdd<vector_signed_char> for vector_bool_char {
    type Result = vector_signed_char;
    #[inline]
    #[target_feature(enable = "altivec")]
    unsafe fn vec_add(self, other: vector_signed_char) -> Self::Result {
        vec_add_bc_sc(self, other)
    }
}
...
```

And then eventually you implement the generic function `vec_add`:

``` rust
#[inline]
#[target_feature(enable = "altivec")]
pub unsafe fn vec_add<T, U>(a: T, b: U) -> <T as sealed::VectorAdd<U>>::Result
where
    T: sealed::VectorAdd<U>,
{
    a.vec_add(b)
}
```

It is really boring endeavor that consists in:

- write a simple C testcase for the instruction
- feed it to `clang` to produce a `.ll` file and a `.s` file
- write the stub for the `llvm`-internal intrinsic
- write an `assert_instr`-wrapped test-function
- write a wrapper trait
- write the implementations for all the type combinations have to support
- write the public generic function
- write a test or many to make sure you did not botch all the previous steps.

## Current limitations
Both **rust** and **C** do not have exactly great way to described a function argument as *literal-only*.

Altivec has plenty of intrinsics that really **need** to be explicit and strict about that since one of the argument of them is a 5-bit literal that is embedded right in the coded instruction. 

In *rust* we have [rustc_args_required_const](https://github.com/rust-lang/rust/pull/48018) to mark the argument as a compile-time constant.

Sadly the information is not [forwarded](https://github.com/rust-lang/rust/issues/61180) so until this isn't addressed all those instructions (some relatively fringe such as *vec_ctf* some useful such as the family of *vec_splat_{type}* immediates) do not have a sane way to be implemented.

That's all for tonight, I'll edit this again soon and publish it on my other [blog](https://blogs.gentoo.org/lu_zero) once I have more to write about this.

Coming soon: [cargo-c](https://github.com/lu-zero/cargo-c) development notes and some more information about [crav1e](https://github.com/lu-zero/crav1e) and [rav1e](https://github.com/lu-zero/rav1e) getting closer to its first ready-for-distribution snapshot.