teleren/devto huggingface dataset:
One VS code extension you should use when building and testing apis
Tags: vscode, testing, node, webdev
Published: 2020-05-05 14:46:51

[https://marketplace.visualstudio.com/items?itemName=humao.rest-client](https://marketplace.visualstudio.com/items?itemName=humao.rest-client)

This simple extension made testing and building apis a lot easier for me. Before I found it, I was using Postman to test my apis. I wasn't very satisfied with the workflow...

Rest Client improved my worklflow significantly:

* No more context switch.
Easily test your api endpoints inside of vs code.
* Define all your testable endpoints in one file
No more searching and configuring of endpoints
* check your rest api endpoints config into git
You can check the file that contains your api endpoints into git. So every other developer that checks out the repository has instant access. No more sharing of postman config files.

Easily define your endpoints like this and hit "send request". Done.

```
POST https://example.com/comments HTTP/1.1
content-type: application/json

{
    "name": "sample",
    "time": "Wed, 21 Oct 2015 18:27:50 GMT"
}
```

That's it for today.
I share more quick tips about web development [on twitter](https://twitter.com/rallipi). So make sure to follow me there to stay up to date.
That time a KnowBe4 phish test caught the wrong person
Tags: knowbe4, humour
Published: 2020-05-05 14:43:17

My employer pays KnowBe4 to randomly conduct phishing tests on all employees, and not so long ago, I got an email that looked (at first glance) legit, from "LinkedIn Security."

The first thing that peaked my interest, was that I have a LinkedIn account, but not associated to the email address that their "Security" team were talking to me about. Since I'm now interested, I paid closer attention to the sender address, and they were missing an E in "LinkedIn" - bingo, it's 100% bogus.

So, following corporate policy, I kick a ticket at our First Line staff along the lines of "hey, if this isn't a KnowBe4 test, consider blacklisting the domain."

A while later the reply came back, saying that they were blacklisting the domain. I replied, with a screenshot of the `host` command demonstrating that the host in the "click me" link is a CNAME'd alias for KnowBe4.

KnowBe4 targetting is off a little, but they definitely caught someone that needs training!
Responsive Service Section In Tailwind CSS
Tags: css, html, beginners, webdev
Published: 2020-05-05 14:41:32


The service section must important for service base website to show what type of services we provide. Previously we made the Service section in a different way like in pure CSS and bootstrap and others. So here we design minimal and Responsive Service Section In Tailwind CSS with some basic CSS properties.

In this element, we use the Tailwind CSS grid class with flex utility classes. Also, we used shadow class and width classes to make this section equally. Also, we used a responsive grid class to make this card mobile-friendly.

Make it yours now by using it, downloading it, and please share it. we will design more elements for you.

[Download Source Code](https://w3hubs.com/responsive-service-section-in-tailwind-css/)
Build an ESSA Report Card in Rails/Tailwind/AlpineJS/SQL Server
Tags: rails, tailwindcss, sql, alpinejs
Published: 2020-05-05 14:38:32

This is where I'm going to document the development of the refactor of the [Mississippi Succeeds Report Cards](https://msrc.mdek12.org).

The initial build was done by a small team on a ridiculous schedule with zero guidance. We're going to do better and we're going to do it in Rails, using [TailwindCSS](https://tailwindcss.com) and TailwindUI together with [AlpineJS](https://github.com/alpinejs/alpine) to make it fancy.
20+ Examples For NumPy Matrix Multiplication
Tags: python, tutorial, beginners
Published: 2020-05-05 14:34:14

---
title: 20+ Examples For NumPy Matrix Multiplication
published: true
description: 
tags: #python #tutorial #beginners
---

1 Basic Terminologies
2 Matrix multiplication with a vector
3 Multiplication with another matrix
4 Multiplication between 3 matrices
5 NumPy 3D matrix multiplication
6 Alternatives to np.matmul()
6.1 The ‘np.dot()’ method
6.2 The ‘@’ operator
7 Multiplication with a scalar (Single value)
8 Element-wise matrix multiplication
9 Matrix raised to a power (Matrix exponentiation)
9.1 Element-wise exponentiation
9.2 Multiplication from a particular index
10 Matrix multiplication using GPU
10.1 Using CPU
10.2 Using GPU
11 Conclusion

https://likegeeks.com/numpy-matrix-multiplication/

Hope you find it useful.

Regards,
10 Cool CSS Text Effects 
Tags: javascript, webdev, beginners, css
Published: 2020-05-05 14:34:14

---
title: 10 Cool CSS Text Effects 
published: true
description: 
tags: #javascript #webdev #beginners #css
---
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ehgauaqmq5g5a5x70noi.png)
<p><B>If You Like This Article then check Out more Example [gscode.in]</B></p>
<H2>50+ Cool CSS Text Effects | Text Animation – GS CODE</H2>
https://gscode.in/css-text-effects

**READ MORE AIRTICLE**
1: [20+ CSS Background Patterns Example](https://gscode.in/css-background-patterns-example/)
2: [30+ Amazing CSS Hamburger Menu Example](https://gscode.in/css-hamburger-menu/)
3: [15+ Bootstrap navbar](https://gscode.in/bootstrap-navbar/)
4: [30+ Radio Button CSS style Examples ](https://gscode.in/radio-button-css/)
5: [50+ CSS grid template](https://gscode.in/css-grid/)








<p>1.An experiment using webfonts in combination with CSS 3D transform tools.</p>

{% codepen https://codepen.io/bosworthco/pen/YWBLpR %}


<p>2.I tried to reproduce a screen from "The Poor Little Rich Girl" movie</p>

{% codepen https://codepen.io/mimikos/pen/QMjjzy %}

<p>3.css text effects</p>
{% codepen https://codepen.io/Moslim/pen/zwJPgL %}

<p>4.Experimenting with text effects in SVG. This turned out to be a sort of moving neon gradient outline thing.</p>

{% codepen https://codepen.io/jhnsnc/pen/Egyjbo %}

<p>5.css text effects</p>
{% codepen https://codepen.io/jonnyscholes/pen/QbKPdZ %}


<p>6.CSS only text effect using data-attributes, pseudo elements, text-shadow and blend modes.</p>

<p>Just playing around with different css properties to create fun text effects :)</p>

<p>This will not work in IE. Sorry!</p>

<p>I saved an image as inspiration from somewhere and I cannot remember where it was from, if you find it please let me know!</p>

<p>Check out some other cool text effects: <a href="http://codepen.io/collection/DamKJW/" target="_blank">http://codepen.io/collection/DamKJW/</a></p>

{% codepen https://codepen.io/mandymichael/pen/wJMMzV %}


<p>7.Text animated with CSS to recreate the opening titles of a movie.</p>

{% codepen https://codepen.io/vuild/pen/JexjNP %}

<p>8.css text effects</p>
{% codepen https://codepen.io/matchboxhero/pen/XeEYyy %}


<p>9.A jQuery powered example of how you can create a bubbling effect on a HTML heading. The bubbles appear as though they're coming from behind the text, and then fade out and are removed.</p>

{% codepen https://codepen.io/html5andblog/pen/ZWmYMy %}

<p>10.Uses CSS keyframe animations, transitions, JavaScript &amp; SVG to create a shattered text effect. Full tutorial <a href="http://thenewcode.com/868/Dynamic-Web-Typography-Exploding-Text">on my blog</a></p>

{% codepen https://codepen.io/dudleystorey/pen/LdGFw %}

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ehgauaqmq5g5a5x70noi.png)
<p><B>If You Like This Article then check Out more Example [gscode.in]</B></p>
<H2>50+ Cool CSS Text Effects | Text Animation – GS CODE</H2>
https://gscode.in/css-text-effects
Repositórios locais com Carthage
Tags: swift, ios, development, carthage
Published: 2020-05-05 14:31:43

Quando se trabalha com modularização de aplicativos iOS, geralmente é necessário realizar muitas alterações no código que está no framework. O caminho mais fácil é ter o módulo em sua máquina, fazer o projeto principal apontar para ele e receber essas alterações de forma rápida. Claro que antes de levar o framework para o app, trabalha-se primeiro em um projeto exemplo dentro do _workspace_ do mesmo.

Após implementar as funcionalidades pretendidas, é preciso levar o framework para o app e ver se tudo está funcionando como esperado. Aqui entra o problema a ser resolvido.

###Como adicionar dependências ao projeto utilizando Carthage?
Primeiro você cria um `Cartfile` e em cada linha é adiciona o nome dos frameworks desejados. Para isso é utilizado a seguinte notação:

```github "Nome do framework" versão```

Se o framework desejado for privado ou, simplesmente, você quiser apontar para sua URL, pode ser passado o link do repositório:

```git "https://link/do/repo.git" versão```

Mas, essa opção para uso de repositório privado gera muita "dor de cabeça". Pois, para qualquer alteração é necessário fazer o push das mesmas, depois atualizar o projeto, contar com a estabilidade da sua conexão e assim lá se vão preciosos segundos ou até minutos do seu tempo.

A *solução* é apontar seu `Cartfile` para um repositório local, assim:

```git "file:///path/do/projeto"```

*Dica 1*: Não precisa colocar `.git` no final da URL.

*Dica 2*: Você pode trabalhar com _branchs_? Sim! E para fazer isso basta seguir essa notação:

```git "file:///path/do/projeto" "nome branch"```

*Dica 3*: Use o terminal ao seu favor. Para conseguir o caminho do seu repositório, utilize o comando `$ pwd` dentro do diretório.

*Dica 4*: E agora José, como utilizo o framework local sendo que ele não tem nome e aponta pra um `path` na minha maquina?

Tomando como exemplo, que o caminho para seu framework é:

```$ ~/projetos[meu_framework]```

Agora é só rodar o comando de update do *Carthage* apontando para o módulo local, assim:

```carthage update [meu_framework]```

###Fontes:

https://github.com/Carthage/Carthage
https://github.com/Carthage/Carthage/blob/master/Documentation/Artifacts.md#cartfile
What is your routine to snap out of a dev funk?
Tags: discuss, productivity
Published: 2020-05-05 14:31:18

---
title: What is your routine to snap out of a dev funk?
published: true
description: What is your routine to snap out of a dev funk?
tags: discuss, productivity
---

Lately, I've been hitting a wall more often than I would like while I'm programming. No matter how much coffee I drink, I just can't seem to snap out of it. Sometimes, it gets to a point where I'm doing more damage than good. I write sloppy, lazy code. Take shortcuts.

I can't really pinpoint the root cause either. Lack of sleep, stress, kids, distractions.

I've tried all sorts of things but the one thing that has seemed to help me is to exercise vigorously. Do jumping jacks until exhaustion.

What's your routine? How do you identify the root cause? How often do you get into a mental funk?
Dear WHATWG, fix datalist
Tags: html, w3c, frontend, css
Published: 2020-05-05 14:13:11

---
title: Dear WHATWG, fix datalist
published: true
description: An open letter to the W3C
tags: html, w3c, frontend, css
---
Dear WHATWG,

For as long as moonlight has kissed the darkened night sky, front-end web developers have been creating hacky and cumbersome "typeaheads".  Some people know these components as "autocompletes".  Most of us know them as PITA (see Urban Dictionary).

There has been a semi-perfect solution in native HTML that has existed for millenia (Internet Explorer 10): the `datalist` element.

`datalist` is such a noble and proud element.  It has stuck around through years of abandonment and abuse, watching `div` and `JS` take all the credit for functionality it has provided since its conception.

More recently, web components and their fill-in libraries have tried to make commonplace what `datalist` was meant for all along: being a native typeahead.

But `datalist` has weak spots that the partnership of `div` and `JS` have exploited again and again.

## `datalist` weaknesses:
* `option`s cannot be styled
* `option`s cannot take additional HTML
* `option`s cannot be augmented with JavaScript
* It provides no event API for filtering a list

Why the WHATWG has neglected `datalist`?  I honestly don't know. 
It gets a small blurb in their docs:
https://html.spec.whatwg.org/multipage/form-elements.html#the-datalist-element

And for the W3C it appears in one line under the `list` attribute on their site:
https://www.w3.org/wiki/HTML/Elements/input/text

So WHATWG, in the age of evergreen browsers, what the actual F are you doing??!  Fix the above weaknesses.  Give developers a native typeahead instead of forcing us to adopt newer tech like web components and shadow DOM.

Sincerely,

Many, many front-end developers
Three types of console.log users. Which one are you?
Tags: discus, poll, survey
Published: 2020-05-05 14:12:16

Any js developer has definitely used `console.log()` before. Among these 3 main ways to print variables with text within `console.log()`, I am curious to see what kind of developers people are. 

I have added comments for of the three methods mentioned  feel free to vote for the method you use by liking the comment that corresponds to how you use `console.log(). I'd also love to hear why you use the method that you use.
Vanilla JS Spaceship with gravity
Tags: javascript, tutorial, beginners, webdev
Published: 2020-05-05 14:10:04

---
title: Vanilla JS Spaceship with gravity
published: true
description: Learn how to build a vector spaceship with gravity
tags: #javascript #tutorial #beginner #webdev
---

In this video you'll learn how to build a vector spaceship with canvas. The spaceship is controlled with the keyboard and affected by gravity.

This is inspired by the old Amiga game Gravity Force

{% youtube 71u5BnCh70U %}
Managing multiple Git profiles
Tags: git, config, dotfiles
Published: 2020-05-05 13:56:21

---
title: "Managing multiple Git profiles"
published: true
description: "Learn how to configure git to use the appropriate email address (and other user fields) based on your current project directory"
tags: ["git", "config", "dotfiles"]
canonical_url: "https://deepsource.io/blog/managing-different-git-profiles/"
cover_image: "https://user-images.githubusercontent.com/15556382/81073297-0d5c9080-8f05-11ea-903a-d634ba29e0f1.png"
---

If you use git as the version control tool for both your personal projects and at work, chances are that you want to isolate the two (or more) profiles, i.e. at the very least, using different emails for creating commits and tags. Other uses might include using different usernames (for different GitHub accounts), gpg-keys, etc.

One straightforward way of tackling this is to remember setting the correct configuration whenever you clone (or initialize) a new repo:

```bash
git config user.name "priam"
git config user.email "king@troy.tr"
```

Besides, being painstakingly mundane, it is yet another thing to remember. Nevermind the time and effort of rewriting history if you have already created commits.

## But wait, there's a better way

Git offers a much more flexible way of specifying conditional config files based on your current directory &mdash; if you use a different directory for all your work repos (let's say `~/work/`), then you can specify the following in your `~/.gitconfig` to automatically use your work credentials inside them:

```
[include]
	path = ~/git-personal.conf
[includeIf "gitdir:~/work/"]
	path = ~/git-work.conf
```

Each conf file can then define it's own user, e.g. `~/git-personal.conf`:

```
[user]
	name = realerlich
	email = erlich@hacker.hostel
	signingkey = FF5353EC154B6811
```

and `~/git-work.conf`:

```
[user]
	name = erlich
	email = ebachman@aviato.com
	signingkey = CE3454AA132E6F2E
```

There, all set now! Whenever you are working inside a repo that lives under `~/work`, Git will automatically use your work email. Go ahead, try it out!

EDIT: Note that any configuration can be bifurcated in this way. It need not be just these user-specific fields, and neither is it also required to specify all of these.

EDIT 2: In case you want to find out `signingkey`, head here - https://help.github.com/en/github/authenticating-to-github/telling-git-about-your-signing-key 

[This blog post originally appeared on [deepsource.io/blog](https://deepsource.io/blog/managing-different-git-profiles/)]
OSM Vector Tiles together with LDC, LLDC, and SIDS
Tags: unvt, naru
Published: 2020-05-05 13:56:05

This is a new progress of the [United Nations Vector Tile Toolkit (UNVT)](https://unvt.github.io).

According to the [Summary Report on OSMF Chair's Outreach Jan-early Apr 2020 ](https://www.openstreetmap.org/user/apm-wa/diary/392767), **experiments with vector tiles will be encouraged** in the coming days. The Summary Report says: 

> One respondent noted that there is nothing to stop local chapters or others from hosting vector tiles if they wanted to, and suggested encouraging local communities and chapters to experiment with vector tiles before the OSMF settles on a solution, should it decide to do so.

UNVT will be able to support these experiments because UNVT aims to provide diverse maps of the latest technology in web maps. 

The United Nations Development Cooperation emphasizes the collaboration with Least Developed Countries (LDC), Landlocked Developing Countries (LLDC), and Small Island Developing States (SIDS). For example, [Unite Maps Initiative / UN Mappers](https://wiki.openstreetmap.org/wiki/Unite_Maps_Initiative/UN_Mappers) are operating in countries such as Somalia or the Democratic Republic of Congo. These countries do not have much data. That would rather lower the technical barrier in introducing the latest technologies. 

We aim to collaborate on vector tiles engaging OSM data as source data. We understand we should focus on the local context, and we should seek support from the local context. 

As the first attempt, I created [a series of test conversions](https://github.com/optgeo/kokoromi). Below are the test sites. 

- [🇸🇧 Solomon Islands](https://optgeo.github.io/kokoromi-sb)
- [🇹🇲 Turkmenistan](https://optgeo.github.io/kokoromi-tm)
- [🇻🇺 Vanuatu](https://optgeo.github.io/kokoromi-vu)
- [🇫🇯 Fiji](https://optgeo.github.io/kokoromi-fj)
- [🇨🇭 Switzerland](https://optgeo.github.io/kokoromi-ch)
- [🇸🇴 Somalia](https://optgeo.github.io/kokoromi-so)
- [🇨🇫 Central African Republic](https://optgeo.github.io/kokoromi-cf)
- [🇨🇩 Democratic Republic of Congo](https://optgeo.github.io/kokoromi-cd) (up to z=14 only)
- [🇰🇪 Kenya](https://optgeo.github.io/kokoromi-ke)
- [🇹🇴 Tonga](https://optgeo.github.io/kokoromi-to)
- [🇳🇿 New Zealand](https://optgeo.github.io/kokoromi-nz)(up to z=14 only)
- [🇦🇬🇧🇸🇧🇧🇧🇿🇨🇺🇩🇲🇩🇴🇬🇩🇬🇾🇭🇹🇯🇲🇰🇳🇱🇨🇻🇨🇸🇷🇹🇹 the Caribbean](https://optgeo.github.io/one-love)
- [🇷🇼 Rwanda](https://optgeo.github.io/kokoromi-rw)
- [🇧🇦🇷🇸🇲🇪🇽🇰🇦🇱🇲🇰 Western Balkans](https://unvt.github.io/mame)

(Areas are not always LDC, LLDC or SIDS.)

We are continuously developing [naru](https://github.com/unvt/naru) which supports production, hosting, styling, and optimization of vector tiles from [OpenStreetMap Data Extracts](https://download.geofabrik.de/).
Webpack Aliases in Vue JS
Tags: webdev, tutorial, vue, frontend
Published: 2020-05-26 14:38:29

---
title: Webpack Aliases in Vue JS
published: true
date: 2020-05-05 13:47:21 UTC
tags: #webdev, #tutorial, #vue, #frontend
canonical_url: https://remotedevdaily.com/webpack-aliases-in-vue/
---

This article is going to be a quick tutorial on how to set webpack aliases in a Vue JS project. This article is going to assume that your project has been created using [Vue Cli](https://cli.vuejs.org/). If it makes sense for your project, I highly recommend using it.

Webpack aliases are a great way to simplify imports in your Vue JS projects. Instead of specifying long paths, we can instead use a short alias and webpack will generate the full path when we build/run our project.

### How To Set Up Webpack Aliases in Vue  

To start, open up the **vue.config.js** file in the root directory of your project. If this file does not exist, create it.

Then, post in the following snippet:

```
const path = require('path');  
 module.exports = {  
 configureWebpack: {  
     resolve: {  
   
       alias: {  
           //aliases go here  
       },  
     },  
 }
```

Take a look at the **alias** property of the **configureWebpack** object. This is where we are going to put all of our aliases.

A webpack alias looks something like the following:

 
```
'@c': path.resolve(\_\_dirname, 'src/components')
```

What we can do now is fill out this alias object with a few paths that we want to alias. To create an alias, simply create a property which will be the name of your alias. In this example, all of the aliases will be prefixed with the **@** symbol, but you could pretty much do whatever you want. The value must be set to the path for the directory you want to alias.

```
const path = require('path');  
 module.exports = {  
 configureWebpack: {  
     resolve: {  
       alias: {  
         '@c': path.resolve(\_\_dirname, 'src/components'),  
         '@m': path.resolve(\_\_dirname, 'src/mixins'),  
       },  
     },  
 }
```

Awesome, we have aliases. How can we use them in our Vue components?

```
import MyComponent from '@c/MyComponent.vue'  
 import MyMixin from '@m/MyMixin'  
 export default {  
   name: 'Home',  
   components: {  
     MyComponent,  
   },  
   mixins: [MyMixin],  
   
 };
```

Wow, isn’t that awesome. Look at how short those import statements are. No we don’t have to worry about typing out a bunch of long, unmaintainable paths.

I hope you enjoyed this content. If you liked this, considering checking out my article about [How To More Efficiently Pass Down Props in Vue JS](https://remotedevdaily.com/how-to-more-efficiently-pass-down-props-in-vuejs/) or this other article about [How To Import All Vuex Modules Automatically](https://remotedevdaily.com/vuex-productivity-hack-how-to-import-all-vuex-modules-automatically/).

Have fun!

The post [Webpack Aliases in Vue JS](https://remotedevdaily.com/webpack-aliases-in-vue/) appeared first on [Remote Dev Daily](https://remotedevdaily.com).