teleren/devto huggingface dataset:
Using a GitHub organization to organize blog posts — also accidentally hacking Hacktoberfest!
Tags: blog, programming, hacktoberfest, github
Published: 2018-10-20 20:58:51

---
title: Using a GitHub organization to organize blog posts — also accidentally hacking Hacktoberfest!
published: true
tags: blog,programming,hacktoberfest,github
canonical_url: https://medium.com/@kritner/using-a-github-organization-to-organize-blog-posts-also-accidentally-hacking-hacktoberfest-447e632fb571
---

### Using a GitHub organization to organize blog posts — also accidentally hacking Hacktoberfest!

![](https://cdn-images-1.medium.com/max/800/0*GvXqSqtw3KBPCjOT.png)<figcaption>GitHub logo</figcaption>

I’m finding my GitHub repositories list to be becoming unmanageable, maybe it’s just because I fork everything rather than star it, though sometimes I do that as well.

I wanted to try something to help with a portion of the organization of my repositories — creating a GitHub organization that houses the code I was using to accompany my blog posts.

The organization was simple enough to do, hopefully I’m not breaking any rules by doing so. And now, all of my blog posts’ code (not much) is organized in a single place!

[https://github.com/Kritner-Blogs](https://github.com/Kritner-Blogs) is the location of my organization, and you can see that I currently (at the time of writing) have 2 repositories of code:

![](https://cdn-images-1.medium.com/max/1024/1*0lP85ZWwEsjAxMVtaAsnuA.png)

### Hacktoberfest

![](https://cdn-images-1.medium.com/max/1024/1*TwjDCueiTdM3GuPX_fGj8w.png)<figcaption>Hacktoberfest logo</figcaption>

What does this all have to do with Hacktoberfest? What even \*\*\*IS\*\*\* Hacktoberfest? You can read all about it [here](https://hacktoberfest.digitalocean.com/). But the tldr; of it is:

> Write code and submit PRs during the month of October, and get free stuff!

An unintended (but welcome!) consequence of creating the GitHub organization, was my commits (PRs) to my organization/blog posts repositories counted toward my 5 PRs in the month of October. Granted, I already had my 5 PRs when I discovered this, but it was a nice surprise nonetheless.

Behold:

![](https://cdn-images-1.medium.com/max/1024/1*Yg2D9ClVGjU9r5nd14qIsA.png)<figcaption><a href="https://hacktoberfest.digitalocean.com/stats/Kritner">https://hacktoberfest.digitalocean.com/stats/Kritner</a></figcaption>

Still almost 25k challenge completions to go before they stop giving out free Hacktoberfest shirts! Hack on my dudes!
Easy URL Parsing using the DOM
Tags: javascript, snippet, url, parser
Published: 2018-10-20 18:45:07

---
title: Easy URL Parsing using the DOM
published: true
description: Creating HTMLAnchorElements to parse URL strings using the DOM.
tags: javascript, snippet, url, parser
---

## Problem and Solution

I recently had to write a dynamic router in React. A given URL had to be checked against an API to see if it had any content to display. To do this, I had to verify the pathname coming back from the resource ultimately matched the pathname in the location bar. Having a consistent way to parse URLs was necessary.

I learned that the [HTMLAnchorElements](https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement) actually have a lot of the same properties as the global `location` and can be used to parse different URL strings to determine the pathname.

Therefore, to parse my URL strings, I just create a HTMLAnchorElement, assign it an href, and then look at the pathname property.

```javascript
let a = document.createElement('a');
a.href = "/hello";
console.log(a.pathname); // === '/hello'

a.href = "https://dev.to/hello";
console.log(a.pathname); // === '/hello'
```

## Gotchas

Want to mention some things to note before you try this in your application. 

First, it fails, for obvious reasons, when there is no scheme on the URL.

```javascript
let a = document.createElement('a');
a.href = "dev.to/hello";
console.log(a.pathname); // === '/dev.to/hello'
```

Second, IE11 is not going to add the preceding slash, which can cause inconsistencies.

```javascript
let a = document.createElement('a');
a.href = "https://dev.to/hello";
console.log(a.pathname); // === 'hello' (IE11) // === '/hello' (Chrome)
```

What I did to clean this up is just check to see if the first character is a slash and if not just prepend it.

```javascript
let pathname = a.pathname;
if (pathname.substr(0, 1) !== '/')
    pathname = '/' + pathname;
```

Hope you found this useful!
Book Review: Accelerate
Tags: bookreview, devopsdays, review
Published: 2018-11-15 15:30:27

---
title: Book Review: Accelerate
published: true
tags: Book review,devopsdays,review
canonical_url: http://www.heidiwaterhouse.com/2018/10/20/book-review-accelerate/
---

[![Accelerate: The Science of Lean Software and DevOps: Building and Scaling High Performing Technology Organizations](https://images.gr-assets.com/books/1520501690m/39080433.jpg)](https://www.goodreads.com/book/show/39080433-accelerate)[Accelerate: The Science of Lean Software and DevOps: Building and Scaling High Performing Technology Organizations](https://www.goodreads.com/book/show/39080433-accelerate) by [Nicole Forsgren](https://www.goodreads.com/author/show/17037914.Nicole_Forsgren)  
My rating: [5 of 5 stars](https://www.goodreads.com/review/show/2544581177)

This book is an excellent summation of the overall findings of the State of DevOps reports and what the implications are for organizations trying to persuade themselves into DevOps transformation.

When I was reading it, I realized that it was everything you would learn if you went to a couple dozen DevOps days and listened to all the transformation stories, and it can be summarized as:

Go faster, be safer.

This is such a counterintuitive thing to say, but I have an analogy for you: When you are trying to teach a kid to ride a bike, they’re like “You’re hurling me at the asphalt and yelling at me to GO FASTER?!?!”. You know, even though they don’t that they will be safer if they go faster, but they feel like it’s very dangerous. Increasing your release cadence feels like that – someone you trust is telling you to do it faster, but it’s very scary to change your thinking about ASPHALT.

Forsgren, Humble, and Kim unpack the scientific analysis of why it works that way, but I find it really compelling to look at the correlation of speed, psychological safety, and business value.

Part 2 of the book is a very wonky, nerdy analysis of the academic methods, which gives the rest a lot of validity, but I give you permission to skip it if you would just like to take their word for it that the math is sound.

Part 3 is a case study of a company currently practicing a lot of the principles mentioned in the book. It may not be relevant to everyone, but it was a nice unpacking of how it could work.

Read if:  
You are trying to convince your organization to become more devops-y, or if you want to understand what the benefit of that would be. Also if you would like some eyebrow-massive correlation numbers to use in arguments.

Skip if:  
You will only pine because you can’t do this kind of transformation.

Also read:   
The Phoenix Project  
The DevOps Handbook

[View all my reviews](https://www.goodreads.com/review/list/19026-heidi)
Scalable, Available, Stable, Performant, and Intelligent System Design Patterns - An awesome resource!
Tags: general, resources, scaling, architecture
Published: 2018-10-20 18:15:58

---
title: Scalable, Available, Stable, Performant, and Intelligent System Design Patterns - An awesome resource!
published: true
description: Ever having issued with scalability? Then read this resource.
tags: General, Resources, Scaling, Architecture
---

Whilst working through some designs to scale my side project I stumbled upon this amazing resource related to the following:

- Scalability
- Availability
- Stability
- Performance
- Intelligence
- Architecture

CHECK IT OUT HERE: https://github.com/binhnguyennus/awesome-scalability

As soon as I saw all of the content and resources, I had to share it with the community.

This is why I LOVE the internet. Special thanks to the owner [Binh Nguyen](http://binhnguyennus.com/)
C# for the Java Developer: Enums
Tags: java, csharp, beginners
Published: 2019-03-19 02:09:10

---
title: C# for the Java Developer: Enums
published: true
tags: java, csharp, beginners
series: C# for the Java Developer
canonical_url: 
---

Enums is a very common concept. It exists, of course, in Java and C# as well. However, Java and C# enums do not have the same capabilities. This blog post aims to show their differences.

<!-- more -->

In Java, enums are very much like regular classes: they can implement interfaces and have methods. However, they cannot inherit other classes or be explicitly instantiated. They can be viewed as `final` classes (or `sealed` classes in C#) that already inherit the virtual “enum” class, only have private constructor(s) and a set of pre-defined instances (the values of the enum).

For instance, let’s take the example of the HTTP status codes. In Java, it is possible to write this code:

```java
enum HttpStatus implements Comparable<HttpStatus> {
  OK(200), SERVER_ERROR(500), NOT_FOUND(404);

  private final int code;

  HttpStatus(int code) {
      this.code = code;
  }

  // This is a regular instance method
  int code() {
      return code;
  }

  // This is the implementation of the Comparable interface
  @Override
  int compareTo(HttpStatus o) {
      // Http statuses will be sorted by status code
      return Integer.compare(code, o.code);
  }
}
```

```java
HttpStatus status = HttpStatus.OK;

// The 'code' method can be invoked like any other method
int code = status.code();
```

In C#, enums are just integers in disguise. The previous snippet can be simulated in C# only because the `code` attribute happens to be an `int`. Otherwise, it would be very complex to have the same behaviour:

```csharp
enum HttpStatus {
  // int value of the enum can be forced to a specific value
  OK = 200,
  NOT_FOUND = 404,
  SERVER_ERROR = 500
}
```

```csharp
HttpStatus status = HttpStatus.OK;

// The enum can be casted to an int to get its value
int code = (int) status;
```

To sum up, Java enums are much more powerful than their C# counterparts. I often use these features when I write Java code and I think I would miss them if I had to write C# code on a daily basis.
Domain Name Finder
Tags: domain, domains, showdev, webdev
Published: 2018-10-20 17:19:43

---
title: Domain Name Finder
published: true
description: Tired of spending hours looking for domains? Try ahreflink's domain name finder to quickly browse through hundreds of customized domains in seconds by choosing desired names, TLDs and optional combinations.
tags: domain,domains,showdev,webdev
---

I got tired of spending hours trying to find a good domain name whenever I wanted to do a new weekend project, so I decided to do something about it.

My latest project, ahreflink.com, features a [domain name finder](https://ahreflink.com/domains/name-finder) that makes it possible to easily search through hundreds of domains in seconds.

One of the key features is the ability to add combinations to the domain names, which makes it very easy to find domains similar to FireFox, WordHippo, MailChimp, etc.

The website also makes it very easy to specify which TLDs you're interested in, and then look up multiple domains for each TLD at the same time, with or without the combinations.

![picture preview of domain name finder](https://thepracticaldev.s3.amazonaws.com/i/hbr2t6gs5mnjtmuigz1y.png)

I feel very satisfied with its current features (I already use it for *all* my domain name searches), but I'm always looking for new ways to improve. For instance, I added the "hide unavailable domains" buttons after someone with colour vision deficiency highlighted the difficulty in differentiating between the red and green colours.

Any feedback or feature requests would be much appreciated. I'm open to implementing everything, as long as it's related to domains. I do plan for [ahreflink](https://ahreflink.com) to support tools for other tech topics as well, such as seo, vpn, coupons, etc. but I want to build more domain-related features before moving on to the next thing.
Arquitecto Software Beta Launch
Tags: devtools, softwarearchitecture, softwareproductivity
Published: 2018-10-20 17:18:11

---
title: Arquitecto Software Beta Launch
published: true
description: Saas to help in software architecture styles selection and open-source frameworks discovery
tags: devtools, software architecture, software productivity
---

Today 20 Oct. is the launch of first beta version of [Arquitecto Software](https://www.arquitectosoftware.com/), a Saas platform that aims to help all software makers to improve their processes in product building. But how it borns ?

![Arquitecto Software Logo](https://thepracticaldev.s3.amazonaws.com/i/enwej9r409z7t2mlll0g.jpg)

## The problem

Different software projects requires different software architecture styles and different tech stacks / frameworks based on the requirements.

The problem is the waste of time researching what is the best architecture to use in each case and looking for frameworks to implement it. This is why many software projects can end in failure, software projects need very qualified CTOs / software architects in order to decide the best technology for projects.

In many situations you choose some frameworks, and days or weeks later you discover there is better frameworks to do what you are trying to do, but it’s too late to change your stack, you have already invested time / money.

## The solution

To solve the previous problem, i’m building a software platform to help in the process of software architecture selection and frameworks discovery. This is how Arquitecto Software born.

[Arquitecto Software](https://www.arquitectosoftware.com/) allows users to select the thematic and non functional requirements (Quality Attributes) of their projects, and finds what are the best software architecture styles and related open-source frameworks to implement them.

## The launch

Today 20 Oct. i launched the [Arquitecto Software](https://www.arquitectosoftware.com/) on [IndieHackers](https://www.indiehackers.com/forum/show-ih-arquitecto-software-the-software-architect-that-never-sleeps-beta-c1172884bf), [HackerNews](http://hn.premii.com/#/article/18262590), [MakerLog](https://getmakerlog.com/tasks/10604) and [Medium](https://medium.com/@arquitectosoftware/arquitecto-software-beta-launch-913a6b194a68). The main goal is to measure the impact in developer communities, get feedback and plan next features and improvements in order to get a great and consistent first version, to be able to launch it in Product Hunt and BetaList.

## Feedback

I would really appreciate all feedback of [Arquitecto Software](https://www.arquitectosoftware.com/), i invite you to try it and report me your thoughts, this can take you seconds, and are a great source of value for me, because behind this there is a lot of work, struggle, and many hours. You can send me your feedback by email, twitter or in the contact forms of platform [here](https://www.app.arquitectosoftware.com/#/contacto).

Thanks in advance
The API-First Approach To Building Softwares 
Tags: coding, productivity, discuss
Published: 2018-10-20 16:50:34

---
title: The API-First Approach To Building Softwares 
published: true
description: 
tags: coding, productivity, discuss 
---

Imagine this scenario. You and the company you work for built an awesome web application for a client which has been in use for almost 6 months. One day the client pays a visit and says that due to the popular demands from his customers, he wants you to develop a desktop and mobile client for it. The web app your company built though was a tightly coupled, server-side rendered MVC application. Whoopsies! 

This is a very common and precarious situation most companies encounter more often than not. This is because of the rapid advancement of technology as well as the unpredictability of customer requirements. The most common solution that companies in this situation usually go for is by building a separate API for the existing application which usually brings about redundancy as well as doubling the amount and effort to build and maintain.

Granted, there may be situations where you have no choice. For instance, the app may have already been built using that architecture before you assumed control of it. In such cases, this solution works best. If you are building the application from scratch though, it might be wise to use API-First approach so as not to encounter the scenario described.

### What then, is API-First approach? 
It is an approach to building device agnostic software where API's act as the base interface to the entire application. In other words, API's are treated as first-class citizens and essentially become the only way to communicate and access data from the application. Anything not exposed by the API is practically non-existent to the developers building on top of it.
The most popular types of API's include but not limited to:
1. SOAP - Simple Object Access Protocol 
2. REST - Representational State Transfer
3. RPC's - Remote Procedure Calls
4. GraphQL

Since API's only deal with data, they bring about flexibility because front-end developers are at liberty to display the data to the user any way they like. For example, the profile page in a mobile app client may be displayed differently to that on the desktop client even though they consume the same data. The data may be of the following data exchange formats:
1. XML -  Extensible Markup Language
2. JSON - JavaScript Object Notation 
3. Protobuf - Protocol Buffers

### Benefits of API-First Approach 

1. Reduces code redundancy
2. Promotes separation of concerns
3. Easier to extend 
4. Brings about interoperability as multiple client apps consume the same data.
5. Easier to maintain 
6. Easier to test and debug 
7. Brings about flexibility 
8. Encourages the use of microservices architecture 



Since customer demands are highly unpredictable, using an API-First Approach might be your best bet as it usually does and will pay dividends in the future, saving you time, efforts and headaches.

Happy coding!
Which monitor should I buy for programing?
Tags: discuss, webdev
Published: 2018-10-20 16:39:00

---
title: Which monitor should I buy for programing?
published: true
tags: discuss, webdev
---

I have read several articles but I have not yet come to any conclusions.
I am looking for a monitor to programing and I have read that the best is LG Ultrawide and the Dell Ultrasharp.

Do you have any suggestions for models? Or other brands?
How banks handle our balance, technically?
Tags: explainlikeimfive, programming, database, design
Published: 2018-10-20 12:34:20

There's this famous database design problem about account balance. Should you store the account balance in a column, or in a table of transactions and calculate it on the fly whenever you need it?

1. If you have an account balance column, you'll always depend on the back-end application, in database triggers or something like this to update the field.

2. If you have a transactions table, you'll have to process a lot of data to get this information, that can cost I/O and time. That seems not to scale well.

And, in my view, both can run into concurrency issues, right?

My question is: how banks do it?
Introducing React Onscreen Keyboard
Tags: react, javascript, typescript
Published: 2018-10-20 12:33:00

---
title: Introducing React Onscreen Keyboard
published: true
description: Sometimes you need an on-screen keyboard, when that happens, react-onscreen-keyboard has got your back.
tags: react,javascript,typescript
---

I needed a customizable on-screen keyboard component for a music project I'm tinkering with.

So I built [`react-onscreen-keyboard`](https://github.com/rakannimer/react-onscreen-keyboard)

![React Onscreen Keyboard Example](https://raw.githubusercontent.com/rakannimer/react-onscreen-keyboard/master/example.png)

You can get a basic keyboard layout just by rendering `Keyboard` with no props

```jsx
import OnscreenKeyboard from 'react-onscreen-keyboard'

const App = () => <OnscreenKeyboard />
```

But you can extend this component as much as you'd like !


## Supported props : 

```typescript

export type KeyboardProps = {
  width?: number;
  height?: number;
  keyWidth?: number;
  rowHeightPercent?: number;
  rowWidthPercent?: number;
  verticalMargin?: number;
  horizontalMargin?: number;
  overrides?: Map<
    string,
    (
      props: {
        val: KeyboardKeyVal;
        rowHeight: number;
      }
    ) => any
  >;
  keyboardKeys?: KeyboardKeyVal[][];
  renderKey?: (p: KeyboardKeyProps) => any;
  rowStyle?: React.CSSProperties;
  keyStyle?: React.CSSProperties;
};

export type KeyboardKeyVal = {
  value: string | string[];
  id: string | string[];
  width: number;
  // https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code
  code: KeyboardEvent["code"] | KeyboardEvent["code"][];
};

```

If you need an on-screen keyboard make sure to check it out : 

- [Code](https://github.com/rakannimer/react-onscreen-keyboard)
- [CodeSandbox Demo with Button Keys](https://codesandbox.io/s/qx5yyrm87q)


Cheers !
Do you have any good resources about planning or structuring React apps you would recommend?
Tags: react, javascript
Published: 2018-10-20 11:07:33

---
title: Do you have any good resources about planning or structuring React apps you would recommend?
published: true
description: 
tags: React, JavaScript
---

I  recently finished my first React project, but I feel like it is a little bit messy.  You can see the project @ [https://infinitenotes.netlify.com/](https://infinitenotes.netlify.com/) and the source code [here](https://github.com/EddyVinck/Infinite-Notes/) if you like. The project is a notes application with categories that can be nested.

I am currently learning some new things to improve the app like the Context API and patterns like Render Props and Compound Components.

The thing I struggle most with right now is thinking how I could improve the structure of the app and avoid prop drilling. Right now I am doing quite a bit of prop drilling from my [<App />](https://github.com/EddyVinck/Infinite-Notes/blob/master/src/App.jsx#L225-L248) into other components all the way to components like [<Note />](https://github.com/EddyVinck/Infinite-Notes/blob/master/src/Note.jsx#L94-L123).

I'd like to mention that I'm not looking for advice on how to structure my files (I already have [a framework](https://twitter.com/dan_abramov/status/1027245759232651270?lang=en) for that). I'm looking for some guides on how to plan the architecture of applications.

Here are some things that I am considering right now:

1. Removing some utility functions from my <App /> and just import them when I need them.
2. Utilizing the Context API to avoid prop drilling
3. Looking for ways to improve the code with advanced component patterns like Render Props, Compound Components and other patterns.

So, do you have any resources you would recommend?

Thanks!
[VIDEO] Acing Technical Interviews #TFHDailyStandUp ep5
Tags: tfhdailystandup, career, beginners, interview
Published: 2018-10-20 12:10:15

---
title: [VIDEO] Acing Technical Interviews #TFHDailyStandUp ep5 
published: true
description: 
tags: #tfhdailystandup #career #beginners #interview
---

<img src="https://thepracticaldev.s3.amazonaws.com/i/jv9s6sb8mocf72miu7tx.png">

EP5: TFH DAILY STAND UP TIME!!!! In today’s stand up I talk about acing technical interviews👀 💻<br><br> 🤔🤔⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀ ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
Technical interviews are meant to understand how you think, how you collaborate, and how well you problem solve 
🤔🤔<br>
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀ ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀ ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀ ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
Coding resources: github.com/theflawlesshack/coding-problems