teleren/devto huggingface dataset:
How to share properties from an Interface to a new Interface with TypeScript
Tags: typescript, interface, inheritance, beginners
Published: 2021-03-30 03:38:57

# Introduction

I just saw somewhere in an FB Community group asking how they are able to share the properties from a `User` interface to a `PublicUser` interface. 

I have answered the person who asked the question and I'd also like to share my answer in this post.

# Solution

Given that you have a `User` interface with the following properties that describes the model/entity.

```ts
interface User {
  name: string;
  email: string;
  age?: number;
}
```

And you also want these properties in a new interface, for example for a `Customer ` interface we will extend the `User` interface

```ts
interface Customer extends User {
  phoneNumber: string;
  
  address?: {
    streetAddress: string;
  } | null;
}
```

By doing that we will have the `name`, `email`, `age` fields inherited into our new interface which is the `Customer` interface.

So as an example I will attach a screenshot below.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0t6kbvpx68fleohtnx21.png)
 
To break it down for you, we created an object and gave it a type of `Customer` interface, so by triggering or to peek which properties are available in Visual Studio Code (with CTRL + Space) it shows that the properties from `User` interface are inherited over to the `Customer` interface.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w35hkhecrkiala40xpj4.png)
 
# Conclusion

With that in mind instead of having to copy all properties from the `User` interface and paste it into the `Customer` interface, we have just inherited it into the `Customer` interface from the `User` interface. So we are writing lesser code.

That's all I have. Hope this was useful!
Reasons why to study for Software Engineering?
Published: 2021-03-30 03:28:49

It is not uncommon to choose your career based on availability and salary offers, and when it comes to Software Engineering, you won’t be disappointed in those respects; Software Development is a booming industry and offers a career path with endless progression, opportunities and, depending on how good you are, decent pay. However, it’s not all about the money; there’s so much more to the role than that.


##Benefits of being a Software Engineer:


####You will learn every day

Every day you’ll be presented with new challenges. You’re an engineer working on potentially very complex problems. You need to know how to figure things out, and if you don’t, you need to learn it on the job.

You are expected to be learning every day, and this is awesome as you’re not stagnating in the job market but building up lots of experience as time passes. Valuable experience for your company, other companies if you decide to switch jobs, or even for yourself if you want to try going indie.

Being required to learn every day can either be frustrating, or very exciting. It all depends on your mindset.


####Good pay and economic benefits

Software development is one of the jobs that - depending on your responsibilities and how good you are at your job - generally come with good pay.

As a remote employee, you can choose to work for a richer country and take advantage of the economic benefits of doing so. Of course, this depends a lot on the options available to you.

If you choose to be a freelancer, that’s another field where companies are willing to spend good money on talent.

You will likely be paid average in your first few jobs, however.


####High on Demand and Growth Opportunity

It’s almost certain that good engineers never go jobless. Most of them are in fact approached even before finishing their degree by big or small companies. Unfortunate are those who end up working only after finishing their studies.

This is also because software engineers are not limited to specific industries or certain domains. Every company irrespective of their customer niche requires the expertise of engineers.

At the same time, There is not any level for software engineers that is ultimate. Technology is always evolving so there is always a lot to learn and grow. Being on the field helps you quickly adapt to the upgrades and advancements in the current technology.


####You will love your job

I believe there is a huge job satisfaction because the consumers of your product will be probably in millions. Imagine the product you made being used by those many people and getting good feedback from them. Imagine yourself in the spot of Mark Zuckerberg or Bill Gates or Jef Bezos or Jack Ma. How satisfied would you be?

You’ll be earning an exceptionally huge amount of money and your expertise and learnings will be inherited by peoples from all over the world.
CRUD Operation in Laravel (Crash Course step by step)
Tags: laravel, php, programming
Published: 2021-03-30 03:18:44

Hey guys,

If you are new to laravel, this one is for you guys.

It is intended to figure common errors and debugging steps while coding this process. Most courses are only focus on good result. But I will show you how to get errors while producing CRUD of laravel in this free course.

Here's is my video lecture link.

https://www.youtube.com/watch?v=SfaUozE6rZQ&t=77s

I hope you enjoy this video.
I will upload more about programming stuff every week so don't forget to like and subscribe my channel.

Thanks a lot guys.
LeetCode 289. Game of Life
(javascript solution)
Tags: javascript, algorithms
Published: 2021-03-30 03:08:46

###Description:
According to Wikipedia's article: "The Game of Life, also known simply as Life, is a cellular automaton devised by the British mathematician John Horton Conway in 1970."

The board is made up of an m x n grid of cells, where each cell has an initial state: live (represented by a 1) or dead (represented by a 0). Each cell interacts with its eight neighbors (horizontal, vertical, diagonal) using the following four rules (taken from the above Wikipedia article):

