teleren/devto huggingface dataset:
A 'simple' TypeScript example
Tags: typescript
Published: 2019-09-22 17:22:20

When learning [TypeScript](https://www.typescriptlang.org/docs/handbook/functions.html#function-types) it can seem verbose and confusing—if applied to the extreme. Take for instance a simple `add` function...

In JavaScript:

```js
function add(x, y) { 
  return x + y;
};

// or as function expression
let add = function (x, y) {
  return x + y;
};

// or with ES6 fat-arrow
let add = (x, y) => x + y;
```

In TypeScript, one could define types in several ways:

```typescript
function add(x: number, y: number): number { 
  return x + y;
};


// or as function expression (type inferred on the _left_ operand)
let add = function (x: number, y: number): number {
  return x + y;
};

// or as function expression (type inferred on the _right_ operand)
let add: (x: number, y: number) => number = function (x, y) {
  return x + y;
};

// or as function expression (explicitly and somewhat redundantly)
let add: (x: number, y: number) => number = function (x: number, y: number): number {
  return x + y;
};


// or with ES6 fat-arrow (inference on left)
let add = (x: number, y: number): number => x + y;

// or with ES6 fat-arrow (inference on right)
let add: (x: number, y: number) => number = (x, y) => x + y;

// or with ES6 fat-arrow (😳)
let add: (x: number, y: number) => number = (x: number, y: number): number => x + y;
```

Yikes! And that's with a really simple, pure function!

But really, we could narrow the types (by using `const`) and also let TS infer as much as possible:

```typescript
function add(x: number, y: number) { 
  return x + y;
};
// Inferred type is function add(x: number, y: number): number


const add = (x: number, y: number) => x + y;
// Inferred type is let add: (x: number, y: number) => number
```

All the same type safety, but with minimal verbosity! FTW.
Open sourcing the Solutions Architecture Patterns
Tags: architecture, devops
Published: 2019-09-22 17:14:32

Solutions Architects (SAs) are the people who convert deep technical knowledge into a format that can be understood by both technical and non-technical people. They are the bridge between product engineers and salespeople. It is so strange that there is no common knowledge base (KB) that has been shared in the open-source community related to solutions architecture.

That was the motivation for me to build such a KB which can be reused by SAs regardless of which technology stack they are working with or promoting. I have started small an initiated a GitHub repository and started contributing solutions architecture patterns which I learn from other people and learn while I’m working as a SA. Today, I have released the 0.3 version of this repository with a set of new solutions architecture patterns. Here is the GitHub repository link for this repository.

[Solutions-Architecture-Patterns](https://github.com/chanakaudaya/solutions-architecture-patterns)


The architecture patterns which are discussed here are not my own inventions. Rather, they are common patterns we found day in day out working as Solution Architects. The below mentioned diagram is a sample architecture pattern that is described in the repository.

![Microservices-Security-Policy-Based](https://github.com/chanakaudaya/solutions-architecture-patterns/blob/master/vendor-neutral/Micoservices-Security-Pattern-Policy-Based-OPA.png)
Figure: Microservices Security Pattern

This repository is mainly divided into 2 categories. Those are,
1) Vendor Neutral
2) Vendor Specific

Vendor Neutral pattern category contains solutions architecture patterns which are not restricted to a specific vendor or technology stack. The architectures discussed here can be implemented with multiple vendors as well as with one vendor. But there are no special remarks on a specific vendor in most cases. There are some patterns that utilize specific technologies. But those are very rare.

Vendor Specific pattern category contains solutions architecture patterns that are specific to a given vendor or technology. These architecture are bound to respective vendors and their products. This is an area in which we are expecting some contributions from people working with these vendors since we have not worked with all the vendors mentioned in the repository.

We have started this project with the goal of building an open source community around solutions architecture discipline and a common ground where people can share their knowledge, ideas, and suggestions. This is still early stages and we have 65+ GH stars and 15+ GH forks as of this writing.

We would like to share an open invitation to Solutions Architects/ Engineers who works with enterprise software products and solutions to come and join with us to build a wider community around the technologies we build. You can send your contributions to the below GitHub repository link.

[Solutions-Architecture-Patterns](https://github.com/chanakaudaya/solutions-architecture-patterns)
angular 8 owl slider
Tags: angular8, angular8slider
Published: 2019-09-22 17:00:56

---
title:angular 8 owl slider
published: true
description: Angular 8 owl slider working demo
tags: angular 8, angular 8 slider
cover_image: https://therichpost.com/wp-content/uploads/2018/11/How-to-Implement-Owl-Carousel-Slider-in-Angular-7-1024x420.png
---
Hello to all, there is the working post link to check

[Owl Carousel Slider in Angular 8](https://therichpost.com/how-to-implement-owl-carousel-slider-in-angular-8/)

Thank you
What's your morning routine for a productive day?
Published: 2019-09-22 16:55:17

My morning routine is pretty simple! I usually try to get up quite early but also try to get enough sleep as well (at least 7-8 hours). 

So here's how my mornings usually go:

- 6:00 AM - Wake up

- 6:00 - 6:10 - Wash my face, Drink some water and feed my cat

- 6:10 - 6:30 - Do some physical exercises for 10 to 20 minutes - usually, yoga works best for me

- 6:30 - 6:40 - Meditate for 10 minutes 

- 6:40 - 7:30 - Read a book, study something new or do some creative work like writing

- 7:30 - 8:00 - Take a quick shower and prepare a smoothy for breakfast

- 8:00 AM - Off to work

I also try not to touch my phone before 7AM.

This simple routine helps me throughout the whole day, it keeps my mind sharp and helps me avoid burnout.

So what's your morning routine like?
.NET Conf 2019 is about to start! 🚀
Tags: dotnet, webdev, csharp
Published: 2019-09-22 15:49:16

---
title: .NET Conf 2019 is about to start! 🚀
published: true
description: .NET Conf is a free, 3 day event co-organized by the .NET community and Microsoft, don't miss it!
tags: dotnet, webdev, csharp
cover_image: https://www.dotnetconf.net/img/dotNETConf_banners_facebook_eventinfo.png
---

**.NET Conf 2019 starts tomorrow, September 23th!**

What can we expect for this event? The release of .NET Core 3.0 and Entity Framework Core 3.0! Also content about VS 2019, Blazor, DevOps, F#, Xamarin... and more!

Three days on a free event full of content about the technologies we love, or maybe about to discover for future projects!

Check out the [agenda](https://www.dotnetconf.net/Agenda) to know about all the talks, sessions and workshops.

{% youtube w32mGFYqGsE %}

What content do you expect most? Will you attend a local event with the community? Let me know in the comments!

And if you want further readings:

* [.NET website](https://dotnet.microsoft.com/)
* [.NET Conf website](https://www.dotnetconf.net/)
Good Code is Boring
Tags: beginners, advice, 2cents
Published: 2019-09-22 15:27:57

---
title: Good Code is Boring
published: true
description: 
tags: beginners, advice, 2cents
---

You have seen them many times. Small snippets of code and the question ***“What would the the following piece of code print***” beneath. You might have tried taking a guess, and perhaps, even failed. 

{% twitter 865159346149314560 %}

I find those kinds of questions utterly pointless. They not only teach you **nothing** about real-world programming, but might also lead many newcomers to long-term frustration with programming. 

All programming languages have baggage - obscure features that made it in the spec but were later deemed as **hacks** that should be avoided. There is a certain sense of pride that junior programmers feel when they find such hacks and use them to demonstrate problem-solving skills. I am all in favor of encouraging developers to be proactive and think out of the box. Yet, I often try to point out that using questions like the above as a way of judging one's skills is the wrong way to do it. The mere fact that an opportunity for such questions exists in the first place, should make one take a skeptical look at the language itself. 

Contrary to what your teacher taught you, real-world programming is all but proving yourself at solving complex riddles. Much of the well-written production code I have seen is pretty trivial and boring-looking like. This makes it easy to follow and maintain years down the road, once its original creator no longer works on it.
Myths & Legends influence Popular Culture
Tags: discuss
Published: 2019-09-22 15:27:37

#Brands
Nowadays, I see many personal, corporate brands and media to readily integrate themes of godlike figures, mythical statues and symbolic creatures into their public appearance with a clear intention to invariably stir heartfelt emotions or thoughts imposing desired effect on subjects.
##Influence
Often times this influence is invigorating, such as in gymnasiums “Cross-Fit”, where they place posters of Ancient Deities and great men and women (think of Hercules, Amazonians). This truly imparts the energy and vitality of the figures. However, sometimes, marketers leverage same laws of human nature imbuing business and income.
##Magicians
I, personally, aspire to the power of the myth of “magicians” which transcends current age of information which originates with technical innovations: world-wide-web social networking, interplanetary traveling, infinite computing.
##Open Source
As people are interconnected, and information travels with the speed of light around the globe, humanity achieves enormous cooperation and hive-mind efficiency on collaborative projects. One good example is open-source software, which engages developers from all notches of Earth, (and soon beyond Earth), to practically contribute to software development that may as well solve worldly problems in business and in personal life. With such propensity to continuously improve processes, one cannot but to draw parallel lines to Prometheus, who initiated the whole story of Innovation, stealing fire.
## Infinite Computing
Innovation on the plane of infinite computing already yields us immensely valuable results across the board of sciences, delving in even further depths of each, attaining earlier unattainable insights.
## Real Magic
By real magic, however, I regard recent discoveries in quantum physics that entitle innovators (magicians) of current age to tackle with new laws, and leverage them for humanity’s sake. In my lifetime, Mars will get populated by humans.
### What do you think?
Items in, Columns out | Playing with CSS Grid
Tags: css, webdev, beginners, tutorial
Published: 2019-09-22 15:22:14

## Intro

I'm starting a series on things you can do with css grid, and to start it off here's something simple.

## The Idea

Just add items to a certain element and have them automatically ordered into columns (or rows) with CSS Grid.

## Demo

{% codepen https://codepen.io/mikister/pen/VwZVGXB default-tab=css,result %}

## How it works

There are really only three properties that we need to do this (everything else in the demo is just for looks). They are:

```css
.parent_element {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: auto;
}
```

So the **first property** tells the browser that the element with that class should behave like a grid.

The **second property** tells how many columns there should be.
`repeat(7, 1fr)` is just syntactic sugar for `1fr 1fr 1fr 1fr 1fr 1fr 1fr`.
The `fr` is a css unit that means fraction, so this divides the element into 7 equal columns.

The **third property** is what tells the browser to handle setting the rows, and the value passed to it is what the row height should be.

If you want to order things into **rows** then just use:

```css
.parent_element {
  display: grid;
  grid-template-rows: repeat(7, 1fr);
  grid-auto-columns: auto;
}
```

## Use cases

You'll use this method mostly when elements are all of the **same** (or at least similar) **height**. Here are some ideas where it can be useful:

- **Web Store Items**, when you have a card that contains an item's picture, name and other properties, you can organise all of them into a neat grid
- **Portfolio projects**, again cards, same concept as above
- **A calendar**, if you ever need to put one on a website
- **Gallery**, only if all pictures are the same height
- **Grid view on Dropbox/Google Drive** - maybe you decide you want to build them from scratch for your portfolio

## What not to use this for

- **Masonry layout** (think of pintrest cards), why, because each row's height is the same as it's tallest member and there'll be weird white spaces everywhere, instead use `columns` property or multiple vertical flexboxes and divide elements between them

----

If you have any suggestions please let me know in the comments.
What if Business Requirments where semi-structured files in project's repo
Tags: discuss, requirements, git
Published: 2019-09-22 15:21:39

During my dev career, I have many times witness the case that business requirements (and thus, consequently, functional specifications) were not treated with the same scrutiny as the source code. The source code usually passes at-least from one human reviewer that actively tries to improve the quality of it, there are standards defined regarding the quality of the code, and formal tools (usually git) are used to track the changes and the reason behind them.

Business Requirements are ofter described in issues on a separate issue management system and are usually incomplete and separated from source code. Thus it is easier for the code and requirements to fall out of sync (ie a new issue is created for an updated Business Requirement, but the old commits still point to the old issue that holds an outdated business requirement).

To handle both the issue of sub-par business requirements and their "distance" from the codebase I'm thinking of defining a "standard" that would require the business requirements to be stored in markdown files inside the source code repository.

My current approach is:

- **Possibly** split business requirements from functional requirements (functional requirements are written based on business requirements but are more technical)
- Allow hierarchical structures to be defined by referencing *parent* requirements.
- Provide meta-data (like front-matter in static site generators)
- Link acceptance criteria to test cases

A command-line utility will be built that will: 
- enforce *Definition of Ready* by presenting requirements without acceptance criteria as not ready
- provide the current status of the project based on the state of each business requirement (not ready, no tests are written, tests are written but fail, tests are written and passing)
- be able to run on pre-commit or pre-merge to either indicate issues or fail the commit/merge
- be able to run on ci/cd to generate and publish the current state of the project 

So, what are your opinions about this? Do you see any value on this approach? What would you require to use this approach instead of what you are already using?
What's your best software pun?
Tags: discuss, fun, watercooler, jokes
Published: 2019-09-22 14:53:59

---
title: What's your best software pun?
published: true
description: What's your best software pun? The more cringe-worthy the better!
tags: discuss, fun, watercooler, jokes
---

Yesterday I realized that I had included a great pun in my Cache is King conference talk(besides the title of course!) without even knowing it. 

> My team and I were bound and determined to find the root cause of our MySQL woes

So my challenge to you is, what is the best software pun you have heard or you yourself have dished out?!

The more cringe-worthy the better!!!
Today I Learned - form
Tags: html
Published: 2019-07-12 09:07:43

---
title: Today I Learned - form
published: true
description: Today I Learned about the form attrribute.
tags: HTML
---

# TIL - form

_12.07.2019_

I had the requirement to create a page where there is a form displayed and the form buttons where placed inside a header, the template was something like this

```html
<body>
  <header>
  	Headline
    
    <!-- SUBMIT button should be displayed here -->
    
  </header>
  <main>
    <form>
      <label for="someinput">Some Label</label>
      <input type="text" id="someinput" name="someinput" />
    </form>
  </main>
</body>
```

There are several ways to solve this:

- Using CSS
  - everybody loves playing around with position: absolute and all it's children like top, left … - I know I do /s
- Adding the header to the form
  - This could be a solution but in my case I was building a vue app and the header id a reusable component, whereas the form is displayed inside a **<router-view />**

- Using a cool attribute this article is all about
  - Using a builtin attribute could solve this problem (and in my case did)



## Welcome form

The form attribute can be used to point an element to its parent form without beeing inside of it

```html
<body>
  <header>
  	Headline
    
    <button type="submit" form="myform">Submit</button>
  </header>
  <main>
    <form id="myform" action="myAction.php">
      <label for="someinput">Some Label</label>
      <input type="text" id="someinput" name="someinput" />
    </form>
  </main>
</body>
```

The form you'll want to bind your button to needs to have an id - thats it. In your control, in my example the submit button, the attrribute form should point to the id of your form element.

The form attribute can be used on a variety of elements and is not limited to buttons.

## Sources

- https://www.impressivewebs.com/html5-form-attribute/
- https://developer.mozilla.org/de/docs/Web/HTML/Attributes
Open Graph Images with Github Actions
Tags: github, actions, seo, gatsby
Published: 2019-09-22 14:39:03

Open graph images are those that show up on your social media card when you share the URL.

Here is how to add one:

```html
<meta property="og:image" content="http://ia.media-imdb.com/images/rock.jpg" />
```

Simple, Right?

Now for comparison here are two tweets:

![Bland tweet without open graph image](https://thepracticaldev.s3.amazonaws.com/i/g7u4xgj2icglopd69ttw.png)

I think we can all agree that this is pretty bland.

Now let’s look at another one, but now with the Open Graph Image:

![Much better post with open graph image](https://thepracticaldev.s3.amazonaws.com/i/glb79ybx4zbkaptb9ghk.png)

Much better.

But moving to photoshop for creating this image is pretty hard, it’s mostly generic anyway.

#Github Actions to the rescue

[Install from Marketplace](https://github.com/marketplace/actions/generate-og-image)

[Generate OG Image](https://github.com/marketplace/actions/generate-og-image) is a customisable open graph image generator that runs on Github Actions which means it is free for public repositories.

You can add it to your existing workflow by adding the following lines to your `action.yml`:

```yml
name: 'Generate OG Images'
on: pull_request

jobs:
  generate_og_job:
    runs-on: ubuntu-latest
    name: Generate OG Images
    steps:
      - name: Checkout
        uses: actions/checkout@v1
      - name: Generate Image
        uses: BoyWithSilverWings/generate-og-image@1.0.3
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          GITHUB_CONTEXT: ${{ toJson(github) }}
        with:
          path: static/post-images/
```

Steps to note here:

1. It needs the `GITHUB_TOKEN` so it can access the markdown files and commit the generated image.
2. `GITHUB_CONTEXT` gives more information pull request.
3. `actions/checkout@v1` allows to access the files inside the action.
4. `path` refers to the required path.

Next time when you fire up a PR to the repo with markdown file with `ogImage` properties, it creates the open graph image and inserts it into the codebase.

![Screenshot from PR](https://thepracticaldev.s3.amazonaws.com/i/dzbepn1he7qoy1qw5iqp.png)

For more properties, customisations and use cases, follow the [Readme](https://github.com/marketplace/actions/generate-og-image)

# How it works?

1. Puppeteer

    It uses a puppeteer instance on Github Actions docker to screenshot the current output on the web browser. The HTML is generated by the input variables.

2. Web Components

    The styling for HTML is controlled by a web component. It uses [this](https://github.com/BoyWithSilverWings/og-image-element) web component created with lit element as default. But you can substitute with anything. 
This allows the styling of your image to remain highly customisable while using the action.

_Let me know if you try out_.
Is ruby dead?
Tags: ruby, rails, discuss
Published: 2019-09-22 14:19:40

My previous company used ruby and rails throughout the company. I would say in Nashville adleast, Ruby is not a common choice of a technology stack. In Nashville, unfortunately there is so many .NET shops with the healthcare startups. Although, other large tech companies like Lyft, EventBrite, CampaignMonitor, Amazon, etc...do not choose ruby as there foundational language.

I feel like even the open source community and the online learning community on YouTube, Dev.to, Medium, etc... is limited to articles and tutorials about Ruby / Rails ..."""Compared to some of the other most popular languages"".


Is Ruby Dead?
Gimme your best Tech book recs!
Tags: discuss, dev, books, learning
Published: 2019-09-22 13:35:31

---
title: Gimme your best Tech book recs!
published: true
description: I'm a massive book nerd, but don't really read tech-based books. And I want some recs!
tags: discussion, dev, books, learning
cover_image: https://www.pexels.com/photo/kindle-technology-amazon-tablet-12627/
---

As the title says - I want some tech book recommendations! I don't usually read tech books, and that seems wrong.

I'm especially interested in anything front end related, design related, and in general something written in a fun, easy to read tone. 

Fire away!