teleren/devto huggingface dataset:
What is HTML really?
Published: 2019-11-29 12:54:23

HTML is not a programming language; It is a markup language, and is used to tell your browser how to display the web pages you visit. It can be complicated or simple, depending on how the web designer wants. HTML consists of a number of elements that you use to nest or wrap different pieces of content to make the content appear or act in a certain way. Enclosing tags can make a word or image a link to something else, can make words in italics, make the font larger or smaller, and so on.

The main parts of our element are:

Opening tag: Consists of the name of the element (in this case, “p”) enclosed in opening and closing angle brackets. The opening tag indicates where the item begins or takes effect, in this case where the paragraph begins.
Closing tag: This is the same as the opening tag, except that it includes a slash in front of the element name. The closing element indicates where the element ends, in this case where the paragraph ends. The lack of a closing tag is one of the most common beginner mistakes and can lead to strange results.
Content: This is the content of the element, which in this case is just text.
Element: An opening tag, a closing tag, and content together make up the element.

Attributes contain additional information about the element that you do not want to show in the actual content. In this case, class is the attribute name, and editor-note is the attribute value. The class allows you to give an element an identification name, which can later be used to access the element with style information and other things.

An attribute must always have:

A space between it and the name of the element (or the previous attribute if the element already has one or more attributes).
The name of the attribute followed by an equal sign.
An attribute value enclosed in quotation marks on both sides.
You can also place elements inside other elements - this is called an attachment. If we want to say that our cat is very annoyed, we can wrap the word “very” in the <strong> element, which indicates that the word should be strongly accented.
Create a simple No Code podcast app in 4 easy steps
Tags: nocode, beginners, podcast
Published: 2019-11-29 12:45:02

1) Create a new Google sheet and in the first cell (A1) enter 

    ```=IMPORTFEED("https://feed.syntax.fm/rss","items",TRUE)``` 

This will import the RSS feed data of the podcast into your sheet.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/u831aygbwealrpnqt8ay.png)

2) Go to [www.glideapps.com](https://www.glideapps.com/) click get started and sign in using your Google account.

3) Click + New App and select the Google sheet you created in Step 1.

4) Done! Click on an episode to view the description and scroll to the bottom of the description to play the episode.

You can now interact with your app on screen or test on your mobile device by pressing "Share App" button.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/wh0x2dllv0hvmghi3rae.png)

This is straight out of the box from Glide and took less than 5 minutes so in its current state it is far from perfect but it shows the power of No Code applications and what could be possible.

I used the SyntaxFM podcast for my example, try replacing with your favourite podcast but I can't promise they will all work! The RSS feed can usually be found on the podcast's website.

