teleren/devto huggingface dataset:
Concerns with Separation of Concerns
Tags: react, jsx, webdev
Published: 2019-05-21 02:48:39

# The Old Way: Splitting Code by Language

Before components were cool, we often split our code up into separate HTML, CSS, and JS files. This division kept tangles of related code pulled apart into separate chunks with only the necessary strings between them.

Splitting code by language was better than putting everything into one file because it lowered the stress on our scroll wheels and allowed us to sleep at night under the false presumption that our code was properly organized.

But the connecting strings were there, and they haunted us.

All three languages were necessarily intertwined (if you change a class name in HTML, you have to update your CSS and JS too), so we were constantly jumping back and forth between related files.

# The New Way: Splitting Code by Component

A far better system, with less jumping involved, is to split code up based on what goes together. Components help us do that! Components are a recognition that splitting up our code into files based on the programming language is the wrong approach.

It was controversial in the beginning. There were outcries. The public made clear that such a convolution of concerns was an infringement on the very foundations of a civil society.

![Dan the Witch](https://thepracticaldev.s3.amazonaws.com/i/0d1r6louz13ppynjeltw.png)

<figcaption>For a while we were convinced that <a href="https://dev.to/dan_abramov">this generous bloke</a> was actually a witch!</figcaption>

But, as it happens, combining HTML, CSS, and JS all together is actually a really great idea. The key condition? **You must instead divide up your code based on which pieces of HTML, CSS, and JS work together to form a coherent whole.** That's what happens when we split our code into files at the component level.

{% codepen https://codepen.io/PullJosh/pen/wbqyNP %}

The key benefit is that we no longer have strings attached between each of our files. (If we change a class name, everything happens in one place.) In an ideal world, every component is entirely self-contained and does not rely on the implementation details of other components to function properly. This means that we no longer need to jump between files nearly as often.

# Change is the Only `const`

Changing deep-rooted ideals (about, for instance, separation of concerns) is incredibly difficult. Fortunately, web developers seem to be quite good at it. The industry moves fast, and it can sometimes seem like we're reinventing the practice *too often*. But looking back at old ideas is a reminder that the adaptations are worth the pain. Keep up the good fight, y'all! ✌
Creating an emacs formatter the easy way
Tags: emacs, elisp
Published: 2019-05-22 06:00:50

---
title: Creating an emacs formatter the easy way
published: true
tags: emacs, elisp
canonical_url: https://erick.navarro.io/blog/creating-an-emacs-formatter-the-easy-way/
---

Some weeks ago I discover a really nice package for emacs called [reformatter.el](https://github.com/purcell/reformatter.el "reformatter.el"). This package allows to define reformat functions in a easy way.

Most languages have a reformat tool. Elixir has `mix format`, Elm has `elm format`, python has `black` and so on. These formatters are convenient because they give uniformity to the code, but this is a topic for another post.

Having these formatters integrated within our favorite editor is great. These are enough(at least for me) reasons to use `reformatter.el` so let's get into the code:

`reformatter.el` has a simple macro that allows us to define a formatter with just a few lines.

For this example we'll create a formatter for haskell using `hindent` <sup id="fnref:hindent"><a href="#fn:hindent">1</a></sup>.

```elisp
  (reformatter-define haskell-format
    :program "hindent")
```

We just need to define the command that will be used to format the code. In this case `hindent`. This will create some useful functions:

- haskell-format
- haskell-format-buffer
- haskell-format-region
- haskell-format-on-save-mode

These functions can be used with a key-binding:

```elisp
  (define-key haskell-mode-map (kbd "C-c C-f") 'haskell-format-buffer)
```

Also we can setup emacs to run the formatter when the file is saved, for example put this code in your `.dir-locals.el` and it will do the work.

```elisp
  (haskell-mode (mode . haskell-format-on-save))
```

The program used to format our code needs to be able to read from `stdin` and return the formatted code to `stdout`. In this case `hindent` does it by default.

In some cases the formatter doesn't do this by default. For those cases we can pass extra arguments to the command using `:args` key in the formatter macro. For example `elixir format` receive a file or a pattern by default but we can change that using `mix format -`, now it will read from `stdin`, so we need to pass these parameters to our formatter. The code should be:

```elisp
  (reformatter-define elixir-format
    :program "mix"
    :args '("format" "-"))
```

Now it will work properly.

This package is very useful if you don't want to install a external package just for formatting. I replaced `hindent-mode` (haskell formatter) and a custom elixir formatter with this package. Also this package is used in `elm-mode` package.

* * *

1. https://github.com/chrisdone/hindent <sup>[return]</sup>
A Brief Introduction to Gatsby Themes
Tags: gatsby, mdx
Published: 2019-05-21 02:34:31

# What is a Gatsby Theme

Gatsby themes are not just visual paint to a gatsby site or a preset design like a wordpress or hugo theme.

Themes allow you to package up the functionality of any gatsby site in a sharable and extenible way.

> Themes are NPM installable Gatsby sites - Chris Biscardi

## Why would you use a Gatsby theme

A Gatsby theme can be many different things:

- preset, configurable `gatsby-config`
- ui theme (dark mode vs light mode)
- data sourcing (from contentful, json files etc)
- component library

You can install as many themes in one gatsby site as you need. When you are developing themes, you can use themes in your gatsby config as well. Themes allow you to seperate your code into different parts easily.

## How to use a theme (docz)

Generate a new site and install `gatsby-theme-docz`.

```bash
npx gatsby new docz-theme-example
cd docz-theme-example && yarn add gatsby-theme-docz
```

Add the theme to your gatsby config:

```js
// gatsby-config.js
module.exports = {
  __experimentalThemes: ['gatsby-theme-docz'],
}
```

Head over to your `src/pages` directory and add an [`mdx`](https://github.com/mdx-js/mdx) file.

```markdown
// src/pages/helloworld.mdx
# Hello from MDX!
```

Now, you can spin up your gatsby site:

```bash
gatsby develop
```

Now visit localhost:8000/helloworld or whatever you called your new file. The docz theme will generate a page for each `.mdx` file in your project.

Since you are in an mdx file, you can import any React component and use it

```js
// src/pages/helloworld.mdx
import Layout from '../Components/Layout'

export default ({children}) => <Layout>{children}</Layout>
```

Now you will see the default `<Layout/>` wrapping your `mdx` file.


## More Resources

- [Official Intro to Gatsby Themes](https://www.gatsbyjs.org/blog/2018-11-11-introducing-gatsby-themes/)
- [Chris Biscardi's Theme Example](https://github.com/ChristopherBiscardi/gatsby-theme-examples)
- [Kyle Gill's simple guide to Gatsby Themes](https://medium.com/@kyle.robert.gill/a-simple-guide-to-gatsbyjs-themes-a4f9765c5ac7)
- [MDX docs](https://github.com/mdx-js/mdx)
- [gatsby-theme-docz](https://github.com/pedronauck/docz/tree/master/core/gatsby-theme-docz)
Three Things I Wish I had Learned Earlier in My Career as a Software Developer
Tags: career, learning
Published: 2019-05-21 01:47:09

---
title: Three Things I Wish I had Learned Earlier in My Career as a Software Developer
published: true
description: Experience is a great teacher; use someone else's experience to make the most of your own!
tags: career, learning
---


Three Things I Wish I had Learned Earlier in My Career as a Software Developer:

https://spec.fm/podcasts/developer-tea/298247
CircleCI deployment with AWS role assumption
Tags: aws, tutorial, circleci, showdev
Published: 2019-05-21 00:49:00

---
title: CircleCI deployment with AWS role assumption
published: true
description: Deploy to dev, staging and prod using role assumption via CircleCI
tags: AWS, tutorial, CircleCI, showdev
---

##Problem: 
We had three separate AWS accounts for dev, staging and production. We have a master account and we used role assumption to access the rest of the accounts for the development stages. We needed CircleCI to deploy to different stages using AWS Role Assumption.

Note: This article assumes you already have the working knowledge of CircleCI and how to setup CircleCI for your project.

##Solution:
We solved the problem using aws config, CircleCI contexts and some yml magic. 

###Step1: 
Create a config file `aws_config` and add it to the .circleci folder. 
  ```
   [default]
   region = us-east-1
   output = json

   [profile dev]
   role_arn = arn:aws:iam::<account_id>:role/CircleCi-role
   source_profile = default

   [profile staging]
   role_arn = arn:aws:iam::<account_id>:role/CircleCi-role
   source_profile = default

   [profile production]
   role_arn = arn:aws:iam::<account_id>:role/CircleCi-role
   source_profile = default

  ```
  

### Step2: 
CircleCI supports environment variables by context. 
- Login to CircleCI and go to Settings
- Create a org-global context and add AWS_ACCESS_KEY and AWS_SECRET_KEY.
- Create three contexts for each stage and add AWS_PROFILEenv variable. Set the variable to 'dev', 'staging' and 'production' in respective contexts.

### Step3: 
Add a step in CircleCI config.yml to setup the credentials and config file under the org-default context. You only need to do this once. The .aws folder could be persisted and shared across jobs.

Note: I am using python executor and pipenv has already installed awscli as a dependency.

   ```
     - run:
          name: AWS configure
          command: |
            pipenv run  aws configure set aws_access_key_id $AWS_ACCESS_KEY
            pipenv run  aws configure set aws_secret_access_key $AWS_SECRET_KEY
            cp .circleci/aws_config ~/.aws/config
   ```
   This step creates a credentials file with the key_id and access_key for the default profile. 
   The config file in the previous step uses the profile from the credentials file.

### Step4:
Pass profile name in parameter to aws cli commands in your CircleCI deployment.``` aws s3 sync ./local s3://bucket --profile dev ```
AWSCLI commands can also read from the env variable directly``` aws s3 sync ./local s3://bucket ```
In case, you have a custom script or a Serverless Framework, you can pass the profile.``` sls deploy --aws-profile $AWS_PROFILE ```

## Complete example:

{% gist https://gist.github.com/Yloganathan/3a2ec9826f06af279adf75abf31c4ef8 %}


Recommended reading: [Set up AWSCLI using RoleAssumption and MFA.](https://dev.to/yloganathan/aws-cli-using-role-assumption-and-mfa-1871)
R Language : Read Excel files In R
Tags: rdatascience, datascience, rlanguage, excel
Published: 2019-05-20 13:53:16

---
title: R Language : Read Excel files In R
published: true
description: Learn how to read excel files in R Language. 
tags: #rdatascience #datascience #rlanguage #excel
---

Let's discuss how to read excel files from R. Most of the office and the small business data is still being saved in spreadsheet. And Microsoft Excel is one of the popular spreadsheet software that is being used for storing this data. 

These days even the Google docs are being used but most of the people still prefer the offline desktop based spreadsheet files like excel. 

So here we are going to take a look at the simple way to read the excel files in R language. You can check out the video instruction of this tutorial - [Read Excel files in R Language](https://www.youtube.com/watch?v=V7SkBywk08I). 

{% youtube V7SkBywk08I %}

We are going to take a look at some of the steps like :

1. Install package that reads excel file
2. Read the excel file
3. Enjoy

**1. Install xlsx Package**

XLSX package is one of the known package in the R repository. This package works on Windows, Mac, Linux and allows you to read and write the excel file. You can also add the images and charts with this library. You can install the xlsx package with the following command. 

    install.packages("xlsx")

**2. Read the Excel File data**

Now that we have downloaded the package it's time to test drive with the code. So here's simple snippet to read our excel file named *mydb.xlsx*. Here we are going to read the first sheet in the file. 

    library(xlsx)  
    fp <-  system.file("demo", "mydb.xlsx", package  =  "xlsx")  
    res  <-  read.xlsx(fp, 1)  
    head(res[, 1:6])

Let's discuss the code from line 1. 

In line 1, we are basically loading the xlsx library. In 2nd line we are loading the file in variable, with reference to package xlsx. In 3rd line we are reading the xlsx files first sheet. And finally we are display records starting from 1st row to 6th row and displaying it on the console. 

That's it. 

You can check the official package documentation on GitHub for further manipulation of the excel files. I hope that the information explained here helped you to work with excel file in a simple way.
Faster Than Requests
Tags: python, webscraping, pythondatascience, performance
Published: 2019-05-20 23:29:08

---
title: Faster Than Requests
published: true
description: 15x Faster Than Requests
tags: python, webscraping, pythondatascience, performance
cover_image: https://source.unsplash.com/eH_ftJYhaTY/800x402
---

![Faster Than Requests](https://thepracticaldev.s3.amazonaws.com/i/6fzgmcqiv85vgjdiqwyl.jpg "Faster Than Requests")

| Library                       | Speed    | Files | LOC  | Dependencies          | Developers |
|-------------------------------|----------|-------|------|-----------------------|------------|
| PyWGET                        | `152.39` | 1     | 338  | Wget                  | >17        |
| Requests                      | `15.58`  | >20   | 2558 | >7 (Depends on Urllib3)                   | >527       |
| Requests (pre-Cached)      |  `5.50`  | >20   | 2558 | >7 (Depends on Urllib3)                  | >527       |
| Urllib                        |  `4.00`  | ???   | 1200 | 0 (std lib)           | ???        |
| Urllib3                       |  `3.55`  | >40   | 5242 | 0 (No SSL), >5 (SSL) | >188       |
| PyCurl                        |  `0.75`  | >15   | 5932 | Curl, LibCurl         | >50        |
| PyCurl (no SSL)               |  `0.68`  | >15   | 5932 | Curl, LibCurl         | >50        |
| Faster_than_requests          |  `0.45`  | 1     | 75   | 0                     | 1          |

`faster_than_requests` new Version release!, 
uploaded to PyPI, PIP installable,
we added new Documentation, Examples, Dockerfile, test, Proxy, FAQ, CoC, Debug, Bug Fixes, JSON helpers, Environment Variables awareness, +200 Commits, and a lot more to come!.

`faster_than_requests` its an alternative to the requests and HTTPS Clients on Python 3,
15 times faster than Requests, 2 times faster than PyCurl, 
0 dependencies, 1 file, ~100 Lines of code.

The API is simple, instead of having a pair of functions with a lot of arguments that you should provide to make it work, 
we have tiny functions with very few arguments that do one thing and do it as fast as possible.

Has extra functions requested by people and oriented towards 
Data Science, Big Data, Open Data, Web Scrapping, working with HTTP REST JSON APIs.

- **We have a Docker to test drive it without installing anything.**

New Documentation has all functions with detailed arguments and returns with types.


# Requests depends on Urllib3

Requests now depends on Urllib3, making the total of Lines of Code >8.000.

8.000 Lines of Code to download a Cat Meme.

`faster_than_requests` replaces 8.000 LoC with ~100 LoC :)

We also have no Dependencies, nor _Fundraising_.


# Hello World

```python 
import faster_than_requests as req

print(req.gets("http://example.org/get"))                     # GET
print(req.posts("http://example.org/post", "Some Data Here")) # POST
```


# Get it while its hot

- https://github.com/juancarlospaco/faster-than-requests#faster-than-requests
- https://pypi.org/project/faster_than_requests
- `pip install faster_than_requests`

_Please Star faster_than_requests on GitHub!, awesome stuff incoming..._
JavaScript's new class fields will shoot you in the foot!
Tags: javascript, webdev, browsers, node
Published: 2019-05-20 22:02:01

---
title: JavaScript's new class fields will shoot you in the foot!
published: true
tags: #javascript #webdev #browsers #node.js
---

TLDR, paste the following in your Chrome console:

```js
class Animal {
    #sound = 'rustling noise in the bushes'

    get sound() { return this.#sound }
    set sound(val) { this.#sound = val }

    makeSound() {
        console.log(this.#sound)
    }
}

const a = new Animal
a.makeSound() // 3.14

class Lion extends Animal {
    sound = 'RAWR!'
}

const lion = new Lion
lion.makeSound() // BUG! Expected "RAWR!" but got "rustling noise in the bushes"
```

The example does not work as you may expect because the expression `sound = 'RAWR!'` uses `[[Define]]` semantics instead of `[[Set]]` semantics.

What are `[[Define]]` and `[[Set]]` semantics?

Let me explain using plain ES6 code without class fields.

Using `[[Set]]` semantics, the `Lion` class can be written like this:

```js
class Lion extends Animal {
    constructor() {
        super()
        this.sound = 'RAWR!'
    }
}
```

That version will trigger super class getters/setters in the expression `this.sound = 'RAWR!'`. The result of `lion.makeSound()` will be `"RAWR!"` because that value will be stored inside of the `Animal` class's private `#sound` field.

Now, using `[[Define]]` semantics, we would instead "define" the property on the instance, like so:

```js
class Lion extends Animal {
    constructor() {
        super()
        Object.defineProperty(this, 'sound', { value: 'RAWR!' })
    }
}
```

This version is what class fields do. Class fields define the property on `this` directly, so the `sound` field does not trigger the super class getter/setter that is inside of Animal, therefore the `'RAWR!'` value will never be stored inside of Animal's private `#sound` field. Thus we've been shot in the foot.


Class fields do not keep inheritance as a first-class citizen in the design of JS `class`es.

This is one of the reasons why [many people don't like the class-fields proposal](https://github.com/tc39/proposal-class-fields/issues/100), and it is unfortunate that Chrome's V8 engine is already shipping the feature despite so much push-back from the community.

Here's the *design bug* reported to Chrome: https://bugs.chromium.org/p/chromium/issues/detail?id=962192

Ever since ES6 features started rolling out, there hasn't been any feature more controversial and disliked than the current class-fields proposal.

If you have any thoughts on (private or public) class-fields, please leave your thoughts over in those GitHub issues. The more community input we get, the better.
I have been programming since I'm 10, Ask Me Anything!
Tags: ama
Published: 2019-05-20 21:45:28

---
title: I have been programming since I'm 10, Ask Me Anything!
published: true
tags: ama
---

I started off with Commodore Basic on a C64 when I was 10 years old. Most of the things I know are self thought. But it was slow because I didn't have internet until four or five years later. I studied but never finished Applied Computer Sciences and worked as a freelancer and consultant for over ten years. I also had some (in the end not so...) permanent positions.

My newest interests are Rust and Mechanical Keyboards. Most of my projects nowadays are web related. I love to do JAMStack applications with Vuejs in the Frontend. I also work a lot with Ruby (sometimes on Rails) but personally prefer smaller frameworks like Sinatra or Express. I also create a game with Vuejs because I think Vuejs is great for state management. I'm not sure if it will ever be done.
What Does 'grep -liz' Do?
Published: 2019-05-20 21:07:59

---
title: What Does 'grep -liz' Do?
published: true
description: 
tags: 
---
I love the `grep` linux command.  It's one of those fundamental commands that I could not live without.  I love it so much that I use the alias 'grepliz' for many of my social media accounts.   

One day as I was just pondering the wonder that is `grep`, I wondered what would `grep -liz` do.    

So here begins the idea of this blog.    

`-l` is for listing out files
=============================

`grep -l` or `grep --files-with-matches` will only show the file names with matches and not every line or occurrence.  For example, suppose we had a file called called `test.txt` with the following content:
```
Hello Grep!
Hello Grep!
```

if you run `grep "Hello" *` in the directory, the results would look like this:
```
$ grep "Hello" *
test.txt:Hello Grep!
test.txt:Hello Grep!
```
However, if you run `grep -l "Hello" *`, you will only get back the file name:
```
$ grep -l "Hello" *
test.txt
```

`-i` is for ignoring case
=========================
    
`grep -i` or `grep --ignore-case`
By default `grep` is case sensitive, using the `-i` flag we make it case *insensitive*.   
For example, let's add another line to the above `test.txt` file so it now contains:    
```
Hello Grep!
Hello Grep!
hello grep!
```

Runnning `grep  -i "Hello" *` will show all 3 lines:
```
$ grep -i "Hello" *
test.txt:Hello Grep!
test.txt:Hello Grep!
test.txt:hello grep!
```

`-Z` is for zgrep
=================
`grep -Z` or `zgrep` will search compressed files.  So let's take our example `test.txt` file and compress it using `gzip`.    
```
$ gzip test.txt 
```

This will produce a compressed file called `test.txt.gz`.
Now if you try to grep it for "Hello", it will not return any results:
```
$ grep "Hello" test.txt.gz

```
Using the  `-Z` flag, grep will act like `zgrep` and uncompress the file to do the search:
```
$ grep -Z "Hello" test.txt.gz
Hello Grep!
Hello Grep!
```

According to the man pages `-z` and `-Z` should do the same thing but my tests showed otherwise.  It appeared that grep wouldn't recognized a lowercase z flag.    

You may be wondering what `-L` or `-I` does.  I will leave that as an exercise for the reader (or perhaps another blog).