teleren/devto huggingface dataset:
The CSS mask property
Tags: beginners, css, ui
Published: 2019-01-16 04:04:45

---
title: The CSS mask property
published: true
tags: beginner, css, ui
cover_image: https://thepracticaldev.s3.amazonaws.com/i/fzgrjq82fzh5gtm4jur5.jpg
canonical_url: https://www.iamdeveloper.com/posts/css-mask-property-2d42/
series: my codepens
---

Say you have a background that you want a certain colour, but you only want to show parts of the background. Enter the [CSS `mask` property](https://developer.mozilla.org/en-US/docs/Web/CSS/mask "MDN documentation for the CSS mask property"). Think of it like a cookie cutter. You want to bake a cookie, not a rectangular piece of dough. So how does this fit into a real world example on the web?

Have you ever had an icon you liked and wanted to put on your site, but were like, "It would look so much better if I could integrate it with the colours in my site"? CSS `mask` property to the rescue. As you can see, if you interact with the [codepen](https://codepen.io) below, as you change the colour via the colour picker, the colour of the logo, [dev.to](https://dev.to "dev.to website") in this example, will only apply the background colour to the parts of the SVG that are filled. Shout out to [simpleicons.org](https://simpleicons.org "simpleicons.org website") for the dev.to icon!

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bsulgiwvihhizv0jr5bd.gif) 

If you want to see it in action, take a look at the icons in the menu of my website, [iamdeveloper.com](https://www.iamdeveloper.com).

Support for the CSS mask property is [pretty good](https://caniuse.com/#feat=css-masks) unless you still need to support Internet Explorer. If that's the case, a quick Google will provide you with some fallback options.

Also, there's a little bonus with this blog post. I use [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables) and JavaScript to get the logo colour to change, so check that out too in the codepen.

*Note: If you're using a browser that does not support `<input type="color" />` it will act like a regular text input. You'll need to type in a valid hex colour and press ENTER on your screen keyboard for the colour to change*

Have some fun and try it out in the codepen! 👋

{% codepen https://codepen.io/nickytonline/pen/ebxrpv %}

Photo by [Neven Krcmarek](https://unsplash.com/photos/0TH1H1rq_eY?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText "Neven Krcmarek on unsplash.com") on [Unsplash](https://unsplash.com/search/photos/cookie-cutter?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText "unsplash.com website")
Finally All-in-One Tool For My Needs: VSC!
Tags: productivity
Published: 2019-01-09 16:26:58

I am bit of a terminal junky, most of the work I do day to day is in terminal(zsh).. running scripts, coding, editing, configuring etc.. 

On bad days I would eventually just open files in Sublime Text and edit it there and go back to my terminal and continue my work.

Few days ago I saw a post about VSC(Visual Studio Code), and I heard and knew about it except that I never really looked into it because I am on a Mac and running Microsoft product on it just sounded odd. 

Welll.....

Now I am running VSC for past 48hrs and I must say that I fell in love with it because I literally have ALL-in-One 'Window'.

Terraform, Terminal(zsh), GitHub, Docker, Ansible, etc etc.. it supports all of it and I got all installed without any issues. 

So yesterday I literally spent my day looking at one screen with few tabs while running some of the kubernetes tests on terminal. 

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

In img above from one of my screens you can see my tf modules and below in terminal you can see my runs and some aws commands as well as github branch , kubernetes namespace and kubernetes cluster name. 

So if you are on Mac/PC and do something similar to what I do, give VSC a chance.
What I Will Focus In 2019?
Tags: meta, career, devlife
Published: 2019-01-09 16:02:59

---
title: What I Will Focus In 2019?
published: true
description: My live To Do list for 2019 
tags: meta, career, devlife
cover_image: https://thepracticaldev.s3.amazonaws.com/i/8fefcjmvkvvkx7xzxpyw.jpg
---


This is a _live list_ with things I will focus in 2019.

- Eat and sleep better
- ES6 (also ReacJS and Vue)
- Utility-First CSS
- Web performance and accessibility
- Solve more problems with less or without code
- Learn a new language (maybe Go)

_Ps: I said "live list" because the things can be changed._

And you? Do you have a list for 2019?

Happy New Year
Meet Launcher Icon Previewer - preview your app icon design on your device
Tags: design, android, pwa, firebase
Published: 2019-01-09 16:01:33

---
title: Meet Launcher Icon Previewer - preview your app icon design on your device
published: true
description: Launcher Icon Previewer allows you to preview your launcher icon design on your mobile devices.
cover_image: https://thepracticaldev.s3.amazonaws.com/i/zrgdnd0c36oh9b6ltq2h.jpg
tags: design, android, pwa, firebase
---


Need an easier way to test your launcher icon design on a real device home device?

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

Meet **[Launcher Icon Previewer](https://icon.limhenry.xyz/)**,  Launcher Icon Previewer allows you to preview your launcher icon design on your mobile devices.

**Try it now: [https://icon.limhenry.xyz/](https://icon.limhenry.xyz/)**

***

Here's how you can use Launcher Icon Previewer:

### Step 1: Go to icon.limhenry.xyz

First, navigate to [icon.limhenry.xyz](https://icon.limhenry.xyz), select your launcher icon. We recommend you to upload a PNG file with the image resolution of `192px × 192px`. 

After that, you will have the option to set the app name (it's ok to left it blank). 

Once it's all done, just click on the **Upload Icon** button.

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

### Step 2: Open the link on your mobile device

Now, the tool will show you a QR code and a link. Open the link using Chrome or Safari (if you are using iOS) on your mobile device.

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

### Step 3: Add to Home Screen

If you are using Chrome on Android, a blue **Add to Home Screen** button should appear on the screen. Click on the blue button, then the **Add to Home Screen Dialog** will show on the screen. Click **Add** to add the icon to your home screen.

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

If the blue **Add to Home Screen** button doesn't appear on the screen, you can click the **Add to Home screen** option from the browser's menu.

If you are using Safari on iOS, click on the **box and arrow icon** at the bottom of the screen, then click **Add to Home screen**.

And now, you should able to see the app icon on your home screen!

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

***

Launcher Icon Previewer is currently in beta. [Please let us know how can we improve](https://twitter.com/henrylim96).

Try it now: [https://icon.limhenry.xyz/](https://icon.limhenry.xyz/)

***

Want to support this project? You can [make a donation here](https://www.paypal.me/henrylim96)!
happy to be on the DEV team!
Tags: meta, career, personalnews
Published: 2019-01-09 15:45:26

---
title: happy to be on the DEV team!  
published: true
description: I joined the DEV team. Woot!
tags: #meta, #career, #personalnews
cover_image: https://cl.ly/5de148fd1afe/Image%202019-01-09%20at%2010.44.17%20AM.png
---
I'm proud to announce that I recently joined the DEV team as a community coordinator. Now one month into the gig, it's safe to say I'm digging it.

First things first, admission: I'm not a dev. However, while I've never [fully committed](https://dev.to/michaeltharrington/baby-steps-44fd) to learning _how_ to develop, I have learned a lot _about_ development.

I’ve spent the last few years in the software world, working as an editor and community manager. I have a real passion for supporting devs that like to write, attending conferences, scanning the web for cool dev content, and making developer friends.

When I stumbled upon DEV, I immediately fell for the platform and community. I was struck by how many super friendly and helpful folks were around every corner. I signed up right away and not too long ago celebrated my [1-year DEV anniversary](https://dev.to/badge/one-year-club). While I’ve mostly been a fly on the wall so far, I’ve enjoyed taking in the convos of others and reading up on the advice that applies to me. After all, it’s not just tutorials here, there’s also so much shared wisdom about working in tech and general life guidance. 🙂

So, what does a community coordinator do anyway? My mixed bag of responsibilities mostly revolve around promoting all the awesome content this community is creating, supporting folks that have technical issues, and helping to make sure everybody abides by the [Code of Conduct](https://dev.to/code-of-conduct).

It's been a fun ride thus far. I'm learning loads, working with some great people, and happy to be part of this super cool ~~dev~~ DEV community!
New Years and New Beginnings: I'm Joining the DEV team!
Tags: meta, career, personalnews
Published: 2019-01-09 15:41:49

---
title: New Years and New Beginnings: I'm Joining the DEV team!
published: true
cover_image: https://thepracticaldev.s3.amazonaws.com/i/82f0lpeb74o3gynafqyx.png
description: I got a new job, and will be more involved in the community than ever!
tags: meta, career, personalnews
---
I am so, so excited to announce that I'm starting 2019 by joining the DEV team! 🎉

Being a member of the DEV community has been huge for me careerwise and personally. It's been awesome to interact with and learn from the community, and I can't wait to be an even bigger part of it!

Education and improving the way we as an industry teach code is my passion, and I've found that I've been able to reach a lot more people on DEV than I can in person or on other platforms. I really hope to contribute to making it a platform where even more people can learn and teach.

My title will be software engineer, and I will be working on mostly the frontend both in writing code and managing open source contributions. Since I was a user and contributor before joining the team, I'll be able to give a different perspective on DEV!

I'll also be acting as a developer advocate as part of my role, so I'll be doing speaking at conferences and encouraging community engagement!

And, of course, I'll still be writing and creating content on DEV!

Can't wait to be even more involved in the community!
Using Tailwind with Vuejs
Tags: css, vue, webdev
Published: 2019-01-09 15:07:09

---
title: Using Tailwind with Vuejs
published: true
description: Setup tailwind
tags: Css, Vue, webdev
---

We ([Codingcoach.io](https://github.com/Coding-Coach/coding-coach)  contributors) decided to migrate from Scss to Tailwind because we are a distributed team and Tailwind helps us maintain styling consistency by providing defined values upfront for properties like color, spacing, font size e.t.c. It was a good experience for me and I fell in love with Tailwind.

### What is Tailwind?

[Tailwind](http://tailwindcss.com/) is a CSS framework that enables rapid development of User interfaces, You might think this is other Bootstrap or Foundation but Tailwind isn’t, It doesn’t have a theme or come with any UI components instead it provides composable  utility classes which you can use in UI development without writing almost any CSS.

In this article I will be going through setting up Tailwind in a Vuejs application and also share a simple form I made using Tailwind. It also assumes you have a good understanding of Vuejs.

##### Setup Tailwind in Vuejs

First install Tailwind using `Yarn` or `Npm`

```
npm install tailwindcss --save-dev

or

yarn add tailwindcss --dev
```

Next Create a Configuration File.

The configuration file contains basic Tailwind configuration for color, fonts e.t.c and you can also add plugins there to extend tailwind's functionality.

To create the config file tailwind provides CLI utility to do this:
`./node_modules/.bin/tailwind init [filename]` 
you can name the file anything but it is recommeded to name it `tailwind.js` and should be placed in the root of the project.

In order to use Tailwind in Vuejs create a CSS file in the `src/assets` folder and add the following to inject Tailwind’s preflight and utilities styles into your CSS.

```
@tailwind preflight;
@tailwind components;
@tailwind utilities;
```

Then import the CSS file into the `main.js` in the `src` folder.

Now we have every thing setup. 
I built a simple Sign Up form that uses almost no CSS and I also used a [plugin](http://npm.taobao.org/package/glhd-tailwindcss-transitions) for the transition animation in the button. You can checkout out the [demo](http://tailwind-demo.surge.sh/) and [code](https://github.com/nero2009/tailwindcss-demo)

![Demo image](https://thepracticaldev.s3.amazonaws.com/i/bqqeq7yoidd9lch8nztm.PNG)
Welcome Thread - v26
Tags: welcome
Published: 2019-01-09 14:47:26

---
title: Welcome Thread - v26
published: true
description: Introduce yourself to the community!
tags: welcome
---

Hey there! Welcome to dev.to!

![A snake wraps around Batman and says "sup"](https://media.giphy.com/media/6Xbr4pVmJW4wM/giphy.gif)

Leave a comment below to introduce yourself to the community!✌️

1. Leave a comment below to introduce yourself! You can talk about what brought you here, what you're learning, or just a fun fact about yourself.

2. Reply to someone's comment and say hello or ask them a question. 👋

3. Or answer this question: what was your first programming language, and what may be your next?
Most Popular Development Posts Of The Week (09 January 2019)
Tags: javascript, frontend, webdev, react
Published: 2019-01-13 14:08:26

---
title: Most Popular Development Posts Of The Week (09 January 2019)
published: true
tags: javascript,frontend,webdev,react
canonical_url: https://medium.com/daily-now/most-popular-development-posts-of-the-week-09-january-2019-d797e6d0a72a
cover_image: https://cdn-images-1.medium.com/max/1024/1*0yrn3vwUa7qqhM3tqwqlBw.jpeg
---

> Slow progress is better than no progress

- [The best tools to write clean code — HelpDev](https://app.dailynow.co/r/6785be2fcb9502922c64845e1b7dc3a5)
- [Refreshing My Personal Website](https://app.dailynow.co/r/cffb27f2e9c79f421aebd5c763b31438)
- [How Much Should You Get Paid To Build Websites In 2019?](https://app.dailynow.co/r/4f0a1c6f2006946a124e106ac0d2c879)
- [If You Want To Be Rich, Stop Focusing On Your Salary (Do This Instead)](https://app.dailynow.co/r/a526a8a0a712188dbbd24253ddf7b7fe) by [Jonah Malin](https://medium.com/u/e65fdd654b01)
- [A Civilised Guide to JavaScript Array Methods (cheat sheet)](https://app.dailynow.co/r/ab6acd65db963a2590d40ccbe87ba58b)
- [9 Tricks for Kickass JavaScript Developers in 2019](https://app.dailynow.co/r/75b839ec7a58b1f777ef52f392eefa74) by [Lukas Gisder-Dubé](https://medium.com/u/e529c47d0c9a)
- [How to learn React.js in 2019](https://app.dailynow.co/r/0cd5cf419dd5eb10ffcaa20d6ad498b6)
- [Tips and Tricks that you may need to know when you work in JavaScript(Q&A)](https://app.dailynow.co/r/ee648b87533c36d4e2dca559e77f7a8c) by [Alex Maison](https://medium.com/u/9d010e587674)
- [Do you use HTTPS in development?](https://app.dailynow.co/r/ad2f65c6cdcabc6e2128900c69774245)
- [Highlight Action Area in Soccer using Tensorflow](https://app.dailynow.co/r/9cd8631958085b3c400f28ae25cb766e) by [Priya Dwivedi](https://medium.com/u/b040ce924438)

* * *

[_Thanks to Daily_](https://www.dailynow.co/) _developers can focus on code instead of searching for news. Get immediate access to all these posts and much more just by opening a new tab._

![](https://cdn-images-1.medium.com/max/1024/1*m8Uf-6F4Q5AOp_wW6tbKSQ.jpeg)
Which ORM to use for build an API with NodeJS ?
Tags: node, api, orm, javascript
Published: 2019-01-09 13:53:06

---
title: Which ORM to use for build an API with NodeJS ?
published: true
description: It's a thread for ask for advices
tags: nodejs, api,orm,JavaScript
---

Hello @everyone 

I want to create an API with nodejs and express to delivery some information.

I have check some solution but i'm always lost.

 
I will use a relational database and the API will be consumed by a React application.

whatever you say to me will be useful.

Thank you
HTTP request with ES6 tagged templates
Tags: node, javascript, ajax, es6
Published: 2019-01-09 13:49:42

---
title: HTTP request with ES6 tagged templates
published: true
description: Interesting and "elegant" way to perform ajax requests
tags: node,javascript,ajax,es6
cover_image: https://res.cloudinary.com/dmtrk3yns/image/upload/q_auto/v1547041428/carbon_6_f3v78t.png
---

ES6 template literals are one of my favorite features in es6. A few days ago I saw an open source project on github - [htm](https://github.com/developit/htm), there are also [hyperHTML](https://github.com/WebReflection/hyperHTML) and, possibly, several other projects also.And I decided to create such a thing to perform AJAX requests.

**By the way, package uses node-fetch for node.js and whatwg-fetch for client javascript**

Source in github [vaheqelyan/karin](https://github.com/vaheqelyan/karin)

Do you think this is a good idea ?
<img src="https://res.cloudinary.com/dmtrk3yns/image/upload/q_auto/v1547041428/carbon_6_f3v78t.png"/>
Things that I don't know about
Tags: yearinreview, motivation, career, programming
Published: 2019-01-09 13:37:50

---
title: Things that I don't know about
published: true
description: Tools and technologies that I have no idea about by the end of 2018.
tags: yearinreview, motivation, career, programming
---

It’s 2019 and there’s still a shit ton of things that I don’t know about coming out of 2018. I wanted to write these down somewhere so I can refer to it throughout the year. It’s daunting realizing how much I don’t know. But I enjoy recognizing my knowledge gaps. By working hard I can finish 2019 knowing a little bit more. Here’s a list of the things that I still don’t know about:

- **Cryptocurrency** - Everyone talks about it and I kind of get how it works. But I have no idea how it’s built or how to mine it.
- **Machine Learning/AI** - I know some basic theory but I’ve never successfully built a program that has *learnt* anything. This area seems to be an ongoing trend so it’s probably worthwhile for me to build a project that uses Machine Learning.
- **Website design** - I still have no idea how to do this. I don’t know how to use the tools and I don’t know how to make something look good. I can tell a good website when I see one. But how do I translate into my own site?
- **Functional Programming language** - Does Javascript count as one? I have no idea. What is a functional programming language? Why does everyone tell me I should learn one? I want to get better at learning languages so why not start with a functional one.
- **Containers** - Kubernetes, Docker, are they even related? I have no idea how any of these work. Why are containers good? What can they contain?
- **Native App development** - There’s only so much I can learn in a year. But I do want to learn about app development at some point.
- **GraphQL** - I’ve seen this used by Github and other companies. But I have no idea how this works. I think it’s a replacement for a REST API. But how do I implement it? And why is it good?
- **Javascript front end framework** - There are so many frameworks out there. And I know nothing about any of them. I’ve heard good things about Vue, but honestly, I don’t know what problem they’re trying to solve.
- **Node** - This helps build servers? I know it's written in Javascript and there's been drama with Node in the past. How can I use it for web development?
- **Fancy AWS stuff** - I’ve heard people talk about Athena and Glue. But I have no idea what they are or what they achieve. The AWS ecosystem is huge, I'd want to learn more about it.


This is scratching the surface of the things I don’t know about. There’s probably plenty more. But as I continue on in 2019 I want to spend time researching some of these topics. And hopefully by the end of the year I’ll know a little bit more.

---

*I'd love to hear what's on your list of things to learn about in 2019. Let me know in the comments below!*
Announcing HTTP View: one-click debugging for HTTP(S)
Tags: showdev, opensource, tools, webdev
Published: 2019-01-09 13:08:12

---
title: Announcing HTTP View: one-click debugging for HTTP(S)
published: true
description: Intercept HTTP(S) with one click, explore & examine traffic up close, and discover exactly what your code is sending.
tags: showdev, opensource, tools, webdev
canonical_url: https://httptoolkit.tech/view
cover_image: https://thepracticaldev.s3.amazonaws.com/i/d6tckgrcts3wm5ik33pl.png
---

I'm excited to announce that HTTP View (the first release of [HTTP Toolkit](https://httptoolkit.tech)) is now available!

HTTP View is a free & open-source HTTP inspector. HTTP View lets you intercept HTTP or HTTPS traffic with one click, explore & examine that traffic up close, and discover exactly what your code (or anybody else's) is sending.

Want to dive right in? [Download it now](https://httptoolkit.tech/view).

HTTP Toolkit is a project that I've been working on for a while, to build an open-source suite of tools for HTTP development. The goal is to intercept & examine HTTP, edit it live, analyse flows of HTTP requests to audit performance and security, and rapidly prototype HTTP clients or servers.

You might be familiar with Fiddler or Charles - this is a similar concept, but taken further, and updated to integrate closely with newer tools and technology.

This first release includes the core technology for this and the full set of working features for the read-only parts, with lots more to come soon. Some of the features included so far:

## Capture HTTP & HTTPS with zero setup

![HTTP interception UI](https://thepracticaldev.s3.amazonaws.com/i/1lhnc84lzh0m0nij2oid.png)

HTTP View can do automatic hands-free interception for HTTP and HTTPS on a huge range of platforms, with more to come soon, from Chrome to iOS to Docker.

For any platforms without automatic integrations, it simply acts as an HTTP(S) proxy, so it's compatible with almost all HTTP clients out of the box.

## Quickly skim & search HTTP traffic

![A list of HTTP exchanges](https://thepracticaldev.s3.amazonaws.com/i/4wngj8nmiisfr5pla66r.png)

HTTP exchanges are automatically highlighted by content type, status and source, so you can skim through streams of requests, and easily spot issues. You can search over the full request & response URLs, statuses and headers too, to quickly find whichever message you're hunting.

## Deep dive into HTTP exchanges

![An example HTTP exchange's details](https://thepracticaldev.s3.amazonaws.com/i/8381tb6gefltir9084er.png)

If you pick a specific request, you can examine the full URL, status, headers and body up close to understand exactly what's being sent.

You can also explore the details of request and response bodies, with built-in editor highlighting and autoformatting for JavaScript, JSON, all popular image formats, HTML, hex, etc etc.

All the body inspection is built using Monaco, the editor from Visual Studio Code, so it comes with all the power of VS Code built-in.

---

Sound interesting? Great! You can download it now from [httptoolkit.tech/view](https://httptoolkit.tech/view).

Have feedback? Let me know below!