teleren/devto huggingface dataset:
Live Preview 😲 (From workflow without deploying): Github Action
Tags: actionshackathon, opensource, github, showdev
Published: 2020-09-14 21:58:44

### My Workflow

My action `live-preview-action` makes live preview of your app dead simple from your CI/CD pipeline.

* You can live preview without deploying by exposing the local web server PORT inside of the workflow to the internet.
* The url will be printed in the console as well as will be send on discord server via webhook .... Yay :)

### Submission Category: 

Yuss! 🤓 So here it is, I think you all will love this **DIY Deployments** entry.

### Yaml File or Link to Code

{% github https://github.com/sharadcodes/live-preview-action %}


### Additional Resources / Info

Behind the scenes it uses [ngrok](https://github.com/inconshreveable/ngrok) which is an awesome tool and a must have for every developer.

### How to use

1. First of all get a discord webhook and add it as secret in the repository.
2. Now you have to specify 4 fields as inputs:
  * port (required field): A required field, this port will be exposed
  * minutes: after the minutes specified here the server will stop, defaults to 5 minutes
  * command  (required field): This could be any command like `npm run dev` or `npm start` or whatever. Make sure it uses the same port as specified in the **port** field in inputs in yml file.
  * discord_webhook_url  (required field): it will be used to send the URL for the exposed port

---

#### Go ahead guys try it out, and a huge thanks to DEV for organizing this Hackathon 👏👏
Angular Optional Form Control Validation
Tags: angular, typescript
Published: 2020-09-14 21:43:06


**New Discovery**
Use ngModel instead!
{% link https://dev.to/jwp/angular-validation-using-ngmodel-55gf %}

Assume your web form has an optional field.  The field is not required, but when filled in must be valid before submitting the form.

We have discussed tying the Save button visibility to the form being valid. This is a nice way to ensure nothing is submitted before all is good to go. We can leave that code in.

Here's the technique for optional validation on a non-required field.

```typescript
// Create a formcontrol with no validators at first
 middleName: new FormControl(fcPerson.value.middleName)

```
Then hook up changeEvent listener for that form control
```typescript
// hook up changes listener.
 this.formGroup.controls
   .middleName.valueChanges
     .subscribe((change) => { 
        //inject validators here
      });
```

The validator pattern to inject on change:

```typescript
// the form control name is middleName
 middleName.setValidators([
   Validators.pattern(
     //the regex pattern
     middleNamePattern
   )
]);
```
A good start.

JWP2020 Optional Form Validation
About Me!
Tags: klee214, senecacollege, opensource
Published: 2020-09-14 21:31:11

## Why are you taking OSD600?
Hello! everyone, I am so glad to join in the Open Source course in this semester with you guys. I always wanted to practice and develop skills in contributing a big project. To be honest, I barely knew what the open source was and how I could take advantage of it so far. So this will be the good chance for me to learn this thing and hopefully I can take away a lot throughout the course. 
**Once again nice to meet you guys and have some fun in this course**

*https://github.com/klee214*
*https://aboutkiminlee.herokuapp.com* 

## Where am I?
I was originally born and raised in Korea(Not North!!). **BUT**, I didn't go back. I am currently living in Toronto and will be at least during this semester. Stay safe guys!
  
## What am I hoping to accomplish this term?
Learning new skills and apply my skills to a project is my delight! I don't know much about Open Source, so I want to learn about what it is and how to use thoroughly. Besides I would like to contribute to a great project! So at the end of this semester, I would hopefully be a nicer open source programmer than now!

## What was the the GitHub trending repo I researched above?
I have chosen Algorithm thing in Java. The reason is simple. I am learning DSA in this semester. So I thought maybe the extra algorithm thing would help me to understand the data structure thing. 
*Maybe, I would change the repo later in this course* 

That's all about me! Now, let's have some fun in this course!
Thank you
My #100DOC - Day 19
Tags: challenge, 100daysofcode, log
Published: 2020-09-14 21:19:56

### Day 19: September 14, 2020

#### **Today's Progress**: 
1. **[Continued with The Complete JavaScript Course](https://github.com/pablohs1986/javaScriptCompleteCourse2020_Schmedtmann)** (48min):<br>Today I learned how to read input data from different HTML input types.
2. **[Continued with Confección y Publicación de Páginas Web Course](https://github.com/pablohs1986/confecci-nYpublicaci-nDeP-ginasWeb_SEPE)** (36min):<br>Review of HTML format tags.
    
#### **What I learned**: 
* Read input data from DOM in JavaScript.
* Review of HTML format tags.

#### **Total time**:
1h 24min.
New Idea Blocked
Tags: discuss, question, help
Published: 2020-09-14 21:06:45

What do you do when you have an idea in mind but no clue how to dev the front end?

I can do the server and backend but zero knowledge on how to begin the front end. 

Mind you, I know front end dev pretty well and have made lots of projects on my own. What I’m referring to here is complex UI/UX implementation.

I don’t mind learning new things but I doubt I can make things look and function like I’m dreaming. 

Any thoughts on where to start with this?
HOW TO INSTALL KDENLIVE VIDEO EDITOR IN LINUX [VIDEO]
Tags: howto, adobepremierpro, free
Published: 2020-11-08 12:49:32

---
title: HOW TO INSTALL KDENLIVE VIDEO EDITOR IN LINUX [VIDEO]
published: true
date: 2020-09-14 20:47:37 UTC
tags: HowTo,adobepremierpro,free,howto
canonical_url: https://fossnaija.com/how-to-install-kdenlive-in-linux/?utm_source=rss&utm_medium=rss&utm_campaign=how-to-install-kdenlive-in-linux
---

![kdenlive_banners_fossnaija](https://i2.wp.com/fossnaija.com/wp-content/uploads/2020/09/kdenlive_banners_fossnaija-1.png?resize=665%2C374&ssl=1)

[Kdenlive](https://kdenlive.org/en/) is a very useful [cross-platform](https://fossnaija.com/10-common-terms-every-linux-user-should-know/) [opensource](https://fossnaija.com/open-source-really-matter-control-not-code/) video editor that can serve basic to intermediate video editing needs.

Though not a very polished as industry-standard like Adobe Premiere Pro, it can serve as a useful and free video manipulation tool on a budget.

## Kdenlive Features:

Some important features of Kdenlive include;

- Multi-track editing with a timeline, to track editing positions.
- It supports an unlimited number of video and audio tracks.
- A variety of effects and transitions: that easily be integrated into your files.
- Video clips, audio clips, text clips and image clips can be created, cropped, moved and deleted using built-in editors and tools.
- Rendering can be stopped, paused and restarted. You can still add your personal custom effects and transitions.

So without wasting any time let’s see a very easy way to get Kdenlive installed on your [Linux](https://dev.to/xeroxism/ubuntu-linux-is-everywhere-and-connecting-everything-3dm3) PC.

{% youtube TNLtRG58X2Y%}


**Happy Linux’NG!**

The post [HOW TO INSTALL KDENLIVE VIDEO EDITOR IN LINUX](https://fossnaija.com/how-to-install-kdenlive-in-linux/) appeared first on [Foss Naija](https://fossnaija.com).
Noisy Build
Tags: actionshackathon
Published: 2020-09-14 20:42:39

[Instructions]: # (To submit to the GitHub Actions x DEV Hackathon, please fill out all sections.)

### UPDATE: 
Congrats to all the [winners of the Hackathon](https://dev.to/devteam/github-actions-hackathon-winners-announced-38o2) and thank you to the staff of dev.to for selecting my entry as a runner up!  Looking forward to more events. 

### Noisy Build workflow
There are three main pieces to my entry:
* Microsoft Azure IoT Hub - C2D Action - an action that publishes a message to an Azure IoT Hub
* An MXCHIP IoT DevKit
* A repository that contains a reference to the above action, the CI Workflow, and the C++ project that is running on the MXCHIP.


### Submission Category: Interesting IoT (secondary would be Wacky Wildcards I suppose)


### Yaml File or Link to Code
{% github https://github.com/dcparsons/azure-iot-action %}

{% github https://github.com/dcparsons/actions-hackathon %}



### Additional Resources / Info
Here is a video that demonstrates the entire workflow. 
{% youtube LHh5tAEH-HM %}
Where's Waldo Action
Tags: actionshackathon, codenewbie, github, opensource
Published: 2020-09-14 20:08:23

### My Workflow
Where's Waldo Action adds on a random position, line, and file, a Waldo -> `๑<{8D-/-<`, reassuring the dev that he will never lose its job thanks to the bugs created.

[Note]: # (Make sure to include the name of your GitHub Action and share where it's being used!)


### Submission Category: 

Wacky Wildcards


### Yaml File or Link to Code

{% github https://github.com/alexnaiman/where-s-waldo-action %}

### Additional Resources / Info

Github Repo Demo [here](https://github.com/alexnaiman/test-where-s-waldo)
Day 1 -  Lights!
Tags: codenewbie, beginners
Published: 2020-09-14 20:06:35

Today marks the first day of my self-imposed #30projects30days code challenge! I created a holiday ornament light string that is animated to light up alternately. Check it out [here](https://josno.github.io/day-1-christmas-lights/) or you can just see the gif below!

![lights](https://media.giphy.com/media/mEc8HPNsTnCQZ3pQXj/giphy.gif)


This project is suggested in the challenge side projects list and I thought it was a great way to start my month of challenges. I wanted to see if I can build it from scratch without looking at previous projects' codebases.

I started in Powerpoint, my drawing tool of choice when I need something quick and dirty, to draw up the facade for my lights. 

![powerpoint drawing](https://dev-to-uploads.s3.amazonaws.com/i/byfheoqkn2a2fxnqqtl8.png)
<figcaption> My PowerPoint drawing - call me Picasso</figcaption>

As you can see, there isn't much uniformity for the positioning across the elements for the bulbs and yes, I did set one for each individual bulbs. I like the whimsical look and definitely got to practice absolute and relative positioning as well as transformations.

## What I Learned

This was an eye-opening project for SVGs. I am relatively new to using them and didn't really use them outside of icons. I discovered SVG path builders like this [one](https://codepen.io/anthonydugois/pen/mewdyZ) and enjoyed making different shapes. Since SVGs are scalable, it makes responsive development much easier and editing much easier.

## How This Can Help Me

My portfolio is in need of a design update and I found this as an opportunity to make a subtle, but meaningful change. I have different sections in my single page site and I decided to change to borders to something more fluid and curvy.

 ![old portfolio](https://dev-to-uploads.s3.amazonaws.com/i/s164vyci1brs23t8od67.png)
<figcaption>Old portfolio with straight lines </figcaption>

![new portfolio](https://dev-to-uploads.s3.amazonaws.com/i/qprmz1bq4l75330erocz.png)
<figcaption>New portfolio with curved section borders </figcaption>

I will continue to tackle the excessive white space and add additional design elements with SVGs to the page but I think it is a good start!

Onto the next challenge!
Useful extensions for VSCode
Tags: extensions, vscode, webdev, watercooler
Published: 2020-09-14 20:06:27

If you're like me, VSCode is just your go to code editor. I've personally used it since the beginning of my web development journey. Some extensions just enhance your experience. So here I will list a couple that are just :chefkiss: perfection!

## 1) Peacock
![peacock](https://dev-to-uploads.s3.amazonaws.com/i/qx7ahaoky4jfl89d2kv0.PNG)

This extension is super nice to color code your open VSCode windows. (As long as you remember what color goes to what) You can easily fish through and pull up the right window, saving time and probably your patience haha!

## 2) Gremlins tracker
![gremlins](https://dev-to-uploads.s3.amazonaws.com/i/049awpwa4bijn7bwexky.PNG)
 
This extension reveals invisible whitespace and other annoying characters. A gremlin icon is shown in the gutter for every line that contains at least one of these characters


## 3) Bracket Pair Colorizer
![colorizer](https://dev-to-uploads.s3.amazonaws.com/i/z1lvhjn5cy1hks4o7h53.PNG)
(new version is available but if it's not broke... well you know the phrase haha!)

This is just lovely to have open and closing brackets that are identifiable by color. Probably has saved me a little bit of time (possible understatement... )

## 4) Better Comments
![comments](https://dev-to-uploads.s3.amazonaws.com/i/l0u12qrve1497h8k00pm.PNG)
 
Seems to be a trend in my suggestions.... colors help me organize my code more efficently. Better Comments just helps make your comments more human friendly and easy to spot.

This post was just to name a few that I personally have found useful and use in my day to day life. Hopefully whom ever reads this finds a nifty new extension to use!
Breaking Down NLP- Neuro-linguistic Programming
Published: 2020-09-14 20:02:57

There were times when you had to type everything you want a computer to do but AI engineers decided to turn things easier. The convenience of commanding Siri or Alexa to do your tasks for you and transmitting your instructions to the servers is just one of the many wonders of AI, and primarily, of NLP.

NLP (Neuro-linguistic programming) is a merge of different fields like linguistics, computer science, information engineering, and artificial intelligence. The purpose of the development of NLP was to make it possible for the computers to read, understand, and perceive the Natural languages of humans and communicate with them. Here’s a brief overview of how this technology works.

The process of NLP is not as easy as it sounds. AI and ML engineers have to solve this problem in several steps and then chain them together to make it all work.

The first step is to fragment the text into separate sentences from a paragraph and then process one sentence at a time. To make it more detailed the sentences are then fragmented into separate words often referred to as tokens by engineers. Next, the computer tries to understand the basic form of each word by a process called lemmatization. After this goes to filter out the stop words (words that you might want to filter out before doing any statistical analysis.)

After the computer has fully understood every word it works to integrate them by understanding the relations between the words. Now that the computer knows each word as a separate entity and their relations as well it tries to make sense and extract ideas out of it by Named Entity Recognition (NER). Since the computer figured each sentence separately, to make meaning of the whole paragraph and the pronouns used in it has to do Coreference Resolution which involves mapping by tracking pronouns across sentences and find out the words that refer to the same object.

With all the above NLP steps done Siri is finally able to process your google search instructions.
GitHub Student Developer Pack
Tags: github, freestuff, student
Published: 2021-06-02 15:28:20

---
title: GitHub Student Developer Pack
published: true
date: 2020-09-14 20:00:43 UTC
tags: github,freestuff,student
canonical_url: 
---

> _This article is in no way sponsored by GitHub or any other company. All of the opinions voiced are the author’s own._

## Introduction

The GitHub Student Developer Pack is a little known feature of GitHub that allows student developers access to lots of free goodies. They are completely and totally free, from kindergarten to undergraduate, no credit card required. Now, you may be thinking: _“isn’t this to good to be true?”_ I thought that also, but in my experience the main reason these companies are offering up their services is to hope you continue using them after the time is up, or after you graduate. Some of the services are okay, and some are amazing.

## How To Get It

1. In order to receive the benefits, you must first have a GitHub account. If you don’t have one already, create one [here](https://github.com/).
2. After that, go to [https://education.github.come/pack](https://education.github.come/pack) and provide proof you are a student. I used a school email, and that worked perfectly.
3. Next, go to [https://education.github.come/pack/offers](https://education.github.come/pack/offers) and look at all the great services.

## Service Recommendations

By proving you are a student you have access to man services for free. Some of them are for as long as you are a student, some are year long trials. Among these is GitHub Pro, which lets you have unlimited private repos, and a nice badge for your profile. Also, [Repl.It](https://repl.it/upgrade/cwi) `<- WARNING: Affiliate Link` has a free “Hacker Plan” subscription.
How Did I Get 245,466 Views on My Tech Vlog?
Tags: youtube, technology, appdevelopment, growthhacking
Published: 2020-09-14 19:53:39

---
title: How Did I Get 245,466 Views on My Tech Vlog?
published: true
description: 5 Tips to Get 245,466 Views on Your Tech Vlog
tags: YouTube, Technology, AppDevelopment, GrowthHacking
cover_image: https://miro.medium.com/max/1400/1*wBQ70ObE6SRGtHfl-1WLvA.png
---

## 1. Watch out trends on Twitter.

I found out that the below news is trending on Twitter. The storyline was, a software Techgiant had built an app for Airport Security Administration & charged them $1.4 million.

![https://www.cnet.com/news/youll-never-guess-how-much-the-tsas-randomizer-app-cost/](https://miro.medium.com/max/1400/1*FaLCVyfg-0v_a5F0BsGCrA.png)

## 2. Quickly make a hands-on video

I built the app using the Ionic framework & recorded the screen while building it. Later, I uploaded it on Youtube [Excuse me for the bad audio]

[How to build a $1.4Million dollar app within 4 minutes - TSA Randomizer](https://youtu.be/Yo9YD3zBiFs)

Note: You can use either Loom(Free) or Camtasia(Paid).

## 3. Write titles people want to click.

![How to build a $1.4million app within 4 minutes](https://miro.medium.com/max/1400/1*QImZA3c4aUY_IbXZGzHHbg.jpeg)

When you upload your video to YouTube, ensure to write a catchy headline. You can use a service like [title-gen](https://www.title-generator.com/).

## 4. Reach out to tech bloggers (Email them personally).

The above CNET blog, “You’ll never guess how much the TSA’s Randomizer app cost” was written by “Chris Matyszczyk”. I searched for his email ID & dropped him an email stating that I have a piece of share-worthy news available for him. Chris took an interview over email & published it in a while.

> Remember, authors usually lookout for content to create news. That's what their job is. Therefore, your job is to make their life easier by giving them the right content.

![Ex-IBMer builds TSA's pricey Randomizer app in 4 minutes](https://miro.medium.com/max/1400/1*3eEz7uAJVZION2xp0DtEmw.png)

## 5. Reach out to others

Once you get covered on major news media like CNET.com reach out to smaller tech media agencies. Smaller media agencies will right away consider your content as its already been validated by biggies.
My blog got even featured on Chinese media. Luckily, it was all over the world.

![Chinese media](https://miro.medium.com/max/1400/1*fcPkDzZad02Q_kTTh5BX7g.png)

> & that's it. I hope this helps you get better reach to your tech vlogs.

For more growth hacks follow me on Twitter — [@sandeshsuvarna](https://twitter.com/sandeshsuvarna)
Book Review: Code by Charles Petzold 
Tags: computerscience, books
Published: 2020-09-14 19:52:38

# Introduction

As part of an online syllabus, one of the requirements is to read the book: **Code: The Hidden Language of Computer Hardware and Software by Charles Petzold**. This is a review of the paperback edition. The book targets people who have a general interest in computing. You will build a computer from scratch, using old technology. It assumes no prior knowledge. From the back of the book:
>Using everyday objects and familiar language systems such as Braille and Morse code, author Charles Petzold weaves an illuminated narrative for anyone who's ever wondered about the secret inner life of computers and other smart machines.

# Listed Chapters
1. Chapter One – Best Friends
2. Chapter Two – Codes and Combinations
3. Chapter Three – Braille and Binary Codes
4. Chapter Four – Anatomy of a Flashlight
5. Chapter Five – Seeing Around Corners
6. Chapter Six – Telegraphs and Relays
7. Chapter Seven – Our Ten Digits
8. Chapter Eight – Alternatives to Ten
9. Chapter Nine – Bit by Bit by Bit
10. Chapter Ten – Logic and Switches
11. Chapter Eleven – Gates (Not Bill)
12. Chapter Twelve – A Binary Adding Machine
13. Chapter Thirteen – But What About Subtraction?
14. Chapter Fourteen – Feedback and Flip-Flops
15. Chapter Fifteen – Bytes and Hex
16. Chapter Sixteen – An Assemblage of Memory
17. Chapter Seventeen – Automation
18. Chapter Eighteen – From Abaci to Chips
19. Chapter Nineteen – Two Classic Microprocessors
20. Chapter Twenty – ASCII and a Cast of Characters
21. Chapter Twenty-One – Get on the Bus
22. Chapter Twenty-Two – The Operating System
23. Chapter Twenty-Three – Fixed Point, Floating Point
24. Chapter Twenty-Four – Languages High and Low
25. Chapter Twenty-Five – The Graphical Revolution

# Overview
Each chapter contains the following:
* A real-world problem
* Terms and definitions
* Diagrams and/or pictures
* Solving the real-world problem
* History 
* Summary

# Final Thoughts
I rate this book a three out of five. Although its full of technical and historical information, its not beginner friendly. Some of the information here is a refresher for me, but its very intense. I enjoyed chapter eleven, since I was not familiar with gates. If you want to learn about this information, IMO, a project-oriented resource is best. I linked some courses which you can audit for free.

# Resources
[Syllabus-Python & Django Focus](https://www.notion.so/4f0d76b4b6b54c88a4c99d665018bb66?v=a4f27ffcbe0a4776b796eed1eb1bb366)
[Code Book](https://www.amazon.com/Code-Language-Computer-Hardware-Software/dp/0735611319/ref=sr_1_7?dchild=1&keywords=CODE&qid=1599959820&sr=8-7)
[CS50 - edx](https://www.edx.org/course/cs50s-introduction-to-computer-science)
[Build a Modern Computer from First Principles - Coursera] (https://www.coursera.org/learn/build-a-computer)

*Photo by Kaboompics .com from Pexels*