teleren/devto huggingface dataset:
Data table UX tip - alignment
Tags: uiweekly, ux, saas
Published: 2021-09-17 00:36:45

Data tables are super important and really hard to get them right. I think that they are a great example of how visual design (UI design), UX and interactivity become best friends.

I've got like 40 tips like these for building tables🤓, but here's just a small one (that I made into a cute GIF).

![Data table text alignment](https://pencilandpaper.io/wp-content/uploads/2021/09/Datatable-tip-alignment.gif)

When you make a table, a key part is making it really readable. A big part of things being readable is how the eye scans things, especially in a table, where you're scanning a ton of values.

At least in the case of English text, in general you want to make those types of values left aligned. Although centre aligned can seem like a good idea sometimes...the fact is that unfortunately, data that users input is super varied in length so when you scan it the eyeball jumbles everywhere.

Hope this helps anyone strugglin with table design.
Where i am looking for icons
Tags: design, html
Published: 2021-09-17 00:11:09

Here are my 3 suggestions to find icons for your websites...

Fontisto
https://www.fontisto.com/
![fontisto](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0pizgz9yambtvw0epa0l.png)

Heroicons
https://heroicons.com/
![heroicons](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/993rcn6xywo64zhrdnb8.png)

Ionicons
https://ionic.io/ionicons
![ionicons](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0f9a0nevck8ckqdnrymn.png)

In case you have more useful websites for icons to propose, I am open to suggestions. It's always good to learn new things!
How to add types to object properties in TypeScript?
Tags: typescript
Published: 2021-09-17 00:00:00

---
  title: How to add types to object properties in TypeScript?
  published: true
  tags: TypeScript
  date: Fri Sep 17 2021 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/add-types-to-object-properties-in-typescript
  cover_image: https://melvingeorge.me/_next/static/images/main-5800beecb2e924e7cab18e298cf65c9f.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/add-types-to-object-properties-in-typescript)
  
To add types to object properties in TypeScript First, we can declare the variable name, followed by the `:` symbol (colon), followed by the `{}` symbol (Open and close curly brackets). Inside the brackets, we can define the name of the property followed by the `:` symbol (colon), and the type of property we want us to assign.

To end the type declaration we can either use the `;` symbol (semi-colon) or the `,` symbol (comma).

### TL;DR

```ts
// simple object
// with types added for each property
let personDetails: {
  name: string;
  age: number;
};

// allowed ✅
personDetails = {
  name: "John Doe",
  age: 23,
};
```

For example, let's say we have an object called `personDetails` having 2 properties called `name` and `age` like this,

```ts
// simple object
const personDetails = {
  name: "John Doe",
  age: 23,
};
```

As we can see from the above code that the `name` property holds a value of `string` type called `John Doe` and the age property holds the value of `number` type called 23.

This is fine. But this object is not strictly typed.

Currently, we can have any kind of values on either of the properties which may bring problems during the runtime of the program if not done properly.

Now let's try to enforce the types for both properties. The `name` property should only have values that are of type `string` and the `age` property should only have values that are of type `number`.

It can be done like this,

```ts
// simple object
// with types added for each property
let personDetails: {
  name: string;
  age: number;
};

// allowed ✅
personDetails = {
  name: "John Doe",
  age: 23,
};
```

As we can see that the TypeScript allowed us to have the values for each of the properties in the `personDetails` object because all the types are satisfied.

Now let's try to change the value of the `name` to another type other than the type `string`.

It can be done like this,

```ts
// simple object
// with types added for each property
let personDetails: {
  name: string;
  age: number;
};

personDetails = {
  name: 1, // not allowed ❌. Type 'number' is not assignable to type 'string'
  age: 23,
};
```

As you can see from the above code that the TypeScript compiler doesn't allow us to add the numeric value and will also show an error saying `Type 'number' is not assignable to type 'string'` which is what we want to happen.

See the execution of the above codes live in [codesandbox](https://codesandbox.io/s/add-types-to-object-properties-in-typescript-i7nuk?file=/src/index.ts).

That's all 😃!

### Feel free to share if you found this useful 😃.

---
I Wrote a Guide to Serverless AWS
Tags: aws, devops, beginners, showdev
Published: 2021-09-27 13:16:40

---
title: I Wrote a Guide to Serverless AWS
published: true
date: 2021-09-17 00:00:00 UTC
tags: [ aws, devops, beginners, showdev ]
canonical_url: https://thomasstep.com/blog/i-wrote-a-guide-to-serverless-aws
---

EDIT: [The guide has been released!](/blog/gtbwsa-chapter-1-introduction)

To newcomers, AWS might seem like a big confusing jumble of buzzwords and weird service names. When I started my journey into learning AWS and cloud engineering, I thought the same thing. I started my journey as a software engineer with some networking and traditional operations experience, but the cloud and its constituents were still very much foreign to me. Fast forward two years and I have learned more than I ever thought I would about AWS. I have worked with and weeded through a lot of the AWS services, and I have somewhat strong opinions about how to build workloads and which services are worth my time.

My personal preference (as is probably apparent by my previous AWS blog posts) is to use serverless technologies because they are quick to develop on and the pricing model suits new applications and startups well. The guide that I wrote is focused on the core serverless technologies that I have personally used to create applications. My goal throughout writing this guide was to provide a framework of AWS services to focus on for newcomers, the fundamental concepts of those services, and the integrations between those services that can create fully-fledged, production-ready serverless applications. This is what I wish existed when I first started learning AWS.

The last month and a half of my free time have been dedicated to writing down and organizing this information, and I feel much better getting it out of my head and into the world. I will host a free version on my website with each chapter being a new blog post, and I will offer a PDF version with a bit of additional content through GumRoad. The blog version will be out first with the full eBook version out soon thereafter. Once it is out feel free to send me feedback about what you did and did not like or if there are any areas you would have liked me to touch on more. I look forward to hearing from you!
What's the difference between DevOps and Site Reliability Engineering?
Tags: devops, sre, platformteam
Published: 2021-09-21 08:27:10

---
title: What's the difference between DevOps and Site Reliability Engineering?
published: true
date: 2021-09-17 00:00:00 UTC
tags: devops,sre,platformteam
canonical_url: https://jhall.io/archive/2021/09/17/whats-the-difference-between-devops-and-site-reliability-engineering/
---

If you’ve learned the terms **DevOps** and **Site Reliability Engineering (SRE)**, you could be forgiven for thinking the might be synonyms. But they’re really not.

Let me start with some definitions.

- 

**DevOps** is a set of approaches for aligning the goals of Developers and Operations without silos. In a word, DevOps is [cooperation](https://jhall.io/archive/2021/02/11/devops-is-just-cooperation/).

- 

**Site Reliability Engineering** is, according to [Google](https://sre.google/), who originated the concept, “what you get when you treat operations as if it’s a software problem.”

- 

There’s also the job title of **Site Reliability Engineer** , which refers to an individual contributor on a Site Reliability Engineering team.

So how do DevOps and SRE fit together?

Well, simply put, SRE is _only_ the operations side of DevOps. An SRE team provides services to other (dev) teams, sometimes called [operations-as-a-service](https://jhall.io/archive/2021/03/18/two-models-of-devops/) or a platform team.

In a sense, what makes SRE stand out from some other approaches to operations is that “Dev” is one of the internal practices they use to perform Ops. So in that sense, you might be able to think of it as a DevOps team providing Ops services to other Devs. What? LOL.

![](https://jhall.io/archive/images/devops-sre.png)

“SRE” is also a legitimate job title, unlike [“DevOps Engineer”](https://jhall.io/archive/2021/05/13/a-devops-role-by-any-other-name.../), since Site Reliability Engineering is a specific set of technical practices.

To take take the concepts a bit farther: You can have an SRE team and _not_ have a DevOps culture. That is to say, an SRE team alone doesn’t remove silos.

You can also have a fully mature DevOps culture without using an SRE model of operations.

So while the terms are somewhat related, they’re also very distinct, and should not be confused with each other.

* * *
_If you enjoyed this message, [subscribe](https://jhall.io/daily) to <u>The Daily Commit</u> to get future messages to your inbox._
How to build a React FAQ accordion
Tags: react, webdev, css, tutorial
Published: 2021-09-16 23:22:05

Today, I want to share how to build an FAQ accordion using react. The FAQ section it's a really important section of an app or a website, since you have an opportunity to have important questions and answers about your product or even your industry and rank better organically in Google. 

I hope I'm able to help anyone who wants or needs to build an FAQ section for their website or their app. 

I'm leaving the URL of the code and styles at the end of the article and also a working demo if you want to check it out. 

We will use 3 different hooks. useState, useRef and useEffect Hooks. 

First, we will use the useState hook to change the state of the accordion, like so. 

Then, we will use the useRef hook that allow us to mutate the useRef object.

Finally, we will use the useEffect hook to determine the height of the accordion dynamically once the user clicks on the accordion 

```
const [active, setActive] = useState(false);

  const contentRef = useRef(null);

  useEffect(() => {
    contentRef.current.style.maxHeight = active
      ? `${contentRef.current.scrollHeight}px`
      : "0px";
  }, [contentRef, active]);

  const toggleAccordion = () => {
    setActive(!active);
  };
``` 
Then we have the JSX part of the code using an onClick and ternary operators, like so 
```
return (
    <>
      <div className="App">
        <div>
          <button
            className={`question-section ${active}`}
            onClick={toggleAccordion}
          >
            <div>
              <div className="question-align">
                <h4 className="question-style">
                  Why do you like web developemnt
                </h4>
                <FiPlus
                  className={active ? `question-icon rotate` : `question-icon`}
                />
              </div>
              <div
                ref={contentRef}
                className={active ? `answer answer-divider` : `answer`}
              >
                <p>Because I love coding</p>
              </div>
            </div>
          </button>
        </div>
      </div>
    </>
  );
```
I hope you can find this short tutorial helpful, remember that here you have the url of the code and styles if you want to check it out.

Code: https://codesandbox.io/s/infallible-cloud-wiy4y?file=/src/App.js:465-1258

Demo: https://wiy4y.csb.app/

Follow me on Github & Connect with me on LinkedIn

https://github.com/cesareuseche
https://www.linkedin.com/in/cesar-useche-profile/
Versioning binaries in Go
Tags: go
Published: 2021-09-16 22:23:28

---
title: Versioning binaries in Go
published: true
description: 
tags: golang
cover_image: https://images.pexels.com/photos/2226458/pexels-photo-2226458.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260
---

In this article we will learn how to add a version to our binaries in Go using a `Makefile` file and a third party package to print our logo in ASCII code.

Having a version in our binaries is very important since with it, we could know which version of our application we are running on production, in addition our users could report errors for specific versions and thus be able to fix them.

## Makefile to create the binary add version, and build time

```bash
# Get version from git hash
git_hash := $(shell git rev-parse --short HEAD || echo 'development')

# Get current date
current_time = $(shell date +"%Y-%m-%d:T%H:%M:%S")

# Add linker flags
linker_flags = '-s -X main.buildTime=${current_time} -X main.version=${git_hash}'

# Build binaries for current OS and Linux
.PHONY:
build:
	@echo "Building binaries..."
	go build -ldflags=${linker_flags} -o=./bin/binver ./main.go
	GOOS=linux GOARCH=amd64 go build -ldflags=${linker_flags} -o=./bin/linux_amd64/binver ./main.go
```

After this we will only need to execute the `make build` command from our terminal to create the binary with its respective version and build time.

## Create the main file in Go

```go

package main

import (
	"flag"
	"fmt"
	"os"

	"github.com/morikuni/aec"
)

var (
	buildTime string
	version   string
)

const binverFigletStr = `
_     _
| |__ (_)_ ____   _____ _ __
| '_ \| | '_ \ \ / / _ \ '__|
| |_) | | | | \ V /  __/ |
|_.__/|_|_| |_|\_/ \___|_|

`

func printASCIIArt() {
	binverLogo := aec.LightGreenF.Apply(binverFigletStr)
	fmt.Println(binverLogo)
}

func main() {
	displayVersion := flag.Bool("version", false, "Display version and exit")

	flag.Parse()

	if *displayVersion {
		printASCIIArt()
		fmt.Printf("Version:\t%s\n", version)
		fmt.Printf("Build time:\t%s\n", buildTime)
		os.Exit(0)
	}
}
```

## Repository and video

If you want to see the complete code or the video where I explain how to do it step by step I leave you here the links:

- [GitHub repository](https://github.com/gustavocd/binver)
- [Video tutorial](https://www.youtube.com/watch?v=7BZidOIknwE) (In Spanish).
My first Open Source Program - GMOT-SSG
Tags: opensource, javascript, node
Published: 2021-09-16 22:11:04


Hey,

This time I want to share with you my latest programming adventure in making a Static Site Generator for OSD600NSA at Seneca College.
Our goal was to make a program using any language we wanted that would take txt files or directories (containing txt files), or both at the same time, read this txt files and make a new HTML file for each input file with the txt content.

My choice of programing language was JavaScript. I have done this kind of program in C++ and Java, but never in JS so I thought it was a good opportunity to try it out. 
As I expected, working with JavaScript was a walk in the park if compared with the other languages that I previously tried and I’m going to list here the reasons why:


### NodeJS
NodeJS offers me all the documentation to use its file system, which made my life easy when dealing with directories and files.
It also allowed me to read content of a txt file an write an HTML file from it.

### Yargs
Yargs was scary at first, all those configuration lines looking at me made me re-thing my decision of using JavaScript for a second but after reading it carefully and testing it I noticed that it was pretty easy and intuitive to use.

Here is how the code is looking right now:
[GMOT_SSG](https://github.com/GMOTGIT/GMOT-SSG)

Let me teach you how to use it:
As you are going to run it in your machine, you should have NodeJS installed on it.

After cloning the repository, go to the folder location in your terminal and type ‘npm install’.

Next, you can type node GMOT-SSG -h or - -help to get a list of options and what each option does.

<img src="https://i.ibb.co/LvKPrtd/ref-01.png" alt="ref-01" border="0">

On command line you are going to type the following:
```
node GMOT-SSG.js -i <txt files or Directories> -o <output Directory> -s <styleSheetLink>
```

This will take your input files, read them, make an HTML for each input file, add the stylesheet link to each HTML and save it your custom output.
If there is no output, a default one will be created on the project folder, this directory is called “dist”.
If there is no stylesheet, your HTML will have no <link> with a stylesheet link.
But input files are necessary for the program to run. If there is no input file, them a message will tell you to add one.

### Example
This is “The Naval Treaty.txt” file, the input file:

<img src="https://i.ibb.co/4PgnGB2/ref-02.png" alt="ref-02" border="0">

This is “The Naval Treaty.html” file, the output file:

<img src="https://i.ibb.co/jJHXvrx/ref-03.png" alt="ref-03" border="0">

### Finally
The problems I faced in this project were all related to absolute and relative pathnames of the files.
To improve it, soon I plan to implement the use of “path” and “__dirname” to make it work smoothly.


I hope you have enjoyed reading about this adventure of mine, my first static site generator, and I hope to see you soon.
Thank you so much.
Day 453 : Find a Way
Tags: hiphop, code, coding, lifelongdev
Published: 2021-09-16 21:57:42

_liner notes_:
- Professional : Had a good productive day. A few meetings and updated the code to some Web Components I added styling to. Just need to update the ReadMe's for each component on how the styling works and should be good to go. I'll probably finish up tonight so I can do a pull request and have it reviewed and merged so I can publish the components to NPM.

- Personal : Watched an episode of "Boruto", listened to a presentation on Svelte in a meetup online, went through tracks for the radio show. I wasn't able to work on my side project though. Got to find a way to get more work done on it.

![Aerial view looking down at a coastline of Crete, Greece with very blue water meeting the sides of hills under a blue sky with very large white clouds](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/44qyih5917ftkkr3l13f.jpg)

Going to finish up the Web Components stuff for work so that it is at a point that all I have to do is merge it, publish the components, and make sure everything still works. That way I can take it a little easier tomorrow. Going to watch an episode of "Boruto" over dinner and if I have time, listen to some tracks for the radio show. Can't believe it's already the end of the week!

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube uslaqYlXAbo %}
My four weeks journey in KodeCamp 
Published: 2021-09-16 21:54:55

Before joining the KodeCamp team,I always thought an internship was all about lecturing you to do things you already know.I signed up for the KodeCamp internship with a little bit of uncertainty as to how I would cope with the expert training as a novice in UI/UX design.
The first week was all about Introduction of persons,info session about the program,how to set up the Slack profile,more like an orientation and it pretty much made me relax(like 20%)
Second week came and classes started.A timetable was drawn with UI/UX design classes scheduled for Tuesday and Thursday and deadline for submission of stage task for Saturday 
The third and fourth weeks have been filled with intensive learning, practices, tasks and promotion to stages.It has been a wonderful journey from stage zero to stage three.
Apart from my personal experience, I would like to compliment the team for the following:
1) Teaching skills:they are learner-centred and their leniency in carrying everyone along is topnotch. Their recorded classes on YouTube makes learn easier and better especially for workers.
2)Time management:They keep to their time and set deadlines for tasks to inculcate the right habit of keeping to time in the interns.
3)Revision classes:they keep wowing me with their teaching method. The mentors actually host revision classes and question and answer sessions to clarify interns on classes held and tasks given respectively. 
 4) FUN!I'm happy that the internship is not always a serious affair.They create time for games and rewards for winners
If you're looking for an internship placement for Learning Web development and design,look no more because KodeCamp got all you need.
OSD600 - Week 2 - Release 0.1
Tags: opensource
Published: 2021-09-16 21:45:03

This week my task is to create a Static Site Generator (SSG) tool with any languages that I'm comfortable with. I choose C++. Although sometimes I feel it's hard for me, I still love C++. I name my SSG tool is Potato Generator.

Basically, this tool receives input from a text file or a folder name in order to generate a single HTML page or a main page controlling a list of websites. The inputs for Release 0.1 of this tool is basically text files containing short stories with a title and paragraphs.

I create a class named HTMLFile to control all the functionalities of a single website. It reads the input from a text file, push back each paragraph of the text file into an element of vector<string>. I use a string to control the HTML content. First index of the vector is the name of the story. I use it to create title and header h1 for the HTML page. Then, I loop through the vector to build paragraphs. All things are added up to a HTML string. Then I create a new html file, write the content to it. And I have a single HTML Page generating from a text file.

I create a class named MainPage when user inputs a folder. A main page will have a navigation bar directing to each HTML page. The MainPage class will loop through list of files in the folder and generate each HTML file itself.

In the pgprogram.cpp containing main function, I check for the input arguments of the users. Users can enter -v or --version to check which version of my program is. Users can enter -h or --help to see the instructions to run the program. Users can enter -i or --input to specify which file/folder for the program to process. Otherwise, program works with file/folder-name argument itself without -i or --input.

Also, I create a CSS stylesheet myself to make the beautiful webpage. The main color is light-pink. Black texts are printed on each white div. I also choose the text, which is so young and pretty.

To run the program, there are two ways:
1/ On CMD, enter command pgprogram fname. (Where fname is the name of a file/folder)
2/ Specifying arguments:
- Version: pgprogram -v / pgprogram --version
- Help: pgprogram -h / pgprogram --help
- Input: pgprogram -i fName / pgprogram --input fName

For further details, please visit my Git Hub for clear instructions and images: https://github.com/kiennguyenchi/potato-generator

Otherwise, you can take a look in my generated websites from the tool at: https://gifted-brattain-2278d4.netlify.app/sherlock-holmes-selected-stories/sherlock-holmes-selected-stories