Any live cell with fewer than two live neighbors dies as if caused by under-population.
Any live cell with two or three live neighbors lives on to the next generation.
Any live cell with more than three live neighbors dies, as if by over-population.
Any dead cell with exactly three live neighbors becomes a live cell, as if by reproduction.
The next state is created by applying the above rules simultaneously to every cell in the current state, where births and deaths occur simultaneously. Given the current state of the m x n grid board, return the next state.

###Solution:
Time Complexity : O(n^2)
Space Complexity: O(n^2)

```javascript
var gameOfLife = function(board) {
    const newState = Array(board.length).fill(0).map(() => Array(board[0].length).fill(0))
    
    //Iterate over the board and populate the newState
    for(let i = 0; i < board.length; i++) {
        for(let j = 0; j < board[i].length; j++) {
           setNewState(i, j, board, newState) 
        }
    }
    
    //Iterate over the board again and set the board to the newState values
    for(let i = 0; i < board.length; i++) {
        for(let j = 0; j < board[i].length; j++) {
           board[i][j] = newState[i][j]
        }
    }
    
    //Function to set values in newState
    function setNewState(i, j, board, newState) {
        const cell = board[i][j]
        const colMax = board[i].length
        const rowMax = board.length
        let total = 0
        
        // look north
        if(i-1 >= 0) total += board[i-1][j]
        // look northeast
        if(i-1 >= 0 && j+1 < colMax) total += board[i-1][j+1]
        // look east
         if(j+1 < colMax) total += board[i][j+1]
        // look southeast
        if(i+1 < rowMax && j+1 < colMax) total += board[i+1][j+1]
        // look south
        if(i+1 < rowMax) total += board[i+1][j]
        // look southwest
        if(i+1 < rowMax && j-1 >= 0) total += board[i+1][j-1]
        // look west
        if(j-1 >= 0) total += board[i][j-1]
        // look northwest
        if(j-1 >= 0 && i-1 >= 0) total += board[i-1][j-1]
        
        // Set values in newState to 1 if it follows the provided life rules
        if(cell === 1 && total === 2 || total === 3) {
            newState[i][j] = 1
        } else if(cell === 0 && total === 3){
            newState[i][j] = 1
        }
    }
};
```
Mi error al usar Cognito (AWS).
Tags: javascript, cognito, graphql, aws
Published: 2021-03-30 02:31:24

TL;DR: no uses `window.localStorage.clear()`

He invertido mucho tiempo en un proyecto con GraphQL donde la autenticación es manejada con Cognito, pero la base del proyecto solo se fundamentó en usar login con correo, nunca me tomé la molestia de hacer OAuth (porque nunca lo había hecho y ya tuve bastantes batallas con la documentación de Amplify por mi propia cuenta siendo primerizo con este backend).

Usar autenticación con Cognito y GraphQL es excelente si utilizas la API de App Sync también, te permite ponerle un candado personalizado a la API por default, luego escogiendo cuales tablas de la base de datos tienen acceso público y cuáles tienen acceso solo con login.

#Como lidiar con OAuth y Cognito
Como todo el tiempo de desarrollo previo no tuve la necesidad de usar un link que sacará a los usuarios del proyecto, nunca me vi en la necesidad de usar la `localStorage`, con GraphQL me bastaba conseguir la información que necesitaba para que la página en ruta funcionara. **Pero** cuando agregué OAuth con Google, el usuario sale de tu proyecto y luego regresa a tu ruta inicial `/`, (al menos porque el URI de return según Google, no puede tener un /, es decir esto www.ejemplo.com/checkLogin ❌, solo esto www.ejemplo.com)

Entonces antes de hacer el login con google, el programa escribe `window.localStorage.setItem('social', 'SignUp')`
y cuando regresa al landing page, revisa si hay un usuario conectado && `window.localStorage.getItem('social') === 'SignUp'`) cambia al usuario de ruta para que termine de crear su perfil.

#El Problema (O mi novatada)
Si esta evaluación sobre `'social' === 'SignUp'` es falsa, estaba ejecutando `window.localStorage.clear()` y esto elimina el usuario de Amazon Cognito del navegador 😅


#Conclusión
No escribas `window.localStorage.clear()` mejor reemplaza el valor como `window.localStorage.setItem('social', 'INIT')` porque no sabes que otros paquetes de npm están usando la localStorage.
JavaScript Arrow Functions
Published: 2021-03-30 02:26:07

So we're getting to know JavaScript! One complaint I've been hearing with my peers is the syntax takes a while to get your head around. JavaScript is not forgiving when it comes to mistakes, especially when involving curly braces and parenthesis. Hunting for the missing closing curly braces in dozens, sometimes hundreds of lines of code can eat up a lot of time.

Luckily JavaScript does give us some ways of easing our pain. Let's take a basic look at arrow functions

**What is an arrow function?**