My version of the app can be accessed on your mobile by visiting [https://kfebu.glideapp.io](https://kfebu.glideapp.io)
How did I reduce the load time of my application?
Tags: database, sql, performance, linq
Published: 2019-11-29 12:30:57

Are you struggling with your application performance? Do you want to know how I reduced load time from minutes to milliseconds? Then don’t hesitate and take a look at this blog and learn from my mistakes.

For rest of my story please follow the link https://medium.com/@danielrusnok/how-did-i-reduce-the-load-time-of-my-application-37f418289d7b
Nov. 29, 2019: What did you learn this week?
Tags: weeklylearn, discuss, weeklyretro
Published: 2019-11-29 11:39:40

Photo by [Rainier Ridao](https://unsplash.com/@rainierridao?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/s/photos/learn?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)

It's that time of the week again. So wonderful devs, what did you learn this week? It could be programming tips, career advice etc.

![Information flowing through your brain](https://media.giphy.com/media/qKltgF7Aw515K/giphy.gif)

Feel free to comment with what you learnt and/or reference your TIL post to give it some more exposure.

{%tag todayilearned %}

And remember, if something you learnt was a big win for you, then you know where to drop it as well.👇👇🏻👇🏼👇🏽👇🏾👇🏿

{% link https://dev.to/jess/what-was-your-win-this-week-2mbn %}

![Price is Right contestant celebrating](https://media.giphy.com/media/gF29UEqBhSoDY8LHKg/giphy.gif)
Start All Your DEV Programs in one Shortcut on Windows 10
Tags: automation
Published: 2019-11-29 11:35:03

---
title: Start All Your DEV Programs in one Shortcut on Windows 10
published: true
description: Scripts for automating dev environment setup, including playing Spotify and connecting to VPN
tags: automation
cover_image: https://www.goodcore.co.uk/blog/wp-content/uploads/2019/08/coding-vs-programming-2.jpg
---

If you're like me - god help us - then you have this constant itch to automate every single part of your existence. The following two scripts will give a blueprint for creating your own start-my-dev-environment scripts.

### Step 1 - Launching apps in batch file

We'll be launching 3 programs:

- Spotify
- Chrome
- Visual Studio Code

additionally, we'll start an OpenVPN client connection.

You'll want to create a batch file like so:

```bat
@ECHO OFF
tasklist /FI "IMAGENAME eq Spotify.exe" 2>NUL | find /I /N "Spotify.exe">NUL
if NOT "%ERRORLEVEL%" == "0" start "spotify_play_lofi-playlist.vbs" "C:\Users\<username>\Documents\batch_scripts\spotify_play_lofi-playlist.vbs" && TIMEOUT 5

tasklist /FI "IMAGENAME eq chrome.exe" 2>NUL | find /I /N "chrome.exe">NUL
if NOT "%ERRORLEVEL%" == "0" start "chrome.exe" "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe"

start " " "C:\Program Files\OpenVPN\bin\openvpn-gui.exe" --command disconnect_all
start "openvpn-gui.exe" "C:\Program Files\OpenVPN\bin\openvpn-gui.exe" --connect my_conf.ovpn

tasklist /FI "IMAGENAME eq Code.exe" 2>NUL | find /I /N "Code.exe">NUL
if NOT "%ERRORLEVEL%" == "0" start "Code" "C:\Users\<username>\AppData\Local\Programs\Microsoft VS Code\Code.exe"
```

Here, the `tasklist` commands are there to make sure we don't run a second instance of an app. For OpenVPN, it's easier to just reconnect.

### Step 2 - Spotify Autoplay Script

The spotify VB script is there to launch Spotify and start a playlist in shuffle mode. Save it in the same folder as your batch script, for safekeeping.

```vb
Set WshShell = WScript.CreateObject("WScript.Shell")
Comandline = "C:\Users\<username>\AppData\Roaming\Spotify\Spotify.exe"
WScript.sleep 500
CreateObject("WScript.Shell").Run("spotify:playlist:74sUjcvpGfdOvCHvgzNEDO")
WScript.sleep 3000
WshShell.SendKeys " "
WScript.sleep 100
WshShell.SendKeys "^{RIGHT}"
```

You can get the playlist URI by right-clicking the playlist > Share > Copy Spotify URI.

### Step 3 - Shortcut Placement

This is simple, create a shortcut to your batch file and place it in your Start Menu Programs folder (`%ProgramData%\Microsoft\Windows\Start Menu\Programs`). You may then move it to the quick-launch bar if you wish.

## References

- [Spotify Forums](https://community.spotify.com/t5/Desktop-Windows/Is-there-a-command-to-play-a-playlist-using-command-line/m-p/1185322)
- [Opening multiple programs on Windows](https://henryreith.co/open-multiple-programs-at-once-on-windows/)
Check IP with Regex in Java
Tags: java, ip, regex
Published: 2019-11-29 11:31:04


# Let's check ip addresses in Java with regex 


* First of all we need to import 2 library.
```java
import java.util.regex.Matcher;
import java.util.regex.Pattern;
```



* Now, lets define ip regex 
```java
 
	  public static final String IP_REGEX ="^"
	  		+ "([01]?\\d\\d?|2[0-4]\\d|22[0-3])\\."
	  		+ "([01]?\\d\\d?|2[0-4]\\d|25[0-5])\\."
	  		+ "([01]?\\d\\d?|2[0-4]\\d|25[0-5])\\."
	  		+ "([01]?\\d\\d?|2[0-4]\\d|25[0-4])$";
```


^	-->start of the line

(	--> start of group #1

[01]?\\d\\d? --> Can be one or two digits. If three digits appear, it must start either 0 or 1
	#    e.g ([0-9], [0-9][0-9],[0-1][0-9][0-9])


|	--> or	   


 2[0-4]\\d	#    start with 2, follow by 0-4 and end with any digit (2[0-4][0-9]) 

|       --> or

 25[0-5]      #    start with 2, follow by 5 and ends with 0-5 (25[0-5]) 


 )		-->  end of group #2


  \.          -->  follow by a dot "."


....           --> repeat with 3 times (3x)

$	-->end of the line




* Create an pattern object and pass regex string to it.
```java

				String ipregex = System.console().readLine(); //read input
				
			    Pattern ipPattern= Pattern.compile(IP_REGEX); 
				Matcher ipMatcher = ipPattern.matcher(ipregex); 
```
			
			
			   

* Finally we can control our result.
```java
		//Control flow
		if (!ipMatcher.matches()) { 
			    	 System.out.println("Yay ! ");
			    	 }
				else{
					System.out.println("Noooooo! ");
				}
				
				
			return ipregex;
	
```
Ask DEV: What are your favorite Developer Blogs?
Tags: blogging, discuss, askdev
Published: 2019-11-29 11:30:31

Blogs are one of my favorite sources for new and interesting content. They are individual and mostly target specific topics. They help solve problems, discover new approaches for common problems or learn new technologies.

In the past years, at least from my observation, blogs experienced a small renaissance. Medium made writing cool again. Self-hosting your blog became more popular in the past years, mostly pushed by static site generators like Hugo and hosting providers like Netlify, which make it super easy to get your blog running. You don't have to worry about installing Wordpress, and having to deal with databases and security plugins. I switched [from Wordpress to Hugo](https://blog.kovah.de/en/2019/static-blog-with-hugo/) a while ago and couldn't be happier.
However, this thread is not about writing, but reading blogs.

My favorite blogs include:
* [Codrops](https://tympanus.net/codrops/) (all about resources and discovery of new stuff, been following their collectives for years already)
* [A List Apart](https://alistapart.com/) (High quality articles about the web)
* [Scotch.io](https://scotch.io/) (Tutorials about basically everything in tech)
* [OneExtraPixel](https://onextrapixel.com/) (great source for resources and alternatives-lists)
* [Coding Horror](https://blog.codinghorror.com/) (Jeff Atwood talking about various topics around tech and programming)
* [Clean Code](http://blog.cleancoder.com/) (blog of the well known Uncle Bob)

But how about you? Do you follow any developer blogs?
**What are your favorite blogs to follow and why?**
Nullish Coalescing for JavaScript
Tags: javascript, beginners, webdev
Published: 2019-11-29 11:01:06

---
title: Nullish Coalescing for JavaScript
published: true
description: Understanding the Null coalescing operator, an ES features which is moved to stage 3.
tags: javascript, beginner, webdev
canonical_url: https://solankiamit.com/nullish-coalescing-for-javascript
---

Nullish Coalescing proposal has been moved to stage 3, i.e. soon it will be added to JS standards, let's see how it helps us.

How many times have you checked whether a variable is `null` or not? Not `undefined`, `''` or `false` but just `null`, I would typically add an if condition `variable === null` just for that, and I've done this countless number of times.

Consider the following code

```js
let counter;

if(response.data === null) counter = 1;
else counter = response.data;

```

What if we could do this easily without so much code to just check if it is `null` or not. Nullish coalescing just does that. Here's how it looks and works.

```js

let counter = response.data ?? 1;

// now if data is 0 counter value is 0
// if it is null or undefined we set it to 1;

```
So only if the value is `undefined` or `null` then the default value will be used.

```js
result = actualValue ?? defaultValue
```

Let's see what we would get when we use the logical OR operator.


```js
let counter = response.data || 1;

// here even if the value is 0, that is the value is defined
// we still get 1, which we don't want.

```

To recap "Nullish coalescing" is essentially

```js
  a ?? b
  a !== undefined && a !== null ? a : b
```

Current status and how to use
---

You can check the [ECMAScript Next compatibility table](http://kangax.github.io/compat-table/esnext/#test-nullish_coalescing_operator_(??)) to find out where the ?? operator is supported.
Babel has the plugin `@babel/plugin-proposal-nullish-coalescing-operator`
Why functional programming? Stay in control
Tags: beginners, functional
Published: 2019-11-29 10:33:31

As I delve a bit more into the experience of converting myself into a semi-literate functional programmer, I still wonder what is the point.

Well, one interesting realisation occurred today and it is about control.

I was looking at some code, a straightforward JavaScript `array.forEach` construct. I thought about what was needed to convert it into something more functional - e.g. a `array.map`. What would happen? I'd need a return value to use as the logical effect of the function. What was I doing right now? It was hard to say - need to read the code and find out what the effect really is.

And then it hit me - using `forEach` means I was losing control of the code. It didn't feel 'safe' somehow. If I was asking for a return value then I'd still be in control because then I can do something with it. Using `forEach` gives all that responsibility away. I have to trust the called function to do the right thing.

Maybe this is a consequence of writing functional code and my emotional response to code is changing?

Hard to say, but it gave me some insight into the psychology of code wars and declarative (functional) vs procedural approaches.

Conclusion: Functional programmers like control and certainty, procedural programmers are more chilled (or maybe more anxious).
The Ruby Workshop
Tags: ruby
Published: 2019-11-29 10:22:50

---
title: The Ruby Workshop
published: true
description: 
tags: ruby
---
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/xzzqvsxvognig9rwkaax.png)
Cut through the noise and get real results with a step-by-step approach to learning Ruby programming.

**About the book**:

● Get to grips with the fundamentals of Ruby object-oriented programming
● Understand common Ruby patterns to help minimize and easily maintain code
● Explore ways to fetch, process, and output external data
● Discover ways to work with public APIs and create reusable RubyGems
● Keep your development process bug-free with various testing methods
● Explore how to host applications on cloud application platforms like Heroku

**Description**:
	
You already know you want to learn Ruby, and the smarter way to learn Ruby 2.X is to learn by doing. The Ruby Workshop focuses on building up your practical skills so that you can kick-start your career as a developer and rapidly prototype applications. You'll learn from real examples that lead to real results.

Throughout The Ruby Workshop, you'll take an engaging step-by-step approach to understanding the Ruby language. You won't have to sit through any unnecessary theory. If you're short on time you can jump into a single exercise each day or spend an entire weekend learning about metaprogramming. It's your choice. Learning on your terms, you'll build up and reinforce key skills in a way that feels rewarding.

Every physical copy of The Ruby Workshop unlocks access to the interactive edition. With videos detailing all exercises and activities, you'll always have a guided solution. You can also benchmark yourself against assessments, track progress, and receive content updates. You'll even earn a secure credential that you can share and verify online upon completion. It's a premium learning experience that's included with your printed copy. To redeem, follow the instructions located at the start of your Ruby book.

Fast-paced and direct, The Ruby Workshop is the ideal companion for Ruby beginners. You'll build and iterate on your Ruby code like a software developer, learning along the way. This process means that you'll find that your new skills stick, embedded as best practice. A solid foundation for the years ahead.
The Tutorials With Most Impact in 2019
Tags: dotnet, tutorial, angular, beginners
Published: 2019-11-29 10:11:44

After relating about tutorial hell in my previous posts, I wanted to present a short list with the most important tutorials of 2019, that impacted my developer life significantly. In total, I might have done maybe a hundred tutorials in this transition year, but some of them were so far - reaching, that they are the backbone of my current projects. All of them contain knowledge in concentrated form, that can be applied to bigger scenarios.

**1. introduction to Dapper ORM:** https://www.youtube.com/watch?v=Et2khGnrIqc
additional materials were:
Advanced Dapper: https://www.youtube.com/watch?v=eKkh5Xm0OlU&t=3s
Stored Procedures: https://www.youtube.com/watch?v=Sggdhot-MoM
LINQ: https://www.youtube.com/watch?v=yClSNQdVD7g


**2. Asp.Net Core - the basics**
a) general introduction with MVC: https://code-maze.com/asp-net-core-mvc-series/
b) Entity Framework Core: https://code-maze.com/entity-framework-core-series/
c) Microsoft Razor Pages Tutorial: https://docs.microsoft.com/en-us/aspnet/core/razor-pages/?view=aspnetcore-2.2&tabs=visual-studio
d) A bit more advanced tutorial for Razor Pages: https://www.learnrazorpages.com/razor-pages/tutorial/bakery


**3. Angular/Material Design/Firebase** all-in-one tutorial
https://angular-templates.io/tutorials/about/angular-crud-with-firebase

*My applications in 2019 are very much dependent on the ideas and technologies mentioned in these tutorials. Of course, I studied additional techniques and ideas to fulfill my work, but these were the most interesting and impactful ones for me in 2019.*

What are your main tutorials for 2019 or recent years?
Testing Vue.js Components with Jest
Tags: vue
Published: 2019-11-29 10:10:34

---
title: Testing Vue.js Components with Jest
published: true
description: 
tags: Vue
---
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/8f38rut40p5sorljfss5.png)
**Packt Book**: 88 Pages 

**Author**: Alex Jover Morales 

**Overview**
Unit test your Vue.js components with this fully featured JavaScript testing framework 

**Learn**     

- Set up a Vue-test project to get started with Jest 

- Unit test your components using techniques such as shallow rendering 

- Gain insights into how to test the reactive parts in the logic of the Vue.js components 

- Explore how to test deeply rendered Vue.js components 

- Perform easy and quick tests with module dependency mocking, module aliasing, and more 

- Know-how and when to use snapshot testing 

This book shows you how to test Vue.js components easily and take advantage of the fully featured Jest testing framework with the aid of practical examples. You'll learn the different testing styles and their structures. You'll also explore how your Vue.js components respond to various tests. You'll see how to apply techniques such as snapshot testing, shallow rendering, module dependency mocking, and module aliasing to make your tests smooth and clean. 

By the end of this book, you'll know all about testing your components by utilizing the features of Jest.
Web scraping - Data extraction - web scraper google chrome extension
Tags: webscraping, webscraper
Published: 2019-11-29 08:50:53

Good afternoon,

I am trying to extract all the products (name, price, image) from a grocery store.

I am using web scraper (google chrome extension). When I start scraping I can see it is running, however it does not return any data.

This is the sitemap I created: {"_id":"collectandgo","startUrl":["https://colruyt.collectandgo.be/cogo/nl/home"],"selectors":[{"id":"categories","type":"SelectorLink","parentSelectors":["_root"],"selector":".branch a","multiple":true,"delay":0},{"id":"subcategories","type":"SelectorLink","parentSelectors":["categories"],"selector":".open li a","multiple":true,"delay":0},{"id":"subcategorie3","type":"SelectorLink","parentSelectors":["subcategories"],"selector":".leaf.active a","multiple":true,"delay":0},{"id":"Product","type":"SelectorElement","parentSelectors":["subcategorie3"],"selector":"div.product__inner","multiple":true,"delay":0},{"id":"Image","type":"SelectorText","parentSelectors":["Product"],"selector":"a.product__image","multiple":true,"regex":"","delay":0},{"id":"Merk","type":"SelectorText","parentSelectors":["Product"],"selector":"div.product__name","multiple":true,"regex":"","delay":0},{"id":"Productomschrijving","type":"SelectorText","parentSelectors":["Product"],"selector":"div.product__description","multiple":true,"regex":"","delay":0},{"id":"Hoeveelheid","type":"SelectorText","parentSelectors":["Product"],"selector":"div.product__weight","multiple":true,"regex":"","delay":0}]}

web-scraping google-chrome-extension data-extraction
My new Side Projects Stack
Tags: showdev, marketing, discuss
Published: 2019-11-29 08:49:21

---
title: My new Side Projects Stack
published: true
description: Get Free Life Time or 50% Discount
tags: showdev,marketing,discuss
cover_image: https://thepracticaldev.s3.amazonaws.com/i/qndkqr50qieonk6j3695.png
---

Hi

I'm [Stefan](https://altafino.com), Maker of some job boards for developers like https://fullstackjob.com and the underlying https://boardengine.io

For about 2 months I'm working on my new side project, named Kunven, which is in Esperanto "Come together".
Kunvenu is a simplified Social Media Marketing Publisher Tool, optimized for working in Teams.

It allows sharing accounts between team members.

I use more or less same Stack like with boardengine projects:

* Go for backend services and engines
* ArangoDB for the document store
* Redis for authentication and authorization rules
* Nsq as Message Queue
* Rancher 1.x as Docker Management (have plan to move to k8s after vacations)
* Vue / JavaScript for Frontend
* Different to boardengine I use now Bulma, not more Bootstrap, and I like it
* Dedicated Server & Cloudflare

Looking for Beta Users:

As I do this as a Side Project I need some interested Beta Users.
The deal is easy, please have a look [Kunvenu](https://kunvenu.com)
You get a Free Life for Life Time Account or 50% discount on Pro/Enterprise Plan. During Beta as long you give me valuable input all for free: [Offer](https://kunvenu.app/plan)

What's your Side Project? Which Stack you use?

Cheers
Stefan
Generate a random hash with fixed length
Tags: javascript, quicktip, snippet
Published: 2019-11-29 08:34:34

In one of my projects I’ve been working on lately I needed the opportunity to create random hashes. One day I found a simple method that does just that at work in PHP and translated it quickly to JavaScript to use it in my project.

The following code will create you a n-sized hash with random letters and numbers. To set the hash length set the i-condition in the for loop. For possible reasons of confusion there is no O(bvious)  in the characters string. If you need you can add small letters or special characters to the string to generate more complex hashes.

```js
generateRandomHash() {
    const characters = "0123456789ABCDEFGHIJKLMNPQRSTUVWXYZ";
    let string = "";
    for (let i = 0; i <= HASHLENGTH; i++) {
      string += characters[Math.floor(Math.random() * characters.length)];
    }
    return string;
  }
```

You can find this and more posts on my blog [niklasmtj.de](niklasmtj.de)

Thanks for reading!