teleren/devto huggingface dataset:
Heroines of JavaScript series: Lauryn & Layla interview Alyssa Nicoll
Tags: diversity, javascript, girlswhocode, womenintech
Published: 2019-09-09 18:02:23

---
published: true
title: "Heroines of JavaScript series: Lauryn & Layla interview Alyssa Nicoll"
cover_image: https://user-images.githubusercontent.com/1228996/64550317-43a32b00-d2f8-11e9-9577-ffc08b8f4927.png
description: "As part of our Heroines of JavaScript series, Lauryn & Layla interview Alyssa Nicoll."
tags: diversity, javascript, girlswhocode, womenintech
canonical_url: https://michaeljolley.com/streams/Heroines-of-JavaScript-series-with-Alyssa-Nicoll/
---


## Stream Replay Link

[https://youtu.be/qapOJX_LjZw](https://youtu.be/qapOJX_LjZw)

<!--more-->

### Segments

| Timestamp | Topic
| ---       | ---
| [00:07]({{page.replay}}?t=660)      | Kicking it off                                                                                          |
| [00:18]({{page.replay}}?t=1080)     | Interview with Alyssa Nicoll                                                                            |
| [01:02]({{page.replay}}?t=3740)     | [dare_devel_ops](https://twitch.tv/dare_devel_ops) won the Heroines of JavaScript card deck             |
| [01:20]({{page.replay}}?t=4800)     | Starting to work on our presentation slides                                                             |
| [04:00]({{page.replay}}?t=14443)    | Wrapping up and raid to [sushiday](https://twitch.tv/sushiday)                                          |

---

### Today's Candle To Code By

<a href="https://amzn.to/2GSsMxX" target="_blank">Warm Tobacco Pipe</a>

---

### Goals

- [x] Interview with Alyssa Nicoll

### Things We Learned

- <a href="https://twitch.tv/snoopaloopy" target="_blank">snoopaloopy</a>: shared <a href="http://mtcb.pwop.com" target="_blank">Music to Code By</a>
- <a href="https://twitch.tv/phrakberg" target="_blank">phrakberg</a>: gets praise for his suggestion on the scene for the heroines interviews
- <a href="https://twitch.tv/snoopaloopy" target="_blank">snoopaloopy</a>: shared <a href="https://eng.uber.com/introducing-kraken/" target="_blank">https://eng.uber.com/introducing-kraken/</a>
- <a href="https://twitch.tv/roberttables" target="_blank">roberttables</a>: shared <a href="https://mdx-deck.jxnblk.com" target="_blank">MDX Deck</a>
Vue: Getting Started
Tags: vue, webdev, javascript, beginners
Published: 2019-09-09 17:51:25

---
title: Vue: Getting Started
published: true
description: Learn how to design components, display data, present lists and inputs, handle user interactions, navigate between views, manage data, and get started with all of the key tools to make you efficient at developing with Vue in this hands-on course.
tags: vue, webdev, javascript, beginners
---

The only thing I love as much as coding in our development profession is teaching! If you follow me you know I am deeply passionate about web development and JavaScript. Recently I created a new course to help developers learn Vue. So if you are ready to learn Vue, please consider watching my new Vue Getting Started course on Pluralsight.

![](https://media.giphy.com/media/m9p4wfcm2oCD70ek4w/source.gif)

> Pluralsight has a free 10-day trial and a [limited ⏰time (9/9 - 9/20) offer where you can get 💰$100 off premium and personal annual subscriptions](https://pluralsight.pxf.io/QdWQo). 👉 <https://pluralsight.pxf.io/QdWQo>

You can find the [Vue course here](https://pluralsight.pxf.io/QdWQo)


Here are the sections/chapters in this course:

1. Course Overview
1. Getting Started with Vue
1. Displaying Data and Responding to Events
1. Displaying Lists and Conditional Content
1. Interacting within a Component
1. Component Communication
1. Accessing Data
1. Navigating Vue Apps with Routing
1. Managing Data State with Vuex


Here is the official course description:

> Are you interested in how to use the fundamental features of Vue? In this course, Vue: Getting Started, you will learn foundational knowledge of how to start developing with Vue to create web applications. First, you will discover how to create and run your app with the Vue CLI, and how to build components which are the building blocks of your application. Next, you will learn how to build the user interface with templates, and how to choose the right data binding features. Finally, you will explore how to get and send data with HTTP, add menus to navigate your application with routing, and how to manage data and state with Vuex. When you are finished with this course, you will know all the basics you need to build your own Vue applications.
3 simple rules for effectively handling dates and timezones
Tags: webdev, javascript, php, database
Published: 2019-09-09 17:47:08

When asked if they struggle with handling dates and timezones, more than 50% of developers responded "YES". My guess is that the people who said "NO" to this poll either have it figured out already, or they don't work with platforms/apps that have to cater to users across the globe.

Anyway, I wanted to create a blog post that goes into some detail on how I handle dates and timezones. I think by following these simple rules, it can be a lot less of a headache for you.

**Rule #1 - STORE DATETIMES IN UTC IN YOUR DATABASE, AND BACK END CODE.** It is important that there is consistency across all your date-related data. When storing dates in the database, they should always be in UTC. If you are not familiar with what UTC is, it is a primary time standard that all the major timezones are based on. The major timezones are just offsets from UTC. Furthermore, make sure the datetime is in UTC when you're handling it with your backend code.

**Rule #2 - CONVERT DATETIMES TO THE USER'S LOCAL TIMEZONE USING FRONTEND CODE.** Although your backend will be returning UTC times, the frontend can easily convert these to the user's local timezone. Doing this instills a separation of duties between the backend (handle in UTC) and the frontend (handle in the user's local time). Stay consistent with the format of your date times in the frontend by using a standard, such as ISO 8601. When you send requests to the backend, send the datetime in ISO 8601 format so that the backend can easily convert it to the corresponding UTC date time.

**Rule #3 - USE DATETIME LIBRARIES.** There exist libraries in all major web development languages/frameworks for better handling of datetimes. These make it a lot easier to do conversions, or formatting based on standards (e.g. ISO 8601). An example library to look into in JavaScript is called moment.js. An example library to look into in PHP is called Carbon.

By following these rules, you should instill an efficient PROCESS in how you handle datetimes.

Resources:

- UTC Time Standard - https://en.wikipedia.org/wiki/Coordinated_Universal_Time
- ISO 8601 Time Format Standard - https://en.wikipedia.org/wiki/ISO_8601
- Moment JS datetime library - https://momentjs.com/
- Carbon PHP datetime library - https://carbon.nesbot.com/docs/
How do you create charts / diagrams for your blog posts?
Tags: discuss, blogging
Published: 2019-09-09 17:40:09

---
title: How do you create charts / diagrams for your blog posts?
published: true
description: 
tags: discussion, blogging
---

Anyone know of a good library / site for creating sleek looking diagrams for technical blog posts?

I was impressed by the charts on this [blog post]( https://davidea.st/articles/firebase-bundle-size) but wasn't able to find out what he's using (he didn't answer me on twitter :) )
How Does The Internet Work? Part 3: Traceroute
Tags: webdev, beginners
Published: 2019-09-09 17:40:01

Ever noticed how fast a single web page loads? How is it possible for a web page whose web-servers might be miles and miles away from your machine loads almost instantaneously? It makes you think: are our machines directly connected to our favorite website's servers? The answer is no, they are not.

When you are on the internet, requests sent from your machine don't reach the destination computer in a single jump or a __hop__. However, it follows a unique route through strategically and physically interconnected computer networks around the world called __The Internet Backbone__ in order to help you receive and transmit requests and information.


If you navigate to [Submarine Cable Map](https://www.submarinecablemap.com), you'll be able to view the locations of these networks, and how they are interconnected.


Another way to look at it is the [Opte Project's](https://en.wikipedia.org/wiki/Opte_Project) visual representation of the internet. One of its visualizations is the following image which portrays a portion of the internet in 2005 in which each line is connected between nodes that represent two different IP addresses. How awesome is that :open_mouth:.


![Alt text of image](https://upload.wikimedia.org/wikipedia/commons/thumb/d/d2/Internet_map_1024.jpg/800px-Internet_map_1024.jpg)


Sometimes you may wanna know what that route is, and that's where __traceroute__ steps in.


**Traceroute** is a procedure that enables you to precisely figure out how data transmission travels from one machine to another. Basically, it compiles a list of the computers on the network that are involved with an internet activity and identifies each computer or a server on that list and the time data took to get from one machine to another. If any interruption happens in the transfer of data, the traceroute shows you where the problem occurred along the chain.


In order to perform a traceroute, open up your terminal and write down the following command:

```
* traceroute HOSTNAME           if you're a Mac or Linux user.
* tracert HOSTNAME              if you're a Windows user.
```

__For example, Let's try and traceroute Google.com__


![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/34rye52vcxd39gpm06zy.PNG)


We got that google's IP address is 172.217.17.174, so were we to enter that IP address in the browser's address bar and hit go, we should redirected to Google.com web page.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/29cxgfkv8cdyayp06yp1.gif).


**Traceroute** is always a practical way if you're finding difficulty accessing a particular website. It helps in finding out where the problem is occurring in the network.


The icon used in the cover image is licensed under [icons8](https://icons8.com/) Free License.
CodeceptJs a full fleged E to E testing framework
Tags: codecept, codeceptjs, etoetesting, javascript
Published: 2019-09-09 17:32:10

---
title: CodeceptJs a full fleged E to E testing framework
published: true
description: 
tags: codecept, codeceptjs, eToe testing, javascript
---

Since last few months i was working on e to e testing project. The main scope of that project was to making a full fleged e to e testing framework.

I was working with wonderful tool called Puppeteer and for scenarios using Ghekrin. Since i faced alot of difficulties very less yet powerful community support, i achieved 90-95% of work success. But i was really search for a framework that could save my time and i do focus on working scenarios only, and then i found codeceptJs. Trust me since then i am in love with codeceptJs. I always do focus on writing scenarios and not working on tools to check steps.

If you are going to work on E to E testing project i would recommend you to use codeceptJs. Its like developer dreams comes true.

Thank you
How To Use React Error Boundary
Tags: react, webdev, ui, javascript
Published: 2019-09-09 16:01:25


## Recap

In a previous post, I explained how I came to find out about Error Boundary. In this post let us dive into it a bit more, and understand how React provides a declarative way to catch and handle errors that occur during rendering. Finally, I will show how I used it.

## Declarative Error Handling

In a typical JavaScript code, errors can be caught and handled using a `try` - `catch` block.

``` javascript
try {
   throw new Error('A new error');
catch (error) {
   console.log('Caught this error', error);
}
```

This is _imperative_ code where we tell the program _how_ to do something, usually in a series of steps. This is not the case when using React, where we tell the program _what_ to do. 

Let's take a look at code examples, I found [elsewhere] (https://codeburst.io/declarative-vs-imperative-programming-a8a7c93d9ad2) of both approaches, for doing the same task of changing a `button` element's colour

Imperative example, where we provide step-by-step instructions to change the change the button colour.

``` javascript
const container = document.getElementById('container');
const btn = document.createElement('button');
btn.className = 'btn red';
btn.onclick = function(event) {
 if (this.classList.contains('red')) {
   this.classList.remove('red');
   this.classList.add('blue');
 } else {
   this.classList.remove('blue');
   this.classList.add('red');
 }
};
container.appendChild(btn);
```

React example, where we handle state and return the button element.

``` jsx
class Button extends React.Component{
  this.state = { 
     color: 'red' 
  }
  handleChange = () => {
    const color = this.state.color === 'red' ? 'blue' : 'red';
    this.setState({ color });
  }
  render() {
    return (
       <div>
         <button 
            className=`btn ${this.state.color}`
            onClick={this.handleChange}>
         </button>
       </div>
    );
  }
}
```

We are only telling React _what_ to return (display) given the current state of the program. Therefore using a `try-catch` block while trying to render a component will not _catch_ errors in the component. React Error Boundary is a declarative approach to error handling.

## How I used React Error Boundary

Using Error Boundary helps render a fallback UI, which is better UX than a blank screen, but we can do better. We can reset the state so users can go back to what they saw before the error occurred, without having to reload the page.

The fallback UI can contain a button, which when clicked, sets the component's state to its initial state, that is `{hasError: false}`. But before it does this we must reset the state of the child component that is rendered within the Error Boundary, so that when the app re renders we are not in an _erroneous_ state. See for yourself below.

{% codepen https://codepen.io/maybebored/pen/OJLvLNq %}

## Conclusion

With that I conclude my two part series on React Error Boundary. The last bit about resetting state is just something I experimented with, I didn't find anything online that endorses that, so I appreciate any feedback on that.
What is the best quality a developer can have?
Tags: discuss, webdev, programming, agile
Published: 2019-09-09 17:30:15

---
title: What is the best quality a developer can have?
published: true
description: A discussion thread about what the best quality is that a developer can have.
tags: discuss, webdev, programming, agile
---

If you had to narrow it down to the most important aspect of a developers personality... what would that be?

What quality could an interview candidate have that would make you extra interested in hiring them?
I stopped saying "Sorry if this is too technical"
Tags: discuss
Published: 2019-09-09 17:22:40

---
title: I stopped saying "Sorry if this is too technical"
published: true
description: 
tags: discuss
---
I am a technical guy and I wear this badge proudly. That's why [this post](http://blog.thestateofme.com/2019/09/06/im-not-technical/) got me thinking the other day. I concur with its reasoning and comments, and it is especially outrageous when you work for a company with the word _technology_ in its name. 

It shouldn't be a problem if the sentence _"I am not technical"_ really is an invitation to the technical speaker to go ahead and explain (in detail or not) what are they talking about. **But it is not**. It's a shield of ignorance, an excuse that reads _"the ball is in your court now"_ between the lines. In the worst case, its goal is to disdain the technical speaker's point by letting them know that they care about the important things, the business.

I have been on the other side so many times, and I never said _"I am not a business person"_. If I don't understand something, I ask without any sign of embarrassment because I want to understand. I want to learn. So I would expect this social contract to be mutual. **But it is not**.

So that is why I stopped saying _"Sorry if this is too technical"_ even in advance to my technical speech. There is nothing wrong with covering technical details for a group of business people. Especially for a group of business people **working on an IT company**. If they do not understand something, I expect them to raise their hands and ask, I'll explain thoroughly and I'll adjust the level of technicalities.

Every company is a Software company. This is becoming a major truth, gradually and constantly. So I'd be happy to help anybody understand the nitty-gritty details of why the world is changing ... if they want to.

When did we stop learning? What do you think?
Offsetting named anchor and scrollIntoView position.
Tags: html, ux, webdev
Published: 2019-09-09 17:02:38

---
title: Offsetting named anchor and scrollIntoView position.
published: true
tags: html, ux, webdev
---

Named anchor links are used to refer to a section of a HTML page. Target element is identified by giving element `id` (e.g. `<div id='foo' />`) and a link to the element is constructed by prefixing the target element ID with an anchor, e.g. `<a href='#foo' />`. They are great for linking to specific pieces of content on a page, such as comments, products and so forth. Here are some examples:

* https://dev.to/gajus/dynamically-generating-sql-queries-using-node-js-2c1g#binding-a-list-of-values
* https://github.com/gajus/slonik#contents
* https://www.postgresql.org/docs/current/sql-syntax-lexical.html#SQL-SYNTAX-CONSTANTS

Notice what is wrong with all of those links?

![Bad](https://thepracticaldev.s3.amazonaws.com/i/js0f0uds9g2s2aix95uv.png)

The scroll cuts right at the top of the content that is linked. Compare it to:

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

Isn't nicer when there is a small offset?

([Sigh] This post is when everyone realises that I have an OCD).

The reason it behaves the way it does is because the ID is attached directly to the heading element. This is not required.

It is a small thing, but it grids my gears because the fix is easy:

When you want to create a named anchor, create an auxiliary element with relative position and add anchor link with an offset absolute position. Like this:

```html
<div style='position: relative;'>
  <a name='foo' style='position: absolute; top: -20px;'>  
</div>

```

This simple markup change allows you to create an arbitrarily offset anchor that is not dictated by padding/ margin or other attribute of the content.
React Error Boundary - An Intro
Tags: react, ui, webdev
Published: 2019-09-09 16:01:11

## Preface

My team and I are currently working on an analytics dashboard for a payment gateway at work. We are using ElasticSearch to comb through large amounts of raw data, aggregate that, then provide useful insights, displayed on a beautiful UI built using ReactJS. The application's backend is supported by NodeJS + Express and MongoDB for some data persistence.

After working on it for ~4 months, I finally got to demo it, to other team mates. It wasn't perfect, but I wanted to show what we have achieved so far. I showed our really fast search feature. I hit enter after typing the search term, expected it to load the results in blazing fast speed, but instead I got a white screen. The entire app had crashed, with no information about what went wrong. This was embarrassing, and I just found out that we hadn't thought of error messages.

## Context

We have unit tests, code reviews and manual QA testing to prevent the bad stuff like this from happening. BUT, it did. I figured out the root cause using Chrome Dev Tools, and quickly resolved it, but this wasn't enough. What if this happens at a real demo. I needed to do something better.

### _Why did the app crash?_

In one of the component's _render_ code I was trying to access a property on an `undefined` object. That throws an exception: `TypeError`. And if you don't handle this exception, then you get the infamous `Uncaught TypeError` in the browser console.

![Error Message Screenshot](https://thepracticaldev.s3.amazonaws.com/i/2cau15t2gb0beuqp12p5.png)

### _But, why the did the app **crash** ?_

To answer this, let's dig into the code a bit more. In the below pen, as you click the button the status updates, but the third time you click it you will see a blank screen, because the app _crashes_. Open the pen in [full view](https://codepen.io/maybebored/full/zYORvgO) and inspect your browser console, and you'll see the error occurred in the `BadgeComponent`.

{% codepen https://codepen.io/maybebored/pen/zYORvgO %}

Why would an error that occurred in one child component _crash_ the entire application? The React Team has an [answer to that](https://reactjs.org/blog/2017/07/26/error-handling-in-react-16.html#new-behavior-for-uncaught-errors) - but in short and quite obviously, leaving a broken UI is bad UX, so it is better to just remove the entire UI.

## Enter Error Boundary

A blank UI with nothing to see is also bad UX, and to answer that React 16 introduces [`Error Boundary`](https://reactjs.org/docs/error-boundaries.html#introducing-error-boundaries). It is essentially a component that is able to handle an error that occurs in a child component, and display/render a fallback UI. There are plenty of great posts online explaining how to use one, but here's a quick pen I made that gracefully handles the error we see in the above pen.

{% codepen https://codepen.io/maybebored/pen/GRKQqVv %}

In my next post in this series, I'll talk about how Error Boundary works, and show you what to do after an error has been _caught_ by the Error Boundary Component.
I Started a Newsletter to share what I read each week
Tags: todayilearned, leadership, learning
Published: 2019-09-09 16:34:24

---
title: I Started a Newsletter to share what I read each week
published: true
description: 
tags: til, leadership, learning, ama
---

A few weeks back I started a newsletter, lovingly called TIL, in which I talk about all the things I read, and learn, each week. The idea is that it helps call out things worth reading, and things not worth reading, in the same vein as my annual recap on my blog.

So, if you are interested in finding some interesting articles, podcasts, books, and other media. That are focused on software development, the world, and leadership, well then you should head over to http://til.designfrontier.net and sign up.

It comes out every Sunday night/Monday morning!

The most recent one can be found here: https://mailchi.mp/01f142f166d4/til-newsletter-5-experiment-on-everything-fight-for-what-you-believe

One last thing!

I'd also like to use it as a forum to answer questions for folks! A few weeks ago I talked about the difference between a software engineer and a software developer, at the request of a reader. So! If you have questions you want answered, sign up, and send them in response to the welcome email! And I'll try and answer them.