teleren/devto huggingface dataset:
unbundled web components part 1: Context of WCs @ PSU
Tags: webcomponents, bundler, webdev, scale
Published: 2020-07-15 16:57:51

[Benny Powers](https://dev.to/bennypowers), uh-maz-ing web components developer asked me the other day on twitter about how we ship web components and if I had a blog post for it. "Yes let me pull it up!" I thought, only to find no... I didn't. So here we are. Let's dive into a topic I've been asked about a lot which is how and why Penn State ships web components in an "unbundled" state.

This is going to start off a series of posts about this topic to make it more digestible given how complex the problem space is.

## Background
- Our team has over [290 npm packages for web components](https://www.npmjs.com/search?q=%40lrnwebcomponents) and tooling
- We use 100's of web components across 100's of sites / domains and want to expand this to 10s of 1000s of sites
- We have multiple static sites, CMSs, and vendor managed products that we want to normalize capabilities / UX
- We have small / ad-hoc teams, some times of one person though [#HAXTheWeb](https://haxtheweb.org/) has 4 core developers and multiple interns
- One of our key user audiences (faculty / staff) generate content / write light HTML to present material for another audience (students)

![HAX spray paint logo](https://dev-to-uploads.s3.amazonaws.com/i/7w36wnh7i7smxx0uohd8.png)

We work on a project called HAXTheWeb, an effort to build a **H**eadless **A**uthoring e**X**perience. Think of it like a WYSIWYG editor, made out of web components, that understands how to edit other web components using a small schema.

## Design principles
- Sustainability: HAX Content should work with or without the editor by treating the DOM as an API. Writing to properties, attributes, and slots, we can create a sustainable HTML lego brick of sorts that works forever.
- Longevity: Web components are a forever format, meaning that if we ever switch off HAX, change our CMS or alter where content loads from, it shouldn't matter. We need content written once to be in a format that will work anywhere
- Remix: When HAX edits a web component, that web component should work in any system without requiring HAX.
- Developer Experience: We want developers to write design / visual assets that they can use anywhere. HAX will learn how to edit this element, the element will not learn HAX or be written in a HAX specific way beyond web components + a method that returns JSON.

## And now, onto the show

With that said, this series will unpack the unbundling movement and how the [#HAXTheWeb](https://haxtheweb.org/) team is transforming how web components are deployed, at scale, at a major institution.
Assigning [ ] performs better than Array(n) - Reports attached.
Tags: javascript, webdev, beginners, performance
Published: 2020-07-15 16:33:24

Here is a small snippet that was measured using jsperf sit

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

That means `Array(n)` is a lot slower than `[]`. 

##What might be the reason?

In the background there are different types of arrays though for a developer it looks like there is only one Array type.

For the sake of scope, two types can be discussed here. 
* Holey element type
* Packed element type

If we initialize the array with a size, it create an array with Holey element type. Otherwise Packed element type. There are different cases when the javascript engine converts packed element array type into holey. 


One of it is a `delete` operation. Another case is,
```javascript
const arr = [];
arr[4] = 10;
```

In the above snippet, though in the first line it creates a packed array. Since there are no elements on index 0,1,2 & 3, the javascript engine converts it into holey array.

##That was background. What might be the reason for performance difference?

For a packed array, all that the javascript engine needs to do to find an element is,
* To check if the index is in the range _(zero to arr.length)_
* return value if hasOwnProperty of that index is true _(as array is stored in exact object format with index as key)_

####What if it is a holey array?

* To check if the index is in the range 
* hasOwnProperty of that index 
* hasOwnProperty of Array.prototype
* hasOwnProperty of Object.prototype
* and the same with any/all extended entities

Because in a holey array, the javascript engine can't decide just based on the range _(zero to arr.length)_

That's the reason, any operation on holey array takes several more steps than packed array causing performance difference. 

__Reference : https://www.youtube.com/watch?time_continue=445&v=m9cTaYI95Zc&feature=emb_title__

_Thanks for reading!_
Managing auth state in your Angular Firebase app
Tags: angular, firebase, javascript, rxjs
Published: 2020-08-25 07:44:13

---
title: Managing auth state in your Angular Firebase app
published: true
date: 2020-07-15 16:32:58 UTC
tags: angular,firebase,javascript,rxjs
canonical_url: 
---

### Managing auth state in your Angular Firebase app.

![](https://cdn-images-1.medium.com/max/626/1*NnQ1RFFyigISAmsqw5S3XA.jpeg)

Firebase authentication usually comes in handy when building any type of application. It helps manage your app’s users, auth state, as well as track user sessions.

In this article we’ll go through tracking authentication state in your angular application and emitting changes to other components using Firebase’s onAuthStateChanged Observable and an RXJS Subject.

let’s dive in……..

{% gist https://gist.github.com/chani24/1dca2d5d2f315fa0500c1cab0dff289a %}

In the [signin.component.ts](https://gist.github.com/chani24/1dca2d5d2f315fa0500c1cab0dff289a#file-signin-component-ts) , we get login data from the form in our template, which we will then pass to our auth service for authentication.

{% gist https://gist.github.com/chani24/4b9d75f79d14ec239d91975683573f2a %}

In our [auth.service.ts](https://gist.github.com/chani24/4b9d75f79d14ec239d91975683573f2a#file-auth-service-ts), we import BehaviourSubject and Observable from RXJS. BehavourSubject is a special type of Observable that allows values to be multicast to many Observers. We also import AngularFireAuth from Angular Fire and auth from Firebase/app.

The following steps explain the process.

Step 1: Initialize a property, currentUser.

Step 2 : Initialize a new BehaviourSubject called authStatusSub and pass currentUser as it’s first value.

Step 3 : Initialize a property, currentAuthStatus which returns authStatusSub as an Obvservable that can be observed across components.

Step 4 : Create a method called authStatusListener and used onAuthStateChanged to check auth state. If a user is Logged in, we call authStatusSub.next and pass in the current user credentials however if no user is logged in, we pass null into authStatusSub.next.

authStatusSub.next passes the current value to all Observers. See [https://rxjs-dev.firebaseapp.com/guide/subject](https://rxjs-dev.firebaseapp.com/guide/subject) for more explanation.

Let’s proceed to listen to it’s emissions in another component.

{% gist https://gist.github.com/chani24/d9f87683c7d1f7e16c077f1c359c7a42 %}

In [header.component.ts](https://gist.github.com/chani24/d9f87683c7d1f7e16c077f1c359c7a42#file-header-component-ts), we subscribe to currentAuthStatus from our auth service and pass it’s value into an earlier initialized isAuthenticated property.

In [header.component.html](https://gist.github.com/chani24/d9f87683c7d1f7e16c077f1c359c7a42#file-header-component-html), we use conditionals to check if isAuthenticated is truthy or falsy, and then proceed to display elements in accordance.

We’ve been able to successfully track auth state and emit new changes in our auth status across different components. We’ve also been able to subscribe and get emitted values and use in our application logic.

Goodluck coding….
Feeling Bad! Cannot Merge PRs. Github is facing issues...
Tags: discuss, github, git
Published: 2020-07-15 16:28:40

Initially, I thought it's my network. But then one colleague faced a similar issue. I checked [GitHub Status](https://www.githubstatus.com/ "The Classic Excuse - GitHub is down") and got the bad news.

![The Classic Excuse of a Developer not working depicting GitHub is down](https://dev-to-uploads.s3.amazonaws.com/i/resvuj41ow4nwupc3lyg.jpg)

So, What do you do while this unfathomable issue persists?
Virtual Meetup on MLOps and Fintech for developers
Tags: techtalks, devops, machinelearning, news
Published: 2020-07-15 16:27:50

Hello People :wave: 
The wait is over. GitLab Meetup Community is hosting a virtual event on 25 July 2020. 

>Link to Free RSVP: https://www.meetup.com/GitLab-Meetup-Coimbatore/events/271874488/

**Agenda**:

5:00 PM IST - Welcome remarks by Ramya
5:05 PM IST - "Implementing MLOPS with GitLab CI and Continuous Machine Learning " by Venkat Sundar
Description: AI Developer

5:45 PM IST - "FinTech for Developers" by Raksha Aasish
Description: SDE at Juspay

6:30 PM IST - Closing remarks by Sunil Vijay

Join here for updates and more: https://www.linkedin.com/groups/8955040/

We also love when community members present at GitLab meetups. Send an email to gitlab.cbe@gmail.com if you’re interested in being the featured speaker at a future remote meetup.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/zmrcqnahq7dwbwxrhvcx.png)
Leadership and Innovation with Instacart's VP of Infrastructure
Tags: techtalks, sre, devops
Published: 2020-07-15 16:17:43

Originally published on [Failure is Inevitable](https://www.blameless.com/blog).

Blameless CEO Ashar Rizqi recently had the pleasure of interviewing Dustin Pearce in a virtual executive fireside chat and AMA. Dustin is an experienced leader in scaling hyper-growth, cloud-native companies, as the VP of Infrastructure at Instacart and having previously served as Head of Service Engineering at Slack.
#Key takeaways#
Here’s the TL;DR version we pulled from Dustin’s wealth of insights.

* **Behaviors and patterns Dustin set up within his teams that are signals of good service ownership.** Dustin believes this is twofold; the cultural factor is even more important than making sure the metrics and data are giving great visibility. Without the culture aspect, nothing else will succeed. Dustin also spoke about getting cross-functional team alignment through SLOs.
* **How to orchestrate alignment to prioritize innovation.** Leadership needs to determine non-siloed incentives that help with organization-wide initiatives. Additionally, teams need to remain hungry to avoid resting on their laurels. If they do, it’s likely that their competition will pass them by.
* **What leadership should be doing to help teams in a post-COVID-19 world.** This includes compassion, listening, and patience, as we can’t know what our team members’ lives look like during this difficult time. This also requires leadership acknowledging the sacrifices that teams make to keep systems up and running, as well as helping with goal setting that helps people feel effective in their roles. Trust plays a key role in this.
* **Giving visibility into your team's accomplishments, especially when it’s “keeping the lights on.”** One way this can be done is by establishing transparency through a catalog of products and services for infrastructure, which includes each service’s towers or stores, parameters, uses, and who staffs that service. This helps manage expectations. Dustin also recommends documenting work systems and requests in order to analyze the time spent and determine what’s worth prioritizing and what isn’t.
* **What service ownership really is and how it differs from traditional ops teams.** It’s about creating incentives for innovation and agreeing that delivering delightful customer experiences, not just shipping software, is the best way forward. It’s the opposite of throwing things over the wall. Fundamentally, it’s the concept of you build it, you run it.

The lightly edited transcript of their conversation is [here](https://www.blameless.com/blog/ama-dustin-pearce).
Splinter Cell + Objetos
Tags: php, braziliandevs, oop, games
Published: 2020-07-15 16:14:04

Anos atrás eu criei algumas classes para representar o jogo Splinter Cell através de objetos e com um uso de interfaces para mostrar tipos sendo compartilhados. Basicamente, é a representação de elementos (personagens e equipamentos) do jogo Splinter Cell da ubisoft através do paradigma da orientação a objetos.

Por exemplo, Sam Fisher (o protagonista do jogo) é composto por nightvision googles (óculos e visão noturna) com injeção de dependência e implementa a interface que define um agente especial.

```php
<?php

namespace SplinterCellOOP;

use SplinterCellOOP\ThirdEchelonAgent;
use SplinterCellOOP\FourthEchelonAgent;
use SplinterCellOOP\Goggles;

/**
 *
 * @author Raphael da Silva
 *
 */
class SamFisher implements FourthEchelonAgent
{

 	private $goggles;

 	public function __construct(
 		Goggles $goggles
 	){

 		$this->goggles = $goggles;

 	}

 	public function actStealth()
 	{

 		$this->goggles->enable();

 	}

}
```

Ao implementar a inteface `FourthEchelonAgent`, o personagem também implementa a interface `ThirdEchelonAgent`, pois a primeira é uma extensão da segunda, já que na história do jogo, a FourthEchelon é a sucessora da ThirdEchelon.

```php
<?php

namespace SplinterCellOOP;

use SplinterCellOOP\ThirdEchelonAgent;

/**
 *
 * @author Raphael da Silva
 *
 */
interface FourthEchelonAgent extends ThirdEchelonAgent
{

}
```

Além de Sam Fisher, outros agentes podem implementar a mesma interface, pois fazem parte da mesma organização (sendo do mesmo tipo).

```php
<?php

namespace SplinterCellOOP;

use SplinterCellOOP\FourthEchelonAgent;
use SplinterCellOOP\Weapon;
use SplinterCellOOP\Goggles;

/**
 *
 * @author Raphael da Silva
 *
 */
class IssacBriggs implements FourthEchelonAgent
{

	private $weapon;
	private $goggles;

	public function __construct(
		Weapon $weapon,
		Goggles $goggles
	){

		$this->weapon  = $weapon;
		$this->goggles = $goggles;

	}

	public function actStealth()
	{

		$this->goggles->enable();
		$this->weapon->use();

	}

}
```

É isso! Segue o link para todo o código no [repositório](https://github.com/raphael-da-silva/splinter-cell-com-objetos).
What are good developer habits?
Tags: discuss, productivity, career, developer
Published: 2020-07-15 16:07:15

---
title: What are good developer habits?
published: true
description: Curated answers from the Code Connector community Slack channel to this question.
tags: #discuss #productivity #career  #developer
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/l2uianlzlihceshq32de.png
---
1. When watching a video or reading, I will summarize what I have learned with a hand written note and draw an example.

2. Communication skills like public speaking (demos), writing (technical pitches or design documents), and group conversation etiquette (inclusive communication) are really important. For example, it doesn’t matter how good you are at coding if you interrupt people in meetings so they don’t want to work with you.

3. Ask questions, research, and learn new things. This doesn't have to be entirely new things. You will improve productivity if you learn shortcuts and hotkeys for your tools. Read documentation for the things that you use. 

4. Use version control, write unit tests, and document your code so that the next person working on it doesn't have to guess.

5. Build, rebuild, and break it. Don't be afraid to break something in a tutorial. Learning to fix things is important.

6. Do a tracer bullet first, before you start with robust functionality. Make the smallest end-to-end, full stack "Hello World" that touches everything you plan to integrate. Make sure that it works. Then start building out your functionality.

Code Connector Contributors: Walker Laury, Corey McCarty, Dennis Kennetz, George Spake, Isaac Arcos Huicochea, Steve Hallman MBA, PSM, PSPO, PAL

[Code Connector](https://codeconnector.io/) is a non-profit that's organized tech meetups to help people start their journey into tech. You can join our daily conversations by clicking this link: [Code Connector slack channel](https://bit.ly/2Fm3aN7).
How To Import and Export Modules in Node.js Tutorial
Tags: node, javascript, modules
Published: 2020-07-15 15:56:01

---
title: How To Import and Export Modules in Node.js Tutorial
published: true
description: 
tags: nodejs, javascript, modules
---

Originally posted [here on YouTube](https://youtu.be/nt9M-rlbWc8).
(Give me a thumbs up and subscribe if you found this useful 🙏).


Using modules in Node.js or other applications of JavaScript can be very useful to create more maintainable and reusable code.


In this tutorial we'll look at how to [import and export modules in Node.js](https://www.juniordevelopercentral.com/how-to-import-export-modules-in-node-js/).


We'll start off by taking a look at how to export a function using the module.exports syntax and then import it into another file by using the JavaScript require keyword.


This is the standard way of doing it but we'll also take a look at using the Babel transpiler to convert newer code using the JavaScript import and JavaScript export keywords into older code that can be used by Node.js.


With this second approach, rather than using module.exports and the require keyword, we can simply use the more descriptive and appropriate JavaScript import and export keywords which makes life a little easier.
Another Vscode extension - For Ruby Developers
Tags: rails, migration, vscode
Published: 2020-07-15 15:53:28

---
title: Another Vscode extension - For Ruby Developers
published: true
description: rails-migrate: view and run migration
tags: rails, migration, rubyonrails, vscode
//cover_image: https://direct_url_to_image.jpg
---
Recently, when coding in rails and a new migration is pulled in, I won't be aware until my browser notify me to run the migration.

I decided to build a vs-code extension to watch on my migration folder and notify me when there is a new migration, the extension has the ability to run migration also.

**Install here:** https://marketplace.visualstudio.com/items?itemName=danielshow.rails-migrate

**Check out the code** https://github.com/Danielshow/rails-auto-migrate
Retro Spaceship Game
Tags: codepen, javascript, showdev, webdev
Published: 2020-07-15 15:46:10

<p>Do not let 'em pass!</p>

<p>Just another simple retro-esque game I made, inspired by the 1980s game Galaga.</p>

<p>I used Base64 data for the images.</p>

<p>Controls:
Space bar: Launch fire
Left arrow key: Move Left
Right arrow key: Move right</p>

<p>I made this game before I had an access to the assets, so all of the assets I used here are just in Base64 format.</p>

<p>Please also check my <a href="https://github.com/takaneichinose/retro_spaceship">Github repository</a> of this</p>

{% codepen https://codepen.io/takaneichinose/pen/oLYWZN %}
The K.I.S.S Principle in Programming 
Tags: beginners, machinelearning, productivity
Published: 2020-07-15 15:38:50

 KISS is an acronym which means *Keep It Simple Stupid*. I don't  like to use the word Stupid because I know my readers aren't stupid, that’s why I choose to translate it to *Keep It Super Simple*.🙂

 KISS is an important term in programming because it puts in your subconscious that every process you’re creating should be as simple as possible and also equally as efficient.


## When we say ‘Simple’, what do we mean?

Simple in this context doesn’t necessarily mean easy, It simply means producing the same results or a better result with less effort or complexity.

> *In the concept of KISS, we neither want just less nor more, we simply wish to have only as much as is required.*

If you’re building a product that moves an object from point A to point B, then do that as efficiently as possible, while having simplicity at the back of your mind.

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

*Keep Simple Tasks Simple!*

The KISS principle can also be applied in Artificial Intelligence and Machine Learning. When building a simple Artificial intelligent system, you may not necessarily need to create a machine learning model, if an *If Statement* can do the job efficiently.

{% twitter 1272561538914750464 %}

In the programming context, there are a few points to note whenever we want to reduce complexity.

* Ensure your variable names describes the variable it holds properly.
* Ensure your method names translates to the purpose of that method.
* Write comments within your method where necessary.
* Ensure your classes has a single responsibility.
* Avoid global states and behaviors like as much as you can.
* Delete instances, methods or redundant processes within the code base that are not in use.


We should try to reduce complexity, while maintaining an efficient system. The British computer scientist, M. A Jackson actually wrote that,
> Programmers often take refuge in an understandable, but disastrous, inclination towards complexity and ingenuity in their work.

###Why is the KISS principle important in programming?

1. One major challenge Developers face is working on an existing code base. But when the KISS principle is applied it tackles that issue.

2. The KISS principle facilitates continuity when needed and gives room for other people to understand the process.

3. Simpler processes allow for greater efficiency in automated testing. It is easier to test a simple system than a complex one.

Finally, we should strive to reduce complexity as much as we can, make our coding process very transparent, efficient and secure.

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

For me, KISS brings to mind and indestructible glass box, where all the processes can be clearly seen but is also very secure.

On a lighter note, If you’re in a business meeting and you been cornered with some hard business questions that you barely understand but you’re expected to know, give Complex Technological Answers! 😂, Otherwise *keep it simple always!*. 😉

Adios.🙂
Beginners guide to writing a compelling README.md
Tags: beginners
Published: 2020-07-15 15:17:43

## What is a README.md? 

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

README.md is the first thing someone reviewing your project will see, so it really needs to captivate the viewer.

What's up with the .md? It means markdown. It is a markup language for text.

Your README should explain how your project could be used and how to use it. Think of it as the front page of the project and a place to get started.


### Do I need a README? 

short answer, **YES**. Make a short README on your first commit. 

#### Why? 

Good question. There are several reasons why you **NEED** a README:

1. For reference during your project to remind yourself of the goals you set.

2. You know your project is great, so make it easy to understand why it is so great. No one likes trying to understand a project by reading poor documentation.

3. To stand out and entice people to learn more about your amazing project.


## What should it include? 

At a minimum, your README should include:
1. A brief description of your project, what it does, and how to use it
2. A demo - screen recorded and uploaded to YouTube
3. Screenshots of your project
4. Technologies used and the requirements
5. Acknowledgements
6. The developer and contact information

## Resources:

* [GitHub Markdown Cheatsheet](https://guides.github.com/pdfs/markdown-cheatsheet-online.pdf)
* [Mastering Markdown](https://guides.github.com/features/mastering-markdown/)
* [Make a README](https://www.makeareadme.com/)

## Conclusion

When job searching, employers will review your top projects and having a well written README.md could help land that dream job. Also spending an extra 10-20 minutes writing up a kickass README.md could make a huge impact on how many people take the time to look at your project. Many developers will spend a lot of time adjusting the background image or fixing the letter spacing but won't make a README.md for their project. This can discourage potential employers and connections from looking further into your work. Don't be that person. Make the README.