teleren/devto huggingface dataset:
Custom Bootstrap Badges
Tags: css, html, bootstrap
Published: 2020-05-30 10:10:57

I recently made a custom badge that has a 'delete' functionality. I used Bootstrap [Flex utility layout]([https://getbootstrap.com/docs/4.4/utilities/flex/](https://getbootstrap.com/docs/4.4/utilities/flex/)) and its [Badge component styles] (https://getbootstrap.com/docs/4.4/components/badge/).

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

```html
<h3>
  <div class="badge badge-dark m-1">
      <div class="d-flex align-items-center justify-content-between">
          <span class="pr-2">Sample</span>
          <i (click)="clickMe()" class="fa fa-times"></i>
      </div>
  </div>
</h3>
```

The examples on bootstrap's site were limited to a single entity inside a span. Though it endorses links as actionable badges, my requirement wants to have a second entity inside the badge with an isolated action.

I placed the text and close icon inside a `d-flex` container to properly align them.

Here is the [demo](https://stackblitz.com/edit/custom-bootstrap-badge).
Psychology of Typography
Tags: psychology, typography, writing
Published: 2020-05-30 10:06:12

Do you have a habit of reading? Do you like reading articles, blog posts about your FAVOURITE topics? Not everyone is a fan of reading books but it is a very good habit.

Do you remember the last book you read which was so long that it it took you almost an eternity to read? Mine would probably be **Sapiens** by *Yuval Noah Harari*. It is an amazing book, but it has over 500 pages!

Because you have read the two paragraphs above, did you notice a couple of things I have done in the sentences? Notice how I wrote the words 'favorite' in all caps? or how I highlighted the book name in bold. Why would I do that? Because the words hold something different and I want to highlight that particular thing.

This is how we go with typography as well. The fonts you use in your projects, the way you show text, its representation, matters a lot. While the way I did above isn't done in a big way, but it was to tell you about it with a simple example.

Let's understand this using another example. Assume this is an excerpt from a letter,

![First Image](https://i.imgur.com/xhP5Vnx.png)

Simple, right? What do you think these lines are portraying?

Now take a look at this,

![Second Image](https://i.imgur.com/2zclOur.png)

Do you feel a sense of change here? In the tone of the letter?

The point is, fonts and their styles can also change the tone of your words and it certainly affects the tone of your book/project. While the first one gives a sober tone with mix of both happy and sad emotions, the fonts in the latter one gives a traditional, old vibe. (For me, atleast). Get your friends to read your copy to know the "tone" they are getting from it. There are a load of fonts and numerous places where you can get typography knowledge from. 


## Some key takeaways which you can use:-

1. ONLY CAPS-SCREAM, WHEN IT IS NECESSARY. That means, Not every sentence has to be with spammed with Caps-lock ON. Use it, where needed. Writing in uppercase implies to your user that you are shouting something or announcing something big which is not the case, all the time. (Right?)
2. Font style matter. You can take a look at [Google Fonts](http://fonts.google.com) and browse the plethora of font styles to pick from. Each font tells a different story.
3. Use bold and italics, **this** and *this* in your paragraphs to emphasis content accordingly. The bold is primarily used to get your attention to a particular keyword. Remember, If someone is skimming through your article, they are most likely to remember these **keywords**. 

This is my first blog post here and I hope you find some value from this. I hope this post conveys what I am trying to explain. If you have some interesting insights, let me know.

Hope you are having a nice week.

-VD

P.S This article was originally published on [my personal blog](https://thevediwho.me/blog/psychology-in-typography).

P.P.S Did you notice anything different in 5th line? :)
New IDE compatible with new JS framework. Gimme feedback :D
Tags: webdev, showdev, javascript, news
Published: 2020-05-30 09:55:50

Hey guys. We finally released a demo of our IDE. What is amazing about it is the ecosystem that IDE works in. It's been created with a framework in mind that has been created with an IDE in mind. Such a inception :grin:

![GlueCodes Ecosystem](https://dev-to-uploads.s3.amazonaws.com/i/mabk8jimqemm9p6b8rxb.png)

IDE like this can automate all repeatable processes. 
- No more copy and paste of the same glue code to put everything together. Now You have a tool that will do everything for you.
- No more problems with organising your project. Now all of it is done by the IDE.
- No more looking for missing functionalities. Whenever you add new HTML attribute 'implementation assistant' will point what is missing.
- No more problems with naming data. Framework and IDE will help you do it.

There is much much more to it, but I want to keep this post short. We don't want to overwhelm you with too much information, but if you are very curious you will find out more on our website.

We really believe this is the next step for frontend developers. One aid including all the necessary tools. But that's our opinion. What matters more right now is that it's yours! Please let me know what you think about the whole idea?

Please keep in mind that is only a demo. It's not fully functional just yet. So if you like the idea follow us on [Github](https://github.com/gluecodes) and social media to stay up to date with all changes we make.

Here it is, a demo of IDE:
[Demo](http://gluecodes-demo.s3-website.eu-west-2.amazonaws.com/ide.html?appId=1&edit=page&id=index)

Here is our framework repository: [Framework](https://github.com/gluecodes/gluecodes-framework)

Our website if you want to find out more:
[Our website](https://www.glue.codes)
How do you make a compelling app that earns you a little on the side?
Tags: appdevelopment
Published: 2020-05-30 09:48:14

I created these apps in order to make a few buck on the side:

https://play.google.com/store/apps/details?id=de.pandaquests.reflex
https://play.google.com/store/apps/details?id=de.pandaquests.reflextester2
https://play.google.com/store/apps/details?id=com.ionicframework.vnpronoun2794112
https://play.google.com/store/apps/details?id=de.pandaquests.whenwillidie
https://play.google.com/store/apps/details?id=de.pandaquests.todo

But in total (you heard it right: not individually but in total) they make each month only a few cents. Some months even no revenue whatsoever. The apps have been on the store for several months already. And nothing has changed so far.  I want to make at least $1 each month (I want to start small).

Can you tell me why and should I improve on? I'm eager to learn and improve. I'm open to any criticism. In fact I'd be very grateful for that. Thanks in advance.
What CMS do you use, if you use one? Why?
Tags: discuss, webdev, cms
Published: 2020-05-30 09:46:47

- What features do you need? Do you really get it, or need third party anyway?
  - Also, what isn't supported my the CMS anyway? Like Analytics? Image/media storage? Commenting?
- Database or flat file? Security risks?
- Do you add the content yourself, or let someone else add?
- Do you regret your decision when you website grows? Is it easy to migrate in / out?
- Does it need to be fast, or even online in production?
DataMites Information Science Courses In Bangalore 
Published: 2020-05-30 09:44:47

The job of a knowledge scientist is little doubt, held in high esteem. The aspirants can get themselves enrolled for the Free Information Science Demo In Hyderabad at our Orien IT on nineteenth Sep, Wednesday At eight AM. The info science course in 360DigiTMG will enable you to distinguish yourself in the job market. I'm drastically indebted to you for assigning such knowledgeable and experienced trainers for Information Science certification course.

At the end of this Information Science on-line training program, there shall be quizzes that perfectly mirror the kind of questions asked in the respective certification exams and enable you to score higher. An ever-increasing variety of organizations are coming to understand the significance of knowledge science, AI and Machine learning No matter industry or size, organizations that desire to remain focused within the time of huge data need to effectively develop and implement data science capabilities or danger being left behind.

Machine Studying is the primary instrument package for Data Science in predicting classification or regression. All of our extremely qualified Knowledge Science trainers are trade consultants with no less than 10-12 years of related educating expertise. It covers four-month Venture Mentoring, publicity to five+ detailed Trade related tasks, revision sessions, entry to an extensive collection of interview questions, resume help, mock interview periods, job updates and expertise certificates.

Using time effectively: when a enterprise encounters a considerable amount of information, then simply eyeballing isn't enough and not time environment friendly both. At current, the very best institute for Information Course in Hyderabad is Analytics Path. Students will get to leverage information of all the core purposes of Data Science platform proper from the scratch. <a href="https://g.page/ExcelRSolutionsBanaglore?share">Data Analytics courses</a> 

Be assured that you are coming into the future of information science much earlier to seize these fantastic opportunities arising from this biggest want of the business world. Data science is seen as probably the most revolutionary and futuristic area that is promising not only within the facets of providing jobs to the youth but also growing prospects in the area.

We are located at : 
Location : 
ExcelR - Data Science, Data Analytics Course Training in Bangalore
49, 1st Cross, 27th Main BTM Layout stage 1 Behind Tata Motors Bengaluru, Karnataka 560068
Phone: 1800-212-2120/ 070224 51093
New online IDE + JS framework - demo! - FE developers, I need your feedback
Tags: webdev, showdev, javascript, css
Published: 2020-05-30 09:37:26

Here is a TodoMVC demo of an online IDE I've been recently working on: [Demo](http://gluecodes-demo.s3-website.eu-west-2.amazonaws.com/ide.html?appId=1&edit=page&id=index)

This article begins series of tutorials meant to explain rationales behind the design decisions we've made and eventually form a proper documentation. For now, just play, check out [live preview](http://gluecodes-demo.s3-website.eu-west-2.amazonaws.com/previewPage.html?appId=1&pageId=index), don't be scared to break it :wink:

I appreciate any feedback and suggestions. 

Bear in mind it's a prototype which still requires a lot of work. There are features that don't work or are missing. Also, I'm aware of performance improvements which need to take place. These all costs our time and effort, hence we're running a [Kickstarter campaign](https://www.kickstarter.com/projects/gluecodes/gluecodes-platform). Much :heart: for your backing. 

More links:

- [Our website](https://www.glue.codes)
- [The framework repo](https://github.com/gluecodes/gluecodes-framework)
- [Our Kickstarter campaign](https://www.kickstarter.com/projects/gluecodes/gluecodes-platform)
Generar un JSON Web Token (JWT) en NodeJS
Tags: node, jsonwebtoken, javascript
Published: 2020-05-30 09:29:30

Hoy os traigo una publicación sobre el uso de JSON Web Token en uno de nuestros proyectos para generar, en la función de login, un token que se pueda validar posteriormente antes de hacer una acción, por ejemplo de actualizado de usuarios.

Utilizaremos esta tecnología porque utiliza el algoritmo de encriptación HS256 y además, para generar el token se basa en una semilla (seem) que nos podemos inventar o generar, sin la cual, no se puede descifrar la información que contiene el token. Todo esto hace que sea uno de los procesos más seguros de tokerizado. 

Para ello vamos a instalar el paquete de node para **jsonwebtoken** con el siguiente comando:
```
npm install jsonwebtoken --save
```

Después para usarlo en nuestro código, vale con importar el paquete y llamar a su función sign de la siguiente manera:
```
const jwt = require('jsonwebtoken');

let token = jwt.sign({
    infoUser
}, 'este-es-el-seed', {expiresIn: '48h'});
```

El token que genera la siguiente función tendrá una duración de 48 horas, dos días, y utilizará la semilla este-es-el-seed para encriptar la información de usuario.

Si quieres usarlo en una función login podría ser algo así:
```
const express = require('express');
// Usamos bcrypt para comprobar la contraseña
const bcrypt = require('bcrypt');
const jwt = require('jsonwebtoken');
// Importamos el modelo de usuario de otro fichero
const User = require('./models/User');
const app = express();

app.post('/login', (req, res) =>{
    
    let body = req.body;

    User.findOne({email: body.email}, (err, user) => {
        if(err){
            return res.status(500).json({
               ok: false,
               err  
            });
        }

        if(!user){
            return res.status(400).json({
                ok: false,
                err: {
                    message: 'Usuario o contraseña incrorrectos'
                }
            });
        }

        if(!bcrypt.compareSync(body.password, user.password)){
            return res.status(400).json({
                ok: false,
                err: {
                    message: 'Usuario o contraseña incrorrectos'
                }
            });
        }

        let token = jwt.sign({
            user
        }, 'este-es-el-seed', {expiresIn: '48h'});

        res.json({
            ok: true,
            user,
            token
        });

    });
});
```

En la respuesta correcta de la función de login, nuestro servidor de NodeJS va a devolver la información de nuestro usuario, que la habremos definido previamente en nuestro modelo, y el token. La capa frontend ya puede guardar ese token como variable local de navegador y deberá mandarlo con el resto de peticiones para validar que el usuario creado puede ejecutar esas funciones.
Setup Laravel Project on Server (Ubuntu 18.04)
Tags: laravel, ubuntu, php, apache
Published: 2020-05-30 08:28:05

---
title: Setup Laravel Project on Server (Ubuntu 18.04)
published: true
description: Setup Laravel Project from scratch on Server with Ubuntu 18.04
tags: laravel, ubuntu, php, apache
cover_image: https://img.youtube.com/vi/-H4QQmQBzKw/0.jpg
---
To setup laravel project on a Server with Ubuntu 18.04 from scratch, you need to do following:

You can watch this example here as well:
{% youtube -H4QQmQBzKw %}

Let's Start!

- Install *PHP*
> sudo apt-get update
> sudo apt-get install php
> sudo apt-get install php7.2-mbstring php7.2-mysql php7.2-xml php7.2-curl php7.2-json php7.2-zip

- Install *Apache*
> sudo apt-get install apache2

- Install *Git*
> sudo apt-get install git

- Install *Composer*
> curl -sS https://getcomposer.org/installer | php
> sudo mv composer.phar /usr/local/bin/composer
> chmod +x /usr/local/bin/composer

- Clone laravel project from your repository
> git clone https://github.com/csinghdev/laravel-starter.git

- Setup Laravel app
> cd laravel-starter
> composer install
> cp .env.example .env

- Add/Edit Project Environment variables
> nano .env

- Create virtual host in apache and map subdomain to your Laravel app. You can watch it here.
{% youtube zFMCh_y0O7o %}

- That’s it!
Undocking OSX
Tags: productivity, osx, screen, dock
Published: 2020-05-30 08:17:17


### The perpetrator

While getting acquainted with the quirks of OSX, one of the things I was immediately not a fan of was the dock. **Spotlight (⌘+space)** is such a great feature, and it makes the dock just stand in the way.

The dock wastes your screen surface because maximized applications cannot use the horizontal surface to the sides of it.

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

Let's minimize this wasted space by modifying the dock, for the sake of productivity...

### Ignore it

The first attack vector is to ignore the dock by using the full screen functionality with all apps.

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


Sure... we'll be using 100% percent of the screen. But we want a permanent solution, not a quick hack.

If you start using full screen app, you'll probably need to use the three-finger swipe gesture. Even though the gesture seems quick, it might be an illusion. When you have a bunch of apps open, the cmd+tab keystroke requires less hand motion and is as quick as the swipe.

Moreover, not all apps can be opened in the fullscreen mode, like Adobe Photoshop, for example.

Not good enough. Let's kick it up a notch! 💪

### Hide it

Under *System Preferences > Dock* you'll find the option to hide the dock.

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

Great! It doesn't get in the way anymore. We know where we can find it, if we'll need it.

### Speed it up 

But... it seems a bit unresponsive. You hover your mouse to the end bottom of the screen and it appears with a slight delay.

But have no fear... 🦸🏻‍♂️

This delay is intentionally set as the default behaviour and it can be overridden by executing two commands in the terminal.

1) Change the delay value to 0...

```bash
defaults write com.apple.Dock autohide-delay -float 0
```

2) Restart the dock for the change to take effect

```bash
killall Dock
```

If you'll ever want to revert it, just execute this.


```bash
defaults delete com.apple.Dock autohide-delay
killall Dock
```

That's it! We got rid of it and we can instantly bring it back whenever we want to. 100% screen real estate. Mission accomplished! 😎

### Question it

Hmmm... but why are we even using the dock if we can leave our hands on the keyboard and use these keystrokes?

- **⌘+space** to open the apps
- **⌘+tab** to switch between apps
- **⌘+Q** to quit apps

A whole lot of redundancy going on.

### End it.

Let's face it.

We might as well declare the dock obsolete. The Apple touchpad and keyboard evolved over the years, with the dock evolving from one of the most recognisable OSX visual characteristics to a screen-cluttering distraction.

The time has come...

Good night, sweet prince.

![nighty night](https://media.giphy.com/media/T2po0QVqNpN84/giphy.gif)

🥇 I challenge you to hide it for a week and try not to use it.

I made a gist which you can fork so you can easily find the delay rollback command later.

{% gist https://gist.github.com/ilesar/d438e4b54efa16cce4d965315a0163b9.js %}
FPT Telecom24horg
Published: 2020-05-30 07:52:03

https://fpttelecom24h.org/| Chuyên cung cấp lắp đặt mạng internet, truyền hình, camera và FPT Play Box. Địa chỉ tại Vĩnh Yên: - 18, Nguyễn Trãi, Liên Bảo, Vĩnh Yên, Vĩnh Phúc. Địa chỉ tại Vĩnh Tường: - Gần Vực Xanh, TT Vĩnh Tường, Huyện Vĩnh Tường, Vĩnh Phúc. Địa chỉ tại Phúc Yên: - LK2909, KĐT TMS, phường Hùng Vương, Phúc Yên, Vĩnh Phúc Email: fptvinhphucvn@gmail.com, Phone: 0978 58 1088. Truyền hình FPT , Mua FPT Play Box, wifi fpt , lắp đặt camera FPT #Fpttelecom24h.org #LapmangFPT #TruyenhinhFpt #CameraFPT #FPTPlayBox"
Safely Storing Passwords in mongoDB Using  Bcrypt and a mongoose middleware.
Tags: mongodb, bcrypt, node, javascript
Published: 2020-05-30 07:01:14

Hey there.
Maybe you landed here mistakenly or you are interested in figuring out how to safely hash user passwords and store it in your database, you are definitely in the right place. I will try to make this as concise as possible because i know these things can get out of hand real quick.

####AIM:
The aim here is to make use of the **document** middleware from mongoose's library to perform a hashing operation on our password field, before it is stored in our mongoDB database. In mongoose there are 4 middlewares and here, we will be making use of the **document** "save" middleware. 

I am running with the assumption that you have a basic **mongoDB/mongoose** and **express** server already setup. 

If not, you can check out mdn's basic express setup here 
https://developer.mozilla.org/enUS/docs/Learn/Serverside/Express_Nodejs/development_environment

And here for a mongoDb mongoose setup
https://developer.mozilla.org/enUS/docs/Learn/Serverside/Express_Nodejs/mongoose




Okay, Enough with the boring theory lets do some work...


First, we will install bcrypt using `npm install bcryptjs`


Require it like we do with all our modules 
`var bcrypt = require('bcryptjs');`


  In your schema file, just before creating your model add.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/0e87h2t9ko0v1z20em7b.PNG)



  Your complete schema file should look like this.

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

  
Finally, this is my registration route in my route file.

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



####LOGIC:
What happens here is, whenever this schema is called through its model (by going to the users registration route) , lets say we are registering a user, the middleware scans the request body to see if there is a password in it. If a password is present, it hashes it using the bcrypt algorithm. 

Also, whenever the password is modified, maybe during a password change or an update, the middleware performs the same hashing operation. In essence, the middleware serves as a middle man between an incoming request and the action to be performed on the request object.

For a more in-depth understanding of the backdoor operations of either bcrypt or mongoose you can check out their documentation.
Simple Math Adventure Game with PixiJS
Tags: codenewbie, javascript, pixijs
Published: 2020-05-30 06:56:47

Last weekend I wanted to learn more about animations, specifically with the intent to build a game. A quick google search of "best framework for javascript game" brought up a few options, but Pixi.js caught my eye. A fleeting memory of the name crossed my mind and so I followed the link.

I quickly found a list of [tutorials](https://www.pixijs.com/tutorials) and jumped into [CJ Gammon's youtube videos](https://www.youtube.com/playlist?list=PL08jItIqOb2oGcyrgREbrm_b9OW7TE1ji). After scratching my head a bit I decided to try [kittykatattack's tutorial](https://github.com/kittykatattack/learningPixi) instead. I followed along, taking in a little at a time, and then trying it out in my own way, and going back to the videos when I needed them.

My experience with animations is limited so I can't make any comparisons, but I was pleased by what I could accomplish with Pixi rather quickly. Within a couple hours (over 2 nights) I had a promising start to a choose your own adventure type game, but I recalled that this type of game would lean heavily on the story, and in the end my aim was to strengthen my coding ability. While I was contemplating where to further my experiment and showing off to my wife she said something that stuck, "It looks like a kid's game." At first I was a little annoyed (that pesky ego of course), but once that moment passed ("moment" === "day") and I took another look I saw what she meant. The icons and artwork I had found all had a soft, welcoming, look and an idea began to emerge.

Since the beginning of school shutdown I struggled to juggle my work and homeschooling. This here might be an opportunity to combine the two. I set off to build a dungeon adventure game that incorporated basic math. Over this last week I spent my nights working on it and feel content with the result. There were plenty of bugs (and still are) but I was able to produce a working game that allows players to choose their adventurer and then solve addition equations to earn action points. Adventurers use the action points to move through a dungeon while avoiding arrows until they reach the other side.

Here is the [github repo](https://github.com/tsbarrett89/pixi-practice)
And [deployed site](https://dungeon-adventures.netlify.app)

There is still much to do (especially in organizing and commenting my code), but if you see any glaring issues or just have a suggestion please let me know.

-Thomas Barrett