An arrow function is a compact way of writing out functions! Sometimes they can even be condensed into one line. Let's take a look at some simple code;

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

Here we have a simple function. We'll get this down to a single line. First we remove the "function" declaration, and put an arrow (=>) between the argument and opening bracket.

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

Then we can remove the curly braces, and the word "return." With arrow functions, the return is implied.

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

Awesome. Now we can remove the argument parentheses and we have just one line of clean looking code.

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

JavaScript syntax can get complicated. There are situations were you can't use arrow functions. For instance, if you have a function that contains more than one statement, you still have to use curly braces and the return keyword.

Another case where you would have you use a regular function is if you have no arguments. If you want to leave those parenthesis empty, say if you don't know how many arguments you might need, arrow functions simply won't work. Go with a regular function. 

Also you can't name them. Arrow functions are all anonymous functions, as they can't have a name identifier.

I hope this brief explanation of arrow functions have helped you understand it a little bit more. It was a foreign concept to me when starting to learn JavaScript  and for a while when practicing writing code, I stuck to regular functions. Only after I saw it broken down, step by step, did I understand the syntax a little better.
Semantic HTML button vs Anchor
Tags: webdev, html, codenewbie, programming
Published: 2021-03-30 02:21:27

Today's post is all regarding buttons vs anchors and after you ought to use that part.

I'm certain we've all used the incorrect part for one purpose or another however it's very necessary to think about the HTML components you're **victimised** about and you use the one that creates sense.

> Buttons are used to **trigger actions**. Anchors are for **navigating** between URLs. That is the main thing to remember 😅

---

Semantic HTML has come a long way but I have seen many people using the button and anchor tag incorrectly in the production code. This post will help you decide which element you should use. 

#### Problem the `<div>`

The actual problem is not with the `<div>` it's with you. The `<div>` is for layout not for clicking. Both buttons and anchor are specifically designed for clickable elements. 

Try not to add clickable interactivity to elements that sh shouldn't have - like a `<div>`. There may be some minor edge cases but try to avoid if you can!

EXAMPLE:

If you need to trigger an action or interaction on the same page use the button element. 

```html
<!-- Example use ina form-->
<form action="POST">
    <label>Email: </label>
    <input type="email" placeholder="Enter your email here" />
    <button type="submit">Send</button>
</form>

<!--Example use with JS-->
<button type="button" onclick="triggerFunction()">
    Show modal
</button>
```

Use cases: 
- Forms
- Show/Hide elements
- Gallery interactions
- Modal triggers

---

### Anchors for navigation

If you would like to navigate the user to a distinct URL(on your website or externally) use the anchor element. 

```html
<!--Example-->
<nav>
    <a href="/">Home</a>
    <a href="/blog.html">Blog</a>
    <a href="/about.html">About</a>
    <a href="/contact.html">Contact</a>
</nav>   

<!--For external links-->
<a href="https://rahulism.tech" target="_blank">
   RAHULISM's BLOG
</a>
```

Use cases: 
- Site navigation
- Download resources
- Referral links
- Off-site links

So, I guess now you got to know something you were doing wrong⚡. 

---

🤭Thanks For Reading | Happy Coding⚡
Templates as Teachers
Tags: templates, learning, portfolio
Published: 2021-03-30 02:20:48

Until recently, I had the impression that using templates to build a website might be "cheating" or "not real developer work", that a true developer would build every site from scratch.

