teleren/devto huggingface dataset:
Coding during COVID-19 as a Recent Coding Bootcamp Grad
Tags: react, projects, hackathon, beginners
Published: 2020-04-05 23:45:08

This pandemic has changed our society mentally and the obvious physical impact. 

As a recent coding bootcamp grad (Flatiron School), there is pressure to apply to jobs and build side projects to add to your portfolio. However, a major event occurred towards the end of my bootcamp and it's still ramping up. 

I still feel this pressure. However, there's a stronger pressure on all of us. One area I figured I could help was in social isolation. I knew therapists were booked and many people can't afford therapy. However, empathy is free. I created a project to crowdsource empathy by allowing people a vehicle to talk to each other. 

The project is built in React. And I used a Calendly and Zoom integration. This allows users to book time on the calendar to speak with someone. Once you receive the meeting notification, you also receive the Zoom link. The other party receives the Zoom link as well and you're able to have a conversation at a convenient time and connect with someone new during these trying times. 

Next Steps: 

I need volunteers to speak to people and a vetting process. 


https://www.ronaconnect.com/
Does the DEV community have any house/garden plants they want to show off?
Tags: watercooler, mentalhealth, news
Published: 2020-04-05 23:41:10

I will admit I'm not a plant expert by any stretch of the imagination but in permanent remote settings, it can get cumbersome at the home office. 

Studies indicate that plants (and other living things that are not exotic wild jungle animals) 🐅 

https://hside.org/plants-improve-mental-physical-health/


What plants (or pets) are you all taking care of during this time? 

