teleren/devto huggingface dataset:
Dev.to Community Discord
Tags: watercooler, discuss, discord
Published: 2020-05-13 04:58:28

As Dev.to is on Twitter and Instagram. Why not we also make a [Discord](https://discord.com/) Server? 

It has many advantages like:

- People can easily ask question
- Increase in Community participation 
- Video and Voice Conferences
- Giveaways *(if possible)*
- Online Events
- Custom Bots
- Streaming

Also Dev.to is open source so we can get more [advantages](https://discord.com/open-source).

What do you guys think? This is a great idea IMO!!
Arrays and Objects Are Passed By Reference
Tags: javascript, beginners
Published: 2020-05-13 04:58:26

Arrays and objects are passed by reference. This is something that can catch a lot of beginners out and lead to some frustrating bugs. For example:
```javascript
let fruit = ["apple", "pear", "orange"];
let food = fruit;
food.push("chicken");

console.log(fruit); // ["apple", "pear", "orange", "chicken"]
console.log(food); // ["apple", "pear", "orange", "chicken"]
```
To get around this we can ensure that we create a new array that copies the values of the first, using the _spread operator_, like so:
```javascript
let fruit = ["apple", "pear", "orange"];
let food = [...fruit];
food.push("chicken");

console.log(fruit); // ["apple", "pear", "orange"]
console.log(food); // ["apple", "pear", "orange", "chicken"]
```
The same problem can arise with objects:
```javascript
let fruit = {a: "apple"};
let food = fruit;
food.b = "banana";

console.log(fruit); // {a: "apple", b: "banana"}
console.log(food); // {a: "apple", b: "banana"}
```
Again, we solve for this issue with _passing by reference_ by using the `Object.assign()` method. Note that we must initialize an empty object and then pass in the first object as the second parameter to fill it.
```javascript
let fruit = {a: "apple"};
let food = Object.assign({}, fruit);
food.b = "banana";

console.log(fruit); // {a: "apple"}
console.log(food); // {a: "apple", b: "banana"}
```
These mindbenders are like learning idioms in a human language, little quirks built into the language.

What are some of your favorite weird things about Javascript?
Art Craft store site tips on html css
Tags: html, css
Published: 2020-05-13 04:55:50

Lessons learned while building [Art and Craft Store shop website](https://heggy231.github.io/chingu-webdev-speedrun-challenge/frontend/art-craft).


First step, after getting the redline mock-up is to write all the content down and create it semantically.

```html
    <header>
      <h1>Dasmoto's Arts & Crafts</h1>
    </header>

    <main>
      <section>
        <h2>Brushes</h2>
        <img src="./resource/hacksaw.jpeg" alt="white beige paint brush stacked">
        <h3>Hacksaw Brushes</h3>
        <p>
          ...<span class="price bold">$3.00 / brush.</span>
        </p>
      </section>
      <section>
       ...
      </section>
      <section>
        ...
      </section>
    </main>
```
 
I added background-image to wrapper component of `h1`.

```html

<header>
  <h1>Dasmoto's Arts & Crafts</h1>
</header>

```
- remember to add quotes around img path for the url css function.

```css

header {
  background-image: url("./resource/pattern.jpeg");
}

```
Coffee Companion App LS:001
Tags: swiftui, swift, coffee, ios
Published: 2020-05-13 04:21:48

---
title: Coffee Companion App LS:001
published: true
description: I'm starting a new live stream series of developing an app from scratch. Watch every Monday at 6:30pm CDT.
tags: [SwiftUI, Swift, coffee, iOS]
series: Coffee Companion App
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/t5qp1m3b3a3ci523p0dl.png
---

I'm starting to work on a coffee timer app and am building it 100% in the open. I'm streaming the development every Monday and the code is available. I started on May 4th, so my latest stream is at the bottom of this post.

This app is 100% catered to how I make coffee, so I don't think I'm going to release this on the App Store, unless I can implement some other features not on the Linea sketch. The goal is to make the app look pretty similar to the sketch below.

![Image of sketch](https://appsbymw.com/assets/images/2020-05-05/coffee-timer-sketch.jpeg)

## Features

- Editable coffee to water ratio
- Editable blooming time
- Editable bloom ratio
- Count up timer

# Dev things

- Built with SwiftUI!
- Probably won't be released
- 100% in the open. Code can be found on my [GitHub](https://github.com/appsbymw)

# Where to find work

- [Twitch channel](https://www.twitch.tv/appsbymw) - Watch every Monday at 6:30pm CDT
- [Project's GitHub Repo](https://github.com/appsbymw/coffee-app)
- [YouTube channel](https://www.youtube.com/channel/UCUZDQxNOmpkwah344CrlmuQ) - Where the streams will go once done

# May 4th's Live Stream

{% youtube -NRyaJPpicQ %}


---

If you enjoy my posts, streams, and apps, consider encouraging my efforts.
- <a href="https://www.patreon.com/appsbymw" target="_blank"><button type="button" class="crayons-btn">Become a Patron</button></a>
- <a href="https://www.buymeacoffee.com/appsbymw" target="_blank"><button type="button" class="crayons-btn">Buy Me a Coffee</button></a>
- <a href="https://buttondown.email/appsByMW"><button type="button" class="crayons-btn">Subscribe to my Newsletter!</button></a>
Python Facebook Posts Scraper with Requests and BeautifulSoup4
Tags: facebook, webscraping, api, python
Published: 2020-05-13 03:51:47

A few weeks ago I wrote about the [Importance of using User Agents when we scrap data](https://dev.to/hhsm95/using-user-agent-to-scraping-data-lli), and my examples shows the response from Twitter when we used the correct User Agent. This time I want to do the same but Facebook. We gonna scrape the posts in users profiles, Facebook pages and groups.

### What we gonna get?

A list of items with the next values:

| params         | description |
| -------------- | ----------- |
| published      | Formatted datetime of published |
| description    | Post text content |
| images         | List of images in posts |
| post_url       | The unique post url |
| external_links | External links found in description |
| like_url       | The Like url |

Now I have a developer blog, continue reading this post here: https://hhsm95.dev/blog/python-facebook-posts-scraper-with-requests-and-beautifulsoup4/

Thank you!
Animations with Turbolinks and Stimulus
Tags: turbolinks, stimulus
Published: 2020-05-13 03:26:31

When using CSS animations with Turbolinks, you may experience page blink during page load. We will see how we can easily change that using the life cycle events of a Stimulus controller.


## Turbolinks preview

When navigating back, Turbolinks will first display a preview of the page that was stored in the local cache and then replace this preview by the server response. This give the instant page load feeling effect of Turbolinks.

This preview comes from a snapshot taken locally by Turbolinks during the previous visit. Two things must be considered :
1. The preview has the state of the animations when you left the page.
2. If your animations are meant to start on page load then they will most probably start when the preview page is displayed

Those are typically two sources of blink effect when using animations with Turbolinks.

The first one because the page preview displays the page with the animations already played but then resets it when the preview is replaced by the real server response.

The second because if the animations start on the page preview then once the page preview is replaced, the animation will be reset. So either the animation is played twice or partially during first load. 

## Solution

Lets assume a typical controller where you play an animation on an element during after page load.

```js
export default class extends Controller {
  connect() {
    this.element.classList.add("play-animation")
  }
}
```

### 1) Ignore preview

Adding simple helper can tell you if you are on a preview page on not

```js
get isPreview() {
  return document.documentElement.hasAttribute("data-turbolinks-preview");
}
```

So now during `connect` we can easily know if we are in a preview or not. If we are in a preview we shouldn't play the animation as it would most likely be interrupted/play twice

```js
export default class extends Controller {
  connect() {
    if (!this.isPreview) {
      this.element.classList.add('play-animation')
    }
  }

  get isPreview() {
    return document.documentElement.hasAttribute('data-turbolinks-preview')
  }
}
```

### 2) Tear down before snapshot

The goal is to bring back the page to its initial state before snapshot. For this we will use the `disconnect()` function that occurs right before the Turbolinks snapshot and simply remove animations that we may have played.

```js 
disconnect() {
  this.element.classList.remove('play-animation')
}
```

So a typical complete solution would look like this 

```js 
export default class extends Controller {
  connect() {
    if (!this.isPreview) {
      this.element.classList.add('play-animation')
    }
  }

  disconnect() {
    this.element.classList.remove('play-animation')
  }

  get isPreview() {
    return document.documentElement.hasAttribute('data-turbolinks-preview')
  }
}
```


Happy Stimulus 🦄
Hotkeys for Visual Studio 2019
Tags: visualstudio, 2019, hotkeys, snippets
Published: 2020-05-13 03:16:03

# Hotkeys
| Hotkey | Description |
| ------ | ----------- |
| Alt+Up/Down | Move code up/down |
| Ctrl(K,C)/Ctrl(K,U) | Comment/Uncomment line of code |
| Alt+F12 | Peek definition |
| Ctrl(K,F) | Format line of code |
| Ctrl(K,D) | Format document |
| Ctrl(R,G) | Cleanup unused namespace |
| Ctrl+] | Find closing brace |
| Alt+Shift+Enter | Enter/Escape full screen mode |
| Ctrl(K,S) | Select snippet |
| Ctrl(K,K) | Add/Remove bookmark |
| Ctrl(K,N) | Next bookmark |
| Ctrl(K,P) | Previous bookmark |
| Ctrl(M,O) | Collapse all code block |
| Ctrl+Shift+B | Build project |

<hr />

# Snippets
| Hotkey | Description |
| ------ | ----------- |
| prop | Snippet for Property |
| ctor | Snippet for Constructor |
| override <> | Trigger a list of parent's method |
A new Smalltalk style environment for Ruby: the beginning
Tags: ruby, vulkan, graphics, research
Published: 2020-05-13 03:15:44

The past months I embarked on a book writing project on accident; a book on low level graphics programming. It uses Vulkan though the concepts focus on graphics programming, not Vulkan specifically. I looked at all the notes I gathered the past couple years and realized I had all the material I wished I had when I started learning something new. I estimate it's about one third written, about 40,000 words or a bit over 100 pages so far, leaving out diagramming, proofing and editing. I never say anything about what I'm doing until I'm sure I'm committing to it, so I'm publicly committed to finishing it.

{% youtube W677mFJ1kcM %}

It's a slog writing a book full time. There's bursts of activity and then I have to take a break and focus my mind on something else. I've felt confident lately on my graphics programming and low level programming skills so I attempted something ambitious.

I always loved working in Smalltalk environments. The super tight integration between code, the environment, the debugger, and the editor all being one and the same is _so_ powerful. Modern tooling tries to get there and always fails because today's systems aren't designed with that integration in mind. We're frantically gluing together disparate components trying to achieve the same situation Smalltalk already had. Emacs is pretty close. A modern browser with Javascript is closer than any other major technology we've had before but will never reach the same integration as Smalltalk or even Emacs due to fundamentally how a browser works.

Working within Ruby environments exasperates the disparate component issue. Ruby as a language takes strong influences from the Smalltalk language. Like a Smalltalk environment the only definitive state of a Ruby environment is the state of the VM as it's running. Anyone who's worked with Ruby knows the normal edit file -> run in Ruby VM loop has a fundamental problem. What you write in a separate file may not be what actually runs in the VM at runtime.

So my current side project is exploring a question. Is it possible to build a Ruby environment like a Smalltalk environment?

Here's an example of about three full time days of work without knowing anything in advance about MRuby. Here I have an GUI and MRuby VM connected. Right now it's brittle and will crash easily with the right Ruby incantation. Still, this is a live MRuby VM wrapped in a GUI and the GUI is (currently partially) driven by the Ruby VM. Here you can see using the GUI modifies the state of the Ruby environment and then the GUI reflects the change back since the GUI reads the Ruby environment. Even though it's super hacked together it already feels astonishingly similar to the Squeak or Pharo Smalltalk environments.

This is becoming a really, really cool project I'm surprised nobody did yet from all my research. It's been keeping me up at night with the possibilities.

I still have a book to write though.
Vuepress and Firebase Analytics
Tags: firebase, vuepress, analytics, javascript
Published: 2020-05-13 02:27:19

---
title: Vuepress and Firebase Analytics
published: true
description: Integration of Firebase Analytics into a Vuepress website
tags: 
  - Firebase
  - Vuepress
  - Analytics
  - Javascript
---

Here is a post to describe how to integrate Firebase analytics into a Vuepress website.

Firebase analytics simplifies your analytics with only what matters, acquisition, retention, growth so you can focus on what is relevant.

Vuepress is a great tool that generates a static website based on markdown files so perfect for documentations of even blogs.

You can find more information on how to connect these two tools to get the best of each.

https://blog.liteflow.com/2020/05/11/vuepress-firebase-analytics/
Freelancers: are you using liability insurance? Which one?
Tags: discuss, help, webdev
Published: 2020-05-13 02:25:00

I noticed recently that after the Iowa caucus app fail people generally seem more worried about dangers of poor app design and the tone of these conversations makes me think immediately of lawsuits if someone hacked the app I worked on. 

Question to all the freelancers in the room: **do you have a liability insurance?** And if so, which one are you using? Is there a reason why you chose the specific one?
[AWS EKS] set Autoscaler
Tags: aws, eks, ec2
Published: 2020-05-13 02:20:25

# Deploy the autoscaler

step1

<code>kubectl apply -f https://raw.githubusercontent.com/kubernetes/autoscaler/master/cluster-autoscaler/cloudprovider/aws/examples/cluster-autoscaler-autodiscover.yaml</code>

step2

<code>kubectl -n kube-system annotate deployment.apps/cluster-autoscaler cluster-autoscaler.kubernetes.io/safe-to-evict="false"</code>

step3


set your EKS cluster name at the end of property <code>- --node-group-auto-discovery=asg:tag=k8s.io/cluster-autoscaler/enabled,k8s.io/cluster-autoscaler/<\<EKS cluster name\>></code> 

set the image version at property <code>image: asia.gcr.io/k8s-artifacts-prod/autoscaling/cluster-autoscaler:v1.18.1</code> 


### see logs 

<code>kubectl -n kube-system logs deployment.apps/cluster-autoscaler</code>

### IAM-Policy for worker-nodes Auto scaling

IAM -> policies -> Create policy

{% gist https://gist.github.com/PanupongDeve/7b7804fa592c0e9cf8f85cae0e8e085f file=auto-scaler-iam-role.json %}

attach policy in role of worker node for auto scaling
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/1ivutl0hn5r4leir5778.png)
Developing in Rust using Visual Studio Code
Tags: rust, vscode
Published: 2020-05-13 02:06:15

---
title: Developing in Rust using Visual Studio Code
published: true
description:  Developing in Rust using Visual Studio Code
tags: #rust #vscode
---

# Developing in Rust using Visual Studio Code

Two of the best features when using an IDE are auto completing and debugging. Fortunately, we can have both with VSCode.

Source of this post: http://thiago.rocks/view/20200512_vscode_with_rust

## Install Rust

Go to [rust website](https://www.rust-lang.org/tools/install) and follow the install procedure

Then use nightly channel to get the latest version of the toolchain.

```sh
# Install nightly toolchain
$ rustup toolchain install nightly

# Set nightly toolchain as default
$ rustup default nightly
```

<!-- more -->

## Install related Visual Studio Code extensions

Install those 2 extensions:

- [Rust (rls) - For auto complete](https://marketplace.visualstudio.com/items?itemName=rust-lang.rust)
- [CodeLLDB - For debugging](https://marketplace.visualstudio.com/items?itemName=vadimcn.vscode-lldb)
- [Rust analyzer](https://marketplace.visualstudio.com/items?itemName=matklad.rust-analyzer)

After installing, open a rust file in the editor and you will be asked:

`Some rust components not installed. Install it?`

Click **Yes**

## Auto completing the code

This is how auto complete looks:

![auto complete 1](https://dev-to-uploads.s3.amazonaws.com/i/b4fnsikxzf90f4yq5xdg.png)

And now with documentation

![auto complete 2](https://dev-to-uploads.s3.amazonaws.com/i/u8zfd79unlloiinpmdzq.png)

## Debugging the code

### Creating the run configuration for the project

__First__: Create a launch.json using lldb

Press `Ctrl + Shift + P` and select `Debug: Open launch.json`

Paste this content and replace hello with the name of your project

```json
{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "lldb",
      "request": "launch",
      "name": "Launch",
      "args": [],
      "program": "${workspaceFolder}/target/debug/hello",
      "windows": {
        "program": "${workspaceFolder}/target/debug/hello.exe"
      },
      "cwd": "${workspaceFolder}",
      "stopOnEntry": false,
      "sourceLanguages": [
        "rust"
      ]
    }
  ]
}
```

Now, you have to build and run with lldb debugger attached.

- To build: Press Ctrl + Shift + B
- Toggle breakpoints: F9
- To debug: Press F5

This is the debugger inspecting the content of the variable

![debug](https://dev-to-uploads.s3.amazonaws.com/i/pmg6uhzkv1wtsu9mjxih.png)

That's all. Quite simple, with a bit of tweaking.
Sharing your work experiences
Published: 2020-05-13 01:47:10

Hey devs! Quick request: if you work in a tech role in the US, please take 10 minutes to share your experiences at work in this brief survey:https://www.surveygizmo.com/s3/5351781/Kapor-Survey. As a thank you to participants, the study team will make a donation to an organization working to increase the participation of underrepresented groups in tech (Black Girls Code, Native Girls Code, TechBridge Girls, Latinas in Tech). Please share this with others to help capture as many voices as possible! Thanks in advance!
VS Code define a #region
Tags: vscode, javascript, codequality
Published: 2020-05-13 01:43:10

[just show me](#skip)

[Visual Studio Code](https://code.visualstudio.com/) is definitely one of my favourite code editors and I use it all the time. Recently I stumbled upon the `#region` keyword. Using this you are able to wrap a section of code that will be collapsed together. This makes organising code a lot easier and allows you to focus on the functionality you're writing and ignore everything else.

> [Folding Guide](https://code.visualstudio.com/docs/editor/codebasics#_folding)



### Example time

<small>I will be showing off how to do this in JavaScript, but it is available in quite a very languages. See the guide above.</small>

```js
function add(a, b) {
  return a + b
}

function minus(a, b) {
  return a - b
}

function multiply(a, b) {
  return a * b
}

function divide(a, b) {
  return a / b
}
```

Without folding, the best you can do, in terms of folding, is the following;

```js
function add(a, b) {...
}

function minus(a, b) {...
}

function multiply(a, b) {...
}

function divide(a, b) {...
}
```

<a name="skip">

Not bad but if you add appropriate jsdoc blocks the functions still take up a decent footprint. With regions, you are able to do the following;

```js
// #region Math functions
function add(a, b) {
  return a + b
}

function minus(a, b) {
  return a - b
}

function multiply(a, b) {
  return a * b
}

function divide(a, b) {
  return a / b
}
// #endregion
```

Now you are able to collapse the code at the `// #region` definition, collapsing the code down to;

```js
// #region Math functions ...
```

[Documentation](https://code.visualstudio.com/docs/editor/codebasics#_folding)

> Stay safe out there ❤️
1 month of learning to code (check-in)⌨️
Tags: codenewbie, career, frontend, javascript
Published: 2020-05-13 01:13:10

![programmer](https://dev-to-uploads.s3.amazonaws.com/i/12gutwg8eln0fsln3925.jpg)
*Photo by Max Duzij on Unsplash*

Tomorrow, May 13, I complete one month of pursuing a new career as a front-end developer. It feels like more when I think the number of things I've learned, podcasts I heard, and blogs I read.

##The path to follow

Over those 30 days, I started to build a path for myself in regards to the topics, languages and tools I wanted to incorporate in my skill set. So, which other better way to validate my experience so far, then to share my ideas with my community and ask for feedback.

Below is just a list of topics I'm currently studying or plan to tackle soon. Attention! I'm not considering frameworks as of yet, but I would appreciate opinions of when you think I should start.

**I will post at the end, some of the projects I've been working on, feel free to give feedback on those as well.**

### HTML 
- DOM
- BEM model
- Semantics
- Forms
- Accessibility (ARIA)
- Emmet
- Responsive Images
- SEO

---

### CSS
- Resetting x Normalizing
- Selectors (Pseudo / Attribute)
- Sass (Scss)
- SVG (creation and manipulation)
- Box Model
- Layout (float/ flex/ grid)
- Animation (Webkit/ transform/ transition)
- Responsive / Mobile first (Media query)
- Browser support
- CSSOM

---

### Javascript
* I'm following the book Eloquent Javascript as the base to guide my studies*
- Values, Types, and Operators
- Program Structure
- Functions
- Data Structures: Objects and Arrays
- Higher-order Functions
- Bugs and Errors
- Regular Expressions
- Modules
- Asynchronous Programming
- JavaScript and the Browser
- The Document Object Model
- Handling Events
- Drawing on Canvas
- HTTP and Forms

---

### Tools
- NPM
- GIT
- Github
- Server
- Network
- Node.js

---

[Natours Landing Page](https://diegomouradev.github.io/natour-landing-page-floats-course/)
[Fylo Landing Page](https://diegomouradev.github.io/fylo-dark-theme/)
[Four Cards Section](https://diegomouradev.github.io/four-card-feature-section-master/)
[Single Price Grid](https://diegomouradev.github.io/single-price-grid-component-master/)