teleren/devto huggingface dataset:
Installing Python3, Pip and AWS CLI on macOS Sierra
Tags: python3, pip, awscli, machinelearning
Published: 2018-10-03 17:34:16

---
title: Installing Python3, Pip and AWS CLI on macOS Sierra
published: true
description: How to install Python3, Pip and AWS CLI on macOS Sierra
tags: Python3, Pip, AWS CLI, machine learning
---

A quick guide to installing Python v3, Pip package manager and the AWS CLI on the Mac OS Sierra. This write up assumes you only have Python 2.7 that came pre-installed on the Mac and Homebrew installed. If you need Homebrew please visit https://brew.sh/ and get it than come back here for the rest of the guide.

First let’s get Python 3 installed by running (If you had Homebrew installed it might update when you call the install command as it did for me. you might need to re-run the below install command.):

```~ brew install python3```
At this point, you have the system Python 2.7 available and the Homebrew version of Python 3 as well. Launch the system Python 2.7 using `~ python` and Pyhton 3 using `~ python3` commands respectively.

You’ll be able to start Pip 3 using the `~ pip3` command.

Now let’s install AWS CLI.

```~ pip3 install awscli --upgrade --user```
Verify the install using:

```~ aws --version```
In my case I had to add the Python 3 location to the $PATH variable, you might have to do it also. Here’s how:

```~ export PATH=~/Library/Python/3.6/bin:$PATH```
Check the aws install one more time:

```~ aws --version
aws-cli/1.11.185 Python/3.6.3 Darwin/16.7.0 botocore/1.7.43```
Now you should be all set :)

You will have to set up the credentials within the AWS CLI, you can get those values from the “My Security Credentials” menu link under your username in the Amazon dashboard.

—

Just in case you need them, here are some references:

