teleren/devto huggingface dataset:
How to Make Cool Underlines for Links with TailwindCSS
Tags: tailwindcss, underlines, styles
Published: 2020-10-05 20:53:15

---
description: Underlining links create easier to read documents. However, the underline itself tends to be plain. It is possible to make much better looking underlines using box shadows.
canonical_url: https://www.aquiles.me/how_to_make_cool_underlines_for_links_with_tailwindcss/
---
Making underlines for links instead of changing the color of the letters improves a lot the readability of documents. However, underlining itself does not allow to control the thickness of the line nor its color. There are two ways to achieve control on how the underlining looks like: using the ``boxShadow`` property of TailwindCSS, or tuning the background image.  

## Box Shadow
Tailwind provides some basic shadows, but if we want to add custom shadows to our links, we must edit the **tailwind.config.js** file, and add the following:

```javascript
    theme: {
        extend: {
            boxShadow: {
                link: '0 -4px 0 0 rgba(178, 245, 234, .7) inset',
            },
	},
}
```

The syntax is exactly what [box-shadow](https://www.w3schools.com/CSSref/css3_pr_box-shadow.asp) takes. Now, if we want to underline a link, we can use the following in the HTML:

```html
<a href="target.html" class="no-underline shadow-link">target</a>
```

We can also apply it globally to all links, by adding the following to the **style.css** file:

```css
@tailwind base;

a {
    @apply no-underline shadow-link;
}

@tailwind components;
```

## Background Image
Using a background image as an underline requires slightly more tuning but allows for much more stunning results. We can add to **style.css** after the ``@tailwind utilities`` line:

```css
@layer base {
    a {
        background-image: linear-gradient(to top, orange, yellow, transparent);
        background-position: 0 110%;
        background-repeat: no-repeat;
        background-size: auto .75rem;
    }
}
```

We use the ``@layer base`` to create a global style that will be applied to all the ``a`` tags. The rest is CSS code to create a linear gradient that goes from orange, to yellow to transparent, from bottom to top. The result would like in the image below:

![](https://d33wubrfki0l68.cloudfront.net/090038bd800395a3b92dfce849cc7586b5d3cf2b/e3ed4/fancy_underline.png)

So, if you see those fancy underlines and want to create them with Tailwind, you know now where to start!
JS Array Stuffy Stuff
Tags: javascript, beginners, datastructures, computerscience
Published: 2020-10-05 20:46:07

Honestly, maybe these array methods can help me understand stack. (pushing and popping things off a stack frame, anyone?)

`let numbers = [1, 2, 3, 4, 5];`

##push##

Adds an element to the end of an array
`numbers.push(6);
numbers 
[1, 2, 3, 4, 5, 6]
`
##pop##

Pops the last element off of the array and returns it
`numbers.pop();
6
numbers
[1, 2, 3, 4, 5]
`
##slice

Slices off whatever you want from index x UP TO index y (slice(x, y)), and returns it. 
*Doesn't change the state of the original array
`numbers.slice(0, 2);
[1, 2]
numbers 
[1, 2, 3, 4, 5]
`

##splice##

Deletes elements from index x for the number of places specified by y, returns the deleted element. (ie. array.splice(x, y)

`numbers.splice(1, 2);
[2, 3]
numbers 
[1, 4, 5]
`
What are your favorite free tools or resources?
Tags: tools, beginners, discuss
Published: 2020-10-05 20:34:50

---
title: What are your favorite free tools or resources?
published: true
description: Tell us the tools that you rely on!
tags: tools, beginner, discuss
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/tc6pb7wrjnj0s2phpy5e.jpg
---

For me it's Github and Visual Studio Code, but what are your favorite free tools and resources?
ES6 Part 1 var/let
Tags: javascript
Published: 2020-10-05 20:31:15

**Intro**
In 2015 Javascript added a lot of new features to their language. This version of Javascript is called ES6 and we will go over some of the new features of ES6 in this article

**key word let**
Normally in JS when declaring a variable we use the var keyword. The problem with using var is that it can be overwritten very easily. 

```
var dog = "Fido"
var dog = "Lassie"
console.log(dog) // Lassie
```

To solve this problem ES6 introduced the let keyword. If we use let with the same example an error will be triggered

```
let dog = "Fido"
let dog = "Lassie"
console.log(dog) // triggers an error
```

By using the let variable you prevent accidentally changing variables when dealing with larger projects.

**Scope**
When declaring a variable with var you it is declared either globally or locally if declared inside a function.

With let you get the same functionality with an added bonus. If you declare a variable with let inside a block, expression, or statement it will be limited to that block, expression, or statement.

For example let's look at the declaring i in a for loop using both keywords.

```
var printFive;
for (var i = 0; i < 9; i++) {
  if (i === 5) {
    printFive = function() {
      return i;
    };
  }
}
console.log(printFive());
// returns 9
``` 

Because the value of i was updated and printFive returns the global i and not the value of i we get 9 instead of 5.

By using the let keyword i is not defined because it was not declared in the global scope. It is only declared within the for loop statement. 

```
let printFive;
for (let i = 0; i < 9; i++) {
  if (i === 5) {
    printFive = function() {
      return i;
    };
  }
} 
console.log(printFive());
// returns 9
```

That concludes part 1 of ES6 in the next ES6 article we will go over the const keyword.
Accessing LocalStorage in NextJS
Tags: javascript, nextjs
Published: 2020-10-05 20:07:16

I recently migrated a Content Management System from Create React App to NextJS in order to score some SEO points. 
One of the challenges I faced was seeing these errors at compile time. 

`window is undefined` or `document is undefined`

`Window`, and `document` are not available on the server. This is why you'll run into these types of errors if you are trying to access `window` properties or `document`. 
In my case, I was persisting my authentication token to localStorage on the previous application. 


To avoid running into these undefined errors at compile and build time, you can run a simple check.

```javascript
if (typeof window !== "undefined") {

localStorage.setItem(key, value)

}
```

This basically tells your piece of code only to run when it's in the client environment where it can access `window`.

Keep hacking.
Pt: 2 Needles to Nuxt: Building a Website for a Tooth and Nail Tattoos
Tags: vue, javascript, codenewbie
Published: 2020-10-05 20:07:08

If you haven't yet, check out [part 1!](https://dev.to/drewclem/needles-to-nuxt-building-a-website-for-a-tooth-and-nail-tattoos-pt-1-4odi)

## Quick Summary
Some decent progress was made this past week. I was able to get the app setup with Nuxt-- which makes it really easy to get Tailwind CSS in place.

I made it as far as building the responsive header out, and I dropped the base templates for the different pages in as well. 

![Website Header Preview - desktop](https://dev-to-uploads.s3.amazonaws.com/i/l9694ll2m3etr4d7fal9.png)
![Website Header Preview - mobile](https://dev-to-uploads.s3.amazonaws.com/i/0hahpk8inkr9z12vlvzr.png)

## What did I learn?
This was my first time animating an svg based on the state of something in the UI. _This may not be the best way to accomplish this, but it worked nonetheless._

A crude definition of an svg is that it's code the generates a shape. Knowing that, I created a vue component and placed the code for the svg in the template.

This allows me to pass it props and do some styling with Tailwind. I'm setting the state of whether mobile menu is open or not in my header component. So, from there I pass that data to the svg component.

```javascript
<MobileMenuIcon :nav-open="navOpen" />
```

Now that the svg is aware of when the nav is open, I can do some animating with tailwind.

I didn't do much. In this specific icon, there are 3 bars, and I wanted the top and bottom to animate into an 'X' while the middle fades away.

The animation is handled with conditionals and tailwind classes. The top and bottom bar receives a rotate and translate classes to reposition, while the middle bar's opacity gets adjusted.

And these classes were applied directly to the <path>'s in the svg like so:

```javascript
<path
  class="transition duration-200 ease-in-out transform"
  :class="`${navOpen ? 'rotate-45 scale-105 -translate-y-1 translate-x-2' : ''}`" />

// There's a lot more in the path to generate the shape.
```
### And here's the result!

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

There's still a long ways to go on this project. Next will be building in some content on the homepage and getting some base components in place!

You can check out the repo [here.](https://github.com/drewclem/tooth-n-nail)
Accessing LocalStorage in NextJS
Tags: nextjs, react, authentication
Published: 2020-10-05 20:02:14

I recently migrated a Content Management System from Create React App to NextJS in order to score some SEO points. 
One of the challenges I faced was seeing these errors at compile time. 

`window is undefined` or `document is undefined`

`Window`, and `document` are not available on the server. This is why you'll run into these types of errors if you are trying to access `window` properties or `document`. 
In my case, I was persisting my authentication token to `localStorage` on the previous application.
To avoid running into these undefined errors at compile and build time, you can run a simple check.

```
if (typeof window !== "undefined") {

localStorage.setItem(key, value)

}
```

This basically tells your piece of code only to run when it's in the client environment where it can access `window`.

Keep hacking.
My other ramblings on the world wide web
Tags: other
Published: 2021-03-02 08:35:12

---
title: My other ramblings on the world wide web
published: true
date: 2020-10-05 20:00:00 UTC
tags: other
canonical_url: https://www.zufallsheld.de/2020/10/05/my-other-ramblings/
---

Here I list my other writings that I published and talks that I held.

# Writings

- [Hybrid-Cloud, agile Methoden & Continous Integration: So war die StackConf 2020](https://blog.t-systems-mms.com/tech-insights/hybrid-cloud-agile-methoden-continous-integration-so-war-die-stackconf-2020) ([Internet Archive](https://web.archive.org/web/20201005193236/https://blog.t-systems-mms.com/tech-insights/hybrid-cloud-agile-methoden-continous-integration-so-war-die-stackconf-2020))
- [Ansible Icinga-Director Collection auf Github verfügbar](https://blog.t-systems-mms.com/tech-insights/ansible-icinga-director-collection-auf-github-verfuegbar) ([Internet Archive](https://web.archive.org/web/20201005193236/https://blog.t-systems-mms.com/tech-insights/ansible-icinga-director-collection-auf-github-verfuegbar))
- [Ansible Best-Practices](https://blog.t-systems-mms.com/tech-insights/ansible-best-practices) ([Internet Archive](https://web.archive.org/web/20201005193236/https://blog.t-systems-mms.com/tech-insights/ansible-best-practices))
- [Erfahrungen und Best-Practices mit Ansible](https://blog.t-systems-mms.com/tech-insights/erfahrungen-und-best-practices-mit-ansible) ([Internet Archive](https://web.archive.org/web/20201005193237/https://blog.t-systems-mms.com/tech-insights/erfahrungen-und-best-practices-mit-ansible))
- [Linux-Tool “namei” zum Permissions-Debugging](https://blog.t-systems-mms.com/tech-insights/linux-tool-namei-zum-permissions-debugging) ([Internet Archive](https://web.archive.org/web/20201005193239/https://blog.t-systems-mms.com/tech-insights/linux-tool-namei-zum-permissions-debugging))
- [Linux-Server von einer Windows-Maschine aus verwalten](https://blog.t-systems-mms.com/tech-insights/linux-server-von-einer-windows-maschine-aus-verwalten) ([Internet Archive](https://web.archive.org/save/https://blog.t-systems-mms.com/tech-insights/linux-server-von-einer-windows-maschine-aus-verwalten))
- [Automating dev-sec releases with Github Actions](https://dev-sec.io/blog/2020-07-30-automating-releases/) ([Internet Archive](https://web.archive.org/web/20201005194145/https://dev-sec.io/blog/2020-07-30-automating-releases/))

# Talks

- [OSDC 2018 | Spicing up VMWare with Ansible and InSpec by M. Schurz & S. Gumprich](https://www.youtube.com/watch?v=QDQcM7hSD_s) - ([Slides](https://www.slideshare.net/NETWAYS/osdc-2018-spicing-up-vmware-with-ansible-and-inspec-by-martin-schurz-and-sebastian-gumprich))
- [OSDC 2020| Ignite talk: So you want to deploy stuff into MY infrastructure?](https://www.youtube.com/watch?v=ogvPy3K6qRM&list=PLeoxx10paaAnznPuC8HQlpXi23pOxzyfg&index=29&t=2s) - ([Slides](https://www.slideshare.net/NETWAYS/ignite-talk-so-you-want-to-deploy-stuff-into-my-infrastructure-by-sebastian-gumprich))
Is it okay for not to be great at FrontEnd as a Full-Stack Developer?
Tags: discuss, webdev, career, watercooler
Published: 2020-10-05 18:15:57

I'm a computer science graduate. Most of my college subjects are about algorithms, data structures, database systems, and some basic maths. So, they are close to what we call `backend-engineering`, right? and that's why I am a backend-engineer at first.

Being a backend-engineer could be awkward if you applying for a job as a web developer. Let's say the backend-engineers' jobs are rare compared to web developers' jobs and left you with no choices. The employer expects you could make a complete website. That's why at least you need a basic of frontend stack (HTML+CSS+JS) in order for your backend works to be 'visible' and functional. Another reason to have frontend basic is useful when you do a side-job for creating another website that you're capable to make while you're a backend-developer at your main job.

But learning frontend stack especially CSS is a ~~bit~~ more frustrating for a backend-developer because maybe you're lack of creativity for UI/UX or the CSS itself never stays in your head :smile:
Somehow some people are good at designing something using a graphic editor (e.g Adobe Photoshop/Illustrator, Corel Draw, etc) but they have no idea how to slice them perfectly into HTML and CSS, and also the responsive design may hit you even harder :laughing:

That's why there are CSS frameworks/UI-kits for you (the backend-developers...) to use such as Bootstrap, Foundation, Bulma, or even Tailwind to help you rapidly create UI for your apps. I could say backend-engineer + these CSS frameworks still makes you as Fullstack Developer, am I right? But here comes when you applying for a full-stack developers' jobs, you may be considered not good in the frontend. That's a ~~little bit~~ bitter for you. Your journey as a backend-developer is not completed yet, and yet this frontend thing still haunt you along the way :laughing:

So, **Is it okay for not to be great at FrontEnd as a Full-Stack Developer?**
Overlay 1.4
Tags: codepen, html, css, webdev
Published: 2020-10-05 19:40:49

Hello Folk! See my new work using HTML and CSS. Hosted on Codepen & copied from w3schools...

If like then leave a comment & suggest something new.

Please Hover Over Images...
{% codepen https://codepen.io/wkazisan/pen/vYGxZyE %}

Happy Learning...
Happy Web Development...
Leer archivos JSON desde Angular 10
Tags: angular, beginners, womenintech, spanish
Published: 2020-10-05 19:31:26

Hola, 

Hay veces que necesitamos leer un archivo JSON para leer datos o un archivo de configuración. Para hacer esto tenemos que hacer lo siguiente:

Imaginemos que tenemos el siguiente JSON:

```json
{
    "Menu": [
      {
        "id": "b1",
        "name": "Café americano",
        "price": 5,
        "count": 1,
        "type": "breakfast",
        "subType": "",
        "image": "/assets/images/coffee.png"
      },
      {
        "id": "b2",
        "name": "Café con leche",
        "price": 7,
        "count": 1,
        "type": "breakfast",
        "subType": "",
        "image": "/assets/images/latte.png"
      }
    ]
}
```

Lo único que tenemos que añadir es la siguiente función en tu componente o servicio

```typescript
import * as data from '../../assets/menu.json'; //aqui es la ruta donde importas el archivo json
...
...
...
  getJsonContent()
    return (data as any); // aqui obtenemos el JSON completo
  }

  getMenuJsonContent()
    return (data as any).Menu; // aqui obtenemos el array de elementos de la propiedad Menu
  }
```

### Mapeando el contenido a un array de clases

Si necesitamos mapear los datos del archivo JSON a una clase de nuestro modelo, podemos hacer lo siguiente:

* Creamos una clase con la misma estructura que tiene el JSON que queremos mapear:

```typescript
export interface Product {
    id: string;
    name: string;
    price: number;
    count: number;
    type: string;
    subType: string;
    image: string
}
```

* Añadimos una función `getProducts(): Observable<Array<Product>>` donde indicamos que retornará un Array de Product **(IMPORTANTE: Para que funcione, el array debe tener la misma estructura que la clase Product)**

```typescript
import { Observable } from 'rxjs';
import * as data from '../../assets/menu.json';
import { Product } from '../models/product';
...
...
...
 getProducts(): Observable<Array<Product>> {
    return (data as any).Menu;
  }
```

Y con esto ya tenemos un array de Products desde el JSON. Como ven, ya se puede leer un archivo JSON desde Angular 10, espero les sirva, hasta la próxima :)
Linux Bash Control Flow and Arithmetic
Tags: linux, bash
Published: 2020-10-05 19:22:19

As promised, here is the next section in my Bash blog series; control flow and arithmetic. These concepts are not too hard to follow but require knowledge of their basic structure. The first section here covers control flow.

##Control Flow##
******
Control flow in bash allows for comparison using <, >, =, and so many [more](https://www.gnu.org/software/bash/manual/html_node/Bash-Conditional-Expressions.html) operators. With this, one can compare variables to one another, or operate on files under certain conditions. 
I will give a basic example here using variables:
```
read x
read y
if [[ $x > $y ]]
then
    echo "X is greater than Y"
elif [[ $x < $y ]]
then 
    echo "X is less than Y"
else
    echo "X is equal to Y"
fi

```

For this to successfully run it is important to format the control statements as shown above; especially the spacing inside of the [[]]. Other than that, the example above is a classic and really speaks for itself. 

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

##Arithmetic##
******
It is possible to solve complex calculations using bash, and as a bonus, it is not hard to format the output. 
####Using these mathematical statements:####
* 5+50*3/20 + (19*2)/7
* -105+50*3/20 + (19^2)/7
* (-105.5*7+50*3)/20 + (19^2)/7

the program below will output the solution rounded to the third decimal.
```
read math
printf "%.3f" `echo $math |bc -l`
//=> first read 17.929
//=> second read -45.929
//=> third read 22.146
```
Mathematical statements can be read into a variable. However, to show their solution you must either wrap the variable in double parens $((..)), if you are only using integers, or use the |bc -l command if your output needs to be floating point numbers. Then this can be inserted into an echo as shown above. For more about bc go [here](https://www.geeksforgeeks.org/bc-command-linux-examples/). 
To format the output the printf must come before the echo. Then the number after the % formats your output to that decimal place.
These commands are really useful foundations of bash that will come into play quite often. Hope you guys enjoyed this, I will get another post up sometime this week covering String Slicing and formating.
How I became an iOS Developer, Part 1
Tags: ios, swift, beginners, career
Published: 2020-10-05 19:18:42

I figured it would be a good place to start my experience here on Dev.to by linking my article about how I became an iOS Developer. I have spent the last 2 years in self study to transition from my previous job in IT to a career in iOS and wanted to share a few tips and tricks I learned on my way. My first post is about working with people and building the soft skills before starting to code, as those skills will go a lot farther than any amount of coding will (at least in my opinion). Check it out via the link!


https://www.frankefoster.com/blog-1/how-i-became-an-ios-developer-part-1-empathy-and-soft-skills
Who wants a cookie? !
Tags: webdev, beginners, codenewbie, javascript
Published: 2020-10-05 19:12:57

 * What are cookies?!
 * Why are they so darn important? 
 * And why do I need to know about them? 
 * Are cookies bad or good?

In this article, I am going to explain what you need to know about cookies.Who, uses cookies; What are they used for and why we use cookies. I will show you the good, the bad, and the ugly. 

# What is a cookie?

So, What is a cookie? Well, my friend, think of a cookie as a small digital box or file that collects and stores information.  So, let's say if you visit facebook.com or gmail.com to login or to create an account; When you make that action, the site triggers a cookie, file that collects and stores information, to captures your login information. The might include a unique identifier, username and password, as well as some other info we will talk about later in the article. 

So, next time, you go to facebook.com or gmail.com to login, the site will read the cookie from the last time you visited the site. That same cookie will be read and see your login information then you will be able to login, without providing any information again. This is how users are able to login automatically into a Instagram, Gmail, Facebook, and Outlook without logging in.

This sounds awesome! so, what is the bad news..give it to me. So, there are two types of cookies, and by your personal preference one of them can bad. You have first party cookies and third party cookies. 

# First Party Cookies 

A First Party Cookies is a cookie that collect information for the particular site you are on, lets' say Twitch. Twitch will collect information to improve performance speed and other things so next time you visit their site you have a better experience. 

# Third Party Cookies

A Third Party Party Cookie is a cookie created by domains and not the website. They are scripts that are place on other sites that are unrelated to the particular website that you are on. Like, first party cookies they also that collect information from you. And if you don't want to be track by random sites, well that would be where the bad part would come in. Although, third party cookies help other businesses for marketing purposes. 

So, this was an introduction to get you started on what cookies are? Why I need to know about them? etc.. I hope this article helped giving you so insight on cookies. Below I will drop some resources as well, if you want to see how to implement cookies in Javascript. 

`Resources`
https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie

https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/cookies
Super Productivity Interview
Tags: productivity
Published: 2020-10-05 19:09:53

---
title: Super Productivity Interview
published: true
description: Last week the guys from Destination Linux interviewed me about my open source app Super Productivity
tags: productivity

---

Last week the guys from Destination Linux interviewed me about my open source app Super Productivity. 

You can check out the episode here:
https://destinationlinux.org/episode-192/

The app itself can be found here:
https://super-productivity.com/
"Super Productivity is an open-source ToDo List / Time Tracker / Productivity Tool that makes the life of office heroes and digital workers just a little bit easier."

Feedback of any kind about the app is very welcome!
Webwide turns one, V2 launched 🎂🎉
Tags: showdev
Published: 2020-10-05 19:07:17

It's now been a whole year since I launched by web design & development forum! We are celebrating with a launch of version two and a whole host of new features. I'd love your feedback!

https://webwide.io/threads/webwide-turns-1-whats-new-and-whats-next.1129/