teleren/devto huggingface dataset:
How to undo sensitive git history in a Github repo?
Tags: github, git, codequality, computerscience
Published: 2020-04-19 03:27:25

You just started working on a project and the code has been around for some time and now it's starting to get traction from other contributors but there seems to be an issue with the repository and it's that the commits are really messy. You have one commit for each lousy change you made in the Readme.md or the general code of the repo. Now it's time to clean everything up so the code is maintained nice and strong.

I'm not sure if this works for other developers but I recently found out that making a local wiki of how to tread along the code I wrote and then removing previous commit history with a single commit of the final code for a cycle ( say, 8 weeks after the first prototype ) is a good idea.

Using this technique of maintaining a repo, you push the code as usual ( try to be considerate with the commits and be informational with the commit message if possible ) and then after around 8 weeks ( a sample cycle of development for me ), delete the previous commit history, make sure there is enough information on the existing code on the wiki ( local or otherwise. a Readme with enough information works just as fine ) of the project such that you do not get lost in the code yourself and once you're sure of it, move on to the cleaning of the commit history. 

But how do you do that? This method works perfectly fine for WSL ( I ~~recommend~~ **highly recommend** WSL for development if you are on Windows ) and other UNIX systems.

- Make sure that `git` is set up on your system. If you're not sure, try running the `git` command. If it's not set up, I suggest you go through [this procedure](https://www.theodinproject.com/courses/web-development-101/lessons/setting-up-git).

- Once you're done with setting up everything, even the SSH keys part, clone the repo you're working on using `git clone`.

- `cd` into the repository.

- checkout with a new branch using `git checkout --orphan newbranch`

- Add all the files from the master repo. `git add -A`

- Commit the changes now using `git commit -am "commit message"`.

- Delete the `master` branch using `git branch -D master`

- Rename the `newbranch` you created earlier to `master` using `git branch -m master`.

- Now force update your repo using `git push -f origin master`.

These steps would work on Windows if you're using GitBash but there *might* be some errors. If there are, either look them up on StackOverflow effectively or idk contact me lol.

Hope this post meant something useful to you in one way or the other.
Keep chillin'! 

Update: To be very clear, the part where I talk about cleaning the repo every 8 weeks is a specific case scenario where you are working on an MVP or code that just achieves a certain purpose and isn't production-ready yet. This technique should be avoided in the production code.
Queue - Data Structures in JavaScript: Part #3
Tags: javascript
Published: 2020-04-19 03:06:26

Queue is a linear data structure, similar to stack, that works on the First-In-First-Out (FIFO) principle. This is best illustrated through the following real life example. Think of people lining up at the movie theater kiosk to buy tickets. The person at the front of the line will get his or her ticket first and leave, whereas the person at the end of line will get his or her ticket much later. Anyone joining the line afterwards will obviously get their ticket after them. 

Quese has two basic operations: 
- Enqueue - adding an element at the end of it
- Dequeue - removing an element at the end of it

Look at the code below to see how this concept is exemplified in a queue class using an array.

```javascript
class Queue  { 
    constructor()  { 
        this.items = []; 
    } 

   // Adds an element to the queue
   enqueue(element) {     
     this.items.push(element); 
   } 

  //Removes an element from the queue
   dequeue() { 
     this.items.shift(); 
   } 

   // returns the Front element of  the queue without removing it.
   front() {  
      if(this.items.length == 0){ 
         return "No elements in Queue";
       } 
     return this.items[0]; 
   }
}

// creating object for queue class 
var queue = new Queue(); 

// Adding elements to the queue. Queue contains [1, 2, 3, 4, 5] 
queue.enqueue(1); 
queue.enqueue(2); 
queue.enqueue(3); 
queue.enqueue(4); 
queue.enqueue(5);

// returns 1 
console.log(queue.front()); 
  
// removes 1 from the queue. Queue contains [2, 3, 4, 5] 
console.log(queue.dequeue()); 
  
// returns 2 
console.log(queue.front()); 
  
// removes 2. Queue contains [3, 4, 5] 
console.log(queue.dequeue()); 

```
Vanilla JavaScript Data Attributes
Tags: javascript
Published: 2020-04-20 07:52:57

---
title: Vanilla JavaScript Data Attributes
published: true
date: 2020-04-19 03:00:00 UTC
tags: javascript
canonical_url: https://daily-dev-tips.com/posts/vanilla-javascript-data-attributes/
---

Did you ever use some weird class like `class="user-fuu"` for `JavaScript` to then pick up this class?

Since `HTML5` Spec, we can use something better for this, and it's called Data Attributes!

Let's dive into using Data Attributes together.

## HTML Markup

```
<div id="demo" data-user="fuu" data-custom-emoji="🔥"></div>
```

Very simple, for each element we want to add, we can use `data-` with a name, note we use multiple dashes for spaces.

## Vanilla JavaScript dataset API

So `HTML5` brings us the wonderful Dataset API, much like the `classList`, as we [explored before](https://daily-dev-tips.com/posts/vanilla-javascript-classlist/). But it's not quite as impressive.

We can only get and set data.

### Getting a Data Attribute

To get a data attribute we can use the following code:

```
var element = document.getElementById('demo');console.log(element.dataset.user);console.log(element.dataset.customEmoji);// fuu// 🔥
```

Pretty cool right!

Note that we have to use `camelCase` to retrieve the data, while we inputted as `dash-style`. This is the rule, and we have to obey to it.

### Setting Data Attributes

To set, we use the same Dataset API

```
element.dataset.customEmoji = '⚡️';element.dataset.bar = 'Fuu?';console.log(element.dataset.customEmoji);console.log(element.dataset.bar);// ⚡️// Fuu?
```

As you can see, we can easily overwrite data attributes, or even add new ones!

Magic powers and trust me, you will use this quite often.

## Alternative method setAttribute and getAttribute

An alternative is using `setAttribute` and `getAttribute` methods.

```
element.setAttribute('data-custom-emoji', '🤟');console.log(element.getAttribute('data-custom-emoji'));// 🤟
```

As you can see, this method needs to `dash-style` again.

## Using Data Attributes in CSS

Another strong value for Data Attributes is that they can be accessed in CSS!

Look at this example:

```
[data-user] { width: 50px; height: 50px; background: teal; border-radius: 50%;}
```

Wow, what can these bad boy Data Attributes not do right!

See the following Codepen for all these examples:

See the Pen [Vanilla JavaScript Data Attributes](https://codepen.io/rebelchris/pen/JjYGVQb) by Chris Bongers ([@rebelchris](https://codepen.io/rebelchris)) on [CodePen](https://codepen.io).

<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
## Browser support

Really good browser support for Dataset, so why not use it!

![Dataset browser support](https://caniuse.bitsofco.de/image/dataset.png)

### Thank you for reading, and let's connect!

Thank you for reading my blog, feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)
Static blogs: The good, The bad, And the ugly.
Published: 2020-04-19 02:49:57


   When it comes to website design, particularily with blogs there’s a war that’s been fought for ages: Static or not? 

   That’s not a very easy question to answer and everyone seems to have their own opinions on what you should pick. I personally will always pick static, just because that’s what works for me, but everyone is different and you should weigh your own needs and wants before picking one option over another. In this post I will weigh the pros and cons to help you pick the best one for you.

## The good
When it comes to choosing how you want to build your blogs and sites there are a few very good reasons to pick static.

### You control your content
This is a big one. With something like Wordpress you are restricted to a few very specific themes. Many of these companies claim to have thousands of templates but in reality many of them are just color shifted versions of eachother.

While with static sites you have templates too, you aren’t required to, and you can easily make something that looks good even without prior programming experience using some very good resources such as [W3 schools](https://w3schools.com) or [css-tricks](http://css-tricks.com). The fact is you own your content.

## The bad

### Very little interactivity
This is a problem that has plagued static sites since their inception. With no servers there is no comments, no logins, no nothing. Just text on a page. Sure you can make it look pretty, but in the end there is nothing the user can do but read. 

Many proponents of static sites say it doesn’t matter, for comments you can use disquss and why does your site need a login anyways? These are both real arguments and that’s why you need to pick what’s right for you.

## The downright ugly

### Large sites
Where building a site using static html pages gets really ugly is when your site needs to scale. Sure you might not get much traffic when you are just starting out, but eventually you’ll need to scale your site to meet with demand. Keeping hundreds of html pages up to date especially after your site design changes can be a real challenge in the long run.


## Conclusion
So what should you pick? In the end it comes down you your personal needs. If you honestly think your site will be getting thousands of visits, and you honestly think you will need to make hundreds of pages of content, go with a CMS. Otherwise a static site might be good for you. Go with your gut.

*this was originally posted on my personal site, which is a static blog without any stylizing. Check it out here: [original post](http://sixty502.me/blog/file.html)*
google translate element (Firefox add-on)
Published: 2020-04-19 02:16:57

[google translate element – Get this Extension for 🦊 Firefox (en-US)](https://addons.mozilla.org/firefox/addon/google-translate-elemen/ "google translate element – Get this Extension for 🦊 Firefox (en-US)")

Example settings for each translation site. The target language is Japanese.
[DeepL Translator](https://www.deepl.com/translator "DeepL Translator")
Text Translator: `https://www.deepl.com/translator#en/@lang@/@text@`

[百度翻译](https://fanyi.baidu.com/ "百度翻译") (Baidu Translate)
Text Translator: `https://fanyi.baidu.com/#auto/@lang@/@text@`

[Papago](https://papago.naver.com/ "Papago")
Text Translator: `https://papago.naver.com/?sk=auto&tk=@lang@&st=@text@`

[エキサイト 翻訳](https://www.excite.co.jp/world/ "エキサイト 翻訳") (Excite Translate)
Text Translator: `https://www.excite.co.jp/world/english/?before=@text@`

[Weblio 翻訳](https://translate.weblio.jp/ "Weblio 翻訳") (Weblio Translate)
Text Translator: `https://translate.weblio.jp/?lp=EJ&originalText=@text@`
Page Translator: `https://translate.weblio.jp/web/english?lp=EJ&url=@url@&sentenceStyle=spoken`

[Yandex Translate](https://translate.yandex.com/ "Yandex.Translate – dictionary and online translation between English and over 90 other languages.")
Text Translator: `https://translate.yandex.com/?lang=@source_lang@-@lang@&text=@text@`
Kai's Top 10 Linux CLI Tools
Tags: linux, cli
Published: 2020-04-19 01:47:31

Welcome to a rather short article that I want to express for the sake of expression. My top 10 favorite Linux commands. Will not be ordered.

1 - Htop
A wonderful tool to see how things are doing.

2 - Neofetch
Useful for light amount of system information.

3 - Pfetch
Small neofetch. Useful for even more basic stuff.

4 - Pkill
Kill tasks, I use this the most.

5 - DD
Image flashing CLI tool that is super easy.

6 - Pacapt
Pacman repos on Debian and Ubuntu.

7 - GCC / G++
C/C++ compilers (plus more)

8 - DKMS
Especially useful to work with Wifi drivers (maybe others)

9 - sh
Bash scripting. Other script commands might be different.

10 - GenISOImage
Often useful for live system imaging.
AMA: DevSecOps versus Secure SDLC
Tags: appsec, sdlc, development, programming
Published: 2020-04-19 01:38:17

---
title: AMA: DevSecOps versus Secure SDLC
published: true
description: In a recent 'Ask Me Anything' live stream, Tanya Janca of We Hack Purple discusses 'DevSecOps versus Secure SDLC'. This video is approximately 2.5 minutes.
tags: appsec, SDLC, development, programming
---

<a href="http://www.youtube.com/watch?feature=player_embedded&v=FCS94amjlfc
" target="_blank" >

<img src="http://img.youtube.com/vi/FCS94amjlfc/0.jpg"/>
<a/>

In a recent 'Ask Me Anything' live stream, [Tanya Janca](https://shehackspurple.ca) of [We Hack Purple](https://wehackpurple.com) discusses 'DevSecOps versus Secure SDLC'. This video is approximately 2.5 minutes.

* DevSecOps is you as an AppSec professional, doing your job, in a DevOps environment.
* A secure SDLC is when you add security activities to your system development lifecycle. Preferably in every phase of the SDLC, and formalized (devs cannot avoid it).
* Examples of secure SDLC
-Threat modelling during design
-Adding security requirements & review during requirements gathering
-Reviewing your design for security flaws and to ensure secure deign concepts are applied

Then Tanya gets off topic and talks about [We Hack Purple](https://wehackpurple.com).

—
**For this and more, check out my book, [Alice and Bob Learn Application Security](https://aliceandboblearn.com/) and my online training academy, [We Hack Purple](https://academy.wehackpurple.com)!**
Have you dismissed TailwindCSS?
Published: 2020-04-19 18:05:12

---
title: Have you dismissed TailwindCSS?
published: true
date: 2020-04-19 01:29:33 UTC
tags: 
canonical_url: https://ianwalter.dev/have-you-dismissed-tailwindcss/
---

![Have you dismissed TailwindCSS?](https://ianwalter.dev/content/images/2020/04/Screenshot_2020-04-18-Tailwind-CSS---A-utility-first-CSS-framework-for-rapidly-building-custom-designs-1-.png)

Maybe you've heard of [TailwindCSS](https://tailwindcss.com/) but have dismissed it because you think writing out class names for each CSS rule is too tedious and you don't want to "litter" your HTML with them? Well that's understandable since it "encourages a [utility-first](https://tailwindcss.com/docs/utility-first) workflow, where designs are initially implemented using only utility classes to avoid premature abstraction", but that's not the end of the story.

Components can be composed of utility classes using `@apply`. So the following button:

```html
<button class="bg-blue-500 text-white font-bold py-2 px-4 rounded">
  Click Me
</button>
```

Can be optimized to use this class:

```css
.button {
  @apply bg-blue-500 text-white font-bold py-2 px-4 rounded;
}
```

Simplifying it to:

```html
<button class="button">
  Click Me
</button>
```

Pseudo-classes can't be used with `@apply` so if you wanted to use `hover:bg-blue-700` with the button class you would simply add a separate pseudo-class for the underlying utility class:

```css
.button:hover {
  @apply bg-blue-700;
}
```

### So why do this instead of just using CSS rules directly?

Because now you benefit from the convenience of the button component class **and** you can still use the utility classes to compose other components, style other areas of your site, and easily modify the styles of other elements. The flexibility that utility classes provide is extremely powerful and, because of how it works behind the scenes, the generated CSS is smaller than if you had specified CSS rules directly for all of those things (as long as you're using a tool like [PurgeCSS](https://github.com/FullHuman/purgecss)).

Read more about this on the TailwindCSS site: **[Extracting Components](https://tailwindcss.com/docs/extracting-components)**
TIL: How to use brace expansion ({}) to spread shell command arguments
Tags: webdev
Published: 2020-04-20 16:10:57

---
title: TIL: How to use brace expansion ({}) to spread shell command arguments
published: true
date: 2020-04-19 00:00:00 UTC
tags: webdev
canonical_url: https://www.stefanjudis.com/today-i-learned/how-to-use-brace-expansion-to-spread-shell-command-arguments/
---

Today I was reading [a discussion about `mv`](https://gist.github.com/premek/6e70446cfc913d3c929d7cdbfe896fef). The linked gist includes a shell custom function that wraps the `mv` command and adds functionality if the user only provides one argument.

```
# wrapped mv command which accepts edits to 
# the provided file path if only one argument was provided
mv planet.png
planet2.png
planet.png -> planet2.png
```

It allows for editing the file path of provided first argument interactively. That is very neat by itself.

I went on a read the discussion about this command and learned that the `mv` command, or to make it clearer, bash/zsh make allow to rename a file with something that looks like a single command.

```
mv a/very/long/path/file.txt a/very/long/path/renamed.txt
```

You can shorten the above command to the following:

```
mv a/very/long/path/{file,renamed}.txt
```

Common shells will extract the `{}` pattern into its parts and create separate arguments. 

```
mv a/very/long/path/{file,renamed}.txt
# 👆 becomes 👇
mv a/very/long/path/file.txt a/very/long/path/renamed.txt
```

Another example is the creation of files that include indices.

```
touch {1..3}.txt
# 👆 becomes 👇
touch 1.txt 2.txt 3.txt
```

Shell scripting. 💙 There is always something new to learn.

*Edited: [Dominik pointed out that this shell feature is called brace expansion](https://twitter.com/DKundel/status/1251924408605609984?s=20)*.
Pesy With Luv, the Esy/Pesy Build
Tags: reason, ocaml, pesy, esy
Published: 2020-04-19 01:21:29

---
title: Pesy With Luv, the Esy/Pesy Build
published: true
description: Debugging the build system
tags: reason, ocaml, pesy, esy
series: ReasonML, Dune, Pesy and Spin
---

In the previous post we built the project using `dune` only. Check it out [here](https://dev.to/idkjs/luv-reasonml-dune-pesy-and-spin-2pdm).

To recap, I am trying to use the [aantron/luv](https://github.com/aantron/luv) library to try to build something and I ran into all kinds of build system issues mostly because I still haven't grokked the reason-native build system yet. That's ok. This note is my way of getting better and having a reference I understand when I need to come back to it and giving back to the generous community. The `reason-native` build environment has a list of great tools you can use. Most prominent among them are [`Dune`](https://dune.build), [`Esy/Pesy`](https://github.com/esy/pesy) and [`Spin`](https://github.com/tmattio/spin). Here we are using `Pesy`.

## Getting Started
 
First make sure you have [`esy`](https:/esy.sh) and [`pesy`](https://github.com/esy/pesy) installed and updated.

```sh
npm i -g esy
npm i -g pesy
```

Then create a directory, `cd` into it, then run `pesy` and follow the prompts.

```sh
mkdir pesy-with-luv && cd pesy-with-luv
```


**Contains the following libraries and executables:**

```
pesy-with-luv@0.0.0
│
├─test/
│   name:    TestPesyWithLuv.exe
│   main:    TestPesyWithLuv
│   require: pesy-with-luv.lib
│
├─library/
│   library name: pesy-with-luv.lib
│   namespace:    PesyWithLuv
│   require:
│
└─executable/
    name:    PesyWithLuvApp.exe
    main:    PesyWithLuvApp
    require: pesy-with-luv.lib
```

## Build The Project:

```
esy install
esy build
```

## Running It:

After building the project, you can run the main binary that is produced.

```
esy x PesyWithLuvApp.exe
```

## Adding the Luv library

Let's install [`luv`](https://github.com/aantron/luv).

Run `esy add @opam/luv`

Then go to `package.json` and add `"require": ["luv"]` to the `library` key.

```json
    "library": {
      "name": "pesy-with-luv.lib",
      "namespace": "PesyWithLuv",
     add this-> "require": [
        "luv"
      ]
    },
```

Run `esy pesy` to rebuild. 

Note that your `dune` file in `library/dune` has changed to reflect the added `luv` library.

This is great if you not comfortable with `dune` files yet.

Now you can call `PesyWithLuv.Demo.luv();` in `executable/PesyWithLuvApp.re`;

Run `esy x PesyWithLuvApp.exe` then watch the output.

## Running Binary:

After building the project, you can run the main binary that is produced.

```
esy x PesyWithLuvApp.exe
```


```
~/Github/pesy-with-luv
❯ esy x PesyWithLuvApp.exe

pesy-with-luv@0.0.0

  Build Succeeded! To test a binary:

      esy x PesyWithLuvApp.exe


Hello
33%
66%
Done
```

## Conclusion

Not bad at all. Need a more robust build and a built in pipeline for sharing your project, `Pesy` is a good choice. Source can be found [here](https://github.com/idkjs/pesy-with-luv)

Next we will try with `Spin`.
Dune in Luv, ReasonML and Dune 
Tags: reason, dune, ocaml, esy
Published: 2020-04-19 01:13:53

---
title: Dune in Luv, ReasonML and Dune 
published: true
description: Debugging the build system
tags: reason, dune, ocaml, esy
series: ReasonML, Dune, Pesy and Spin
---

I am trying to use the [aantron/luv](https://github.com/aantron/luv) library to try to build something and I ran into all kinds of build system issues mostly because I still haven't grokked the reason-native build system yet. That's ok. This note is my way of getting better and having a reference I understand when I need to come back to it. The `reason-native` build environment has a list of great tools you can use. Most prominent among them are [`Dune`](https://dune.build), [`Esy/Pesy`](https://github.com/esy/pesy) and [`Spin`](https://github.com/tmattio/spin). The last two use `dune` so you end up learning about `dune` whatever you do.

Let's start with `dune`. Assuming you have `opam` and `dune` installed this is easy. Go [here](https://opam.ocaml.org) if you don't then head back.

Make a directory and `cd` into it.

```sh
mkdir straight-dune-luv && cd straight-dune-luv
```

Add a `.gitignore` file for `ocaml` using the [gitignore-cli](https://docs.gitignore.io/install/command-line).

```sh
gi ocaml > .gitignore
```

Create a switch with `ocaml 4.08.1`. `luv` requires at least that.
```sh
opam switch create . ocaml-base-compiler.4.08.1
```

Add `reason` and `luv`. `dune` will tell you nicely if you forget to do this.

```sh
opam install reason luv
```

Create you `dune` file and run install.

```sh
touch dune && dune install
```
Create a `Makefile`, optional. I just copied the one from a previous post [here](https://dev.to/idkjs/the-postman-rides-ocaml-part-1-2a44). 

```sh
touch Makefile
```
Which didn't work because of the tabs being off from the paste. Ran `cat -e -t -v Makefile` which I found on [`stackoverflow`](https://stackoverflow.com/questions/16931770/makefile4-missing-separator-stop).

Add the code from [aantron/luv/example/progress.ml](https://github.com/aantron/luv/blob/master/example/progress.ml).

```sh
touch progress.ml
```

Convert it to `.re` and delete the `.ml` version.
```sh
bsrefmt --parse ml progress.ml --print re > progress.re
rm progress.ml
```

Run `make` to build it.

```sh
make
```

Run `progress.exe`.

```sh
dune exec ./progress.exe
```

Output:

```
❯ dune exec ./progress.exe
33%                  
66%
Done
```

Honestly, that was very easy. This has to be your go to build for a simple project. Source can be found [here](https://github.com/idkjs/straight-dune-luv)

Let's try with `Pesy` next.