teleren/devto huggingface dataset:
Fluid Animated CSS Gradient Text Effect
Tags: css, webdev, beginners
Published: 2019-02-12 02:36:20

CSS animations are awesome. Not only do they make great <a href="https://codepen.io/astrixsz/pen/RRxyKz">digital art pieces</a>, they also give us the ability to add fluid design elements, right into our web pages. Recently, I integrated a CSS gradient animation in many of my blog links to give them a living, liquid feel to them. See my 'Recent Essays' module below

![](https://thepracticaldev.s3.amazonaws.com/i/dgbkiccdcmzkaaqjp78l.gif)
*note: gif is sped up for demonstration purposes*

Neat, right? And fairly simple to accomplish. All we really need is CSS!
![](https://thepracticaldev.s3.amazonaws.com/i/vkte2wsl6qssuzx1igw0.png)

### Let's deconstruct it
So first thing in my CSS is the animation rules.
![](https://thepracticaldev.s3.amazonaws.com/i/22q5uwa3cey3rebl4vxw.png)
Here, I'm saying - play the animation named **flow** for a duration of **30 seconds**. Set the animation to **ease in and out** for a smoother effect, and have the animation loop for an **infinite** number of times.


Then there are the background rules.
![](https://thepracticaldev.s3.amazonaws.com/i/tnbnn83e1q5cxjlyt0gi.png)
I set my background to be a **linear-gradient** and give it my desired colors. *For beautiful gradients I use often <a href="https://uigradients.com/">UI Gradients</a> when I can't come up with anything nice.* I then stretch out the background to 300% the size using the **background-size** property to give the animation room to move. 

I then set the **background-clip** to be **text** and set the **text-fill-color** to be **transparent** so my default font color doesn't interfere with my gradient.
![](https://thepracticaldev.s3.amazonaws.com/i/swhf3ofsef0da4o65tnb.png)

Now on to the actual animating. I create a keyframe animation named flow and set up keyframes at the zero, fifty, and one-hundred percent marks.
![](https://thepracticaldev.s3.amazonaws.com/i/o4qwm1t4ranf88sfpw5s.png)
Final result:
![](https://thepracticaldev.s3.amazonaws.com/i/ms7hu4num9zl7w9atgkz.gif)
And there you have it - a nice, fluid animated gradient over text. Just another little fun design element courtesy of CSS.
Fathom: An Open Source Google Analytics Alternative
Tags: githunt, analytics, opensource, go
Published: 2019-02-12 01:19:10

---
title: Fathom: An Open Source Google Analytics Alternative
published: true
cover_image: https://usefathom.com/fathom.jpg
description: 
tags: githunt, analytics, opensource, golang
---

Hey everyone!

I star all kinds of crazy GitHub repos and last week I stumbled on an awesome project that I can't believe I missed for so long.

It's called Fathom -- and it's an open source alternative to Google Analytics (somewhat ironically written in Go).

{% github usefathom/fathom %}

If you're interested in analytics or data (or just the Go programming language) this is an awesome project to get involved in!
Explain What is DOM like I'm 🖐
Tags: web, dom, explain, beginners
Published: 2019-02-09 15:58:52

---
title: Explain What is DOM like I'm 🖐
published: true
description: A brief explanation of the DOM
tags: #web #dom #explain #beginners
---
![ DOM ](https://images.slideplayer.com/31/9631242/slides/slide_3.jpg "DOM")

_Hopefully I can explain this easily and accurately 😅_

I've been puzzled as to what __DOM__ meant. I've seen **DOM** being used especially in Polymer and ReactJS documentations.

DOM means, __"Document Object Model"__

Basically, a web page is an html document. This *document* is actually an __object__. Under this object we have our element tags like the __body__, __h1__, __div__, etc. All these elements in a page have some sort of object structure. 

Something like this:
```javascript
"document" : {
        "head" : { "name": "head" },
        "body" : { "name": "body" },
        "h1" : { "name": "h1", 
                 "style": { "backgroundColor": "black" } 
               }
    }
```

In my html file it would look something like this:
```html
<html>
    <head>
    </head>
    <body>
        <h1>Hello World</h1>
    </body>
</html
```

All the elements of the DOM is an object model (or structure). Meaning that an  element like __h1__ would have a object structure like in the sample above. Yeah! Insane right? You can access these  properties just like you would when accessing an object with Javascript!

Let's have an example. 
I have a html element here:
```html
<h1> Hello World </h1>
``` 

Using javascript I can actually change the properties of h1 by accessing it's object model like so:

```javascript
let h1 = document.querySelector('h1');

// say we want to change it's background color to blue
h1.style.backgroundColor = 'blue'
```

And this works! Why? __h1__ actually has an object or property called __style__ and under __style__ it has a property called __backgroundColor__ (or background-color in css) which allows us to modify that __backgroundColor__ of __h1__! Cool!

Notice I did __'document.'__, right? This means that the HTML document is parsed into an object model which is the __'document'__ object and all the elements that are in the DOM are all found under this document object. 

There are different ways in accessing the DOM:
```javascript

let h1 = document.querySelector('h1'); //gets all elements that are h1
let h1 = document.getElementsByTagName('h1'); //similar to query selector except that it takes the tags of the element
let navHeader = document.getElementById('nav-header'); //gets elements by its id 
let btn = document.getElementsByClassName('btn'); //gets elements by its class 

```

There you go! I hope I was able to  briefly and easily explain what DOM is. 
Please do let me know if I missed anything.

Congratulations you made it! 🎉 Have a break and have a kitkat 🍫
Cheers ya'll! Follow me on Twitter and Instagram on @heyimprax.
How hard is to switch from IT Management to WebDev
Tags: begginers, discuss, career, webdev
Published: 2019-02-11 23:38:14


---
title: How hard is to switch from IT Management to WebDev
published: true
description: 
tags: #begginers #discuss #career #webdev
---
![From IT to WebDev](https://thepracticaldev.s3.amazonaws.com/i/fznpeut5vvbb910h5jvl.png)

How hard is to switch careers nowadays at this frenetic speed that everything is moving?
I want to share my experience with you, I´m a Systems Engineer in Bogotá - Colombia with about 15 years of experience in IT Management. From Datacenters, networks to specific company applications like ERP´s CRM, etc.
A couple of years ago, I decided to switch career to WebDev, I started reading stuff like HTML5, CSS, JS, frameworks like Bootstrap, and Ruby on Rails, but as you can imagine, it´s not enough. To really move to the web dev world, a lot of commitment is required, also follow a path, whatever it may be. And start doing.
That`s why, I signed in into a first Bootcamp sponsored by FEDESOFT, a nonprofit entity whose goal is to enforce the development of companies within the software field in Colombia. There I learned about Ruby on Rails and hybrid applications, how to develop and deploy them with tools like Heroku.
Currently, I signed into a new Bootcamp whose focus is in FullStack with Ruby on Rails, it covers subjects like Javascript, Git, Bootstrap, HTML5, CSS, etc. 
But, to answer the question that I used to start my posts, how hard is it? Well, here in Bogotá it seems not to hard if you can accredit some experience, show your work, or accept to be measured by a technical interview. 

In my opinion, you have to be under some certain age (I am 36 years old) to be considered as a Junior, but in my case, that I have about 15 years of experience in IT, but none of it under software/web development, to wish to land a job with a decent income, it`s really a challenge. The way is to go under your own. Try to get freelance jobs in places like UpWork or Freelancer to add experience to your portfolio, and keep studying/practicing/learning, focus on new frameworks/languages to move towards new fields where there are not enough skilled people and be able to be considered as an interesting candidate.
For now, I keep doing my best and hopefully soon write a new post with my first web dev job.
Kind regards,
Non-computer based hobbies?
Tags: discuss, health
Published: 2019-02-12 00:57:06

---
title: Non-computer based hobbies?
published: true
description: What do you like to do that isn't on a computer?
tags: discuss, health
---


I spend a _lot_ of time on the computer. Like 16 hours a day sometimes. I know that isn't great for my health, but I don't have a lot to do that isn't playing games, coding, or watching Netflix. 

As such, I am looking for a new hobby. What kind of stuff do you like to do that doesn't involve a computer?
Use Vim as a Perl IDE
Published: 2019-06-23 14:29:38

---
title: Use Vim as a Perl IDE
published: true
tags: 
canonical_url: https://spacevim.org/use-vim-as-a-perl-ide/
---

# Use Vim as a Perl IDE

This is a general guide for using SpaceVim as a perl IDE, including layer configuration and usage. Each of the following sections will be covered:

<!-- vim-markdown-toc GFM -->
- Enable language layer
- Code completion
- Syntax linting
- Jump to test file
- running code
- Code formatting
- REPL support
<!-- vim-markdown-toc -->
### Enable language layer

To add perl language support in SpaceVim, you need to enable the `lang#perl` layer. Press `SPC f v d` to openSpaceVim configuration file, and add following configuration:

```
[[layers]]
  name = "lang#perl"

```

for more info, you can read the [lang#perl](https://spacevim.org/layers/lang/perl/) layer documentation.

### Code completion

`lang#perl` layer will load the perl plugin automatically, unless overriden in your `init.toml`.The completion menu will be opened as you type.

![perlcomplete](https://user-images.githubusercontent.com/13142418/52611209-54550500-2ebf-11e9-9b9f-f697a0db52a3.png)

### Syntax linting

The checkers layer is enabled by default. This layer provides asynchronous syntax linting via [neomake](https://github.com/neomake/neomake).It will run perl and perlcritic asynchronously.

Install perlcritic via cpan:

```
cpanm Perl::Critic

```

![perllint](https://user-images.githubusercontent.com/13142418/52614908-2cb96900-2ece-11e9-8c73-2881f8030c6e.png)

### Jump to test file

SpaceVim use built-in plugin to manager the files in a project, you can add a `.project_alt.json` to the root of your project with following content:

```
{
  "src/*.pl": {"alternate": "test/{}.pl"},
  "test/*.pl": {"alternate": "src/{}.pl"}
}

```

with this configuration, you can jump between the source code and test file via command `:A`

### running code

To run current script, you can press `SPC l r`, and a split windowswill be openen, the output of the script will be shown in this windows.It is running asynchronously, and will not block your vim.

![perlrunner](https://user-images.githubusercontent.com/13142418/52611211-54550500-2ebf-11e9-9baf-a6437da8fcf4.png)

### Code formatting

The format layer is also enabled by default, with this layer you can use key binding `SPC b f` to format current buffer.Before using this feature, please install perltidy:

```
cpanm Perl::Tidy

```

### REPL support

Start a `perli` or `perl -del` inferior REPL process with `SPC l s i`. After the REPL process has been started. you can send code to inferior process, all key bindings are begin with `SPC l s` prefix, including sending line, sending selection or evensend whole buffer.

![perlrepl](https://user-images.githubusercontent.com/13142418/52611210-54550500-2ebf-11e9-8ba2-b5cd3cc70885.gif)
Raspberrypi Cluster Kubernetes
Tags: blog, raspberrypi, kubernetes, openfaas
Published: 2019-02-12 22:52:28

---
title: Raspberrypi Cluster Kubernetes
published: true
tags: blog,raspberrypi,kubernetes,openfaas
canonical_url: https://garfbradaz.github.io/blog/2019/02/12/RaspberryPi-Cluster-Kubernetes.html
---

## Creating Raspberry Pi Cluster to Learn Kubernetes

In August 2018 I bought some Pi’s tp create a cluster, mainly after reading and watching [Alex Ellis](https://blog.alexellis.io/build-your-own-bare-metal-arm-cluster/) and [Scott Hanselman’s](https://www.hanselman.com/blog/HowToBuildAKubernetesClusterWithARMRaspberryPiThenRunNETCoreOnOpenFaas.aspx) blogs and videos on the subject, which inspired me to make the purchase. I was running Code Clubs at the time, so I thought this would make a good show and tell as well.<!--more-->

Both Alex and Scott posts were both inspiring and I really wanted to give it ago. Anyway I got the equipment, but work and real-life got in the way and progress was slow. Then in December 2018 I landed a new job, starting in April this year, and they use Kubernetes extensively so I also had another good reason to get it up and running - to learn Kubernetes!

So this month I finally got it working, including a proper master and node setup:

![](https://garfbradaz.github.io/assets/img/posts/Pi-3.jpg)

There were some pain points, like make sure you set up your static IP’s for your Pi’s (and set them up correctly on your router), and more importantly, set up a static IP _for_ the router itself. The yellow box is the picture is the [rGL-MT300N-V2 router I went for](https://www.amazon.co.uk/gp/product/B073TSK26W/ref=oh_aui_search_asin_title?ie=UTF8&psc=1) in the end, and the only bit of Hanselmans shopping list from his post, I diverted from.

## My Sons love it

My two sons love it, as we are building Raspberry Pi robots as well in parallel to this. They are interested in what this is doing and _why_. Sparking curiosity in little minds is important, and me just building websites doesn’t get their juices flowing!

## Should I do this?

Yes. :)

## Whats next?

Well, learning Kubernetes itself and running some .NET Core container sites. I would like to see how quick the .NET SDK is for building on the Pi’s now, as I would like to experiment with an local build server.

Also, Alex is the creator of [_OpenFaaS_](https://www.openfaas.com/), a cloud agnostic Serverless solution. Having worked with Azure Functions recently at my current job, I can definitely see why this is a good idea. A Serverless infrastructure _without_ being tied down to a specific cloud. I want to explore converting a small Web API app to OpenFaaS and experimenting there (I’m actually super excited).

Lastly, when I restart my Code Clubs up, I would like to do a show and tell with something interesting that includes the cluster. I was thinking about running some OpenFaaS functions that “talk” to my Pi robot I’m building and possibly allow you to control it for example.

Lots to do before April arrives!
Given A Row Of Product Cards, Should The Whole Card Be A Link?
Tags: ux, discuss, ui, help
Published: 2019-02-11 23:38:58

---
title: Given A Row Of Product Cards, Should The Whole Card Be A Link?
published: true
description: I need some input from the UX Masters out there.
tags: ux, discuss, ui, help
---
# Given This Row Of Product Cards:

![](https://thepracticaldev.s3.amazonaws.com/i/pl57dntym4cxgdxbcrll.png)

Should the whole card just link to the product, or would it be better to:

* Link The Brand Name to more products of the same brand.
* Link the reviews to the reviews of the product.
* Link the image and the title to the product.

## My Thoughts

Having the products encapsulated in a "card", especially in this specific layout, usually means that it's basically just a fancy button. 

### But...

Because there's more info on there (Brand, Reviews) it might lead people trying to find more Reebok products just to the single product, where they _can_ find more products by Reebok. It's an extra step but you can still get to more Reebok products from the single product, if that's what they're looking to find.

## I'd Love To Know Your Thoughts.
How do I improve my python skills
Tags: python, programing, math, hackerrank
Published: 2019-02-11 21:54:26

---
title: How do I improve my python skills
published: true
description: 
tags: python, programing, math, hackerrank
---

I'll give you a simple tip about improving your python skills. It’s very simple and of the bonus is that many technology companies apply your challenges over there. I'm speaking about Hackerrank which is a famous platform where you can practice coding and find jobs . I usually take up one coding challenge per week, I like math problems and Python.

You can find range of problems over there, it starts from basic to the most difficult ones, at every step you get a different level problem . I use this tool to think better and to practise. My profile contact is contato44. I'll share a simple problem that you can to see on Hackerrank:

```python
"""
    >>> count_substring("ABCDCDC", "CDC")
    2
    >>> count_substring("ABCDCDCAAAACDC", "CDC")
    3
    >>> count_substring("ThIsisCoNfUsInG", "is")
    1
"""


def count_substring(string, sub_string):
    occurrences = 0

    for i, __ in enumerate(string):
        cut = string[i:len(sub_string)+i]
        if cut == sub_string:
            occurrences += 1
    return occurrences
```

To solve the problem I'm using the [Doctest](https://docs.python.org/2/library/doctest.html), because is it simple and fast to write the test. I submit the solution with [Doctest](https://docs.python.org/2/library/doctest.html). You can execute the [Doctest](https://docs.python.org/2/library/doctest.html) of 2 modes in your machine:

#### First mode:
*PS: After to execute the code, add the snippet in final code.*

```python
if __name__ == "__main__":
   import doctest
   doctest.testmod()
```

Run the test feature.

```shell
$ python Findastring.py
```

#### Seconde mode:
*ps: When I use the Doctest to run my test feature, this what I do.*

```shell
$ python -m doctest Findastring.py
```

Today I share a simple tip on improving your developer skill, If have another tip, kindly let me know.

Originally post on:
https://medium.com/@riquellopes/how-do-i-improve-my-python-skills-89075f2e22e2
Recycle your HTML code
Tags: javascript, node, ionic, webcomponents
Published: 2019-02-11 21:37:36

---
title: Recycle your HTML code
published: true
description: Announcing new Domy release
tags: #javascript, #node, #ionic, #webcomponents
---

The basic mantra of software development "don't repeat yourself" was hardly achievable in the process of HTML layout creation, template engines smoothed the flow, but it kept to be an ocean of pain and divs for a long period of time.

Gladly, everything changed with the introduction of web components, a set of web platform APIs used to produce encapsulated HTML tags. It reduces development span considerably, improves code quality and makes HTML code scalable ad infinitum. 

Apparently, it's a game changer and to persuade you to adopt web components as early as possible, we started the Domy project, a package manager for web components.

{% github teamdomy/domy %}

It detects and publishes every single web component used in a Stencil project, no configuration required.  The compiled code represents mostly an "intermediate" set of instructions generated by Stencil for distribution purpose. It means that on the last mile, Stencil compiler should be used to bundle everything together. In the registry, components are stored in deeply nested collections, where the root is the current user name

Currently, only Stencil-like generated components are supported, the integration of LitElement base class is coming next.

We would be thrilled to hear your opinion on the matter.  Submission of a feature or a bug would be even better. Thanks!
Blog post: Giving a talk at CopenhagenJS
Tags: copenhagenjs, talk, markdownlint
Published: 2019-02-11 21:14:23

---
title: Blog post: Giving a talk at CopenhagenJS 
published: true
description: Giving talks even though it is not your complete home court
tags: copenhagenjs, talk, markdownlint
---

I have recently started attending the meetings at my local **JavaScript** user group **CopenhagenJS**. I am by no means a JavaScript programmer, but they caught my attention when I started evaluating and playing around with Node and almost all of the developer podcasts I consume recommend _getting out there_.

Last week a call for speakers came out with 3 slots available.

So I thought I might as well give it a shot, I have attended several meetups, perhaps it would be time to give something back. I have previously given talks at local users groups, workshops and conferences home and abroad, but most of them have been centered around **Perl**. Well I actually gave [a talk at CopenhagenJS back in April 2012](https://www.slideshare.net/jonasbn/stackato-v3).

Since I cannot give a educational talk on **Node** or **JavaScript** I thought I should offer something else and I am very much at a rookie level and I am still experimenting and learning when it comes to **JavaScript** and **Node**. 

I have however been an open source developer/contributor for a very long time and perhaps I could offer something in this regard. So I though about what I have been working with lately and I decided for **Markdownlint**.

I promised the organizers to provide a bullet list for my talk, so they could decide if it would be of interest, so here goes my bullet list.

- Markdown - what is Markdown?
- Markdownlint - what is a linter? comparison to ESLint?
- A brief and very inaccurate history of Markdownlint - the Ruby and the Node implementation
- What does Markdownlint provide? - uniformity and correctness
- Linting rules and the exceptions to the rules
- Tool-chain and editor integration - VSCode and Sublime Text
- Bonus material integration with CI/CD - Travis CI example

This is just a draft, when the slides are shaping up, I might add new parts or skip some of the suggestions, most likely that additions will be made.

I am using **Markdownlint** quite extensively for open source projects, which is good, because then it will be easy to show real-life examples and for me personally it is a good opportunity to structure my notes, practices and use of tools. 

I will publish the slides for those of you who are interested and I might supplement the slides with a write-up of my presentation, I find it a good practise to do this if you have time, since it often can evaluate the information flow and presentation structure.

Wish me luck in getting the presentation accepted.
(Gist) Similar to a Geometry Shader with GPGPU and Three.js
Tags: gpgpu, shader, geometry, threejs
Published: 2019-02-11 21:11:20

---
title: (Gist) Similar to a Geometry Shader with GPGPU and Three.js
published: true
description: Computing on GPGPU is awesomely fast and powerful.
tags: gpgpu, shader, geometry, threejs
---

https://gist.github.com/wonglok/66760f51d56bb1acf833dcbb4f987e78

https://github.com/KindnessAPI/KindnessAPI/blob/master/gl/vertexer/index.js

![Preview](https://thepracticaldev.s3.amazonaws.com/i/ljjiz95n88vn7ai9rmo9.png)
Explain (Timeline) Monads Like I'm Five
Tags: explainlikeimfive
Published: 2019-02-11 18:36:32

---
title: Explain (Timeline) Monads Like I'm Five
published: true
tags: explainlikeimfive
---

I came across this interesting looking library:

https://stken2050.github.io/unlimitedjs/

It appears to be a simpler alternative to React and hooks - and the author makes it look very appealing in terms of being very simple and generic. It looks like this concept composes well, using plain JS that doesn't require any magic or a linter.

The documentation uses a lot of science jargon though - and the links to articles that explain the concepts are even worse, and the library code has been pretty heavily code-golfed.

I'm not a computer scientist, so...

* What's special about a timeline monad?

* How does it differ from a plain old pub/sub event-bus?

* What's the advantage over pub/sub in the context of UI?

* Does this somehow help with "unpredictable" events, like, say, chat messages?

Explain like I'm five please? 🙂