teleren/devto huggingface dataset:
I made a simple CLI that generates a vanilla HTML project. What do you think?
Tags: help, javascript, node, npm
Published: 2021-01-02 16:02:41

**Hey Dev community!** 👋

Today I've been working hard on publishing a new NPM package.

Check it out! 👉 https://github.com/BraydenTW/create-html-boilerplate

---

**Create HTML Boilerplate** generates a vanilla HTML/CSS boilerplate for you in a flash! ⚡

![Baby GIF](https://media.giphy.com/media/MJGxL8fxrQBfq/giphy.gif)

To start a project, simply type in the following command into your terminal:

```sh
npx create-html-boilerplate myapp
```

***Tada!*** ✨

Now you can code away!

---

## But, why?

You might be asking, *why would I want a boilerplate generator for a plain, vanilla project?*

Well, as I started web development as a beginner a few years ago, making the folder structure and file imports were always time consuming for me. **I already knew how to do it, why waste my time setting it up?**

My brother has had this same issue and that's when the idea popped into my head. 🎉

---

I'm open to any feedback you have for my project. I'm planning on adding more config options, imports, and templates too. 😉

If you find this tool useful, I would appreciate a ⭐ on [this repo](https://github.com/BraydenTW/create-html-boilerplate).
TIL: How to add spaces to the dock on MacOS
Tags: productivity, apple, macos
Published: 2021-01-02 15:43:04

MacOs has a whole bunch of hidden settings that can only be accessed from the `terminal`. Here's one that helps keep things tidy.

You can add spaces to the dock to separate app icons. I've done this to create categories: `work`, `writing`, `communication`, `browser`.

![Screenshot of my dock with spaces between the icons](https://dev-to-uploads.s3.amazonaws.com/i/fwdakoo7os4f44wn0pw1.png)
 

**To create a space in your dock:**

1. open `terminal`.
2. add the following command: `defaults write com.apple.dock persistent-apps -array-add '{"tile-type"="spacer-tile";}'; killall Dock`
3. Press `enter`.

To remove the space:

1. `command-click` the space. 
2. Select `remove from dock`

Easy, and it looks so much cleaner.
Day 2 Challenge
Tags: javascript, challenge, webdev, 365daysofcoding
Published: 2021-01-02 15:36:24

Hope your new year was wonderful! Day 2!

## The Problem
Write a function that accepts an array of numbers, this can be an array with any number of nested arrays. Flatten the array (make all one level), put it in numerical order of distinct numbers from the original array 

Examples:
```javascript
    flatten([1, 1, 5, 9])  //[1, 6, 9]   
    flatten([20, [3, 5], 10])  //[3, 5, 10, 20]   
    flatten([[1,2,3],[[4,5],6,[7,8,9], 19, 21, [0, 1], ]])  //[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 19, 21]
```

If you would like the challenges emailed to you every morning subscribe [here](https://hellodevworld.com/misc/365-of-coding-announcement). I will post the challenges on [my blog](https://hellodevworld.com) and send out an email at 7am every morning and will post the solution and send an email for the solution at 6pm every night. I will also be posting a video on my [YouTube channel](https://www.youtube.com/channel/UCJ-cXLeP-2NJzMGmzJ9JHpQ) for each challenge so subscribe there so you don't miss one!

I can't turn off commenting so **please do not comment your solution on this post** I will post a solution later tonight and you can post it there. If people cannot follow this I will not post the challenge on this platform and will only post the solutions.
Custom Radio Button using HTML & CSS
Tags: customradiobutton, radiobuttondesign, radiobuttoncss
Published: 2021-01-02 15:31:54

Hello Reader, today in this blog I'm going to create a Custom Radio Button using HTML & CSS only. In my earlier blog, I have shared <a href="https://www.codinglabweb.com/2020/12/custom-checkbox-design-using-only-html.html">Custom Check Design,<a/> and it's time to customize the radio button in the animated design.
In simple language, the radio buttons are the property of the input element of the HTML generally uses to make something clickable for once time. A checkbox is another property of the input tag which are uses to check and uncheck, it can be clicked twice but the radio button is clickable for a single click.

As you can see from the given image on the webpage, this is the real programming [Custom Radio Button ] which we are going to build today. You can see there is one title on the top of this image and three boxes with the subject of programming courses. We can see three circles like a radio button on the left side of all boxes. The first box is active that's why its background color is different than other boxes and its right side radio button also looks in "ON " condition and it has also a border. I have programmed all boxes like the first button. When we clicked other boxes then we could see the real programming.

You can download all source code from the given link. <a href="https://www.codinglabweb.com/2020/12/custom-radio-button-using-html-css.html">Click here to download all source code files.<a/>
Portfolio Website
Tags: dohackathon
Published: 2021-01-02 13:59:52

## What I built
I have built a my portfolio website using HTML , CSS , GSAP , Javascript. 

### Category Submission: 
Personal Site/Portfolio

### App Link
https://dev-portfolio-liy9f.ondigitalocean.app/

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

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

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

### Description
Highly customizable Portfolio website with 4 pages (Home, Projects, Skills, Contact).

### Link to Source Code
https://github.com/Abhishekkr93/Dev-Portfolio
### Permissive License
MIT

## Background
Portfolio website is the best Place to show our Projects, Skills, And other information. So, I decided to build a Portfolio site for me.

### How I built it 
This Website is build using HTML , CSS , GSAP , Javascript And Deployed on DigitalOcean.

### Additional Resources/Info
Thanks!
Build a Quiz App with Vue
Tags: vue, beginners, tutorial
Published: 2021-01-02 15:27:57

## I made a [Quiz App with Vue](https://vue-quiz-app.christiankozalla.vercel.app/) now available as a **Tutorial** in two parts. :rocket:

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

### [Part I](https://chrisko.io/posts/vue-tutorial-frontend-quiz-app-headsup) covers:

- Setting up a project in Vue
- Fetching data from API
- Computed properties
- Methods

### [Part II](https://chrisko.io/posts/emit-events-in-vue-to-pass-data-between-components) covers:

- Handling custom events in Vue
- Watchers
- Component re-rendering

## Starter Code available [on GitHub](https://github.com/christiankozalla/vue-quiz-tutorial)
- `master` branch is the starter
- `tutorial` branch includes each individual step from start to finish

## Try a [Live Demo](https://vue-quiz-app.christiankozalla.vercel.app/)

Have fun playing! :rainbow:

> If you like to read more on web development you can browse my blog [chrisko.io](https://chrisko.io) :heart: or follow me on [Twitter](https://twitter.com/CKozalla) :fire:
Precedence Rules in CSS3-P1
Tags: css, html, webdev, beginners
Published: 2021-01-02 15:26:30

While styling a single HTML document via cascading style sheets one has to keep in mind the **CSS Precedence** rule which I used to often get confused with. So let's begin.
We all know that there are typically three ways to style an HTML document. For those who don't know let me tell you that these are:

1.By Embedding the CSS inside the style attribute of the HTML elements i.e., in the start tag itself.

![embedded style attribute within html](https://dev-to-uploads.s3.amazonaws.com/i/37id1v5ya3910eghh1xw.PNG)

2.By Embedding CSS inside style HTML element i.e., within the style tag.

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

3.By linking the External CSS files in the HTML within the head tag.

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

Now the question that arises is what if someone does styling of a single html page using all the methods mentioned above? This is an obvious question that comes to beginner's  mind when they get into web development.
Let's Understand how CSS Precedence rules resolve this by this example here:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/329dcdb9r66nyjwgtgxp.PNG)

Did you see what happened here? We have declared the colour for **h1** in style tag, in CSS stylesheet which is linked in the head and also within the h1 tag as an attribute. The precedence in CSS works like this :

a) If nothing is specified for a particular tag, each browser has its own rendering properties which are predefined within them, which is what we usually see when we open a simple HTML document in our browsers.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/z1g1lyh3e2oymsz2ea5a.PNG)
Look carefully we have not linked any stylesheet in the html file.

b) The browser while rendering the HTML document checks within the head tag for linked stylesheets and if there is one present it will display the contents as prescribed in the stylesheet.

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


c) The then proceeds to check for the style tag and the content within the style tag to make the particular changes
 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/1vnb3qqhpwzlvpu4k0wd.PNG)

d) Finally the browser looks for style contents within the particular tag itself which in our case is h1.As we all can see it has overridden all the other style tag and stylesheet linked with the html.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/5tvjzkm82skvp3v54h7i.PNG)

TO BE CONTINUED...
Day 9 of 100DaysOfCode: Simple Chatting Program
Tags: beginners, codenewbie, 100daysofcode, python
Published: 2021-01-02 15:15:53

Today is my day 9 of #100daysofcode and it was a new year yesterday so I took a leave. 
Today I learned about more properties of CSS from [freecodecamp](https://www.freecodecamp.org/learn/responsive-web-design/applied-visual-design/create-visual-balance-using-the-text-align-property). And I also tried to write a simple chatting code using python primitive data structures.
 

## Simple Chatting Program
Program start by importing dependencies like `random` for getting random numbers and `datetime` for getting date and time. Then we make a empty list where we will store our lines of chat knowledge. The file `chatdata.txt` is something like below:
```
# Query
## Greet
Hi
Hello
Greetings
Hola
Hey
## Bye
Bye
Good Bye
Talk to you later.
Take care.
See you.

# Reply
## Greet
Hey, whats up!
How are you?
Hello.
## Bye
Bye buddy.
Take care.
Farewell.
``` 
```python
import random
import datetime
```
In the program below at first make a list to store data after reading line by line.
```python
data = []

with open("chatdata.txt") as fp:
    data = [line.strip() for line in fp.readlines()]
```
Here I make two dictionary initialize curr_key and curr_sub_key. I make a list to store the value. I start looping which is given below
```python
chat_data = {}
temp_dict = {}

curr_key = None
curr_sub_key = None
curr_value = []
for line in data:
    sdata = line.split(" ")
    #print(line)
    if line == "":
        temp_dict[curr_sub_key] = curr_value
        curr_value = []
        chat_data[curr_key] = temp_dict
        curr_key = None
        temp_dict = {}
    
    if sdata[0] == "#":
        curr_key = sdata[1]        
    elif sdata[0] == "##":
        if len(curr_value) > 0:
            temp_dict[curr_sub_key] = curr_value
            curr_value = []
        curr_sub_key = sdata[1]

    else:
        curr_value.append(line)
    
temp_dict[curr_sub_key] = curr_value
chat_data[curr_key] = temp_dict
chat_data
```
```python
queries = [l for v in chat_data["Query"].values() for l in v]


chat = True
while chat:
    q = input("You: ").strip()
    reply = "I dont understand it. Please retype it clearly."
    if q in queries:
        for k, v in chat_data["Query"].items():
            if q in v or q.title() in v:
                reply_v = chat_data["Reply"][k]
                ind = random.randint(0, len(reply_v)-1)
                reply = reply_v[ind]
                
                if  q == "Bye":
                    chat = False
            
        
    print(f"Bot: {reply}")
```
Why I use light mode
Published: 2021-01-02 13:31:26

There's feeling in the developer community that says if you're not using dark mode, you're not a proper developer. Every screen shot and every video you see of someone coding, whatever application they're using, it has a dark theme.

I know this is because it is easier on your eyes. Which makes sense: on screen reading black on white or white on black is hard. You need a little less contrast than that (but not too little so it's impossible to read!)

However, I have a chronic illness that can be made worse by bright screens, so I turn the brightness down. My laptop and phone are both set to around 20%. It means I cannot see my phone screen at all when I'm outside. And I also can't read text in dark mode, except in natural light when the sun's not out.

So I have to use light mode. I don't have that problem with looking at a white background because it doesn't appear white - it's grey in 20% brightness.

Light and dark themes are equally good; you can be a good coder no matter which you use; whatever works for you is the right thing to do.
#30daysofelm Day 17: I decoded some JSON!
Published: 2021-01-02 15:09:50

This is day 17 of my [30 day Elm challenge](https://dev.to/kristianpedersen/30-days-of-elm-intro-2lo2)

# About today's project

Code/demo: https://ellie-app.com/bYbhrKjmhJCa1

![Screenshot of text showing planet distances](https://dev-to-uploads.s3.amazonaws.com/i/4sh8sve9hzlte77sb4km.png)

In today's project, I was finally able to decode some (hardcoded) JSON!

[Bukkfrig's comment on yesterday's post](https://dev.to/bukkfrig/comment/19p74) saved the day, so thanks!

I'm happy with today's progress, and have other plans for the evening, so I'll leave the Python backend integration for later.

Some of the code here could be more elegant, but I'll save that for another day.

# 1. Describing the data

An individual planet in my JSON looks like this:

```json
"Jupiter":{
        "lightMinutes":49.561547588282494,
        "xyz":[-15.160997437594864,35.36776769042324,86.01557267383876]
    }
```

As you can see, the data and descriptions match:

```elm
type alias Planet =
    { lightMinutes : Float, xyz : List Float }

planetDecoder : String -> Decoder Planet
planetDecoder planetName =
    field planetName
        (map2 Planet
            (field "lightMinutes" float)
            (field "xyz" (list float))
        )
```

# 2. Presenting the data (or the error)

```elm
planetDiv : String -> Planet -> Html msg
planetDiv p { lightMinutes, xyz } =
    div []
        [ h1 [] [ text p ]
        , text ((lightMinutes |> round |> String.fromInt) ++ " light minutes away")
        , br [] []
        , div [] <| (xyz |> List.map (\n -> text ((n |> String.fromFloat) ++ ", ")))
        ]


showPlanetOrError : String -> Html msg
showPlanetOrError planetName =
    case
        decodeString (planetDecoder planetName) hardcodedData
    of
        Ok planet ->
            planetDiv planetName planet

        Err err ->
            pre []
                [ text "Oops: "
                , br [] []
                , text ("    " ++ Debug.toString err)
                ]
```

`planetDiv` is a pretty basic function that just returns an `Html msg`.

`showPlanetOrError` either shows the `planetDiv`, or logs out the error message.

# 3. Showing all planets

This kind of hardcoded solution takes me back to when I first learned JavaScript. Oh man. :D

```elm
main : Html msg
main =
    div [] <|
        List.map (\planet -> showPlanetOrError planet)
            [ "Sun"
            , "Mercury"
            , "Venus"
            , "Mars"
            , "Jupiter"
            , "Saturn"
            , "Uranus"
            , "Neptune"
            , "Pluto"
            ]
```

# 4. Summary

JSON in Elm is tricky, and I'll probably make a few more mistakes, but the community is really helpful.

Thanks to everyone for helping a stranger in need! :)
Parágrafos em HTML
Tags: html, braziliandevs, beginners, webdev
Published: 2021-01-02 15:04:05

Olá pessoal, hoje vamos conhecer como criamos parágrafos em **HTML**.

A _tag_ `p` é a responsável por criar parágrafos, essa _tag_ é _display block_, ou seja, ocupa toda a largura da tela.

Para criamos parágrafos:

```html
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae ligula sem.</p>
```

{% jsfiddle https://jsfiddle.net/franciscochaves/kuxzrbso result,html %}

Se precisamos quebra o texto, utilizamos a _tag_ `br` (break):

```html
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>
Donec vitae ligula sem.
</p>
```

{% jsfiddle https://jsfiddle.net/franciscochaves/02rjwqnz result,html %}

Podemos observar que a _tag_ `br` é _self closing_ ou seja não precisamos utilizar uma _tag_ de fechamento.

Um atributo interessante para utilizar com a tag _p_ é o atributo `align`.

Alinha o texto à esquerda (padrão):

```html
<p align="left">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
```

{% jsfiddle https://jsfiddle.net/franciscochaves/c2gz8by1 result,html %}

Alinha o texto à direita:

```html
<p align="right">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
```

{% jsfiddle https://jsfiddle.net/franciscochaves/k9bnjL8p result,html %}

Alinha o texto ao centro:

```html
<p align="center">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
```

{% jsfiddle https://jsfiddle.net/franciscochaves/fmq0vjn4 result,html %}
2020 
Tags: retrospective
Published: 2021-01-02 15:01:25

2020 has been one hell of a year. Having relocated with my family from Aarhus, Denmark to Sydney, Australia in Jan 2020 just as the COVID19 outbreak started, life had not been the same. 

As a family, we never got the luxury to settle in. Daily life was filled with a subconscious fear of getting sick. A simple cough would have resulted in two swabs down your throat. The economy was affected so badly. So many people stood down, so many lost jobs. 

The biggest struggles were Homeschooling and Working at the same time. The constant need to be present with the children to help them with the remote / schooling, when no one was prepared for such a thing. Having to take meetings when your 4-year-old daughter decides now is a good time to annoy my brother so both of us can scream our lungs out. I am grateful for my Alexa / Echo Dot, for playing white noise to cut down *most* of the noise.

The constant uncertainty in our daily lives had (still has) an impact on us mentally. Me and my wife, we try to live life as normal as possible. Powering through the financial strain as well as the emotional struggles the pandemic brought upon us. We were somewhat lucky to be here, compared to some parts of the world where the governments have screwed things up and continue to screw things up for their people.

I would have loved the time I had to spend in lockdown to be without the stress of the pandemic. It didn't help to stay present whenever I spent time with my family. I do try, sometimes it just becomes a bit hard. 

End of the day, I am thankful for everyone who was busting their arses in the frontlines. For heads of states who had to work under so much pressure to care for so many people. 

🤞 for a better 2021.
Transactions in DB
Tags: transactions, database, acid, base
Published: 2021-01-02 14:44:20

A transaction is a single unit of work.which can be broken down into multiple steps. For example a user adding an item to a cart. 
step 1: update the item for the user in cart object
step 2: update the cost of the item
In the above example, step 1 and step 2 are tightly coupled and system goes to inconsistent state if one happens and other one fails, thus it is necessary for the transaction to be in its complete state but not be in a partial state.

we also have the concept of rollbacks in all OLTP databases. if step1 succeeds and step2 fails, database rollbacks step1 and shows the failure state to the client.

General theme here is not to have any partial states.

Another example is, when we receive a new email,
step 1: we need to add a new email to feed
step 2: Increment unread message count
these two steps have either succeed/fail but not be in partially committed state

Transactions show these 4 properties ACID : 

Atomicity : Ensures no partial states in a transaction
Consistency : Ensures system is always in consistent states even if there are multiple transactions happening on single row/single DB by having locks(these could be range locking ,row/column level locking ideally)
Isolation : Ensures no two transactions interfere each other ( No phantom reads/dirty reads)
Durable : Ensures any transaction that happened will persist.( Might maintain a log and replay it incase of any server failures)

There is another alternative to acid is base kind DBs:

Basically Available : Ensures high availability of DBs 
Soft-state : There would be partial states in DBs( but there will be eventual consistency)
Eventual consistency : Consistency is guaranteed but it is delayed
SQL Server System versioned temporal table
Tags: database, sqlserver, history, temporal
Published: 2021-01-02 14:42:22

There are times when we need to maintain an audit trail of data changes made to a database table. SQL Server 2016 added support for [Temporal](https://en.wikipedia.org/wiki/Temporal_database) tables to achieve this.

**Adding versioning to an existing table**
A Non-Temporal Table can be changed into a System-Versioned Temporal Table by adding PERIOD definitions and enabling System versioning as below.
```
ALTER TABLE myschema.mytable
    ADD   
        SysStartTime DATETIME2(0) GENERATED ALWAYS AS ROW START HIDDEN
            CONSTRAINT DF_SysStart DEFAULT SYSUTCDATETIME()
      , SysEndTime DATETIME2(0) GENERATED ALWAYS AS ROW END HIDDEN
            CONSTRAINT DF_SysEnd DEFAULT CONVERT(DATETIME2 (0), '9999-12-31 23:59:59'),
        PERIOD FOR SYSTEM_TIME (SysStartTime, SysEndTime);        
       
ALTER TABLE myschema.mytable  
SET (SYSTEM_VERSIONING = ON (HISTORY_TABLE = history.trial_mytable));
```

**Querying historical data from a temporal table**
The power of this feature lies in its simplicity. Once System versioning is enabled, we can forget about the history table. SQL Server manages the audit/history of changes for us. We could directly query the main table and get a snapshot of how the data looked at any point in the past using the syntax below.
```
select *
from myschema.mytable
FOR SYSTEM_TIME AS OF '2020-12-31 17:47:46' ;
```

Another good thing is that only the changes get stored in the history table. That is, if we created a table, enabled versioning and just inserted a bunch of rows to it, then the history table will be empty. Only if the data in the main table is updated or deleted, the changes get into the history table. In other words, SQL Server does not create duplicate records between the main table and history table.

Refer to [SQL Server documentation](https://docs.microsoft.com/en-us/sql/relational-databases/tables/creating-a-system-versioned-temporal-table?view=sql-server-2017#important-remarks) for some of the limitations / things to keep in mind when using System-versioned temporal tables.

**Source :**
https://docs.microsoft.com/en-us/sql/relational-databases/tables/creating-a-system-versioned-temporal-table?view=sql-server-2017