teleren/devto huggingface dataset:
Cool VS Code Extension - Set your code on fire
Tags: vscode, typescript, webdev, css
Published: 2020-02-21 19:44:17

It always fun to explore and try out the various extensions.

I always had the habit of trying out new themes for my code editor.

VS Code is my all-time favorite editor. I will switch to different themes or color schemes at least once a week or multiple times in a day.

Recently, I and a few friends exploring the extensions of vs code.

Then, we suddenly we came across a cool extension

[https://marketplace.visualstudio.com/items?itemName=hoovercj.vscode-power-mode](https://marketplace.visualstudio.com/items?itemName=hoovercj.vscode-power-mode)

> Setting your code on fire

Yes, just how I wish to mention this extension. The actual popular name is POWER MODE.

## What's new?

This isn't new.

It's available in many popular code editors. Here is a list of editors and their [respective extension](https://github.com/codeinthedark/awesome-power-mode).

## How to Install?

Visit the below to install the extension to your VS Code editor.

[https://marketplace.visualstudio.com/items?itemName=hoovercj.vscode-power-mode](https://marketplace.visualstudio.com/items?itemName=hoovercj.vscode-power-mode)

## How to Configure?

### After installing

- Goto File → Preference → Settings

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

- Search for power mode

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

- Enable the Powermode option

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

- For better user experience, I disabled - Enable Shake option

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

- Under presets settings - I selected **flames** instead of default particles. Because I love this effect

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

## All done to set your code on fire

Now go and type something in the code editor. You will experience the fire experience. For more custom CSS or animation settings. Check out the official GitHub page for this [extension](https://github.com/hoovercj/vscode-power-mode)

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

I tweeted it on my twitter account. I often do these kinds of posts on my twitter.

Feel free to follow my twitter to get future crazy posts.

{% twitter 1230712357212475393 %}


A short video to the above steps. Thanks for the support!
{% youtube GYAB4Td62zI %}
Exercism Ruby - Intro
Tags: exercism, ruby
Published: 2020-02-21 19:39:34

---
title: Exercism Ruby - Intro
published: true
description: I'm going to share you how I solved the ruby exercises if you have some alternative or improving please let me know 
tags: exercism, ruby
series: Exercism Ruby
cover_image: https://res.cloudinary.com/practicaldev/image/fetch/s--vZNNvhQv--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://dev-to-uploads.s3.amazonaws.com/i/ugyvp6xn69upc1u5evqa.png
---

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

I want to improve my ruby skills with some tests running for me.


If you want to use another language, exercism has a lot of languages then you can use it and share it with us in the comments.

So, this is the [exercism.io](https://exercism.io) page, it has a CLI and it is so helpful, on three steps you can finished the exercise.

**1.- Download exercise**

```bash
exercism download --exercise=acronym --track=ruby
```

**2.- Solve**

Use your code editor to solve the problem locally.

**3.- Submit**

```bash
exercism submit /path/to/file
```

BTW...It's possible to submit an incomplete solution so you can see how others have completed the exercise.


~~if anybody knows how I can create sequence posts? please help me!~~
**UPDATE:** I found how to use it, just add `series: Serie's name` into frontmatter above


So, I expect it will be helpful for you!
Can CSS variables be watched, (need a smart cookie)
Tags: css, javascript, help
Published: 2020-02-21 19:38:36

The best thing since sliced bread and absolutely the most revolutionary thing I have seen in my time as Dev, is CSS variables, it's shocking because it's something that should have been there from day one.

Let's get to the question, given I can get and set CSS variables in JavaScript 🥰, can I also watch for changes to the CSS values on the fly?

Other than polling, are there any ways to observe a live CSS variable change?

onCustomPropertyChange

I think the answer is no.
Wat is Python? (Dutch)
Tags: python, beginners, dutch, nederlands
Published: 2020-02-21 18:50:19

<a href="https://python.org">Python</a> is een geïnterpreteerde, interactieve en objectgeoriënteerde scripttaal op hoog niveau. 

Python is ontworpen om zeer leesbaar te zijn. Het gebruikt vaak Engelse trefwoorden waar andere talen interpunctie gebruiken, en het heeft minder syntactische constructies dan andere talen.

## Compilatie of interpretatie?

Python wordt geïnterpreteerd - Python wordt in runtime verwerkt door "de tolk". U hoeft uw programma niet te compileren (om te zetten naar een uitvoerbaar programma als `.exe` of `.dmg`) voordat u het <a href="https://pythonbasics.org/execute-python-scripts/">uitvoert</a>. 

Dit is vergelijkbaar met Perl en PHP.

Python is Interactief - U kunt op een Python-prompt zitten en direct met de interpreter communiceren om uw programma's te schrijven.

```python
    ➜  ~ python3
    Python 3.7.5 (default, Nov 20 2019, 09:21:52) 
    [GCC 9.2.1 20191008] on linux
    Type "help", "copyright", "credits" or "license" for more information.
    >>> x = 3
    >>> y = 9
    >>> x + y
    12
    >>> 
```

Naast de interpreter kunt u ook programma's uitvoeren die opgeslaagen zijn als met een `.py` extensie.

```python
    python hello.py
```

## Wat voor taal is het?

Python is <a href="https://pythonbasics.org/class/">Object-georiënteerd</a> - Python ondersteunt Object-georiënteerde stijl of programmeertechniek die code inkapselt in objecten.

Python is een Beginnerstaal - Python is een geweldige taal voor de beginnende programmeur en ondersteunt de ontwikkeling van een breed scala aan toepassingen, van eenvoudige tekstverwerking tot WWW-browsers en spelletjes.
De print() methode (Dutch)
Tags: python, beginners, dutch, nederlands
Published: 2020-02-21 18:10:33

De <a href="https://python.org">Python</a> `print()` method kan meer dan je zou denken.

Opmerking: de code in dit artikel is alleen geldig voor Python 3.0 en hoger. Voor het bekijken van de versie, open de terminal en typ

```python
python --version
```

De basis is natuurlijk

```python
print("Hallo Wereld")
```

Klaar, toch? Het blijkt dat er een aantal verborgen gebruiksmogelijkheden zijn.

## Voorbeelden

De print functie kan meerdere <a href="https://pythonbasics.org/strings/">strings</a> weergeven. Die kun je met een komma in de print functie zetten.

```python
print("mijn", "naam", "is", "Gerard")
```

Dit geeft `"mijn naam is Gerard"` terug, geen <a href="https://pythonbasics.org/list/">list</a> zoals je misschien zou verwachten. Mocht je ipv spaties een ander scheidingsteken willen, dan kan dat

```python
>>> print("mijn", "naam", "is", "Gerard", sep=",")
mijn,naam,is,Gerard

# of

>>> print("mijn", "naam", "is", "Gerard", sep="-")
mijn-naam-is-Gerard
>>> 
```

Tevens is het mogelijk om een eind karakter te definieren:

```python
>>> print("mijn", "naam", "is", "Gerard", sep=" ", end="!\n")
mijn naam is Gerard!
>>> 
```

Vergeet hierbij niet de nieuwe regel karakter `\n`, anders komt er geen enter achter.

Zoals veel dingen in het programmeren, is `print()` iets wat we vaak als vanzelfsprekend beschouwen zonder er echt diep in te kijken. 

Nu je hebt gezien wat print() eigenlijk kan doen, hoop ik dat het je zal helpen bij je ontwikkeling.
Loop de loop
Published: 2020-02-21 18:06:18

#### During class today, I was given an array of multiple different data types. This is what the tasks were.

* grab the strings out of that array 
* lowercase them 
* return a new lowercased array

```Javascript
var randomItems = [1, "String", {obj: 1}, "CooL"];
```

#### How is this possible???

The first thing I knew we had to do was iterate over the array. I did this 3 different ways with forEach(), .map(), and a for loop.

 ```Javascript
randomItems.forEach(item => {
  //if string, lowercase;
}) 

randomItems.map(item => //if string, lowercase);

for(var i = 0; i < randomItems.length; i++) {
     //if string, lowercase
   }
```
####Check the data type? What?

The way I checked the data type was with the typeof operator. This operate checks the data type and returns a string of that data type.

```Javascript
var randomItems = [1, "String", {obj: 1}, "CooL"];

for(var i = 0; i < randomItems.length; i++) {
     typeof randomItems[i]
   }

return value(first element in array): 'number'
```

#### Ive got the data type. Now what?

I grabbed that stringified datatype and used it in an if statement.
I basically said "If the index is a string, I will lowercase that string". Then I returned a new array with the updated contents.

```Javascript
var randomItems = [1, "String", {obj: 1}, "CooL"];

function lowercaseStrings(array) {
	var returnArray = array;
	for (var i = 0; i < array.length; i++) {
		var type = typeof array[i];
		if (type == "string") {
			returnArray[i] = array[i].toLowerCase();
		}
	}
	return type;
}

return value:[1, 'string', {obj: 1}, 'cool'
```

This problem was actually really easy when I discovered the typeof operator. In fact it was so easy, I decided to toy around with it and think of different solutions. Here are a couple other ways to do it.

####forEach(), with a ternary :)

```Javascript

function lowercaseStrings(array) {
	var returnArray = [];
	array.forEach(item => {
		returnArray.push((typeof item == "string") ? item.toLowerCase() : item);
	});
	return returnArray;
}

```

#### array.map(), extra nerdy version

```Javascript
 function lowercaseStrings(array) { 
    array.map(item =>
    (typeof item == "string") ? item.toLowerCase() : item);
 }
```
Friday Morning Problem Solving With Friends
Published: 2020-02-21 18:02:52

We started our morning pairing off with a teammate in order to tackle some various exercises. As it was first thing in the morning and I did not have an adequate amount of coffee, we decided to take on the second to the easiest challenge in order to get our brains warmed up to a full day of coding. The challenge was to look through an array mostly comprised of boolean values, with the exception of 2 strings and 1 integer, and return the first string that appears in the array (in this case 'hello'). We were given 45 minutes to complete this task. 

We started off by trying to pseudo code, a skill that I am actively trying to work on (as well as actually coding). We looked through the array, found where the strings were located, then began the process of researching how to extract what we wanted. I created a repl, whereas Megan took over looking through various websites to find the correct array prototype we would need. 

The first thing we came across was the 'find()' method, which 'returns the value of the first element in the provided array that satisfies the provided testing function.' This was exactly what we were looking for as the string 'hello' was the first string value within the array. Putting that in to a repl looked like this:


function findFirstString(variousThings) {
  return variousThings === 'hello';
};

console.log(variousThings.find(findFirstString));


When invoked, we had the desired result the returned value was the string of 'hello'! 

This however seemed a little too easy, and as we started messing with the function it turned out to not exactly give us the answer we were looking for. We could set the return value strictly equal to false or an integer and it would still print out whatever our input was. Then we realized we we are at Turing, and there are no simple solutions (even to one of the easier questions). 

I knew we would have to run some sort of for loop so that it cycles through the entire array to search for the element that we wanted, but we knew that 'find' was essentially the method we wanted to utilize. Instead of setting the return value strictly equal to the value of whatever we put in, we realized we needed to create some sort of variable so that it only accepted strings and nothing else. 

Since the array contained different types of elements (strings, booleans, integers), our good friend typeof came to the rescue in order to find only  strings. The combination of the find method and typeof operator was exactly what we needed in order to produce 'hello' in the return statement (in this case, the correct way). The following was the outcome after some trial and error: 

function getFirstString(variousThings) {
  var found = variousThings.find(function(i) {
    if(typeof(i) === 'string') {
      return i;
    }  
  });
  return found;
}

High fives were shared, and only a few tears were shed during this time (a daily process here at Turing).
Complete Guide to setting up your Application using Kubernetes Components
Tags: kubernetes, devops, docker, beginners
Published: 2020-02-21 17:47:14

###Or how to get started with Kubernetes in practice 🤠 ###

Instead of creating each component separate without context, this video goes through a complete application setup using several Kubernetes components: pod, deployment, service, configmap and secret.

***It's a hands-on, practical tutorial of using the different Kubernetes Components together, which will give you a big picture.***

We basically create the Kubernetes infrastructure for this browser request flow:
![request flow through kubernetes components](https://static.wixstatic.com/media/e7182f_066af0d4b6ac48b99bfc057839d91eba~mv2.png "Browser Request Flow through Kubernetes components")

Starting from the request end we step by step create the following:

***1) MongoDB Deployment***

Creating the database container/pod, in which the mongodb runs.

***2) Secret***

Creating the Secret component, where the username and password are stored.

***3) Internal Service***

Creating the service for MongoDB to be accessible by other Kubernetes components.

***4) Mongo Express Deployment***

Creating the Mongo Express container/pod, in which the web application runs.

***5) ConfigMap***

