teleren/devto huggingface dataset:
How I Learned to Trick Out Myspace and Love the Code
Published: 2020-04-21 01:03:07

Like many my age, I was first introduced to writing code in the early days of MySpace. There was nothing like the satisfaction of figuring out how to get hot pink cascading sparkles or black and chartreuse vertical stripes while my favorite Fall Out Boy or Fugazi song blared in the background. I spent a good amount of time prowling the internet for new tips and tricks to deck out my page. When I graduated from high school and joined a band, I continued to learn as much as I could to trick out my bands website and create our internet presence. It was becoming a really solid past time.

When I decided to go to college though, I chose to follow other passions and studied Journalism and the Humanities. I built a colorful career for myself, there was no article I wouldn't write, no gig too strange, no tour too long. However for the past while now, I have been looking for something a little more secure, something that is challenging in a different way, something that doesn't require leaving home for months at a time. I couldn't really put my finger on it. 

While visiting my native waters of California last fall, I found myself at one of my old haunts with an even older friend. She recently had some successes at her job as a Software Engineer and I spent a lot of time asking her questions, getting her insights, learning about her job. She encouraged me to look into it, especially since I had previously shown interest in coding, I was uncertain about it at first, but after spending a few months on the fence about it, I decided to finally take the leap.
Replace Audio in Video
Tags: audiovideo
Published: 2023-01-06 01:26:57

---
title: Replace Audio in Video
published: true
date: 2020-04-21 00:32:26 UTC
tags: AudioVideo
canonical_url: https://brandonrozek.com/blog/audioreplace/
---

I recorded a video and wanted to touch up my audio in audacity. Here’s how I used `ffmpeg` to extract the audio, and then replace it with a modified version.

## Extract Audio

If you know the format of the audio (mp3, ogg, aac) then it’s possible to do a byte copy of the audio track into a file:

```
ffmpeg -i input_video.mkv -vn -acodec copy output.aac

```

| Argument | Description |
| --- | --- |
| `-i` | Input |
| `-vn` | No Video |
| `-acodec copy` | Copy audio stream directly |

If you don’t know the audio codec and have `mediainfo` installed, then run

```
mediainfo --Inform="Audio;%Format%" input_video.mkv

```

If you gave up, then you can transcode the audio (will take longer than direct copy)

```
ffmpeg -i input_video.mkv -vn output.aac

```

## Replacing Audio

Once you’re done touching up the audio (`touchup.mp3`), you’ll want to replace the existing audio with it.

```
ffmpeg -i input_video.mkv \
       -i touchup.mp3 \
       -c:v copy \
       -map 0:v:0 \
       -map 1:a:0 \
       output_video.mp4

```

| Argument | Description |
| --- | --- |
| `-i` | Inputs |
| `-c:v copy` | Make this a copy operation |
| `-c:v copy -map 0:v:0` | Map the video from the first input to the first video output |
| `-map 1:a:0` | Map the audio from the second input to the first video output |
My Development Setup (Inspired by uses.tech)
Tags: productivity, frontend, vscode, bash
Published: 2020-04-22 15:23:43

---
title: My Development Setup (Inspired by uses.tech)
published: true
date: 2020-04-21 00:00:00 UTC
tags: productivity, frontend, vscode, bash
canonical_url: https://includejs.dev/uses
---

## dotfiles 😎