[Installing Python 3 on Mac OS X - The Hitchhiker's Guide to Python](docs.python-guide.org)

[Install the AWS Command Line Interface on macOS - AWS Command Line Interface](docs.aws.amazon.com)
On the React-on-Rails portfolio project
Tags: react, redux, codenewbie
Published: 2018-10-03 22:01:08

---
title: On the React-on-Rails portfolio project
published: true
tags: react,redux,code-newbie
canonical_url: 
---

It’s always kinda bothered me that one can’t edit tweets on Twitter.  
 Naturally, my React-on-Rails portfolio project is yet another little Twitter clone (called [Butter Emails](https://github.com/ddhogan/butter-emails)). I spent almost as much time on implementing the edit/update actions as I did on everything else. I almost left it for version 2, but the completionist in me just couldn’t it it go (it’s C-R-U-D not C-R-D!) So, I’m disproportionately proud of that.

One of the things that makes it tricky is how the state tree is structured. Currently, it has a branch for auth (which includes information about the current user and where they’re logged in), and one for posts (posts are fetched as an array of objects in state.posts). This choice meant I didn’t easily have access to setting an inital state (from Redux’s perspective) of editing: false for individual posts. I resorted to having a nested return statement in the postsReducer, which, for now, works just as well, though isn’t as elegant.

The next biggest effort on this project was the JWT/authentication strategy. Since I was designing my own API I didn’t want to use an OmniAuth provider, and instead chose to use the ‘Knock’ gem. I discovered how quietly opinionated this system is. It works, but it seems to lock you into using email addresses for login, which was something I was hoping to avoid. I want to collect as little information as possible from the user (I know, crazy, right?!) but still only have the user’s display name listed next to their posts. Still, it was nice to not need to re-invent the wheel on this part.

Lastly, getting the two servers to work together was the next largest effort. I followed a couple good tutorials, but still couldn’t get the API server and client server to be managed by Foreman, and that ended up just being solved by specifying a more recent version of the gem. (Update your dependencies, kids!)

_Originally published at_ [_donnacodes.com_](http://donnacodes.com/on_the_react_on_rails_portfolio_project) _on Sept 30, 2018._
MacOS Dark mode - or not
Tags: macos, discuss
Published: 2018-10-03 17:17:52

---
title: MacOS Dark mode - or not
published: true
description: 
tags: macos, discussion
---
I have tested the new dark mode, and after a week or so, went back to normal light mode. A lot of apps doesn't support, html emails often makes a white background and most websites is white.

What are your thoughts about dark mode?
VSCode Theme Highlight-able Indent Guides FTW 💯
Tags: vscode, code, vscodetheme
Published: 2018-10-03 17:08:19

---
title: VSCode Theme Highlight-able Indent Guides FTW 💯
published: true
description: VSCode 1.23 just got released you can style the active indent guides. 😲 VS Code can now highlight the active indent guide, as you move your cursor between various source code blocks. The color name is `editorIndentGuide.activeBackground`.
tags: vscode, code, vscode theme
canonical_url: https://vscode.pro/tip/7
---


_This is just a small tip for VSCode._

Since VSCode `v1.23` got released you can style the active indent guides. 😲 VS Code can now highlight the active indent guides, only if your VSCode theme has support for that. I released a new version of my [🦄 Shades of Purple](https://marketplace.visualstudio.com/items?itemName=ahmadawais.shades-of-purple) VSCode theme to support this feature. 

>So, as you move your cursor between various source code blocks. The color name is `editorIndentGuide.activeBackground`.

I shared this as a [VSCode Tip](https://vscode.pro/tip/7) →

{%tweet 992141467228491776 %}
Developing and Securing Modern Apps with GraphQL, React, and Apollo
Tags: react, javascript, graphql, apollo
Published: 2018-10-03 17:05:12

---
title: Developing and Securing Modern Apps with GraphQL, React, and Apollo
published: true
description: Learn how to develop and secure modern applications with GraphQL, React, Apollo, and Auth0.
tags: #react #javascript #graphql #apollo
canonical_url: https://auth0.com/blog/develop-modern-apps-with-react-graphql-apollo-and-add-authentication/
---

Modern applications are increasingly data driven, which leads to a lot of time spent fetching, filtering, and aggregating data. When implemented with the Apollo platform, GraphQL reduces the complexity associated with data fetching and enables developers to take advantage of incredible tooling for crafting flexible APIs. In this tutorial, we'll explore how to build a production-ready application with GraphQL, React and Apollo. Finally, we'll wrap it up by learning how to add authentication with Auth0.

[Read on 🌟](https://auth0.com/blog/develop-modern-apps-with-react-graphql-apollo-and-add-authentication/?utm_source=dev&utm_medium=sc&utm_campaign=react_graphql_apollo)

![Developing and Securing Modern Apps with GraphQL, React, and Apollo](https://thepracticaldev.s3.amazonaws.com/i/xot3ug8mlbhqll9f1un2.png)
New Course: Database Fundamentals
Tags: beginners, learning, sql, database
Published: 2018-10-03 17:01:24

---
title: New Course: Database Fundamentals
published: true
description: Learn about databases and SQL with this free interactive course.
tags: beginners,learning,sql,databases
cover_image: https://cdn.filestackcontent.com/jROzwzDvQjik7b2UWeOo
series: Next XYZ Courses
canonical_url: https://next.tech/blog/new-course-database-fundamentals
---

We just released [Database Fundamentals](https://c.next.tech/2MZYex6), the latest interactive course on Next XYZ!

This course will take you through the foundational concepts of databases and SQL (Structured Query Language). Plus, it’s **free**!

You’ll help Codey ― the Next XYZ coding bot ― design, build, and maintain a database for a construction company, as well as answer important questions using data.

Along the way, you’ll learn how to:

* Create databases and modify their schemas
* Add, update, and delete data
* Query records in a database using SQL
* Join, filter, group, and sort results
* Ensure your database is normalized

You don’t need to have worked with databases before or have any coding experience to take this course.

Want to take a look? You can find it [here](https://c.next.tech/2MZYex6).
pudl — JavaScript Static Site Generator for Quick Prototyping #OneDevMinute
Tags: onedevminute, javascript, static
Published: 2018-10-03 16:30:41

---
title: "pudl — JavaScript Static Site Generator for Quick Prototyping #OneDevMinute"
description: "pudl — JavaScript Static Site Generator for Quick Prototyping — built by full time #OpenSourceress Maedah Batool."
published: true
tags: onedevminute, JavaScript, static
---

[`pudl`](https://github.com/maedahbatool/pudl) is a shiny new JavaScript-based Static Site Generator that I recommend you to use for quick Prototyping of static sites. It's for now just meant for HTML and CSS both of which are generated via `gulp` workflow that compiles `pug` and `sass` for you.

> 🌟 Make sure you star the [`pudl`](https://github.com/maedahbatool/pudl) repo on GitHub.
>[SPOILER ALERT] — webpack + JS setup coming in v2. 

### 🐶 What Can pudl Do?

1. Live reloads browser with BrowserSync.
1. CSS: Sass to CSS conversion, error catching, Autoprefixing and CSS minification.
1. Watches files for changes in CSS.
1. Corrects the line endings.
1. InjectCSS instead of browser page reload
1. Sends message notification to you.
1. Prevents pipe breaking caused by errors.

```sh
# PREREQUISITE: Before getting started read all in this repo
# http://github.com/maedahbatool/pudl
# STEP #0: Download + Install → Node.js and npm https://nodejs.org/en/download/

# GETTING STARTED:
# Step #1: Download the Required Files by running the following command

curl -L https://git.io/pudlgfl -o "gulpfile.js" && curl -L https://git.io/pudlpkjs -o "package.json" && curl -L https://git.io/pudlgig -o ".gitignore" && curl -L https://git.io/pudlcg -o "config.js"

# Step #2: Editing the Project Variables config.js file according to your folder structure (Make sure to create style.scss and index.pug files)
# Step #3: Installing Node Dependencies by running
npm install

# Step #4: Finally run
npm start

# Step #5: Your site should be up on http://localhost:3000
```

> 📺 Watch a more detailed version on [YouTube →](https://Youtu.be/Dc7LjO4ezr8)

I hang out on Twitter all the time, let's be friends there →

{% tweet 1047533645857247232 %}

> P.S. If you like my work, feel free to share it, like it. I am quite active on twitter you can find me cracking silly jokes there, maybe [follow me on Twitter](https://twitter.com/MrAhmadAwais) to connect and [subscribe to my YouTube channel →](https://YouTube/AhmadAwais)

> Peace! ✌️



🗣️ Comment below if you didn't get something.
Today I learned: how to generate music with Sonic Pi!
Tags: music, sonicpi, ruby, todayilearned
Published: 2018-10-03 16:16:42

---
title: Today I learned: how to generate music with Sonic Pi!
published: true
description: 
tags: music, sonic pi, ruby, todayilearned
cover_image: https://image.ibb.co/bTHvJe/Screen_Shot_2018_10_03_at_10_40_17_AM.png
---

[Sonic Pi](https://sonic-pi.net/) is a live-coding music program that uses Ruby to generate synth music. Ever since I learned about [Algorave](https://en.wikipedia.org/wiki/Algorave) earlier this year, I've been really interested in trying out generating music with code, and Sonic Pi seemed like a great place to start.

Sonic Pi is free and open-source, and available for Windows, macOS, and Raspberry Pi. It has a fantastic built-in tutorial that had me writing music right away, and I was really pleased with the quality of the tutorial. I already know Ruby and some intermediate music theory, but it doesn't assume any prior programming or music knowledge.

In about two hours or so, I completed the tutorial and whipped together some rad synth sounds to have on in the background while I code. [Check it out on Soundcloud](https://soundcloud.com/wombatgal/sonic-pi-coding-loop-sample), the code is below!

``` ruby
live_loop :background do
  sample :loop_garzul
  use_synth :prophet
  play :c1, release: 4, cutoff: rrand(70, 130)
  sleep 4
  play :c2, release: 4, cutoff: rrand(70, 130)
end

live_loop :middle do
  sync :background
  use_random_seed 4923
  use_synth :tb303
  notes = (scale :c2, :minor_pentatonic, num_octaves: 1)
  sleep 4
  8.times do
    play notes.choose, release: 1, cutoff: rrand(30, 50), amp: 0.3
    sleep 0.5
  end
  
  sleep 4
  
  8.times do
    play notes.choose, release: 1, cutoff: rrand(30, 50), amp: 0.3
    sleep 0.5
  end
end

```

There's a pretty active [Sonic Pi Twitter account](https://twitter.com/sonic_pi) that shares recent creations (some of which can fit in a single tweet!) as well as [a forum](https://in-thread.sonic-pi.net/) which I haven't explored much. Have you used Sonic Pi or something else to generate music? Let me know in the comments!
local storage Use
Tags: help
Published: 2018-10-03 15:59:30

---
title: local storage Use
published: true
description: local storage Use
tags: help
---

Hello dev,
I am making an application using Angular 6 and laravel and I need help for store session data and I read to many articles and Most of articles suggest LocalStorage.
https://therichpost.com/best-practice-for-localstorage-in-angular
I want to know, is it good to store data like session data or I need to use something else?

Thank you
Therichpost
Daily Blog Vol.2
Tags: myblog, javascript, webcomponents
Published: 2018-10-03 15:11:52

---
title: Daily Blog Vol.2
published: true
description: web components hot reload problem.
tags: myblog, javascript, web-components
---

# My issues about web components
I've been interested in using web components as my hobby project. also I've written about it at my self-publication book for 2 times. it made me gaining my knowledge of it though, I still have a question or problem about it.

## Hot Module Replacement problem.
Have you tried to setup HMR for your project which is used web components? I've tried it, but it didn't work well for me. Honestly, I've not tried for SPA environment. it's just for static page or simple page, so it's not big problem for me. but what if you (of course it's included me) wanna use web components for project which is SPA environment? Can't use HMR for SPA environment should be crucial probably. at least I must be troublesome. 

## Why can't we use HMR on web components project?
Simply, if custom elements's registered, you can't revoke it. custom elements doesn't have a specification for revoking defined custom elements from customElementsRegister. This is the point, we can't use HMR. if it's possible, we can revoke defined custom elements, then redefine new custom elements. Let me describe about it as below.

```js

import { html, render } from 'lit-html';

class SampleBtn extends HTMLElement {
  constructor() {
    super();
    this.shadow = this.attachShadow({ mode: 'open' });
  }

  template() {
    // I assume to change "test!!!" to "this is it!" later for checking whether HMR works or not.
    return html`<div>test!!!</div>`;
  }

  render() {
    render(this.template(), this.shadow);
  }

  connectedCallback() {
    this.render();
  }
}
if (!window.customElements.get('SampleBtn')) {
  window.SampleBtn = SampleBtn;
  window.customElements.define('sample-btn', SampleBtn);
}

```

this is a entry point.
```js
import './web-components/SampleBtn';

if (module.hot) {
  module.hot.accept('./web-components/SampleBtn.js', () => {
    // Somehow I wanted to enable HMR for web components,
    // fortunately, it did work for javascript, but custom elements didn't update itself.
    // here is empty now, but I tried many things.
    // However, Everything was failed.
  });
}
```

Internal of `SampleBtn` 's code which is such as `console.log` was invoked well, but if I changed inside of `template()` method, HMR didn't work well.
I'm kind of feeling, if HMR doesn't work well for project of web components which is SPA environment, it's inconvenient as I firstly mentioned.

I should gain knowledge of behind of how HMR works or custom elements or something like that though, I fatigued actually. 
Well, this is my today's research of web components (custom elements) on HMR environment.

if you have a question or advice to me, feel free to reach out to me on here or [twitter](https://twitter.com/hirodeath) !

That's it! See you tomorrow!
Intro to  Big O Notation 👀
Tags: computerscience, beginners, javascript, career
Published: 2018-10-03 14:54:48

---
title: Intro to  Big O Notation 👀
published: true
description: In computer science, big O is used to analyze how their running time or the space used by an algorithm.it is invented by Paul Bachmann, Edmund Landau.
tags: computerscience,beginners,javascript,career
cover_image: https://www.freeonlinephotoeditor.com/tmp/img-5bb4d58fea8f9/step0006.png?1538578440437
canonical_url: https://reactgo.com/bigo-introduction/
---


## What is Big O?

In computer science, big O is used to analyze how their running time or the space used by an algorithm.it is invented by Paul Bachmann, Edmund Landau.

Let's discuss some common time complexities with the help of examples.

###Constant time O(1)
If an algorithm has a constant time, it means that it always takes the same amount time to produce the output.

Example 

```js
function removeLastitem(arr){
  return arr.pop()
}

console.log(removeLastitem([1,2,3,4,5,6]))
```

In the above example **removeLastitem** function always takes the same amount of time to remove the last item from the array it doesn't matter if the array has 10 items or 20 items.


### Linear time O(n)


if an algorithm has a linear time, it means that the running time of an algorithm grows as the input size grows.

example
 
```js
function sum(arr) {
    let total = 0;
    for (let i = 0; i < arr.length; i = i + 1) {
        total += arr[i];
    }
    return total;
}

console.log(sum([1, 2, 3, 4])) //10
```

In the above example,**sum** function increases its running time according to the size of the array.


### Quadratic time O(<span>n<sup>2<sup></span>)

The running time of an algorithm is directly proportional to the square of the size of the input.

example :

```js
function addAndLog(arr) {
    for (var i = 0; i < arr.length; i++) {
        for (var j = 0; j < arr.length; j++) {
            console.log(arr[i] + arr[j])
        }//O(n)
        console.log("----")
    }// O(n)
}
```


In the next tutorial, we will learn about [logarithms](https://dev.to/saigowthamr/intro-to-logarithms-big-o--3iia) hope you learned something.


Happy coding ...

[Follow me on twitter](https://twitter.com/saigowthamr)



Originally published at [reactgo.com](https://reactgo.com/bigo-introduction/)
Opera Browser Launched Ethereum support | EatTheBlocks Newsletter #9
Tags: ethereum, solidity, dapp, web3
Published: 2018-10-03 15:52:15

---
title: Opera Browser Launched Ethereum support | EatTheBlocks Newsletter #9
published: true
description: 
tags: Ethereum, Solidity, Dapp, Web3
---

Opera Browser Launched Ethereum support, Metamask support Ledger... All the latest new of Ethereum for developers in the latest newsletter of EatTheBlocks

Post: https://eattheblocks.com/eattheblocks-newsletter-9-opera-browser-launched-ethereum-support-metamask-support-ledger/
Video: https://youtube.com/watch?v=cWtUQncudU0&t=50s

{% youtube cWtUQncudU0 %}

If you are a developer interested in learning about Dapp development, Solidity, Truffle, Web3, Ethereum protocol, Token standards ..., you will love this newsletter! Every week I send the 10 MOST INTERESTING tutorials, tips & news for Ethereum developers.
Feeling For Dev.to
Tags: discuss
Published: 2018-10-03 15:23:50

---
title: Feeling For Dev.to
published: true
description: Feeling For Dev.to
tags: discuss
---
Hello to dev.to,
I have seen so many social networks sites, social coding network sites but dev.to is different from all.
Frankly saying, I just came here to promote my blog https://therichpost.com/,
But when I see what actual is dev.to, I feel so good. Dev.to is only place where we can share coding, thinkings, thoughts and so many good things and now I use dev.to daily.

Thank you
Therichpost
Hacktoberfest React Project
Tags: hacktoberfest, javascript, webdev, beginners
Published: 2018-10-03 15:18:24

---
title: Hacktoberfest React Project
published: true
description: Build a Hacker News clone in React and Redux
tags: #hacktoberfest #javascript #webdev #beginners
---

![Hacktoberfest](https://thepracticaldev.s3.amazonaws.com/i/c8yxzv81ni7ifvn9orcr.png)

# Hacktoberfest 2018 Project

#### Build a Hacker News clone using React and Redux. Collaborate with other developers.

[Learn More >](https://gitconnected.com/hacktoberfest)


## Project Overview

A Hacker News clone (in night mode!) using all open source technology.

Try it out: [Download the Chrome Extension](https://chrome.google.com/webstore/detail/hacker-news/hknoigmfpgfdkccnkbfbjfnocoegoefe?pli=1&authuser=1)

Website: [View on gitconnected](https://gitconnected.com/hacktoberfest)

GitHub: [Follow the Source Code](https://github.com/gitconnected/hacker-news-reader)

{% youtube aTimQHf4zlM %}

Hacktoberfest 2018 is underway! Join the developer community from [gitconnected](https://gitconnected.com) in working together to build a Hacker News clone for your Hacktoberfest project. Use your favorite frontend library (or follow along with our solution using React) and utilize the open source Hacker News API for your data.

Our community will be collaborating and working together to help everyone become a better developer. Join us if you're interested in learning web development.


## What You'll Learn

- React
- Redux
- Styled Components
- CSS Grid
- CSS Flex
- CSS Animations
- Using an API
- Axios for network requests
- Redux middleware
- Create React App to bootstrap a project
- localStorage for persisting state

## Getting Started

First initialize the project. Our solution uses [Create React App](https://github.com/facebook/create-react-app), but feel free to use whatever you want, even static HTML.

Review the [Hacker New API](https://github.com/HackerNews/API) documentation. You will need the /topstories endpoint to get the list of the story IDs and the /item endpoint to get the data for each story individually.

Finally, get your project into production. We chose to use a Chrome Extension, but you can host it in any manner than you wish. GitHub pages is a great option. The final solution should show a list of the top stories on Hacker News.

Join the [Slack channel](https://community.gitconnected.com) to collaborate and get help. This project can be difficult, so make sure you work on it with some friends!


## Demo

![Hacktoberfest Demo](https://media.giphy.com/media/3HwA2U7rZgn0pRnV9f/giphy.gif 'Hacktoberfest Demo')

![Hacktoberfest Screenshot](https://github.com/gitconnected/hacker-news-reader/raw/master/public/hacktoberfest-screenshot.png 'Hacktoberfest Screenshot')