![Asparagus Fern](https://dev-to-uploads.s3.amazonaws.com/i/7d378g5xx7m6npkikgxu.jpeg)

My asparagus fern is great in humid places (like the bathroom)!

Edit:: my fern is upside down 🧐 🤷🏻‍♂️
Looking for a Gatsby Coding Partner/Friend
Tags: gatsby, aws, react, amplify
Published: 2020-04-05 22:54:58

Hello everyone!
I am looking for a coding partner to learn and explore AWS Amplify with Gatsby. I am looking to go beyond Dabit's starter file and create some real cool full stack applications. Obviously I am not expecting someone to do the same project as me or use the exact same tools but please reach out to me if you are interested or checkout my github profile!

Thank you, stay safe and have a wonderful day!

Discord Channel https://discord.gg/aGDE8E
About Ruby Hash[]
Tags: ruby, hash, documentation
Published: 2020-04-05 22:44:56

---
title: About Ruby Hash[]
published: true
description: 
tags: ruby, hash, documentation
---

Get more information and more examples at my AboutRuby project:
* [AboutRuby project](https://github.com/BurdetteLamar/AboutRuby/blob/master/core/Hash/api/markdown.md#-literal)

Here's the write-up over at the Ruby project:
* [Ruby project](https://ruby-doc.org/core-2.7.0/Hash.html#method-c-5B-5D)

My main page is [here](https://github.com/BurdetteLamar/AboutRuby#about-ruby).

TL;DR

I've been working on enhancements to the documentation for the Ruby project.  Getting these enhancements posted to the Ruby project has been very slow.  They're not actually meeting resistance;  I know because my many PRs for enhancing class ENV were accepted (though not rapidly).  It's just that everyone is busy.

Anyhow, I'm stashing all this stuff on in my own project, called AboutRuby.  The piecemeal migration from there to the Ruby project is not going to be completed in my lifetime (I'm 77 years old).

So:  I'm going to blow my own horn here on DEV, to encourage you to use the enhanced documentation.
Displaying current VTEX account and workspace on Mac's Menu Bar with link to Store
Tags: vtex, mac, bitbar
Published: 2020-04-05 22:17:16

## Audience
- Mac users who develop on VTEX IO

## Prerequisites
- Permission to install programs on your Mac
- `vtex` official CLI installed
- Basic command-line knowledge 

When developing for VTEX IO, working across different accounts and workspaces can become confusing. Before committing actions like `vtex install` and `vtex link`, I'm always interested in checking **if I'm logged in the right account and workspace**.

> If you use [ZSH + Powerlevel](https://github.com/romkatv/powerlevel10k), I've also created a [simple customization](https://gist.github.com/lucis/179b9c49cda4001fa5fb6339c728030d) to show such info on the shell

To help you _(and myself)_ with that, I'm gonna show how to display that information on **Mac's Menu Bar**, so it'll be visible for you all the time!

> The **Menu Bar** is the fixed top bar on your computer, which shows icons, menus and other information.

Let's go! For this to work you need to:
1. Install [BitBar](https://getbitbar.com/).
2. Select a folder of your preference to be the **plugins' folder** (you're prompted when installing).
3. Create the file `vtex.10s.sh` on the folder you've selected on the last step.
4. Paste and save the following content to `vtex.10s.sh` file:
        {% gist https://gist.github.com/lucis/cb91b0591107fd3f37e0c28e5f756634 %}
5. Inside the plugins folder on the terminal, run `chmod +x vtex.10s.sh`
6. Click on `BitBar` menu item on the Top Bar and click "Refresh"

**That's it!** It should work just fine :sparkles:

![VTEX account and workspace on Mac Top Bar](https://i.imgur.com/NXrQ9cB.png)

> If you want to display it colored like I've done, [try this instead](https://gist.github.com/lucis/8e0a08c643e87030bbb070857084a413). I've removed it on the default snippet because **some shells don't support it!**

**Extra:** If you click on it, **it opens that workspace's store** on _myvtex.com_!

Note that you can do **a lot more** with **BitBar**. If you're interested in finding out how to create custom plugins, go to [BitBar Github Page](https://github.com/matryer/bitbar). On [it's home page](https://getbitbar.com/), there's already a **ton of free plugins!**

## Some considerations
- The script reruns **every 10 seconds**, so it'll update after `vtex switch`. If you want to configure this time, click [here](https://github.com/matryer/bitbar#configure-the-refresh-time).
- I've edited the [_Shebang_](https://en.wikipedia.org/wiki/Shebang_(Unix)) to `#!/bin/bash` because most people use _bash_. If you use another shell (like _zsh_), update it accordingly.
- I've added **some color** using ANSI codes. Click [here](https://misc.flogisoft.com/bash/tip_colors_and_formatting#colors) to see other options.
What is WebdriverIO?
Tags: 2020, automation, webdriverio, javascript
Published: 2020-04-05 22:12:03

---
title: What is  WebdriverIO?
date: "2020-04-05T22:12:03.284Z"
description: "why you should consider using WebdriverIO for testing"
tags: ['2020', 'Automation', 'webdriverIO', 'Javascript']
disqus: true
---
WebdriverIO is a custom implementation for selenium's W3C webdriver API. It is written in Javascript and packaged into 'npm' and runs on Node.js.

![WebdriverIO](https://i2.wp.com/grantnorwood.com/app/uploads/2017/07/webdriver-io-logo.png?w=1680&ssl=1)

### Main Features of WebdriverIO:
- WebdriverIO is a good automation tool which can automate both web applications and native mobile Apps.
- It has integrated test runner which helps us to write asynchronous commands in a synchronous way so that we don’t need to care about how to handle a Promise to avoid racing conditions.
- It has 'wdio setup wizard' which makes our project setup very easy.
- We can write our own javascript functions test.
- The test runner also comes with a variety of hooks that allow us to interfere into the test process in order to e.g. take screenshots if an error occurs or modify the test procedure according to a previous test result.
- WebdriverIO services will be helpful to integrate our test to third party tools like 'Appium'.

### Installation steps:

To install webdriverIO, you will need node to be installed in your system. Please go through below mentioned post to install it.

[Install node in mac and windows](https://nishantranjan.in/Install%20nodes/)

- Setup your project
Before installing dependencies, we will need to initialize a new NPM project. This will allow us to use the CLI to install dependencies in your project.
```
$ mkdir webdriverio-test && cd webdriverio-test
$ npm init -y
```
The -y will answer 'yes' to all the prompts, giving you a standard NPM project. Feel free to omit the -y if you'd like to specify your own project details.

- Install WebdriverIO CLI
```
$ npm i --save-dev @wdio/cli
```

- Generate configuration file
Next, we will generate a configuration file to store our WebdriverIO settings.

To do that, just run the configuration utility:
```
$ npx wdio config -y
```
That's it! The configurator will install all required packages for you and create a config file called wdio.conf.js.

[**In next post we will run our first spec using webdriverIO.**](https://nishantranjan.in/run%20test%20in%20webdriverIO/)

Thanks for reading. Please share your thoughts.
Build a Python CLI Part 1
Tags: cli, python, live
Published: 2020-04-05 21:43:34

---
title: Build a Python CLI Part 1
published: true
description: 
tags: cli, python, live
---

I'm thinking of doing this maybe every Sunday, maybe live stream, if I'm brave enough. The format is chill and slow, as we discover things and make mistakes together. What do you think? Yay or nay?

[Twitch Channel](twitch.tv/kodamanfb)

{% youtube v3K3qi-wgfE %}
How to destructure arrays in Javascript — beginner’s guide
Tags: javascript, arrays, beginners, tutorial
Published: 2020-04-05 21:41:11

Tired of the traditional property access? ES6 destructuring to the rescue.

*The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables. (MDN)*

Although similar to spreading (remember the `…` operator?), it differs from the it in one very important aspect. While spreading an array we must extract all elements, when using destructuring we can extract only a few pieces on information, if that’s what we want (we can of course extract all of them too). It works with arrays and objects but today I am going to write about arrays.

Consider the following code which illustrates the syntax prior to ES6:

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

Nothing wrong with it and it gets the job done, right? Right. But when using nested arrays, the code can become cumbersome while trying to access certain elements.

Now let’s look at this code:

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

If we try to print the new variables to the console, we get the exact same result as in the previous example. The difference is that the syntax is clearer, cleaner and shorter.

We just used destructuring to store all the values of an array into individual variables. What if we want to store only a few of them? We can do that too, using the rest (`…`) operator. Yes, it looks exactly like the spread operator but it’s used differently. For now, all we need to know is that it must be used with the last item of the array-like-syntax object and it holds all the values that we don’t want to extract individually. We can give the rest variable whatever name we want (yes, even tRex).

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

We can skip values in an array by simply not writing them and what we get where those values should be in the new array is “undefined”. Like so:

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

Note that we renamed the "rest" variable to “dinosaur”.

*In the next article I’m going to discuss object destructuring in Javascript.*
Declarative web components use
Tags: webcomponents
Published: 2020-04-05 21:33:35

Trying to get in touch with people who interested in declarative use of web components, i.e. without JS. So far I was able to make a demo on components set for Paper Elements and some Vaadin. IMO it is way more efficient to use declarative syntax vs JS or another languages. The code volume reduced by level of magnitude, the number of potential errors - accordingly. It also makes DX(developer experience) more pleasant, and developer's performance improved.

# Demo
* [Paper Elements](https://cdn.xml4jquery.com/web-elements-loader/build/esm-unbundled/demo/paper-elements-demo.html) 
* [Vaadin Elements](https://cdn.xml4jquery.com/web-elements-loader/build/esm-unbundled/demo/vaadin-elements-demo.html)

# [Sources](https://github.com/EPA-WG/web-elements-loader/tree/master/demo)
React Bootstrap on mobile: confusing focus styling
Tags: help, css, react
Published: 2020-04-05 21:20:18


### THE PROBLEM:

In my project, when I select and then unselect a button on mobile, it still remains dark because it's in focus and that's confusing: 

![Screen Recording](https://dev-to-uploads.s3.amazonaws.com/i/tjdk7c6dee429j78wwjc.gif)

Here's the deployed page: https://covid-19-mortality.netlify.com/

### WHAT I WANT TO ACHIEVE:

I would like to override the button focused styling so that it is intuitive that the button is in focus and not selected.

### WHAT I HAVE TRIED:

When I apply: 
```
.btn:active {
  background: #fff !important;
  color: #343a40 !important;
}
```
The button unclicks for a second and then goes back to the "selected" styling:
![Screen recording](https://im4.ezgif.com/tmp/ezgif-4-c1cd47972bdc.gif)

And when I apply:
```
.btn.focus,
.btn-dark.focus,
.btn:focus,
.btn-dark:focus {
    box-shadow: none !important;
    outline: none !important;
}
```
There's basically no difference

*** 

I have tried every solution in this stack overflow thread: [bootstrap button shows blue outline when clicked](https://stackoverflow.com/questions/23333231/bootstrap-button-shows-blue-outline-when-clicked).
I also created a [stackOverflow question](https://stackoverflow.com/questions/61047524/react-bootstrap-on-mobile-confusing-focus-styling/61047987#61047987) on that but to no avail.
I'm starting the #100DaysOfCode challenge
Tags: 100daysofcode, javascript, node
Published: 2020-04-05 20:22:21

# Why?

I want to improve my js, ts, node and web dev skills while creating a good coding habit. I also want to have a few projects that I can put in a portfolio.

# How?

- Code a minimum of one hour each day for the next 100 days.
- Complete a few projects during the challenge.
- Track my progress.

# What?

During this challenge I want to learn/improve the following:

- Frontending
  - Responsive Layouts & Accessibility
  - CSS Pre-Processors
  - CSS Frameworks
  - PWA
  - React, Vue
  - Static Site Generators
- Backending
  - MongoDB
  - PostgreSQL
  - Express
  - Socket.IO
- Tooling
  - Webpack
  - Parcel
  - Babel
  - Typescript

# Where?

[Twitter](https://twitter.com/joaquimnet_)
[Github](https://github.com/joaquimnet/100DaysOfCode)

# When?

Starting **April 5th 2020**.

# Projects I Want To Complete

- URL Shortener
- Custom Webpack Configuration
- Homepage for me with a portfolio
- A CLI
- Real Time Chat App
- More TBD

---

Cover Image by BENCE BOROS on Unsplash
Rendering the first scene
Tags: android, devlog, opengles2, vr
Published: 2020-04-05 20:12:10

#Building from the previous blog
In the previous blog post, we had an empty scene being rendered to two framebuffers which were used to texture two quads, in this blog post I will describe how I created the scene which is rendered to the framebuffers.

For anyone following along at home, [here is the code at the end of the last post](https://github.com/longevity-software/AndroidVrGameDemo/releases/tag/B1.1)

#What are we rendering
The first thing I did was create a mutable list of the <code>AbstractGameObject</code>s which will be looped through in the <code>onDrawFrame</code> function to draw each object to the scene.
Then I modified the <code>AbstractGameObject</code> class to store the position in the scene that the object is to be rendered and I modified the <code>TriangleGameObject</code> class to take an Int parameter in the constructor which is used to determine the colour of the rendered Triangle.
In the <code>onSurfaceCreated</code> function, I set the right camera to x = 1.0 y = 0.0 z = -3.0 and the left camera to x = -1.0 y = 0.0 z = -3.0 I then added two of the <code>TriangleGameObject</code>s to the list of objects to render, one at the same x position as each camera.

#How are we rendering it
In the <code>onSurfaceCreated</code> function I set the projection matrix to the ratio of the framebuffer texture, as the scene will always be rendered to the same dimensions, this only needs to be done once when the surface is created.
Next, in the <code>onDrawScene</code> function the view matrix is set based on the passed <code>GameCamera</code>, this is then used, along with the projection matrix to generate the view projection matrix which is passed to the <code>draw</code> function of each of the objects to be rendered.
Finally, the <code>AbstractGameObject</code>s <code>draw</code> function was modified to generate a model matrix (currently just the translation portion of the model matrix), which is then multiplied by the view projection matrix pass in to generate the model view projection matrix which is passed to the Vertex shader.

#The Scene
After these changes we have a simple scene being rendered twice from two different camera positions, the code for which can be found [here](https://github.com/longevity-software/AndroidVrGameDemo/releases/tag/B1.2).
![Simple Scene rendered](https://dev-to-uploads.s3.amazonaws.com/i/yqszpzd0czg4tf8bw3a8.jpeg)
For the next post I shall be looking at using the phones sensors to rotate the camera in the direction the player is looking.
React: Create onHover event with react hooks
Tags: react, reacthooks, onhover
Published: 2020-04-05 19:51:45

Handling events in react is very similar to handling events on DOM elements. There are some syntax differences: in react, you need to use camelCase rather than lowercase for events name. Also, in react you need to pass in the event handler with JSX instead of a string. React supports [syntheticEvents](https://reactjs.org/docs/events.html#supported-events), with these events and hooks, we can easily create onHover event.

Example: show/hide an element on mouse hover
Here I will show a simple example, which will render "Hi!" when you hover over a button. In this example, I use useState hooks to create the initial hover state as false on the button. When `onMouseEnter` event happens, the hover state will be set as true, and when `onMouseLeave` event happens, the hover state will be set as false. `<p>Hi!</p>` element will only get rendered when our hover state is true. 
Check out the code on CodeSandbox.

{% codesandbox 7r38p %}
On Having a Clean Digital Workspace
Tags: codenewbie, computerscience, clean, code
Published: 2020-04-05 19:39:09

We often put a lot of focus on keeping our physical workspaces clean. We remove clutter, tidy up cords, remove dust/spills, etc, but we often don't put a lot of emphasis on cleaning our digital lives.

## The Importance of Digital Cleanliness

For anyone in an IT position, having a clean digital workspace can save you incalculable time and stress. The less files you have on you desktop, the more clear minded you can make yourself. You might not realize it, but looking at those files a few hundred times over the course of a few weeks can stress you out.

When I start new jobs I create a new `/projects` folder near the root. Any requirements docs, important emails, or notes get filed away in the correct folder. So when business analysts, project managers, or other developers ask questions about a specific project, I often have the information to help them.

Take time to narrow done the tools and bookmarks you rely on. Your bookmark tool should only have the links you use regularly. You can often delete programs you no longer use, startup less processes, or consolidate multiple old programs into one new multi-use program. Also, do you really need to have 25 browser tabs open? It may be time to let go, and feel the thrill of permanently deleting your junk and clutter.

## Digital Minimalism  

Realize that life is more about saying no than saying yes. Your life will consist of countless opportunities, but what really matters is saying no to the garbage, and saying yes to the diamonds. Organizing your digital life can help you focus on the stuff that really matters.
A simple retrospective tool built with React + Socket.io
Tags: retrospective, react, overmind, showdev
Published: 2020-04-05 18:58:08

---
title: A simple retrospective tool built with React + Socket.io
published: true
description: A simple tool for running retrospective meetings that can be hosted from your local dev environment.
tags: retrospective, react, overmind, showdev
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/poxvvondzjvdkvfpma9y.png
---

### What is this?

I've been hacking on [this simple tool](https://github.com/joekrump/retro) to help run [retrospective meetings](https://www.scrum.org/resources/what-is-a-sprint-retrospective) that I want to share with the community with the hope that some may find it helpful or at least interesting.

A word of thanks to my former co-worker ([@jhnbrnn](https://github.com/jhnbrnn)) for kicking off this project and providing the foundation that I built off of.

### Why did I make it?

I worked on this because I wanted to build something useful that would give me an opportunity to experiment with working with [socket.io](https://socket.io/) (real-time communication), and [Overmind](https://overmindjs.org/) (app state management), which were libraries I was curious about.

### A final thought or two

This project is experimental and does not always highlight best practices for building a production web app. That being said, I welcome pull requests against it to help improve it!

I look forward to receiving your ideas to make it better!
Beautiful Error 404 not found Page Templates
Tags: codepen, html, javascript, css
Published: 2020-04-05 18:56:04

---
title: Beautiful Error 404 not found Page Templates
published: True
description: A few examples of  Error 404 not found Page Templates 
tags: codepen,html,javascript,css
---

   
   <p>Fargo-inspired 404 page for DailyUI #008</p>

<p>Snow loosely based on <a href="http://codepen.io/loktar00/pen/CHpGo" target="_blank">http://codepen.io/loktar00/pen/CHpGo</a> and <a href="http://php.quicoto.com/snow-html-canvas/" target="_blank">http://php.quicoto.com/snow-html-canvas/</a></p>

{% codepen https://codepen.io/nw/pen/WQmxYY %}

more example check out More Example [gscode.in](https://gscode.in/)

{% codepen https://codepen.io/dsenneff/pen/mjZgmN %}

<p>Some canvas noise conveying a dreaded CodePen 404<br>
*This better never happen</p>

{% codepen https://codepen.io/tmrDevelops/pen/vEZOEv %}

<p>Coded my dribbble shot: <a href="https://dribbble.com/shots/4330167-404-Page-Lost-In-Space" target="_blank">https://dribbble.com/shots/4330167-404-Page-Lost-In-Space</a></p>

<p>Animated 404 Lost in Space Page.
CSS3 Keyframe animations used.
All the illustrations are hand-crafted in Adobe Illustrator.</p>

{% codepen https://codepen.io/salehriaz/pen/erJrZM %}

<p>Static / Glitch of an image w/canvas <br>Mouseover | TouchSwipe to intensify effect. </p>

{% codepen https://codepen.io/tmrDevelops/pen/jqqmOw %}


<p>eh</p>

{% codepen https://codepen.io/ltrademark/pen/xpgprZ %}


more example check out More Example [gscode.in](https://gscode.in/)