- [vscode settings](https://gist.github.com/edieblu/4991b7f6927562e603985a65319e6a3b) (links to a gist)
- [zsh alias](https://gist.github.com/ac74baf5b8cb1fd66edb2c0218c508e1) (links to a gist)

## favorite homebrews (the less obvious-ones) 🍺

- [autojumop](https://formulae.brew.sh/formula/autojump) (for quick navigation)

- [bat](https://formulae.brew.sh/formula/bat#default) (`cat` with syntax highlighting)

- [htop](https://formulae.brew.sh/formula/htop#default) (for process management)

- [gist](https://formulae.brew.sh/formula/gist#default) (for making gists!)

- [youtube-dl](https://formulae.brew.sh/formula/youtube-dl#default) (for downloading youtube videos)

## zsh 💃

- [Powerlevel9k](https://github.com/Powerlevel9k/powerlevel9k) (my `zsh` theme)
- [zsh-syntax-highlighting](https://formulae.brew.sh/formula/zsh-syntax-highlighting#default) (does what it does)
- [zsh-autosuggestions](https://github.com/zsh-users/zsh-autosuggestions) (also)

## favorite globally installed npm packages 🌐

- [http-server](https://www.npmjs.com/package/http-server) (for spinning up a simple server from the command line)

- [nodemon](https://www.npmjs.com/package/nodemon) (automatically restarts a `node` application on change)

- [tldr](https://www.npmjs.com/package/tldr) (for simpler `man` pages)

## misc 💻

- [Alfred](https://www.alfredapp.com/) (mostly for opening applications (no fancy workflows))

- [Flux](https://justgetflux.com/) (to prevent my eyes from dying)

- [Karabiner-Elements](https://karabiner-elements.pqrs.org/) (for keyboard remapping)

- [Rocket emoji](https://matthewpalmer.net/rocket/) (for writing emojis really quickly)

- [Spectacle](https://www.spectacleapp.com/) (for resizing windows)

- [Vanilla](https://matthewpalmer.net/vanilla/) (for cleaning up the menu bar)
Shorten bash shell prompt (and add colors!)
Tags: linux, bash
Published: 2020-04-20 23:53:55

In a previous article, we learned how to append the current git branch in your bash shell:
{%link https://dev.to/reiallenramos/display-current-git-branch-in-bash-shell-prompt-line-2aj4 %}

But if you want to turn your bash shell prompt from this:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ytq3cznax6ssx0q78udq.png)
to this:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/gunoneqeterqv8pcv36s.png)
then keep reading :unicorn:

## Shorten bash shell prompt
Fire up your editor and open `~/.bashrc`. Look for the block we edited from the previous article:
```bash
if [ "$color_prompt" = yes ]; then
    PS1='${debian_chroot:+($debian_chroot)}\[\033[01;32m\]\u@\h\[\033[00m\]:\[\033[01;34m\]\w\[\033[00m\]$(show_git_branch)\$ '
else
    PS1='${debian_chroot:+($debian_chroot)}\u@\h:\w$(show_git_branch)\$ '
fi
unset color_prompt force_color_prompt
```
If you want to learn about each and every piece of the script, feel free to head on to the reference section below. The article even talks about how to customize the colors. Otherwise, copy-paste away!
```bash
if [ "$color_prompt" = yes ]; then
    PS1='${debian_chroot:+($debian_chroot)}\[\033[01;32m\]\u\[\033[00m\]:\[\033[01;34m\]\W\[\033[00m\]\[\033[01;33m\]$(show_git_branch)\[\033[00m\]\$ '
else
    PS1='${debian_chroot:+($debian_chroot)}\u@:\W$(show_git_branch)\$ '
fi
unset color_prompt force_color_prompt
```
As you might have noticed by now, this also changes the color of the git branch part. Enjoy your short and sweet prompt!

Reference:
[BASH Shell Change The Color of Shell Prompt on Linux or UNIX](https://www.cyberciti.biz/faq/bash-shell-change-the-color-of-my-shell-prompt-under-linux-or-unix/)
Getting started with GraphQL
Tags: graphql, webdev, react, beginners
Published: 2020-04-20 23:30:49



## What is GraphQL? 
GraphQL is a way of asking for data from API - a query language for API. It offers a flexible way of asking for data, and you can get as much or as little data as you need. 

A typical GraphQL implementation involves GraphQL on the server side (GraphQL API) and GraphQL on the client side (to talk to GraphQL APIs). A lot of different tools can be used to build a full-stack GraphQL application - such as Prisma, Apollo, Express, Hasura.
At its core, it is just an API served over HTTP. You can send a curl command to talk to a GraphQL API. 

What is cool about GraphQL is that it provides an easy way of developing APIs over time. With GraphQL, you get one endpoint - `/graphql` and since every client talks to the same endpoint, it becomes very easy to add to an existing API and ensure that all clients are able to leverage newly updated data. 

One thing to remember is that GraphQL is just a specification. How you implement GraphQL largely depends on the library (Apollo, Prisma, Express, etc.) you use, and therefore GraphQL is language agnostic. The libraries available in Java, JavaScript, Python, Go enable GraphQL across platforms. 

## Why GraphQL? 
1. Type safety
2. Backward and forward compatible : no versions
3. Less throwaway data
4. Instrumentation
5. Save multiple round trips
6. Free documentation

## How does it compare with REST? 
GraphQL is better than REST because - 
1. One endpoint to fetch all resources. 
2. Avoid over fetching of data (getting too many fields when only a few fields are needed).
3. Avoid under fetching of data (having to call multiple APIs because one API doesn't give back all the information needed).

REST does certain things better - 
1. Caching
2. Microservices based architecture
3. HTTP codes - 200s, 400s, 500s for every request

## How to get started with GraphQL?
1. [Understand concepts: How to GraphQL](https://www.howtographql.com/)
2. [Read the official docs](https://graphql.org/learn/)
3. [How does GraphQL compare with REST](https://frontendhappyhour.com/episodes/no-rest-with-quintessential-libations-graphql/)
3. [Understand the common misconceptions about GraphQL](https://dev.to/shrutikapoor08/what-is-graphql-the-misconceptions-57b9)
3.  [Play around with GraphiQL to try out GraphQL with GitHub's API](https://developer.github.com/v4/explorer)
4.  [Watch a course in your stack](https://www.udemy.com/topic/graphql/)
5.  [Build a GraphQL server](https://egghead.io/courses/build-a-graphql-server)
6.  [Use GraphQL on the client](https://egghead.io/courses/graphql-data-in-react-with-apollo-client)
7.  [Read a book on GraphQL](https://www.amazon.com/Learning-GraphQL-Declarative-Fetching-Modern/dp/1492030716)
Introducing Yokie - A Recipe Sharing Social Media WebApp
Tags: showdev, go, vue, javascript
Published: 2020-04-20 23:29:33

I would like to share a small project I've been working on for the past few days. [Yokie](https://yokie.app)!

[Yokie](https://yokie.app) is a recipe site that I always wanted but was never able to find.
Most cooking recipe sites out there are slow, full of ads, and have a giant story or description before actually seeing the recipe, so Yokie's mission is to:
1. Provide the ingredients and directions at the top of every recipe
2. Load adequately fast
3. Be ad-free

Along with those core competencies, Yokie also provides: 
- A grocery list feature that is shareable and editable with other users
- A favoriting feature to keep track of recipes you want to remember to cook
- A profile to showcase your own recipes (or store your private recipes)

I built this app because it's something I wanted to use everyday. I figured others might also not enjoy the current landscape of recipe sites out there, so decided to make it a social media site so anybody can join and start searching and saving their recipes too.

### The tech stack

The stack is pretty cool in my opinion, nothing too fancy, most pages are server rendered using [Go templates](https://golang.org/pkg/html/template/), and most pages have little or no javascript on them!

2 pages are pretty interactive so I added [VueJS](https://vuejs.org) to those pages, 'why Vue?' you may ask, because I didn't want to setup any bundling or a client side compiling workflow, with Vue I just needed to add a script tag and start using it - easy peezy.

All data is stored in a [Firestore](https://firebase.google.com/products/firestore) database, and all recipes are also stored in [Algolia](https://www.algolia.com) in order to have a nice search page.

Authentication is handled with [Firebase Auth](https://firebase.google.com/products/auth) because it's free and it just works.

The Go server runs on [Google App Engine](https://cloud.google.com/appengine), and user files are stored in [Google Storage](https://cloud.google.com/storage).

And that's pretty much it!

### Signup!

I'm trying to get people to signup so the database of recipes starts to grow, so I'm offering a _twitter style_ verification checkmark for new users for awhile - so if you want to secure your favorite username and get a nice cool checkmark on your profile - [signup](https://yokie.app/signup)!

Cheers!🍻
This Dot's "A Complete Guide to VueJS" is now available for free download!
Tags: training, vue, javasc
Published: 2020-04-23 00:05:39

---
title: This Dot's "A Complete Guide to VueJS" is now available for free download!
published: true
date: 2020-04-20 23:16:35 UTC
tags: training ,vue,javasc
canonical_url: https://www.thisdot.co/blog/this-dots-a-complete-guide-to-vuejs-is-now-available-for-free-download
---

Today, This Dot Labs is announcing the release of [A Complete Guide to VueJS] written by one of our in-house experts, Bilal Haidar.

The book is a comprehensive resource on the internal structures, complementary frameworks, components, and integrations needed to make Vue work for you!

Readers can look forward to exploring the tools needed to get their first Vue application up and running, from code editors to installing the Vue CLI.

The book then walks through the anatomy an application, introducing force-multiplying technologies supported by Vue, including ESLint, Prettier, source code repository management systems, Git, CSS frameworks, Axios, and more.

There is even a complete section, introducing readers to the yet unreleased Vue 3 update!

At about 80 pages, this quick guide packs in a ton of additional free resources that readers can explore to gain even more insight into this powerful framework.

Download your free copy of [A Complete Guide to VueJS], and be sure to join This Dot Labs and [JavaScript Marathon](https://labs.thisdot.co/blog/announcing-free-javascript-training-during-the-javascript-marathon-this-dot) on Wednesday, 4/22 at 3:30PM EDT for a [live Vue training](https://labs.thisdot.co/resources/LearningUnitTestingInVue), where we will dive into unit testing!

_This Dot Labs is a modern web consultancy focused on helping companies realize their digital transformation efforts. For expert architectural guidance, training, or consulting in React, Angular, Vue, Web Components, GraphQL, Node, Bazel, or Polymer, visit [thisdotlabs.com](https://labs.thisdot.co/)._

_This Dot Media is focused on creating an inclusive and educational web for all. We keep you up to date with advancements in the modern web through events, podcasts, and free content. To learn, visit [thisdot.co](https://www.thisdot.co/)._
Web Surgery - Ep.4 - Start of the Animal Crossing Item Wishlist Website
Tags: webdev, tutorial, jekyll, ruby
Published: 2020-04-20 23:02:21

---
title: Web Surgery - Ep.4 - Start of the Animal Crossing Item Wishlist Website
published: true
description: This episode is the start of our Animal Crossing Item Wishlist Website project. I started to copy my website and change it so anyone can have their own item wishlist. Within 1 hour we have changed some of the components in Jekyll templates to suit our need. We will continue next week.
tags: webdev, tutorial, Jekyll, ruby
---
This episode is the start of our Animal Crossing Item Wishlist Website project. I started to copy my website and change it so anyone can have their own item wishlist. Within 1 hour we have changed some of the components in Jekyll templates to suit our need. We will continue next week.

We will be using the pictures and information on Animal Crossing Fandom wiki page - [list of all funitures](https://animalcrossing.fandom.com/wiki/Furniture_(New_Horizons)).

The code is work in progress but if you want to check it out, it will be uploaded and updated in [this repo](https://github.com/Cheukting/animal-crossing-wishlist)

I am thinking about doing 1.5 hours starting next week so we can get this project done quicker. Please leave any comments and thoughts in the panels of my [Twitch channel](https://www.twitch.tv/cheukting_ho) make sure to follow me to catch me live on more coding and Python contents.
How I became a self-taught programmer 
Published: 2020-04-20 22:52:42

# Intro
### Started coding in 2019
So I've been reading, web searching, and other things too. It started out when I had the idea for how cool it would be to program my own game! I wanted to learn so bad but I had no time. Later my friend Henry (I don't know if he has a DEV account) started teaching me. Now Henry was ADVANCED. So he taught me a few beginners stuff. Then he left me. I was left with the local library and my internet. 

# Becoming
I became a programmer because https://w3schools.com . I was into python and HTML. Why I do not have any idea. Probably because HTML is for web-development and I thought it would be cool to make your own website. Python, probably because Henry suggested it to me. I wish I had more suggestions, but it was already a pain to learn two languages at once. It wasn't only w3schools though, it was some websites that I don't remember the links to. I wish I could source them. But enough of that w3schools was the main website. I suddenly noticed one night after finishing a text-based RPG game in python, that I was actually getting the hang of this coding thing (remember this was at the end of 2019). I started liking coding more and more. Then I was immediately in love. I started making games and websites. I am trying to learn as mush as I can about those two languages. I hoped you enjoyed!
Homelab: Intel NUC with the ESXi hypervisor
Tags: homelab, homeserver, esxi, bsd
Published: 2020-04-20 22:29:10

In this blog post, I’m going to talk a little about my experience running multiple operating systems with an Intel NUC I recently bought and the ESXi 7 hypervisor. My main idea was to use this homelab for:

* Network Area Storage (NAS)
* Kubernetes cluster
* FreeBSD playground
* Managing backup
* Stage and development machine for Go projects

The blog post continues on my website at [henvic.dev/posts/homelab](https://henvic.dev/posts/homelab/).
Get start with Typescript and Parcel
Tags: typescript, javascript, codenewbie
Published: 2020-04-20 22:28:11

Typescript is a technology that grows every day. Companies like Slack, Airbnb, or Google are changing their javascript codebase to Typescript.

Frameworks like Vue, React and (Angular) are using Typescript for writing maintainable code.

These steps show how to start a project with Typescript and Parcel.

> The full code is available in [Github repo](https://github.com/danywalls/parcel-typescript)

## Create a basic project structure

The app structure is a simple 2 typescript class (User.ts, App.ts) and index.html.

```bash
app/App.ts
app/User.ts
index.html 

```

## Setup Parcel and NPM Tasks

The parcel is a npm package for transform, compile and bundle assets. It also provides a development server with a hot-reload.

The first step is installing the packages dependencies.

```bash
npm install -D parcel parcel-bundler

```

Create dev and build script in package.json. These tasks allow build your code and run the dev server.

```bash
"scripts": {
        "dev": "parcel index.html",
        "build": "parcel build dist"
    }

```

## Ready to code?

The User.ts file is a class. The class has a constructor with 2 parameters, name and age.

The hello method returns a string with the name and age.

```javascript
export class User {
    constructor(public name: string = "no name", public age: Number = 35) { }
    hello(): string {
        return `Hi ${this.name} your age is ${this.age} `;
    }
}

```

Import the User class into the App.ts. Add a function for window.onload event, the function set the title with the return of hello method.

```js
import { User } from "./User";

window.onload = () => {
  let title = document.querySelector("#title");
  const tsUser = new User("Dany Paredes", 36);
  if (title) title.innerHTML = tsUser.hello();
};

```

Edit index.html file and import App.ts

```html
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Hello Typescript</title>
</head>
<body>
    <div name="container">
        <h2 id="title"></h2>
    </div>
    <script type="module" src="App.ts"></script>
</body>
</html>
```

Run the npm run dev command, to start the webserver at http://localhost:1234.

## That's it!

That gives a head-start on Typescript and if you enjoyed please share.

Photo by <a href="https://unsplash.com/@bradencollum?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Braden Collum</a> on <a href="https://unsplash.com/s/photos/start?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
Day 120 : Head On
Tags: hiphop, code, coding, lifelongdev
Published: 2020-04-20 21:57:23

_liner notes_:
- Saturday : Did the radio show and as usual had a great time. The recording is at https://kNOwBETTERHIPHOP.com After the show, I tuned into Twitch to see some folks I know throw an online HIPHOP fest. It was pretty cool,I Chromecasted the feed to my TV and finished working on the radio show.

![Erykah Badu singing on a mic in her room giving an online concert with the words April 4th 2020, Eagle Ear](https://dev-to-uploads.s3.amazonaws.com/i/qxahw7yoau1ccse4mxr7.jpg)

- Sunday : Watched a bunch of anime! I set up a sample data for the Web Component that I'm working on in Firebase's Firestore. Going to make API calls to it for default values for the Web Component. Also did some research for a project.

- Professional : Had my weekly meeting with my manager. We worked through some changes based on the feedback we got from testing a tutorial. I took those changes and implemented them into a new branch of the tutorial. We have another test happening this week, so we'll use this new version and see how that works. Also, left some comments on a thread around the demo I'm working on with another team.

- Personal : Someone mentioned Web Components on the Orlando Devs Slack and my friend tagged me as a person to talk about it. haha. I replied with some websites I found helpful, a Web Component I created and a link to the blog I wrote for work. Hopefully it helped.

![Flowers with purple pedals growing from a redwood tree in a forest in Redwood State Park, California](https://dev-to-uploads.s3.amazonaws.com/i/mo2ps3iy99j1i2z1e2jv.png)

Going to finish up the Web Component and then get an old project up and running on my Chromebook. I want to go head on with refactoring the project for the internal hackathon we have tomorrow.

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube riOY0pdJrjI %}
Introducing Flux V1
Tags: blockchain, javascript, rust
Published: 2020-04-20 21:55:56

We are proud to open-source the technical details for version one of Flux Protocol [WIP]. Bringing markets on any asset or event to the masses.🎉

In this whitepaper we cover:

- Market Creation
- Trading
- Resolution
- Dispute 
- Finality
- Security

https://twitter.com/Flux_Market/status/1252316291488251908?s=20
Flux - Markets on any asset or event via SDK
Tags: blockchain
Published: 2020-04-20 21:53:10

I'm the co-founder of Flux, a highly scalable open market protocol for markets on any asset or event. We recently launched our SDK which allows any developer to interact with our market mechanics and oracle and all of this in just three lines of code. 

The goal of Flux is to provide all the backend resources necessary for developers to enable markets without the hassle of traditional infrastructure.
If you had to create a desktop app what tech stack would you use?
Tags: discuss, help
Published: 2020-04-20 21:41:55

My first choice would be Electron but I know it is a bit bloated (haven't developed on it).

Ideally, it should be in JS, Python, Go or Rust.

I prefer staying away from "native tech" as I focus on cross-platform compatibility as much as possible.