teleren/devto huggingface dataset:
Talking about Programming is Tough!
Tags: podcast, javascript, beginners, webdev
Published: 2019-08-19 14:23:14

---
title: Talking about Programming is Tough!
published: true
cover_image: "https://techjr.s3.amazonaws.com/images/techjrsite.png"
description: One of the hardest parts of programming is learning the basics. What are variables, functions, and recursion? Lee and Eddie attempt to tackle the basics in a way anyone can understand.
tags: podcast, javascript, beginners, webdev
---

I remember back to when I was learning programming for the first time. I thought every variable should be x, y, or z, tried to do everything without functions, and the concept of recursion melted my face off. (Honestly merge sort still melts my face off 🤯)

So for this episode we tried to explain all the concepts we could think of starting off with variables and work our way up in complexity. We don't nail each thing 100% but I think we did OK!

(You can find show notes for this episode on our [page](https://techjr.dev/episodes/2019/let-s-explain-programming-jargon).)

{% podcast https://dev.to/techjrpodcast/let-s-explain-programming-jargon %}

*If you like this episode or would like to ask a question, let us know at techjrpodcast@gmail.com or by commenting below.*

*If you like the show, please [subscribe](https://tinyletter.com/leewarrick)!*
Oops, I'm Making A Framework
Tags: beginners, help, discuss
Published: 2019-08-19 14:02:41

In a [previous post](https://dev.to/deciduously/towards-complexity-341i), I discussed a project I'm working on to level up the complexity present in my portfolio.  After a few days of deliberation and prototyping I have decided to implement this application in Rust, rendering to an HTML5 canvas via WebAssembly.

I got a prototype working with some clickable buttons using a [previous experiment](https://github.com/deciduously/dots) as an example, but it was brittle.  Every individual region had its own separate detection and handling logic - a mess to tweak or modify.  I decided I wanted a better abstraction over the canvas before going any further, for blood pressure purposes.

Fast forward another two days, and I've essentially outlined a UI framework.  I've decoupled the rendering from the game logic to the point where it could be separated out into its own external standalone library.   It provides a set of traits you can implement for your game's types which fully handle creating the canvas element, mounting your app to it, and handling clicks.  All you need to do is plug in the drawable widgets and it organizes your layout for you.

How does this not always happen?  Or, rather, *does* this always happen?  Does any sufficiently large project end up with its own highly decoupled bits of logic like this?  Does the fact that I'm writing one from scratch mean I should be using a "real" framework instead?  For this project I don't care, it's specifically an educational experience so I don't mind the extra labor, but would this sort of thing be a flag for you in a "real" project?  How much of this would you let yourself implement from scratch before exploring the ecosystem?  The extra control is nice, but it's time consuming, and this problem can be crowd-sourced.

Additionally, if you've found yourself with a DIY framework in the course of writing an application, what drives you to decide whether or not to actually separate and generalize it for public consumption?  I don't know if the world needs another homebrew canvas UI framework, but if I've gone and written one anyway, maybe it's worthwhile to throw it out there.  That said, it's also a whole other set of time-consuming tasks unrelated to this project.

*Photo by Chris Abney on Unsplash*
Recording Browser Interactions And Generating Test Scripts
Tags: testing, playback, record, javascript
Published: 2019-08-19 13:51:20

# softest

The softest is a test tool for recording browser interactions and generating test scripts, simple and practical. It allows you to get test scripts without writing code.

[![Watch the video](https://raw.githubusercontent.com/prprprus/picture/master/softest2.png)](https://vimeo.com/354273223)

Github: https://github.com/prprprus/softest

Your help and contribution are very valuable, please Star ⭐, Fork, submit Issue or PR, thanks! 😁😘🎁🎉

## Why

When I needed a tool that could record browser interactions and generate corresponding scripts, I found [puppeteer-recorder](https://github.com/checkly/puppeteer-recorder) and [Selenium IDE](https://www.seleniumhq.org/selenium-ide/), of course, they are excellent projects. But I found that they can't support multi-tab recording, screenshots, etc., and Selenium IDE always gives an error when playing a script, so I made this wheel.

## Features

- Single tab recording
- Multiple tab recording
- Screenshot
- Generating test script
- Play the script
- Download test report (contains screenshots and test script)

## Installation

```
$ npm i -g softest
```

## Usage

Add environment variables to facilitate running commands:

```
$ export PATH=$PATH:$HOME/.npm-global/bin
```

To run the `softest` command, you need to specify the directory where the Chromium and the directory where the test report is saved:

```
$ soft -c PATH_CHROMIUM -r PATH_REPORT
```

> If you don't know where the Chromium is, you can start Chromium and type `chrome://version/` in the address bar to find the location of its executable.

If you see an output similar to the following, congratulations 🎉🎉🎉👏

```
 _______  _______  _______  _______  _______  _______  _______
|       ||       ||       ||       ||       ||       ||       |     status: running
|  _____||   _   ||    ___||_     _||    ___||  _____||_     _|     host: 127.0.0.1
| |_____ |  | |  ||   |___   |   |  |   |___ | |_____   |   |       port: 2333
|_____  ||  |_|  ||    ___|  |   |  |    ___||_____  |  |   |
 _____| ||       ||   |      |   |  |   |___  _____| |  |   |
|_______||_______||___|      |___|  |_______||_______|  |___|

🎉 Running WebSocket server successfully

🎉 Running HTTP server successfully
```

Open a browser, type `host` and `port`, you will see the following web interface:

![](https://raw.githubusercontent.com/prprprus/picture/master/softest1.png)
Open source CRM project (VueJS, Symfony)
Tags: symfony, vue
Published: 2019-08-19 13:48:45

Hey guys!

We're working on open source CRM project. Maybe it will be interesting to someone.
Client part has done with #vuejs, #vuetify, #vuex and API created with #symfony and #api-platform

API: https://github.com/inshopgroup/inshop-crm-api
Client: https://github.com/inshopgroup/inshop-crm-client

Demo: https://demo.inshopcrm.com/signin

It can be used as a standalone product, or as a core for new projects. 
CRM has a lot of functionality, like JWT authorization, user management and roles restrictions and many others.

We'll be happy to answer any questions and discuss new functionality.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/wa13673wdnou74x1jdvv.png)
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/hhokor4639tyoxblk368.png)
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/3wh3tkaacydv9e1e92u1.png)
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/q6nmx51d4oqtt65h5p4w.png)
Daily Challenge #44 - Mexican Wave
Tags: challenge
Published: 2019-08-19 13:47:32

---
title: Daily Challenge #44 - Mexican Wave
published: true
series: Daily Challenge
description: Write a function that makes a string do the Mexican Wave.
tags: challenge
---
The wave (known as the Mexican wave in the English-speaking world outside North America) is an example of metachronal rhythm typically achieved in a packed stadium. Spectators will start a cheer in one corner and then roll it around the arena, with each section rising from its seat as it yells.

Today's challenge is to write a function that turns a string into a Mexican Wave. You will be passed a string and you must return that string in an array where an uppercase letter is a person standing up. The input string will always start lower-case. If the character in the string is whitespace then pass over it.

__Ex.__
wave("hello") => []string{"Hello", "hEllo", "heLlo", "helLo", "hellO"}

***
_This [challenge](https://codewars.com/kata/58558673b6b0e5a16b000028) comes from user adrian.eyre on CodeWars. Thank you to [CodeWars](<https://codewars.com/>), who has licensed redistribution of this challenge under the [2-Clause BSD License](<https://opensource.org/licenses/BSD-2-Clause>)!_

_Want to propose a challenge for a future post? Email **[yo+challenge@dev.to](yo+challenge@dev.to)** with your suggestions!_
Generating Random text in Django Template
Tags: django
Published: 2019-08-19 07:17:56

**Demo: [https://www.djangotemplatefiddle.com/f/wV5xSd/](https://www.djangotemplatefiddle.com/f/wV5xSd/)**

We can generate random text in Django templates. This is used to fill the sample data.

Django provides inbuilt template tag `{% lorem %}` for this.

To generate one paragraph with lorem ipsum text, use the above tag as it 
is.

```python
<!-- Lorem ipsum paramgraph -->
{% lorem %}
```

**Output:**

```html
<!-- Lorem ipsum paramgraph -->
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
```


To generate let's say 2 paragraphs with random text, use tag with parameters.

```python
<!-- random text paragraph -->
{% lorem 2 b %}
```

**Output:**
```html
<!-- random text paragraph -->
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Deserunt quisquam dolores minus tempore aperiam itaque minima maxime, atque aperiam libero recusandae quod aliquid sed quo a deserunt, a at rem? Incidunt aut quibusdam est distinctio amet nemo, beatae dolorum fugit corporis recusandae dolorem praesentium vel obcaecati consectetur, voluptas quisquam a neque atque debitis, tenetur eaque nostrum ex?
```


To generate a few random words, use the tag with below parameters:

```python
<!-- random words of length 10 -->
{% lorem 10 w random %}
```

**Output:**
```html
<!-- random words of length 10 -->
autem veritatis quisquam optio quibusdam non qui assumenda dolores alias
```

You can see (and experiment) the demo here: [https://www.djangotemplatefiddle.com/f/wV5xSd/](https://www.djangotemplatefiddle.com/f/wV5xSd/)
The Building an Indie Business Podcast- Launched alertsforbtc.com on Product Hunt
Tags: podcast, startup, beginners
Published: 2019-08-19 13:44:13

In this episode I discuss why I launched on Product Hunt, What I learned about launching on the platform, and how it went. 

[Episode Page](https://baib-podcast.com)
[Revenue Research](https://revenueresearch.co/)

https://overcast.fm/+RG5hADtWc
VS Code extension that lets you open the MDN docs of a CSS property
Tags: showdev, css, beginners, vscode
Published: 2019-08-19 13:36:04

This post was originally published on [my blog](https://dzhavat.github.io/2019/08/19/vs-code-extension-that-lets-you-open-the-mdn-docs-of-a-css-property.html).

---

**Update**: As of [v1.38](https://code.visualstudio.com/updates/v1_38#_mdn-reference-for-html-and-css), VS Code supports the functionality provided by this extension natively as well! I’m quite happy about it because I didn’t know they were going to implement something similar. And what’s even better is that they also show a link to MDN for HTML elements! Now go and update to the latest version of VS Code. It’s worth it!

---

After releasing [my first VS Code extension](https://dev.to/dzhavat/showdev-vs-code-extension-that-shows-the-initial-value-of-a-css-property-3c9k) last week, I got an idea for another one. This one lets you open the MDN docs of a CSS property. Quite simple! The link appears on hover.

The extension is conveniently called [CSS to MDN](https://marketplace.visualstudio.com/items?itemName=dzhavat.css-to-mdn).

Here’s a demo:

![Demo](https://thepracticaldev.s3.amazonaws.com/i/ushkj9qa74ls3z6k8x5z.gif)

Before making the extension, if I wanted to open the docs of `background-size`, for example, I’d switch to a browser, open a new tab, search for something like “mdn bkg size”, then click on the first result.

With this extension I don’t have to go through these steps. I can simply hover a property and click on the link. Nice, isn’t it? 😉

If you work with CSS, please give it a try. I hope you find it useful.
Boilerplate for Vue.js component on TypeScript
Tags: typescript, vue, javascript, webdev
Published: 2019-08-19 13:24:13

Hi, devs! This post might be interesting to frontend folks, especially to people who are dealing with Vue.js. The title is pretty much self-explanatory, I'd like to share the starter for Vue.js component project I've created recently.

It's packed with tools like:

* `Sass` for styling
* `Jest` for unit-testing
* `ESLint` for linting
* `Rollup` for building
* `Storybook` for presenting visual components

So, if TypeScript and Vue.js are your things feel free to clone/fork/contribute!

Link to the GitHub repo:

{% github room-js/typescript-vue-component-boilerplate %}
How to use multi-stage Docker builds
Tags: docker, devops, containers, images
Published: 2019-08-19 13:21:21

---
title: How to use multi-stage Docker builds
published: true
description: Introduction to multi-stage docker builds and a working example using symfony & composer.
tags: docker, devops, containers, images
cover_image: https://miro.medium.com/max/1400/0*0kYzCMqZiJ4mYwWR
---

This post was first published on the Ministry of Justice Digital & Technology [technical blog](https://medium.com/just-tech) on July 26th 2019.

Docker has revolutionized the way software engineers build applications, small maintainable pieces of software that can be easily scaled to meet demand. But with new technology, there are now more things to take into consideration. One such issue that arose with Docker is image size. Traditionally to get an efficient docker image you would use some complex shell commands within the Dockerfile to keep the layers as small as possible.

In `Docker 17.05` multi-stage builds were introduced and this means we can now make docker images even smaller, below I'm going to go over an example of how to do this with a Symfony app and composer.

With multi-stage builds, you can use multiple `FROM` commands within a single `Dockerfile`. Each `FROM` command can use a different base and symbolises a new stage in the build. The most useful thing is that you can selectively copy artifacts from one stage to another leaving everything that you don't need behind.

So let's create a new `Dockerfile` and add our first `FROM` command. This will be using composer as a base image so we can get all of our composer dependencies. We can also name the different stages within the build by adding `AS <NAME>` to the `FROM` command.

```
FROM composer AS composer

```

Now let's copy over our `composer.json`, `composer.lock`. We're also going to add a `RUN` command which will run a composer install.

```
FROM composer AS composer

COPY composer.json /app
COPY composer.lock /app

RUN composer install

```

So the first part of our multi-stage build is done, this will allow us to install our composer dependencies into the first image and then copy them across into the final image.

Next, we need to build our final stage:

```
FROM php:7-fpm-alpine

WORKDIR /var/www

COPY ./ /app
COPY --from=composer /app/vendor /app/vendor

```

By using `FROM php:7-fpm-alpine` we start a new build using `php:7-fpm-alpine` as the base image, we then use `COPY --from=composer` to copy over the `vendor` folder into our new image. We leave all the composer gubbins behind, and it's not saved into our final Image.

Full `Dockerfile`:


```
FROM composer AS composer

COPY composer.json /app
COPY composer.lock /app

RUN composer install

FROM php:7-fpm-alpine

WORKDIR /var/www

COPY ./ /app
COPY --from=composer /app/vendor /app/vendor

```

You only need a single Dockerfile. Just run `docker build` and docker the build process will start.

The end result of using multi-stage builds is a slim production-ready image without any complexity. I hope you can see the benefits of using multi-stage builds and I would definitely encourage you to try them out.
React: Stateful vs Stateless Components
Tags: react, javascript
Published: 2019-08-19 13:14:31

React is a powerful tool that, in the right hands, can create some amazing single page applications.  A lot of this power comes from its use of stateful and stateless components.  What are components? They are the “building blocks” of any app created using the React framework and are built like one would make a javascript class or function that optionally takes in properties (props) as an input.  It works using ES6 inheritance to create stateless and stateful components that function like a super-class would with its sub-classes.

Stateful components are usually the core of your app, and where you want to branch from.  Often referred to as the “smart component”, this is where you would be storing most of your information for an app.  This is called the state
An example of this would be the current video that may be playing in a video app or interacting with a list of songs currently in view of the user. They are made similarly to how you would create a class and are the best place to start when creating a React app.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/szu48m4oclk637p7zbbs.png)

As you can see, a stateful component extends the React.Component.  Often times it will also have an event handler method that sets a state that controls the current video, which in this case is our handleClick method.

Stateless components, often referred to as the “dumb” component, acts as the child to a stateful component.  It dynamically takes information passed to it through props, which acts as a "super object" that stores all information being passed from component to component.  When created, they are written like a function that aims to be as simple as possible.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/0q90l8mbpoaktzyyket9.png)

If you look, you can see VideoListEntry is dynamically pulling the thumbnail, title, and description from props, and passing them back to the stateful component in the correct template using html.  It does this by referencing the handleClick function from App, and listens for an onClick event to initialize handleClick method.  It then provides the video object correlating to the entry that was clicked and passes in the appropriate arguments.

In conclusion, when creating a website, it’s best to create a “main idea” using a stateful component first.  stateful components act as a HUB for a website, deciding what will be displayed to the user through storage, which will be populated by information formatted by its appropriate stateless components. 
Having all states being stored in the one stateful component allows an easier time of debugging your code, because it's easier to root out the problem.
For example, if you’re having troubles changing the current video when clicking on its corresponding title, chances are your problem lies in the stateless component that keep track of those titles and is relaying information back.  This ease of use and simplicity really are a God send when dealing with multiple files that all must work together in order to display your amazing app!
Breadth first traversal for binary trees in JS
Tags: javascript, beginners, algorithms, interview
Published: 2019-08-19 13:12:50

---
title: Breadth first traversal for binary trees in JS
published: true
description: A simple example for breadth first traversal
tags: javascript, beginner, algorithm, interview
---

Breath first traversal of binary trees is a basic thing to do.
So why do I write this post?
Because there is a gap if you try to quickly look for implementation in google.

Most of the articles cover generic trees, not binary tress. Thus have no concept of "left" and "right" nodes, but just unordered children.
https://medium.com/@kenny.hom27/breadth-first-vs-depth-first-tree-traversal-in-javascript-48df2ebfc6d1
https://medium.com/@stephaniewo/understanding-breadth-first-tree-traversal-with-javascript-9b8fe670176d
https://gist.github.com/thinkphp/1440007

And this might confuse a beginner.
Others, like [this great article at hackernoon](https://hackernoon.com/breadth-first-search-in-javascript-e655cd824fa4) do a perfect job explaining the concept, but not presenting the code for it.

![bft-tree](https://miro.medium.com/max/1400/1*3NKvODZparRFVKEwtVmrkw.gif)
*gif by by Stephanie Wong*

So, assuming you'll read the concept of how we use queues to do the breadth first traversal at [this great article at hackernoon](https://hackernoon.com/breadth-first-search-in-javascript-e655cd824fa4), here is a modern implementation, specific to binary trees with `left` and `right` nodes.
(And as in the gif above, it will always go from left to right)

```javascript
class Tree {
  constructor(value, left, right) {
    this.value = value
    this.left = left
    this.right = right
  }
}

const breadthFirstTraversal = (tree, callback) => {
  if (tree == null) {
    return;
  }

  let queue = [tree]

  while (queue.length > 0) {
    let item = queue.shift()
    let value = item.value
    callback(value)

    if (item.left == null && item.right == null) {
      continue
    }
    if (item.left != null) {
      queue.push(item.left)
    }
    if (item.right != null) {
      queue.push(item.right)
    }
  }
}

t = new Tree(1,
      new Tree(2, null, null), new Tree(3,
        new Tree(4, null, null), null))

breadthFirstTraversal(t, console.log)
// Will print "1,2,3,4"
```
Waiting for visible element
Tags: javascript, dom
Published: 2019-08-19 13:07:14

Sometimes we need to call a function when a specific element is visible.

We might  want to load something that is going to calculate its dimensions based on its parent element's dimensions.

I, my self, have been in this position, trying to trigger a plugin init function when a specific area is visible (or, better, when this area has dimensions).

This is a solution I've came up with:

{% gist https://gist.github.com/kapantzak/6923c0ae3919027ee615b4215c2d83fb file=waitVisible.js %}

The `waitVisible` function will call a given function, as soon as the specified element gets visible.

It takes 3 arguments:
- The element we want to check upon
- The callback function that we want to be executed when the element gets visible
- The maximum amount of time that the function is going to check for the element's visibility (default: 5000 ms)

# Example (Google charts)

Let say that we want to display a pie chart (example [here](https://google-developers.appspot.com/chart/interactive/docs/gallery/piechart)) inside a div that is not initially visible.

First, we call the `drawChart` function as soon as the Google charts script loads.

    google.charts.setOnLoadCallback(drawChart);

If you check the *Result* tab on the fiddle below, you can see that the chart is placed on the left side (when viewing in a relatively wide screen), taking as little space as it can in order to be displayed.

{% jsfiddle https://jsfiddle.net/kapantzak/eqwbzov5/23/ %}

Here, we use `waitVisible` to call the `drawChart` function. The `drawChart` is able to calculate its parent eleemnt's dimensions and the chart takes up all the available width as you can see in the next fiddle:

{% jsfiddle https://jsfiddle.net/kapantzak/t8no1xm2/3/ %}

That's my solution to this problem. If you want to propose something else, please feel free to comment!