teleren/devto huggingface dataset:
Python Zero to Hero - Ep.13 - Test-driven Development
Tags: python, beginners, tutorial, testing
Published: 2020-06-29 23:02:02

---
title: Python Zero to Hero - Ep.13 - Test-driven Development
published: true
description: This week, we go through topics around test-driven development (TDD), followed by a live demo of developing a Python program with TDD.
tags: python, beginner, tutorial, testing
---
This week, we go through topics around test-driven development (TDD), followed by a live demo of developing a Python program with TDD. If you have any questions or any suggestions about which Python topics to cover, please leave your comment at my [Twitch channel](https://www.twitch.tv/cheukting_ho)

You can get the slide deck [here](https://slides.com/cheukting_ho) and the example code and homework form [GitHub here](https://github.com/Cheukting/python02hero). Ask questions at my [Twitch channel](https://www.twitch.tv/cheukting_ho)
Day 164: More or Less
Tags: hiphop, code, coding, lifelongdev
Published: 2020-06-29 22:42:40

_liner notes_:
- Saturday : Another Saturday, another radio show, another great time! I also spent some time cleaning out my van. Wanted to make sure I went through because I noticed some orange dust that probably came from installing the windows and don't need for the van to be already rusting. Found this bottle with mineral spirits and some other ingredients from an previous car I drove and it took off the orange marks. Thank goodness! While in the van, I did a rough measurement for window coverings and checking to see how I'll attach the framing to the van. Then did the radio show. You can check out the recording of the show at https://kNOwBETTERHIPHOP.com

![Radio show episode image of a mural painted of Elijah McClain who was murdered by Colorado police with the words June 27th 2020, 9636](https://dev-to-uploads.s3.amazonaws.com/i/iulzzw1um7n6ext373fl.jpg)

- Sunday : Mowed my lawn. Ordered some stuff from Amazon for the van. Did some more set up for the dashboard of my new side project. Got the post show promo work done. Watched "NOS4A2". Finished watching "Parasyte", pretty good anime. Oh and I think I found out a way to more or less get the frame to expand to connect to the walls of my van. I had been thinking about it in the back of my brain and a solution came to me in a dream. haha Going to see if I have the parts lying around the house to test it out.

- Professional : On Friday, I asked for some feedback and input from the Web Components team. Implemented them today. Also started looking at one or our products to get more familiar with it. It allows a user to send messages via different apps like WhatsApp, Facebook Messenger, and others. So I downloaded WhatsApp to my phone and it wouldn't let me send a message without granting it access to my Contacts. Nope! Installed it to my Chromebook that doesn't have contacts and did a little research on our product.

- Personal : Yesterday, I uploaded a new t-shirt design and ordered a sample. I think it came out pretty good. Showed it to a friend and they also liked it.

![A field with a stone path in Piopio, New Zealand](https://dev-to-uploads.s3.amazonaws.com/i/wm71r33c3rxjv19067mm.png)

Going to continue working on the dashboard for my side project. I want to get the authentication and authorization worked out. Shouldn't be too bad since I'm using Firebase.

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube mBqHGEc9OE8 %}
Which language do I choose?
Tags: beginners
Published: 2020-06-29 22:36:40

You've never read a post this convincing. 

June last year I was an undergrad that wanted to learn to code. I didn't know anything about coding other than the whole world is currently run by computers, being able to make computers do whatever you want is a superpower that's borderline omnipotence(If you manipulate computers you manipulate reality as we know it) and I wanted to have a piece of that power.

Let's face it, a lot of successful programmers were at this point once - not power hungry, that was just me - they wanted to code but they didn't know a lot about coding.

I had a hard time picking a language at the time but eventually I chose to learn Python because my friend, a data scientist, gave me a book on Python, its syntax was almost as simple as regular human language and YouTube videos told me python can do anything(one language to rule them all).

Now no offense to Guido Van Rossum but there was a flaw in my decision-making process. This flaw is in the decision making process of many beginners that are in that endless loop of choosing a language and I hope to correct it in the next few paragraphs.

Now wanting to code is awesome but you know what's more awesome? Wanting to go into a certain field in programming!

You see, there are MANY fields in programming, each of these fields has preferred languages and if you decide to go into one field, all you'll have to do is use the languages associated with that field. If you decided to go into a particular field, you immediately narrow your options down from over 500 languages to a handful. For example, deciding to become a native android developer trims your options down to Java or Kotlin(there are a few others too but they aren't the official android development languages as certified by google) and deciding to be a front end web developer means you have to learn HTML, CSS and JavaScript.

As a code newbie, it's important to want more than just to be a coder and have a particular field at the back of your mind to dive into. That way you limit your options to just a few where you either have to learn all or pick one based on something as trivial as the number of views your tutorial video of choice has.

Moral of the story: If you want to get out of that endless loop of wanting to pick a language, pick a field instead and you'll go with the languages required to work in that field.


EXTRA NUGGET:
Choosing a field to specialize in narrows your choice down to a few options but in a field like back end development where Python, PHP, JavaScript and others are equally acceptable, how do you pick a language??

Stay tuned to this blog, like this post, share your thoughts on the comment section and I'll answer that question in my next post
Acil
Tags: javascript, opensource, github
Published: 2020-06-29 22:35:41

---
title: Acil
published: true
description: Error e-mails in your Node Js applications
tags: javascript,opensource,github
//cover_image: https://direct_url_to_image.jpg
---

Maybe many nodejs applications will work, but you may want to hear from errors.

All you have to do is use `acil`.

for example you have a nodejs application:

```JS
import express from 'express';
const app = express();

app.get('/', (req, res) => {

  hello // <-- this error send email

  res.send('Hello World!')
})

app.listen(3000)

```

Let's add the package now.


    yarn add acil @babel/node @babel/core @babel/preset-env --dev

and add start script.

```JSON
"scripts": {
  "start": "acil server.js" // <-- your server application file
}
```

Take a look at the following `acil.json` example:

```JSON
{
  "admins": ["yasaricli@gmail.com"],
  "from": "Company <no-reply@company.com>",
  "sendGridApiKey": "SG.XXX"
}
```

and let's start.

    yarn start

It's that simple.

https://github.com/tsepeti/acil
LIVE // AirSend's Latest Improvements
Tags: android, ios, saas, management
Published: 2020-06-29 22:33:26

We hope you are doing well and staying safe! Here are some big improvements to AirSend we’ve made recently. To see more, visit www.airsend.io

**Public Channel Permissions**

You can now set permissions for members of your Public Channels to five different channel access levels. The five levels of access are as follows:

* Viewer - Can read messages and Wiki and download files.
* Collaborator - All of the above. And can post messages and read actions.
* Full Collaborator - All of the above. And can edit Wiki and upload files.
* Manager - All of the above. And can manage users.
* Admin - Has access to all channel functionalities.

**Multiple File Selection**

Whether you are selecting files to send as attachments via chat or you’re uploading files to the files section, you can now select multiple files to attach or upload for greater speed and convenience. 

**Convenient Slash Commands**

You can now enjoy preformatted messages and additional channel capabilities for faster communication by using AirSend's newly added slash commands.

Some preformatted messages include: /inspire (sends an inspirational message to the channel) and /me (your message looks as if it were sent by the Channel)

Some additional channel capabilities include: /transfer_ownership @ (transfers ownership of the channel to whoever you specify) and /kick @ (kicks a user out of a channel)

**1x1 Direct Messaging**

If you need to have a private, one-on-one conversation with someone, you can now direct message them with a click of a button. This will create a new Channel that contains just you and that person. 

**Easy Access to App Download Links**

If you haven’t already downloaded AirSend’s desktop and mobile apps, you can now easily do so by clicking on your name in the upper left-hand corner and selecting the appropriate apps link in the profile dropdown menu.

**Android Dark Mode**

Android users can now enjoy dark mode in the AirSend Android apps. For our full report on all of the latest AirSend Android updates, visit our blog at www.airsend.io/blog

**iOS Markdown Support**

Markdown is now fully supported in AirSend’s iOS app, allowing for easy message formatting.

**What's Next?**

While we are proud of the progress we’ve made, our journey is far from over.

You can stay updated by checking out our blog, and if you haven't signed up for AirSend yet - sign up now for free access to AirSend Pro and its great features like easy messaging, secure file storage and sharing, and more.

Our Blog: www.airsend.io/blog
Sign up: www.live.airsend.io/signup
Node-RED from the basics to beyond in June 
Tags: opensource, node, javascript, nodered
Published: 2020-06-29 22:32:21

In the month of June my colleague John Walicki [(@johnwalicki)](https://twitter.com/johnwalicki) and I decided to do a series on [Node-RED](https://nodered.org/). This series showed users how to work with Node-RED on [IBM Cloud](https://cloud.ibm.com/registration) to create event-driven applications .  In part one of this series John and I go over [Node-RED essentials](https://www.youtube.com/playlist?list=PLyNBB9VCLmo1hyO-4fIZ08gqFcXBkHy-6) and we build a text analyzer application using Watson APIs . In part two we go over building UI dashboards with Node-RED and finally in part three we take all the concepts from part 1 and 2 to build an interactive end to end application.   

**If you missed our series check out these resources and the replay to each event :** 


## Part 1 : Node-RED Essentials  
![](https://paper-attachments.dropbox.com/s_9105DEDC0CFCA37E4DE32D2DCD263988E2A39584CD4EB607C4A5577C83CD5C0C_1593466995014_Screen+Shot+2020-06-29+at+5.11.11+PM.png)


**Check out the full replay of event here :** https://www.crowdcast.io/e/node-red-series

**Slides for event :** https://slides.com/poojamistry/node-red-series1

**Workshop :** https://github.com/pmmistry/Node-RED-Series/blob/master/Labs/lab_1.md


## Part 2 : Node-RED Dashboard and UI Techniques 
![](https://paper-attachments.dropbox.com/s_9105DEDC0CFCA37E4DE32D2DCD263988E2A39584CD4EB607C4A5577C83CD5C0C_1593467911789_Screen+Shot+2020-06-29+at+5.51.03+PM.png)


**Check out the full replay of event here :** https://www.crowdcast.io/e/node-red-series-2

**Slides for event :** https://slides.com/poojamistry/node-red-part-2

**Workshop :** https://github.com/pmmistry/Node-RED-Series/blob/master/Labs/lab_2.md


## Part 3 : Node-RED End to End 
![](https://paper-attachments.dropbox.com/s_9105DEDC0CFCA37E4DE32D2DCD263988E2A39584CD4EB607C4A5577C83CD5C0C_1593468623686_Screen+Shot+2020-06-29+at+5.22.52+PM.png)

![](https://paper-attachments.dropbox.com/s_9105DEDC0CFCA37E4DE32D2DCD263988E2A39584CD4EB607C4A5577C83CD5C0C_1593468638269_Screen+Shot+2020-06-29+at+5.25.16+PM.png)


**Check out the full replay of event here :** https://www.crowdcast.io/e/node-red-series-3

**Slides for event :** https://slides.com/poojamistry/node-red-series-part-3

**Workshop :** https://github.com/pmmistry/Node-RED-Series/blob/master/Labs/lab_3.md

I hope this blog helps you as you begin your Node-RED Journey ! [Register for IBM Cloud](https://cloud.ibm.com/registration?target=%2Fcatalog) to get started with Node-RED on IBM Cloud! Make sure you check out [IBM Developer](https://developer.ibm.com/) for more resources, tutorials, blogs, code patterns and content in the Node-RED Space! 

Give me a follow if you like this post, or follow me on Twitter [@poojamakes](https://twitter.com/poojamakes) to see what other webinar series I will be teaching next!  🙂
NPM Link Internals
Tags: typescript, javascript, library
Published: 2020-06-29 22:24:02

If we read the [npm link documentation](https://docs.npmjs.com/cli/link). We may not fully understand what it's saying. 

*npm link* allows us to develop a library while using it's contents immediately in a consumer application.  We are bypassing *npm publish* and *npm install*.

**npm link**

*npm link* is done in the library dist folder being developed as an *npm package*.  

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/48wuswlj9lg8xmiss24s.png)

Afterward, the relationship is shown in the output window.
```
C:\Users\CurrentUser\AppData\Roaming\npm\node_modules\mslcc -> 
    D:\OtherFolder\Web\UI\CommonComponents\dist\msl
```
 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/n27a18reeuk0hrqekba4.png)

If we then go to the consumer side and type in *npm link linkname* we see this.. 

```
PS D:\Source\Workspace> npm link mslcc
 
D:\Source\Workspace\node_modules\mslcc -> 
C:\Users\UserName\AppData\Roaming\npm\node_modules\mslcc -> 
D:\Source\Main\Web\UI\CommonComponents\dist\msl
```
It linked the workspace node_modules\mslcc from the global cache of same name which originated from our library!

**Import into local app.module.ts**

Over on the consumer side...

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/atmmizqb5pffmmvajcwm.png)

We learned a new trick here, by simply using node_modules instead of the full path to that folder, we found that Typescript knew to progress upwards in the folders until it found the first node_modules folder! Cool didn't know that. 

**Advantages**

We bypass *npm publish* and *npm install*. We can change our library, save and compile. The consumer application picks up the changes instantly.

JWP 2020 NPM Link and it's use in Libraries
Playing with CSS clip-path polygon()
Tags: css
Published: 2020-06-29 22:12:31

While reviewing material to take the Comptia Network+ and Security+ exams, I saw the TCP/IP and OSI network models side by side. Distractible as I am, I immediately thought this might be a good time to play with CSS clip-paths.

{% codepen https://codepen.io/mattymaloney/pen/KKVXBEE default-tab=css,result %}

For more information on multi-shape clip-paths, see https://24ways.org/2018/clip-paths-know-no-bounds/.

I think I can make improvements to the invisible polygons I chose for "move to next shape". However, after experimenting with what I thought were ideal invisible shapes designed to move to the starting point of the next polygon, I realized that it doesn't seem to matter what coordinates I choose for the invisible polygons. I'm confused about that. Please leave a comment if you can help me understand this.
How to design an iOS style switch
Published: 2020-06-29 22:11:27

First seen in 2007 when the first iphone came out, those nifty iOS switches that are used until today are undeniably nice and modern looking. Having them in your web app or mobile app can add a nice UI experience and give it a touch of modernity. 

Let's see how we can go about designing them with a little bit of css code and 3 html elements only.

We'll start by adding a label element, with an input and an i element. 

HTML
```HTML
<label class="ios-switch">
<input type="checkbox">
<i></i>
</label>
```

Now the CSS

We'll start with the label container first
```CSS
.form-switch {
    display: inline-block;
    cursor: pointer;
}
```
We need to hide the input element as we don't want to see it as a classic checkbox element.
```CSS
.form-switch input {
    display: none;
}
```
Then we style the i tag inside. We'll set the dimensions of the button, with some margin and transition effects. We also want the background to be off-white.
```CSS
.form-switch i {
    position: relative;
    display: inline-block;
    margin-right: 0.5rem;
    width: 46px;
    height: 26px;
    background-color: #e6e6e6;
    border-radius: 23px;
    vertical-align: text-bottom;
    transition: all 0.3s;
}
```
We'll also need to add a pseudo-element ::before. When the switch is turned off (default) it has a white background.
```CSS
.form-switch i::before {
    content: "";
    position: absolute;
    left: 0;
    width: 42px;
    height: 22px;
    background-color: #fff;
    border-radius: 11px;
    transform: translate3d(2px, 2px, 0) scale3d(1, 1, 1);
    transition: all 0.3;
}
```
The ::after pseudo-element will create the round switch "handle". 
```CSS
.form-switch i::after {
    content: "";
    position: absolute;
    left: 0;
    width: 22px;
    height: 22px;
    background-color: #fff;
    border-radius: 11px;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.24);
    transform: translate3d(2px, 2px, 0);
    transition: all 0.2s ease-in-out;
}
```
Here we will set the width of the switch when it is activated, with some 3d transforms
```CSS
.form-switch:active i::after {
    width: 28px;
    transform: translate3d(2px, 2px, 0);
}
.form-switch:active input:checked + i::after {
    transform: translate3d(16px, 2px, 0);
}
```
Then we'll add the background color of the switch when it is turned on
```CSS
.form-switch input:checked + i {
    background-color: #5bda4e;
}
```
Finally we'll set the pseudo-elements for the i tag when we turn on the switch so it gives an effect of opening up like the iPhone does.
```CSS
.form-switch input:checked + i::before {
    transform: translate3d(18px, 2px, 0) scale3d(0, 0, 0);
}
.form-switch input:checked + i::after {
    transform: translate3d(22px, 2px, 0);
}
```

That's it, you can use the code as you want and add it to your website or app. A cool idea would be to convert it into a react component. Enjoy!

My App (where is used the switch): https://flexrweb.com/octacore

The Github repo: https://github.com/urielbitton/octacore
Getting started with PWA Studio Extensibility
Published: 2020-08-10 15:01:40

---
title: Getting started with PWA Studio Extensibility
published: true
date: 2020-06-29 22:00:00 UTC
tags: 
canonical_url: https://larsroettig.dev/getting-started-with-pwa-studio-extensibility
---

The 7.0 release improves on the extensibility framework. I want to prove if we can already build a real PWA extension or where we run in limitation. This blogpost contains two parts. The first part is about the technical strategies behind the Extensibility Apis. In the second part, we will write a small extension.

## Technical strategies
The new extensibility Apis allows extending Build pack, Peregrine, and Venia UI library components. The main goal is developers can make changes in storefront projects or standalone extensions without duplicating or maintaining the PWA-Studio code. The PageBuilder is integrated via targets. It is the first Magento Content plugin. Also, it is an excellent example of your plugins. For replacing or extend already existing ui components, we need a workaround currently. Replacing a part can be dangerous. It is not a compound change, so if two extensions both want to replace the same file, it can lead to errors. Currently, the Core Team doesn't want to support a fallback structure by default. From my perspective, we need a way how a plugin can register its new components to already existing ui components. PWA Studio packages should declare which of their ui-components are safe to replace and make them replaceable. A reliable replacement strategy will help that vendors can build Standalone Marketplace Extensions.

### Venia UI extension points
Currently, it is allowed to add new routes or create a new richContentRenderers to create new blog plugin based on CMS like NEOS. The richContentRenderers are used to integrate the Magento Page Builder Plugin in PWA Studio.

Dokumentation Link: https://github.com/magento/pwa-studio/blob/release/7.0/packages/venia-ui/lib/targets/venia-ui-declare.js

### Peregrine extension points
We can now wrap any individual Peregrine talons when Peregrine talons are invoked, and/or to modify the behavior and output of those talons. Like the around plugin concept knowen as interceptor pattern of Magento.

```
targets.of('@magento/peregrine').talons.tap(talons => {
    talons.App.useApp.wrapWith('./log-wrapper');
})
```

**log-wrapper.js**

```
export default function wrapUseApp(original) {
    return function useApp(...args) {
        console.log('calling useApp with', ...args);
        return original(...args);
    }
}
```

### Build pack extension points
These extension points are based on the Webpack Compiler Hooks. This the Webpack API is very well documented and often used to build plugins.

Dokumentation Link: https://github.com/magento/pwa-studio/blob/release/7.0/packages/peregrine/lib/targets/peregrine-declare.js

This post contains interactive elements that are cannot be displayed on dev.to view it: https://larsroettig.dev/getting-started-with-pwa-studio-extensibility/
Cross post to dev.to from Webflow or Google Docs - How to handle formatting?
Tags: discuss, meta
Published: 2020-06-29 21:15:34

Hey folks! 

I really would like to share my work with the dev.to community because I think I can solve a problem someone has here or there ;) 

However, after quite some research, I'm kind of stuck with how to painlessly cross post my articles to dev.to.

I host my developer blog on webflow and write my stuff in Google Docs.

Don't get me wrong, I love markdown, but that's not my flow as of now.

Things I've tried and/or thought of:

## RSS importer

The RSS importer does not work properly (just article snippets and formatting wrong).

## Copy Pasta

From the Gdocs and the webflow editors I can flawlessly copy-paste to Medium(🍵). But on dev.to the RTF stuff is kindly ignored, which leaves me with an unbearable task of editing the format, the links, the pictures...

## Post a short summary of the post with the link

😒

## Highly Automated Pipeline

1. Write everything in markdown in VSCode checked by the VSCode Grammarly plugin. 
2. Push to GitHub
3. GitHub action picks it up and sends it to Webflow/dev.to API (I wouldn't be able to post to Medium then without problems, but I can actually live without Medium TBH)

However, there are many wonderous questions:

- How well will the platforms handle the markdown body? 
- How to handle the pain of having to pre-upload all pictures?
- How do I handle updating the posts? (different GitHub actions with different requests?)
- etc etc

## Scraping

I mean, the HTML is up there: [fullstack.coach](https://fullstack.coach/content-hub)...

Maybe then... 

1. Scrape it
2. Push it through a markdown parser 
3. Send it to dev.to

(but again all the questions from the previous section... and probably even more...)

_____

Before I throw myself into **highly automated pipelines** or _scraping_, which both sound like fun and time consumption: 

Am I overthinking or is there maybe a better path that I am missing?