Then, [#100Devs](https://www.twitch.tv/learnwithleon) Instructor [Leon Noel](https://leonnoel.com/) insisted that if a Developer is also a Designer, then yes, build a portfolio site from scratch, otherwise, definitely use a template. So I extended this to my sister's portfolio site and gave myself permission to use [this free template from Matthew Casseres](https://github.com/issaafalkattan/React-Landing-Page-Template).

What jumped out at me is the difference in learning taking place by working with an already built app. It felt more like I was collaborating with someone else, getting a peek into Matthew's code style, which helped me think about my own, and by leaving credit at the bottom, I'm hopefully giving him more traffic. Win-win-win.

From his template, I built my sister a new website to feature her quilting business, [The Joy Of Quilting Art](https://www.joyofquiltingart.com).

Thank you Leon for inspiring me to try it out, and thank you Matthew and other folx who put templates out there for free, for sharing your work with me and others!

Also, thank you to another dev.to user, [Davide Pacilio](https://dev.to/davidepacilio), for sharing [a great list of free React templates](https://dev.to/davidepacilio/35-free-react-templates-and-themes-32ci) that I have bookmarked and will definitely return to!

What are your thoughts on using templates? If you use them, where do you find yours?
(quick tip) how to get Odoo version from code
Published: 2021-03-30 01:41:50

sometimes, you may need to prepare an Odoo development environment. you cloned the repository. however you need to get the Odoo version from code before even running it. in such scenario you could use `grep` to retrieve the Odoo version, as following:
```bash
grep -r -E "^version_info" {{PATH}}
# where path would your Odoo code path. so it could be
grep -r -E "^version_info" /home/user/project/odoo
```
Dark Mode Three Way Switch
Tags: css, javascript, tailwindcss, webdev
Published: 2021-03-30 01:29:31

Dark mode is the new web design hotness. There are a lot of examples of switches out there but most of them are just dual switches — Light/Dark. I wanted to implement a three way switch in the site I am designing: Light/Auto/Dark so that people can choose to lock it in one mode or another or leave it auto so that it adjusts with `prefers-color-scheme`.

To implement it, I borrowed some ideas from [CSS Toggle Switch](https://ghinda.net/css-toggle-switch/) using radio buttons and css to build the toggle. I implemented it in Tailwind with light/dark mode colors provided via css variables. I then wrote some simple vanilla JS to store the add "dark"/"light" class to the body tag and store the state in localStorage.

I'm pleased with the result. It's simple and clean and ideally should be accessible since it's based in the same technique that CSS Toggle Switch uses (I haven't tested it for accessibility though so no promises).

Here's my CodePen of it!

{% codepen https://codepen.io/colinaut/pen/dyNpdOV %} 

Cover photo by [Elliott Engelmann](https://unsplash.com/@elliottengelmann?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
Write A Custom Dropdown Menu With Stencil
Tags: javascript, stencil, webcomponents
Published: 2021-03-30 00:31:24

Our goal for this tutorial is to write a custom dropdown menu in
[Stencil][stencil] that compiles to a custom element `<my-menu>`
where consumers can write something like:

```html
<my-menu>
  <my-menu-item>
    <my-button>Action 1</my-button>
  </my-menu-item>

  <my-menu-item>
    <my-button>Action 2</my-button>
  </my-menu-item>

  <my-menu-item>
    <my-button>Action 3</my-button>
  </my-menu-item>
</my-menu>
```

By the end of this tutorial you should have some basic understanding
of how to create basic web components using Stencil, as well as give
you the foundational understanding of web components needed for the
task.

This tutorial will not go into detail for every feature that Stencil
provides, nor will it try to give you complete understanding of web
components. Refer to the [Stencil docs][stencil-docs] for the former,
and [MDN][mdn] for the latter.

[mdn]: https://developer.mozilla.org/en-US/docs/Web/Web_Components
[stencil]: https://stenciljs.com
[stencil-docs]: https://stenciljs.com/docs/introduction

## Kickstart the Project

We begin our project by writing:

```bash
npm init stencil component my-components
```

This pulls the Stencil starter pack and tells it to start a new
component library called `my-component`. It will also create basic
_Hello, World!_ component under `src/components/my-component`. You can
see it in action by typing:

```bash
npm start
```

This will open up a browser window in <http://localhost:3333> showing
your component in action.

If you open `src/index.html` you will see how this component is consumed:

```html
<!DOCTYPE html>
<html>
  <!-- ... -->

  <body>
    <my-component
      first="Stencil"
      last="'Don't call me a framework' JS"
    ></my-component>
  </body>
</html>
```

We are going to write our goal structure there now and worry about
implementing each component later. So go ahead and add this to the
body of the HTML file:

```html
<!-- src/index.html -->

<!-- ... -->

<body>
  <my-menu>
    <my-menu-item>
      <my-button>Action 1</my-button>
    </my-menu-item>

    <my-menu-item>
      <my-button>Action 2</my-button>
    </my-menu-item>

    <my-menu-item>
      <my-button>Action 3</my-button>
    </my-menu-item>
  </my-menu>
</body>
```

You can also go ahead and delete the `src/components/my-component`
directory as well as `src/utils`, we won’t be needing these during
this tutorial.
Can we do CD without CI?
Tags: devops, continuousdelivery, continuousdeployment, cicd
Published: 2021-04-02 10:22:53

---
title: Can we do CD without CI?
published: true
date: 2021-03-30 00:00:00 UTC
tags: devops, continuousdelivery, continuousdeployment, cicd
canonical_url: https://jhall.io/archive/2021/03/30/can-we-do-cd-without-ci/
---

What if we could do Continuous Delivery without setting up a full, automated Continuous Integration pipeline first?

This is the topic of [my recent interview](https://cdeliveryfdn.buzzsprout.com/1008697/8211942-can-you-do-cd-without-ci) with Jacqueline Salinas on the [Continuous Delivery Foundation](https://cd.foundation/)’s podcast, [The Pipeline](https://cd.foundation/podcast/).

I first wrote about this topic [back in 2019](https://jhall.io/posts/cd-without-ci), and for those interested I have recently developed the [Lean CD Bootcamp](https://jhall.io/lean-cd-bootcamp) email course to walk you through the steps of setting up a CD pipeline without full CI.