Creating the ConfigMap component, where the server url of the MongoDB is stored.

***6) External Service***

Creating the external service for Mongo Express to be accessible from outside the kubernetes cluster (from the browser)


{% youtube EQNO_kM96Mo %}


Although this is a beginner tutorial, if you never watched a video about Kubernetes, check out my other videos to learn the basic concepts. 🙅🏼‍♀️🤓

-----------------

I'm happy to connect with you on 
- [Twitter](https://twitter.com/Njuchi_)
- [YouTube](https://www.youtube.com/channel/UCdngmbVKX1Tgre699-XLlUA?sub_confirmation=1)
- [Instagram](https://www.instagram.com/techworld_with_nana/)
I have a Domain Name,now what?
Published: 2020-02-21 17:45:26

## I Officially have my own **Domain** :smiley:

Thanks to [Porkbun.com](https://porkbun.com/tld/design/?coupon=RWD20A&utm_source=RWD-BSA&utm_medium=Advertising&utm_campaign=RWD-BSA_NewsletterAd_Feb_2020)

I took them up on their offer for a **free** domain name. :heart:

Now I have have something to play with this weekend. 

Do I create my own portfolio?
Do a static AWS website?
Start my blog? 

Oh yeah , I have an assessment on Monday for my bootcamp, before I start my capstone project.  🙁. 

Guess I should study for that, it might help me with the launch anomardesigns.design :grin:

Have a great weekend :sunglasses:
Destroy virtualbox machines from command line
Tags: devops, virtualbox
Published: 2020-02-21 17:36:07

Here how I destroy virtualbox machines from command line (stop and unregister them) 

```
# name: Check if the machine is running
VBoxManage list runningvms
    
# Stop the machine
vboxmanage controlvm {{ machine_name }} poweroff soft && sleep 7

# Check if the machine exists
VBoxManage list vms

# Destroy selected machine.
vboxmanage unregistervm --delete {{ machine_name }}
```
Type-Safety, it's pretty nice
Tags: java
Published: 2020-02-21 17:22:46

Okay, short one.
I'm used to programming in Ruby where anything goes and you fix stuff later. The ultimate procrastination.

That said, it's surprising how useful I'm finding strongly-typed methods and variables; it's like having comments everywhere saying what my program's doing and makes me think about design more. When I can see that this method returns a string, but the one it calls is boolean-y, I'm encouraged to consider how they interact more.

Even if it doesn't change what I do now, it saves a lot of time when refactoring, and the tests don't even have to run for me to find out that square pegs don't go in round holes.

Long and short, restrictions keep things structured, and Java's working out well (enough).

Done.
App 133
Tags: learning
Published: 2020-02-21 17:20:58

Today's lesson was simply about bringing every aspect of struct value and putting it together to build a question bot.

The app I would like to build is geared toward giving life quotes for encourage meant. You would use the struct value to give the results needed. For example it will return something like: "For God so loved the world that He gave His only begotten son; that whom so ever believe in Him shall have everlasting life (John 3:16).
A Beginners Guide To DOM Manipulation
Tags: dom, javascript, beginners
Published: 2020-02-21 17:02:24

DOM or Document Object Model is a representation of the web page or document, which can be modified with a scripting language such as JavaScript according to [MDN](https://developer.mozilla.org/en-US/docs/Glossary/DOM).

It characterizes the DOM HTML document as a hierarchical tree structure and each element in the document tree is called a Node.

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/2kwxrcjp39rtadb12tmu.jpg)

DOM nodes represent all components that make up a web page. For example, a head tag is considered to be a node. Most nodes have a starting tag and ending tag. Things can be nested inside these tags. The inner node is called a child node and the outer node is considered to be its parent node.

Some nodes are self-closing tags like the "img" tag. These are called void nodes and cannot be a parent node, meaning things can’t be nested within them. 

Refer to the graph below.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/oq2oomkvvl9iou5rvcuo.jpg)

Since 'document' is an object which has properties and attributes, it will have properties & methods. In order to access things within an object, we use selector and query methods to change the content displayed in the browser.

<h1>Element Selectors</h1>



```javascript
document.getElementById("idName")

//This method only returns the one element by the specified ID. 

document.getElementByClass("className")
//This method returns all elements inside the whole document by the class you specified.

document.getElementById("someElement").getElementsByClassName("className")
//It works in all elements of the DOM, this will return all elements by the class you specify inside the element you want
```

<h1>Query Selectors</h1>

```javascript
document.querySelector("#idName")

//This method takes one argument, which is a CSS selector & returns the first element that matches the selector. 

document.querySelectorAll(".className")
 
//Works similar to above; returns a node list collection of all matching elements.
```

<h1>Create an Element</h1>
<h4>APPEND</h4>
```javascript
document.createElement("body")
//this method creats the element, but it does not show up on the page.

document.body.append(element)
//this method gets the element to appear on the page.
```
 <h4>.INNERHTML</h4>
```javascript
<h1 id="greetings"> HELLO </h1>

let element = document.querySelector("#greeting")
element.innerHTML = "Welcome"
//selects the h1 called greetings and changes HELLO to welcome
```

<h1>Changing Attributes</h1>
```javascript
const element = document.querySelector(".container")

element.style.backgroundColor="#f0f0f0"
//changes the selected elements(in this case the container class) color to grey
```

<h1>Removing Elements</h1>
```javascript
element.remove()
//removes a whole element from the page
```

This is just a basic overview of some of the methods used to manipulate the DOM.
What would TacoScript look like?
Tags: discuss, tacos
Published: 2020-02-21 16:28:48

---
title: What would TacoScript look like?
published: true
description: Musings on a theoretical taco-based programming language
tags: discuss, tacos
---

Imagine a simple toy programming language named TacoScript.

What do you think it would look like, in terms of syntax and language features?

In my mind, the module syntax would involve adding sauces or toppings:

```
add-sauce "json"
// or
topping "json"
```

Then, objects or structs would be called `shell`s. And maybe a `softShell` would behave like `weak` objects in javascript (i.e., garbage collected as soon as all references to it are gone).

There's a lot of potential here for super nerdy food-based wordplay... I'm curious to see what you come up with :smile: