teleren/devto huggingface dataset:
Chingu Cohorts Weekly 103 — Voyage-16 is coming soon!
Tags: webdev, beginners, career
Published: 2020-01-27 16:43:55

---
title: Chingu Cohorts Weekly 103 — Voyage-16 is coming soon!
published: true
description: 
tags: #webdev, #beginners, #career
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/suuc2cg1iwey39mxe4k6.jpeg
---

## News
🎉 Congratulations Voyage-14 teams and members who completed your project MVPs!

🚀 Voyage-16 is starting on February 4th!

🚀If you'd like to build a project in a software team or work on a new solo project feel free to check us out here: https://www.chingu.io/


## Shout-outs & Showcases

🔥@sophia wrote this article [4-Step Strategy to Frame Your Thought Process in a Whiteboard Coding Interview](https://dev.to/sophia_wyl/4-step-strategy-to-frame-your-thought-process-in-a-whiteboard-coding-interview-74l) that I highly recommend checking out!

🔥@evgen finished the tier-2 solo project this week. [Check it out here](https://festive-kilby-b9a71c.netlify.com/)!

🔥@shashi built this taxi service site. [You can see it here](https://taxi-service.netlify.com/)!

## Overheard in Chingu
*Random lines taken out of context from the Chingu community.*

>I am a self taught programmer, I am a native arabic speaker, and english is my 3rd language, so forgive me if I do not understand what you are asking me
I am on the road to gain an excellent understanding of HTML, CSS and vanilla javascript. Then Node.js or ruby for the backend. I will learn frameworks once I’ve got a good grasp on the basics.
Why don’t you just stop thinking about the reasons why you need to do it and just do it? XD
I had a bad early experience trying to learn code in the classroom, and developed lots of doubt and fear about pursuing it. A few years ago, I became more brave and decided to give it a try again, on my own terms. I completed the Python course on codeacademy, and felt so excited.
did you guys use React Helmet in this pre-work project?
So you’re what.. Like a small elf or something?
yey, I’m almost done with pre-work project
Making infinity-scroll as a reusable component turned out to be the best decisions ever. That thing is a beast

## Resources of the week
From @BtotheMoon:
“Some great free courses for beginners on this site (Mastering Markdown, Command Line Power User, What the Flexbox?!, Javascript30, and CSS Grid). The other courses are paid.”
https://wesbos.com/courses/


## Quote / meme to go
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/dza9nsnoz9iycp5evkyn.png)


See you next week!
Module 4 Discussion Question
Published: 2020-01-27 17:55:52

1. The following code will create an unorderd list. 
<!DOCUTYPE html> <.html> <.header></header><.title></title><.body><.p><.ul><.li> Vikings<./li> <.li> Bears<./li> <.li> Lions<./li><./ul><./p><./body><./html>

2. The following code will create an order list, in decending order.
<!DOCUTYPE html> <.html> <.header><./header><.title><./title><.body><.p><.ol reversed start= "5"><.li>Pulp Fiction<./li><.li>The Dark Night<./li> <.li> The Godfather<./li> <.li> The Godfather: Part II<./li><.li> The Shawshank Redemption <./li><./ol><./p><./body><./html>

3. A description list consists of 3 HTML elements; Details, summary and paragraph. The <.Details Open> tag will open content by default.The <.summary> tag will be the actual summary of what will be included and this is the overview the reader will see. The paragraph tag(<.p>) is where we will type the information that will be displayed when we pull down this menu.

4. The following code will create a navigation list for the respective files: 
<.!DOCUTYPE html> <.html> <.header></header><.title></title><.body><.p>
<.nav><.a href=“index.html”>Home</a> |<.a href=“faq.html”>FAQ</a> |<.a href=“contacts.html”>Contacts</a></nav></p></body></html>
Every JS Developer Should Know
Tags: javascript, programming, coding, developer
Published: 2020-01-28 05:17:59

# Basics of JavaScript

- JavaScript Objects in Detail

- JavaScript Prototype in Plain, Detailed Language

- JavaScript Variable Scope and Hoisting Explained

- Understand JavaScript Closures

- Understand JavaScript Callback (Higher-Order) Functions

- Understand JavaScript’s “this” With Clarity, and Master It

- JavaScript’s Apply, Call, and Bind Methods are Essential

- Learn HTML5, CSS3, and Responsive WebSite Design

- Object Oriented JavaScript (OOP in JavaScript)

- Learn Node.js Completely and With Confidence Or Learn Meteor.js Properly

- JavaScript Custom Events with PubSub

- Unit Testing Your JavaScript Applications is Essential

- DOM (Document Object Model) and BOM (Browser Object Model)

- ECMAScript 6 or 7

- The Best JavaScript Front-end Frameworks You Should be Using

- Preventing and Handling JavaScript Errors and Debugging Your Code

- JavaScript Design Patterns that Every JavaScript Developer Should Know




# Top 10 things serious JS Developers should know


- NodeJS

- Timing and asynchronous operations

- Accessibility

- Security

- Data Structures

- Presentation and semantics

- Knowing when to avoid bullshit
What makes you want to contribute to an open source project?
Tags: opensource
Published: 2020-01-28 16:09:08

Do you contribute to open source projects? What is it that you look for before spending time/effort in doing so? 

Collecting data which I will share here - please consider taking part if you contribute (or have thought about doing so) in open source projects.

Please find the link below

https://twitter.com/094459/status/1222187362362544129?s=20
Jess update: preparing a community.
Tags: javascript, css
Published: 2020-01-28 18:06:06

As some of you may know, I have started a new job, and so my time with Jess has been limited to a couple of hours each evening.

My focus has been preparing the main repo so that Jess could be released once it's in alpha.

Jess comprises of 3 repositories:

### The main repo 
For release artifacts and devtool chain. You probably won't clone this unless you want to develop it. But you can find cross platform binaries here for jess-cli.
{% github https://github.com/adam-cyclones/Jess %}

### lib-jess
It doesn't do much on its own but contains the source to build the rust WASM binary and Typescript bindings, this library will be consumable by a variety of clients, from the cli to the browser client (yet to write)
{% github https://github.com/adam-cyclones/lib-jess %}

### jess-cli
This is the first client for lib-jess, it should initially output is in CSS and eventually just CSS or both. Currently it doesn't ship with the lib-jess binary so it doesn't do anything yet.
{% github https://github.com/adam-cyclones/jess-cli %}

### how to prepare for community?
Welcome mats, lots of welcome mats. I have been working on the administration of the main repository, I would like to make it hospitable for developers. That includes starting to record issues in projects. At this stage, Jess is pre alpha and really needs to work and also tests need to be created in core areas before I can get an alpha release. The most crucial thing for me at the moment is to nail the readme and start generating documentation.

### Can you help?
The instructions are being put together on the main repository as we speak.
I need to put a code of conduct and contrib guidance together, after that we have the issues and plenty more where that came from, if you are interested in:
- language design
- Wasm
- rust
- the idea of typesafe CSS
- the idea of js in CSS
- vscode tooling
- documentation drafting
- writing debuggers
- other

Come over and say hi, if you don't want to contribute, feedback is always welcome too and of course more issues.
WSL2, Docker, and Time
Tags: tools, docker, linux, windows
Published: 2020-01-28 20:50:44

---
title: WSL2, Docker, and Time
published: true
date: 2020-01-23 16:42:30 UTC
tags: Tools,docker,linux,windows
canonical_url: https://chrislayers.com/2020/01/23/wsl2-docker-and-time/
---

I’m running on a Windows Insider Slow build so that I can leverage [WSL 2](https://docs.microsoft.com/en-us/windows/wsl/wsl2-index), the Windows Subsystem for Linux v 2. Its pretty incredible, because there’s now a Linux kernel inside Windows. Ubuntu is fast, its a wonderful development experience all my favorite linux tools. I can’t wait for this to be out of preview this year and in the mainstream windows releases.

I’m also using the latest version of Docker Desktop, with WSL2 support. What this means is that instead of using Hyper-V to run a Moby Linux VM,[docker runs directly on WSL2](https://docs.docker.com/docker-for-windows/wsl-tech-preview/). It also has built in Kubernetes support.

If you haven’t guessed, I’ve been doing some container development. The experience so far as been great, with [VS Code](https://code.visualstudio.com/) and the [Remote Development Extension](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.vscode-remote-extensionpack) pack. I recently ran into some issues though. Here are some examples from bug posts opened about it:

- While updating Ubuntu: E: Release file for [http://security.ubuntu.com/ubuntu/dists/bionic-security/InRelease](http://security.ubuntu.com/ubuntu/dists/bionic-security/InRelease) is not valid yet (invalid for another 14h 47min 54s). Updates for this repository will not be applied.
- Getting metadata from plugin failed with error: invalid\_grant: Invalid JWT: Token must be a short-lived token (60 minutes) and in a reasonable timeframe. Check your iat and exp values and use a clock with skew to account for clock differences between systems.
- kubectl x509 certificate has expired or is not yet valid #1152
- Az storage blob copy start failed #9995

I tried resolving the issue by syncing my time clock and restarting but I kept having issues. I figured it out today. Turns out, WSL2 has a issue (being worked on) with skewed clocks. Even though my Windows time was correct, the time in my WSL was off. It was not syncing with local system time and was probably based on the first time I powered it up.

There are a few open issues on github regarding the problem, so I know they’re aware and working on a fix.

- Time not synced in WSL2 – causing TLS issues – [https://github.com/microsoft/WSL/issues/4149](https://github.com/microsoft/WSL/issues/4149)
- system date is not same with windows (WSL 2) – [https://github.com/microsoft/WSL/issues/4245](https://github.com/microsoft/WSL/issues/4245)
- WSL2: Clock skewed? – [https://github.com/microsoft/WSL/issues/4677](https://github.com/microsoft/WSL/issues/4677)

For me i first fixed the symtom, then followed the recommendation and actually solved the problem.  
Treating the symptom:

```
sudo ntpdate pool.ntp.org
```

But the actual recommendation from the team I used is:

```
sudo hwclock -s
```

I hope this helps someone until this goes GA. Thanks for your time!
Azure DevOps Demo Generator - Signing In to Another Profile
Tags: azure, devops, productivity
Published: 2020-02-15 08:32:59

# Introduction

When trying out new things in Azure DevOps I really like using the [Azure DevOps Demo Generator][azure-devops-demo-gen] website to quickly spin up a sample environment to work with. I kept running into an issue though where I would see organisations showing up in the *Select Organization* dropdown box that were not the ones I was working with in the Azure DevOps Portal.

![Select Organization](https://dev-to-uploads.s3.amazonaws.com/i/o1akhzbq1gtexpe895y1.png)

I quicky realised this is probably related to the fact that I have multiple directories linked to the email address I log in with. It proved to be quite challenging to cleanly get signed out of and back in to the right profile, so in this blogpost I'll share the procedure that works for me.

# Procedure

1. close all browser windows and open a new browser.
2. go to [https://app.vssps.visualstudio.com/_signout](https://app.vssps.visualstudio.com/_signout)
3. once you're signed out, close all browser windows again.
4. open a new brower and go to [https://aex.dev.azure.com/me](https://aex.dev.azure.com/me) and sign in.
5. select the directory or account on the left side that contains the correct Azure Devops organisations.
6. go back to the [Azure DevOps Demo Generator][azure-devops-demo-gen] and sign in.
7. You should now see the correct organisation(s) in the dropdown.

![Azure DevOps Organizations](https://dev-to-uploads.s3.amazonaws.com/i/ogc3nckfw3cpdchotb0y.png)

[azure-devops-demo-gen]: https://azuredevopsdemogenerator.azurewebsites.net/ "Azure Devops Demo Generator"
Word of the Year: Equipoise
Tags: devadvocacy, life, 2020, fountainpen
Published: 2020-02-06 21:03:40

---
title: Word of the Year: Equipoise
published: true
date: 2020-02-01 01:39:55 UTC
tags: Dev Advocacy,Life,2020,fountain pen
canonical_url: https://heidiwaterhouse.com/2020/01/31/word-of-the-year-equipoise/
---

![Equipoise, the word, in fancy cursive with a circle around it and also little star stamps](https://heidiwaterhouse.com/wp-content/uploads/2020/01/20200130_145614_original.jpg)

When I started thinking about my word of the year, the image I kept returning to was an object at a [Lagrange point](https://en.m.wikipedia.org/wiki/Lagrangian_point). That’s one of the five places in the orbits of two celestial bodies where a smaller object is effectively balanced between the competing gravitational forces of the larger objects. It’s related to and part of the solution to the Three-Body Problem (not the book).

I want to work on balance this year, but not a static balance, not **equalibrium** , which although used as a synonym for equipoise has a connotation of being at rest. Not **homeostasis** , which is about the internal balance of a living organism. I wanted something that was abut going out and coming back and revolving and being — not unmoved, but in balanced motion, orbiting around math and using tension and glorying in the spaces between.

When I think about all the things that I care about, I don’t want to be standing still and reacting to them, and I don’t want to be sucked into their gravity well to burn up, I want to be in the taut lines of power without being torn apart.

Equipoise. It’s a good word.
User friendly servers list in New Relic
Tags: rails, performance
Published: 2020-01-31 20:08:07

---
title: User friendly servers list in New Relic
published: true
date: 2020-01-29 17:49:28 UTC
tags: rails,performance
canonical_url: https://prathamesh.tech/2020/01/29/user-friendly-servers-list-in-new-relic/
---

We use New Relic to monitor performance of our Rails app. We have multiple docker containers running our web app and Sidekiq workers.

On New Relic dashboard, the list of servers is displayed in a dropdown as follows.

<!--kg-card-begin: image-->

![](https://prathamesh.tech/content/images/2020/01/Errors---Identity---New-Relic-2020-01-29-18-52-54-1.png)

<!--kg-card-end: image-->

As you can see the names of the servers are not very intuitive. It will be better if we know which server runs what part of the application.

New Relic allows setting an environment variable `NEW_RELIC_PROCESS_HOST_DISPLAY_NAME` for this purpose. We can set this per process or container to distinguish between them in the New Relic dashboard.

We set the environment variable inside the docker container images based on whether that container served web app or ran Sidekiq workers.

The end result is this.

<!--kg-card-begin: image-->

![](https://prathamesh.tech/content/images/2020/01/Identity---New-Relic-2020-01-29-23-13-11.png)

<!--kg-card-end: image-->

This helps us in monitoring each server separately in New Relic dashboard very easily.

<!--kg-card-begin: hr-->
* * *
<!--kg-card-end: hr-->

Interested in knowing more about how we monitor and improve performance of our Rails apps? [Don't miss out the tips and tricks by joining my newsletter.](https://prathamesh.tech/mailing-list)
Open Source Creator Series, Part 3: How to Choose an Open Source License
Tags: opensource, licensing, diy, bootstrap
Published: 2020-01-29 19:53:23

This is Part 3 of our Open Source Creator Series on "How to Choose an Open Source License" to help you – the open source technology creators – understand and bootstrap some of the essential non-technical elements of building a successful project.

(See Part 1 – [Licensing Fundamentals](https://dev.to/coss-media/open-source-creator-series-part-1-licensing-fundamentals-4529); Part 2 – [Product Marketing](https://dev.to/coss-media/open-source-creator-series-part-2-product-marketing-56jn))

Below is a ~20 minute video presentation by Heather Meeker that explains how you should choose an open source license. Heather is the preeminent open source licensing expert, wrote one of the definitive books on the topic "Open Source for Business", and is a [partner](https://oss.capital/#team) at OSS Capital. (If licensing, as a topic, is completely new to you, I would recommend first watching Heather's video in Part 1 of this series on [Licensing Fundamentals](https://dev.to/coss-media/open-source-creator-series-part-1-licensing-fundamentals-4529).)

Choosing a license for your creation can be stressful, so if you are feeling that way it's completely normal. What I love about Heather's info-rich presentation, from an entrepreneur's perspective, is it breaks down this seemingly complicated choice by answering some basic questions about your project: 

- How will the software be used and delivered: on-premises, Software-as-a-Service (SaaS) or a combination of the two?
- Are you building the technology with the intention of building a business out of it? (This impacts whether you'd seek patent protection later on among other things.)
- Who are your target users? (Fortune 100? Regulated industries, e.g. healthcare, financial services? Small and medium-sized businesses?)

Having answers to these core questions, which you should have anyways regardless of the licensing decision, will make choosing the right license much easier.
 
_Please note: This presentation does not constitute legal advice and does not create an attorney-client relationship. The principles presented here may not apply to the facts of your situation._

{% youtube s7alZTsw298 %}

Resources:
- Heather Meeker's Book, "[Open Source for Business](https://heathermeeker.com/links/)"
Using HTTP proxy with Puppeteer
Tags: webdev, node
Published: 2020-01-30 03:06:01

---
title: Using HTTP proxy with Puppeteer
published: true
description: Routing Puppeteer requests through Node.js.
tags: webdev, node
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/r5xqpg9e38r33xmt11gk.png
---

I had requirement to evaluate remote JavaScript using [Headless Chrome](https://github.com/puppeteer/puppeteer), but requests had to be routed through an internal proxy and different proxies had to be used for different URLs. A convoluted requirement perhaps, but the last bit describes an important feature that Puppeteer is [lacking](https://github.com/puppeteer/puppeteer/issues/678): switching HTTP proxy for each Page/ Request.

However, it turns out that even if the feature is lacking, it is easy to implement an entirely custom HTTP request/ response handling using Puppeteer. All you need is:

1. Enable request/ response interception using [`page.setRequestInterception(true)`](https://pptr.dev/#?product=Puppeteer&version=v2.1.0&show=api-pagesetrequestinterceptionvalue).
2. Intercept request
3. Make request using Node.js
4. Return response to Chrome

This way Chrome itself never makes an outgoing HTTP request and all requests can be handled using Node.js.

The basic functionality is simple to implement:

```js
import puppeteer from 'puppeteer';
import got from 'got';
import HttpProxyAgent from 'http-proxy-agent';

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  // 1. Enable request/ response interception
  await page.setRequestInterception(true);

  // 2. Intercept request
  page.on('request', async (request) => {
    // 3. Make request using Node.js
    const response = await got(request.url(), {
      // HTTP proxy.
      agent: new HttpProxyAgent('http://127.0.0.1:3000'),
      body: request.postData(),
      headers: request.headers(),
      method: request.method(),
      retry: 0,
      throwHttpErrors: false,
    });

    // 4. Return response to Chrome
    await request.respond({
      body: response.body,
      headers: response.headers,
      status: response.statusCode,
    });
  });

  await page.goto('http://gajus.com');
})();



```

It gets a bit [trickier](https://github.com/gajus/puppeteer-proxy/blob/master/src/factories/createPageProxy.js) if you require to support HTTPS, error and cookie handling. However, as of last night, there is a package for that: [puppeteer-proxy](https://github.com/gajus/puppeteer-proxy).

`puppeteer-proxy` abstracts HTTP proxy handling for Puppeteer, including HTTPS support, error and cookie handling. Using it is simple: 

```js
import puppeteer from 'puppeteer';
import {
  createPageProxy,
} from 'puppeteer-proxy';

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  const pageProxy = createPageProxy({
    page,
  });

  await page.setRequestInterception(true);

  page.on('request', async (request) => {
    await pageProxy.proxyRequest({
      request,
      proxyUrl: 'http://127.0.0.1:3000',
    });
  });

  await page.goto('http://gajus.com');
})();

```
The challenges I face while working remotely and how I am overcoming them
Published: 2020-01-30 20:57:58

Remote work is basically the way of working but out of the usual office.

Therefore, as someone who has not been engaged in a remote work experience before, especially in software development, I came to face many challenges, learnt many lessons and broke certain breakpoints of my old coding style to a new and more professional one.

Technically, the challenges I faced are mainly:
 
  => GitHub best practices:  Prior to working remotely I used to take   standard practices GitHub workflow for  granted. However thanks to the team I am better now.
  => Pivotal Tracker: I had never used this project management tool before which makes it so challenging to get up and running while working remotely.
  => Access to the internet: One of the few challenges I’ve been facing lately include access to good internet. The Internet is a bit cheaper at our telecommunication companies and even a bit poor.

After facing all of the above-mentioned  challenges, I still kept fighting harder and harder to make it to the best that I could. I had to wake up earlier to do some warm-up coding before the stand-up hits in , have the stand-up call then keep coding full time until midnight or later (cause it was remote work I could even code overnight).
 I enjoyed the passion and courage that flew into me since the Stack Up/Roll Up program started which made me learn a lot more hard-working and gained more experience in general.
Send email in magento 2.3 and beyond
Tags: magento2, email, backend, webdev
Published: 2020-01-31 02:00:16

First you need inject class TransportBuilder default to your constructor
> \Magento\Framework\Mail\Template\TransportBuilder

<div class="highlight codewrap">
<pre class="highlight php">
<code>
            $this->_transportBuilder->setTemplateIdentifier(
                $this->_scopeConfig->getValue(
                    self::XML_PATH_ERROR_TEMPLATE,
                    \Magento\Store\Model\ScopeInterface::SCOPE_STORE
                )
            )->setTemplateOptions(
                [
                    'area' => \Magento\Backend\App\Area\FrontNameResolver::AREA_CODE,
                    'store' => \Magento\Store\Model\Store::DEFAULT_STORE_ID,
                ]
            )->setTemplateVars(
                ['warnings' => join("\n", $importWarnings)]
            )->setFrom(
                $this->_scopeConfig->getValue(
                    self::XML_PATH_ERROR_IDENTITY,
                    \Magento\Store\Model\ScopeInterface::SCOPE_STORE
                )
            )->addTo($errorRecipient);
            $transport = $this->_transportBuilder->getTransport();
            $transport->sendMessage();
</code>
</pre>
</div>