teleren/devto huggingface dataset:
Slim sidebar menu with hover effect
Tags: css, html, uiweekly, codepen
Published: 2021-02-18 13:49:56

Hello #devs,

I started working o a side small Ui Kit that looks nice and is easy to use.

Disclaimer: The main purpose of this kit is to be used on the admin dashboards where the users already know to use a dashboard so no more hate comments like "this design is not in trend anymore" or smth like that you haters! :))

I'm not going to explain the whole project as it's still in progress, today I only want to share the menu creation.

First some HTML skeleton:

```HTML

<aside>
  <ul>
    <li class="menu">Ui kit</li>
    <li>
      <i class="fa fa-user-o" aria-hidden="true"></i>
    </li>
    <li>
      <i class="fa fa-laptop" aria-hidden="true"></i>
    </li>
    <li>
      <i class="fa fa-clone" aria-hidden="true"></i>
    </li>
    <li>
      <i class="fa fa-star-o" aria-hidden="true"></i>
    </li>
    <li>
      <i class="fa fa-trash-o" aria-hidden="true"></i>
    </li>
  </ul>
</aside>
```

And now the styling. First some general CSS for the body to remove margins and use a custom font:

```CSS
body {
  display: flex;
  font-family: 'Roboto';
  margin: 0;
}
```

Let's begin to style the menu. I will create a ul fixed and to create the overlapping effect with the main section, I will make it a bit wider and then add the section on top of it:

```CSS
ul {
  position: fixed;
  min-height: 100vh;
  list-style-type: none;
  margin: 0;
  padding: 0;
  color: #fff;
  text-align: center;
  width: 80px;
  background-image: linear-gradient(-130deg , #63bbac, #aad963);
  padding-right: 40px;
  z-index: 0;
}

ul .menu {
  padding: 30px 0;
}

aside ul li {
  padding: 20px 0;
  cursor: pointer;
}


aside ul li:not(.menu):hover {
  background-image: linear-gradient(-130deg , #eee, #fff);
  color: #63bbac;
}

section.main {
  z-index: 1;
  width: 70%;
  padding: 30px;
  background: #eee;
  margin-left: 80px;
  border-radius: 30px;
}
```
 

The final menu result(WIP): 
{% codepen https://codepen.io/FlorinCornea/pen/jOMxOrM %}

Hope you enjoy this one and please feel free to add suggestions and constructive criticism
How to Open Outlook Data File in Office 365
Tags: outlook, office, 365, open
Published: 2021-02-18 13:40:27

Want to know how to open Outlook data file in Office 365 account directly and safely? If yes is your answer, then you can utilize the best software Outlook to Office 365 Migration tool which is known by all professional users as well as non-technical users.

With this software, you can understand and follow the steps with unlimited Outlook PST files. The <a href="https://www.pcvare.com/outlook-file-converter/">PCVARE Outlook Converter</a> tool can be handled by all users and can be downloaded on any Windows OS including Windows 10, Windows 8.1, Windows 8, Windows 7, and so on. This software is suitable for all types of PST files and there is no need to download the MS Outlook application to use this perfect software.

<h2>Step by Step Process to Open Outlook Data in Office 365</h2>

<b>Step 1.</b> Download and then follow the installation process of the software. And after completion, open it.

<b>Step 2.</b> Select Files/Folder option will help you to choose those Outlook files which you want to migrate in Office 365 account. This software allows you to select that folder that contains many MS Outlook-based files.

<b>Step 3.</b>  Now you have to click on the Saving Options from which you need to select the desired output option that is MS Office 365.

<b>Step 4.</b> Now, you will get that screen where you can utilize the related options and then enter the required details of Office 365 account in which you want to open your Outlook PST files.

<b>Step 5.</b> Finally, start the process by pressing the Convert tab.

Through the help of these steps of this perfect software, you can understand the easiest solution for the query <a href="https://www.pcvare.com/outlook-file-converter/office-365.html">how to open Outlook data file in Office 365</a> application without any loss error. It can maintain the structure of files, but if you want to disable this feature of the software, then you can utilize the related option. This software can process unlimited PST files through single processing and can process this procedure multiple times. It can process PST files which are extracted from MS Outlook 2019, Outlook 2016, Outlook 2013, Outlook 2010, Outlook 2007, and so on.

<h2>Conclusion</h2>

After all this discussion of the Outlook to Office 365 migration process, you can easily get your complete Outlook PST files into Office 365 account. This software can be downloaded by users for free through which users can view the steps of the software and perform the process with 25 Outlook PST files. Through the help of its licensed edition of the software, you can transfer batch PST files.
The new API Gateway
Published: 2021-02-18 13:29:55

*Discovered recently and actually in alpha, the Kubernetes-sigs community is developing an "**API Gateway**".*

---

More generic, extensible, and expressive than the current Ingress. Mostly, it's role-oriented.

Today we have one element which manages the traffic to services. With the API Gateway we will have multiple layers :
- **Gateway Class**: For infra admin - This represents a kind of Gateway that can be created by the infrastructure provider.
- **Gateway**: For cluster admin - This is the load balancer element where we bind different listeners.
- **HTTP Route**: For devs - This one does the traffic redirection matching some elements like the hostname, path, header...

With these elements, we will natively have some functionalities like traffic splitting.

---

It's just a quick post to give you a taste of it. If you're interested their documentation is really good, so go check it!

### Links
* Kubernetes Gateway API doc - https://kubernetes-sigs.github.io/gateway-api/
* GitHub Repo - https://github.com/kubernetes-sigs/gateway-api

---

I hope it will help you!
Why is Laravel development a good fit for enterprise web application development?
Tags: laravel, php, app
Published: 2021-02-18 13:03:46

Today most of web & mobile app development companies are using Laravel PHP Framework for web app development. Let’s see here the futures and benefit of Laravel for good fit for enterprise web application development

.

What is Laravel?

Easing the development works like routing, caching, authentication and sessions, Laravel is a web app framework very much in demand and much in use by the developers. It is released under MIT license its source code is hosted on GitHub. Few important features of Laravel development services

include:

    Caching mechanism is built-in
    Authentication mechanism inbuilt
    Better IO with better modular packaging
    User-friendly blade tempting machine
    Can easily integrate with third-party libraries
    Quality session control one of the finest
    Fully composer based dependency manager

Let’s see here What the graphs say about the popularity of Laravel development services:

Google Trends – According to a recent study conducted in the first quarter of 2021, Laravel beats Codeigniter consistently every month since the study started.

Statistics on Stack Overflow – A study on the number of questions asked on frameworks on the platform reveals that almost 1.5% of the total questions asked were on Laravel.

Total market share – Almost 132687 websites from the USA, UK, Russia, and Brazil apart from 110 other countries globally are using Laravel.

GitHub – Laravel has around 63.6K stars and 20.3K forks.

Laravel Development Services at a glance –

    Easier to learn and put into usage and practice from easily available documents
    Faster extension of we applications and faster building
    Better modularity with better security and enhanced performance
    Much more advanced tools with much better template engine
    Multilingual app can be easily created
    Each module is thoroughly tested when working on web applications
    Much more advanced tools for carrying out migrations and important tasks
    Added advantage of reverse routing
    REST APIs with REST full controller can be easily developed
    There may be some minor bug problem which is important to resolve
    Legacy transformation is a bit problematic
    There might be a certain hassle with some upgrades

reference links:https://www.quora.com/Why-is-Laravel-development-a-good-fit-for-enterprise-web-application-development/answer/Rlogical-Techsoft-Pvt-Ltd
Daily Developer Jokes - Thursday, Feb 18, 2021
Tags: jokes, dailydeveloperjokes
Published: 2021-02-18 13:00:29

---
title: "Daily Developer Jokes - Thursday, Feb 18, 2021"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
cover_image: "https://private.xtrp.io/projects/DailyDeveloperJokes/thumbnail_generator/?date=Thursday%2C%20Feb%2018%2C%202021"
published: true
tags: #jokes, #dailydeveloperjokes
---

Generated by Daily Developer Jokes, a project by [Fred Adams](https://xtrp.io/) ([@xtrp](https://dev.to/xtrp) on DEV)

___Read about Daily Developer Jokes on [this blog post](https://xtrp.io/blog/2020/01/12/daily-jokes-bot-release/), and check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/).___
### Today's Joke is...
![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e1258b057385.png)

---
*Have a joke idea for a future post? Email ___[xtrp@xtrp.io](mailto:xtrp@xtrp.io)___ with your suggestions!*

*This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit.*

<!-- 
Joke text:
___Q:___ Why did the functions stop calling each other?

___A:___ Because they had constant arguments.
 -->
Use Heroku Dataclips to share query and do ad-hoc data exports
Tags: ruby, rails, webdev
Published: 2021-02-18 14:51:26

---
title: Use Heroku Dataclips to share query and do ad-hoc data exports
published: true
date: 2021-02-18 13:00:00 UTC
tags: ruby,rails,webdev
canonical_url: https://boringrails.com/tips/heroku-data-clips
---

[Heroku Dataclips](https://devcenter.heroku.com/articles/dataclips) enable you to create SQL queries for your Heroku Postgres databases and share the results with colleagues, third-party tools, and the public. Recipients of a dataclip can view the data in their browser and also download it in JSON and CSV formats.

![Heroku Dataclips](https://boringrails.com/images/data-clips.jpeg)

## Usage

If you are hosting your app on Heroku, you might need to run some ad-hoc queries or share a report. Instead of generating an admin page or a CSV report, you can make a Dataclip that attaches to your production database and run raw SQL queries.

The editor has autocomplete features for tables and columns and you can export the data to CSV or JSON.

Super handy for one-off SQL queries or barebones reporting and way better than having to `rails c` or dig up the raw connection string!

## Additional Resources

Heroku Blog: [A Dialog with Your Data Using the New Dataclips](https://blog.heroku.com/dialog-with-data-new-dataclips)

Heroku Blog: [Share your Heroku Postgres data with the new Dataclips](https://blog.heroku.com/new-dataclips)

* * *
[![](https://boringrails.com/images/twitter-banner.png)](https://twitter.com/_swanson)
What are the possible ways to create objects in JavaScript?
Tags: javascript, createobjectjavascri, es6classsyntax, es6objectcreationjav
Published: 2021-03-04 05:33:29

---
title: What are the possible ways to create objects in JavaScript?
published: true
date: 2021-02-18 12:57:20 UTC
tags: JavaScript,createobjectjavascri,ES6Classsyntax,es6objectcreationjav
canonical_url: https://poopcode.com/what-are-the-possible-ways-to-create-objects-in-javascript/
---

There are many ways to create objects in JavaScript as described below. 

# Object constructor
The simplest way to create an empty object is using the Object constructor. This approach is not recommended anymore.

```
var object = new Object();
```

# Object’s create method
The create method of Object creates a new object by passing the prototype object as a parameter to the create() method.

```
var object = Object.create(null);
```
# Object literal syntax
The object literal syntax is equivalent to create method when it passes null as parameter.

```
var object = {};
```

# Function constructor
Create any function and apply the new operator to create object instances.

```
function Employee(name){
   var object = {};
   object.name=name;
   object.salary=1000;
   return object;
}
var object = new Person("John");
```



# Object literal syntax
The object literal syntax is equivalent to create method when it passes null as parameter.

```
var object = {};
```



# Function constructor + prototype
This is similar to function constructor but it uses prototype for their properties and methods.

```
function myObj(){};
myObj.prototype.name = "hello";
var k = new myObj();
```

# ES6 class syntax

```
class myObject  {
  constructor(name) {
    this.name = name;
  }
}
var e = new myObject("hello");
```


#  Singleton pattern
A Singleton is an object which can only be instantiated one time. Repeated calls to its constructor return the same instance and this way one can ensure that they don’t accidentally create multiple instances.

```
var object = new function(){
   this.name = "Anand";
}
```
Formatando datas com JS puro
Tags: javascript, braziliandevs, tips
Published: 2021-05-03 15:52:53

---
title: Formatando datas com JS puro
published: true
date: 2021-02-18 12:49:00 UTC
series: Dicas Rápidas
tags: 
  - javascript
  - braziliandevs
  - tips
canonical_url: https://willianjusten.com.br/formatando-datas-com-js-puro/
---

## Introdução

Fala pessoal, eu recentemente comecei uma [série de vídeos com dicas bem rápidas](https://www.youtube.com/watch?v=1dNNL95BsJE&list=PLlAbYrWSYTiOviR_zL01FMa-kWEMDIjeO) lá no meu canal do YouTube, mas como eu também gosto de texto e também quero facilitar a busca seja pelo Google ou pelo YouTube, vou portar os vídeos para cá também. Espero que dê certo =)

## Vídeo

{% youtube 2EAs2BH3Y_4 %}

## Utilizando o poder do Intl.DateTimeFormat()

Antigamente para fazer esse tipo de formatação nós precisávamos fazer algum método próprio ou cair em soluções como o [moment.js](https://momentjs.com/). Mas agora graças ao [Intl.DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat) nós conseguimos fazer isso de forma simples, somente utilizando o JS puro.

Vamos ver abaixo alguns exemplos na prática:

```js
// Digamos que a gente tenha a seguinte data
const today = new Date(); // Thu Feb 18 2021 12:55:04 GMT-0300 (Brasilia Standard Time)

// Para converter no formato mais simples do Brasil => 18/02/2021
console.log(new Intl.DateTimeFormat('pt-BR').format(date));

// Para converter em => 18 de fev. de 2021
console.log(new Intl.DateTimeFormat('pt-BR', { day: 'numeric', month: 'short', year: 'numeric'} ).format(today));

// Para converter com mês completo => 18 de fevereiro de 2021
console.log(new Intl.DateTimeFormat('pt-BR', { day: 'numeric', month: 'long', year: 'numeric'} ).format(today));

// Para converter em inglês => February 18, 2021
console.log(new Intl.DateTimeFormat('en-US', { day: 'numeric', month: 'long', year: 'numeric'} ).format(today));

// Convertendo horas com timeZone => 12:55 AM GMT+9
console.log(new Intl.DateTimeFormat('en-US', { hour: 'numeric', minute: 'numeric', timeZone: 'Asia/Tokyo', timeZoneName: 'short'} ).format(today));
```

## Conclusão

E aí, gostou da dica? Se curtiu, não deixa de se inscrever lá no [canal do YouTube](https://www.youtube.com/WillianJustenCursos/) para essa e mais outras dicas.
Formatando número em dinheiro com JS puro
Tags: javascript, braziliandevs, tips
Published: 2021-05-03 15:58:09

---
title: Formatando número em dinheiro com JS puro
published: true
date: 2021-02-18 12:35:11 UTC
series: Dicas Rápidas
tags: 
  - javascript
  - braziliandevs
  - tips
canonical_url: https://willianjusten.com.br/formatando-numero-em-dinheiro-com-js-puro/
---

## Introdução

Fala pessoal, eu recentemente comecei uma [série de vídeos com dicas bem rápidas](https://www.youtube.com/watch?v=1dNNL95BsJE&list=PLlAbYrWSYTiOviR_zL01FMa-kWEMDIjeO) lá no meu canal do YouTube, mas como eu também gosto de texto e também quero facilitar a busca seja pelo Google ou pelo YouTube, vou portar os vídeos para cá também. Espero que dê certo =)

## Vídeo

{% youtube eOMnHsVm6vE %}

## Utilizando o poder do Intl.NumberFormat()

Antigamente para fazer esse tipo de formatação nós precisávamos fazer algum método próprio ou cair em soluções como o [currency.js](https://currency.js.org/). Mas agora graças ao [Intl.NumberFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat) nós conseguimos fazer isso de forma simples, somente utilizando o JS puro.

Vamos ver abaixo alguns exemplos na prática:

```js
// Digamos que a gente tenha o seguinte número
const money = 1234567.89;

// Para converter em Real ( retorna => R$ 1.234.567,89 )
console.log(new Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' }).format(money));

// Para converter em Euros ( retorna => 1.234.567,89 € )
console.log(new Intl.NumberFormat('de-De', { style: 'currency', currency: 'EUR' }).format(money));

// Para converter em Yenes ( retorna => ￥1,234,567 )
console.log(new Intl.NumberFormat('ja-JP', { style: 'currency', currency: 'JPY' }).format(money));
```

## Conclusão

E aí, gostou da dica? Se curtiu, não deixa de se inscrever lá no [canal do YouTube](https://www.youtube.com/WillianJustenCursos/) para essa e mais outras dicas.
Debugando e agilizando testes na React Testing Library
Tags: javascript, braziliandevs, tests
Published: 2021-05-03 15:59:11

---
title: Debugando e agilizando testes na React Testing Library
published: true
date: 2021-02-18 12:09:30 UTC
series: Dicas Rápidas
tags: 
  - javascript
  - braziliandevs
  - tests
canonical_url: https://willianjusten.com.br/debugando-e-agilizando-testes-na-react-testing-library/
---

## Introdução

Fala pessoal, eu recentemente comecei uma [série de vídeos com dicas bem rápidas](https://www.youtube.com/watch?v=1dNNL95BsJE&list=PLlAbYrWSYTiOviR_zL01FMa-kWEMDIjeO) lá no meu canal do YouTube, mas como eu também gosto de texto e também quero facilitar a busca seja pelo Google ou pelo YouTube, vou portar os vídeos para cá também. Espero que dê certo =)

## Vídeo

{% youtube lRIgpW9MiVI %}

## Método mágico

Dentro da React Testing Library existe um método chamado [screen.logTestingPlaygroundURL()](https://testing-library.com/docs/queries/about/#screenlogtestingplaygroundurl) que ao rodar seu teste, ele gera uma url, onde você pode inspecionar o seu código e descobrir as melhores queries, além de ver tudo que está renderizado, podendo inclusive descobrir se existe algum bug ou algo inesperado. Super útil né?

## Conclusão

E aí, gostou da dica? Se curtiu, não deixa de se inscrever lá no [canal do YouTube](https://www.youtube.com/WillianJustenCursos/) para essa e mais outras dicas.
How to convert jpg/jpeg (images) to pdf offline?
Tags: imagetopdf, jpgtopdf, offline
Published: 2021-02-18 11:59:31

First of all find what is your image location which you want to convert to pdf.
Let's suppose your jpg file is on desktop.
So, location of your image file will be 
C:\Users\?\Desktop
where ? is your pc name.
Now, copy and paste this location into your preferred browser's address box.
Click and open your image.
And press Ctrl+P to print.
Then, select option, save as pdf.
Set your location and save it.

Note: This will not work in phone unless you have rooted your phone.
Epic 7 Mod Apk Free Download


Tags: mobile, gamedev
Published: 2021-02-18 11:46:43

Epic 7 Mod Apk is an RPG Made by Smilegate Megaport. Smilegate Megaport has generated a few great matches which produce players very happy with these, and Epic 7 is just one.  The gameplay is quite intriguing, along with the sizeable images with tragic audio. Dio Dio create this match experience unthinkably. You may play with Epic 7 at no cost on both the i-OS along with Android apparatus.  Utilize Epic 7 Mod to engage in your match using an additional advantage and choose your gameplay to the following amount of pleasure.
Initially and foremost, the Epic 7 includes just two different kinds of match asanas.  This may aid end consumers to upgrade their gamers remembering the many different sides of the matching demand.  Gold and also Sky Stone would be the key equipment to strengthen people's efficiency.  You May Down-load Epic 7 Mod Apk No Cost out of here. If you're searching for starters of those Purpose Playing matches to play, then you then should offer an attempt and Epic 7 MOd Apk <a href="https://www.empireapk.com/epic-seven-mod-apk/">Download</a>
.  This really is among those highly-rated game titles from the consumers at an exact brief duration of the time period.  Individuals are enjoying this match a lot.
Epic 7 could be your role-playing-game that's made by Smilegate Megaport.  Smilegate Megaport has generated any really astonishing matches in which players are habituated them Epic 7 is just one.
Epic 7 has recently got significantly more than 10,000 opinions of 4stars online drama shop.  Moreover, they've gained above 100,000+ downloads at an exact brief duration of the time period. 
In the event that you're bored of playing precisely exactly the very exact matches over and once again then you definitely need to provide it a go.  This can be something brand fresh that you just simply aren't likely to become in any roleplaying match.
You're likely to want at least 4.4 and upward android variant and 48MB of storage area within your gadget.  That is everything that you require.  This match isn't even planning to provide you some lag problems or problems since it will not absorb a lot of the machine use.
Learn Vuex: State management library for Vue.js
Tags: vue, javascript, vue2, vuex
Published: 2021-02-18 11:34:44

Vuex is a state management library for managing state in large Vue.js applications. It serves as a centralized store for all the components in an application. Learn how to integrate Vuex and learn patterns to make managing state across your code more maintainable. In this course, you’ll learn to move your application state into Vuex and build a full-scale application that utilizes Vuex to its full capacity with modules and plugins!

{% youtube FIL0za5MzZA %}

# Learn Vuex with a simple eCommerce store tutorial:

* [Project Setup](https://www.youtube.com/watch?v=JDR7_AHk9D4&list=PL1TrjkMQ8UbVSDkDaLkjpeNGkblNU8rpW&index=2 "Project Setup")
* [Vuex Setup & demo API introduction](https://www.youtube.com/watch?v=h6LD5Yrt7-0&list=PL1TrjkMQ8UbVSDkDaLkjpeNGkblNU8rpW&index=3 "Vuex Setup & demo API introduction")
* [Fetch products from API | Vuex State, Actions, & Mutations ](https://www.youtube.com/watch?v=DL1wSt9Zjd4&list=PL1TrjkMQ8UbVSDkDaLkjpeNGkblNU8rpW&index=4 "Fetch products from API | Vuex State, Actions, & Mutations ")
* [Add product to cart | Vuex Getters](https://www.youtube.com/watch?v=reV1kKzht0g&list=PL1TrjkMQ8UbVSDkDaLkjpeNGkblNU8rpW&index=5 "Add product to cart | Vuex Getters")
* [Remove a product from the cart](https://www.youtube.com/watch?v=JNn47emhMKc&list=PL1TrjkMQ8UbVSDkDaLkjpeNGkblNU8rpW&index=6 "Remove a product from the cart")
* [mapState, mapGetters, mapActions in Vuex ](https://www.youtube.com/watch?v=ksDmbBqpw2A&list=PL1TrjkMQ8UbVSDkDaLkjpeNGkblNU8rpW&index=7 "mapState, mapGetters, mapActions in Vuex ")
* [A smart way to use API](https://www.youtube.com/watch?v=ckbdN5zWhsg&list=PL1TrjkMQ8UbVSDkDaLkjpeNGkblNU8rpW&index=8 "A smart way to use API")
* [Vuex modules & namespace](https://www.youtube.com/watch?v=TQ69S8h1VVU&list=PL1TrjkMQ8UbVSDkDaLkjpeNGkblNU8rpW&index=9 "Vuex modules & namespace")
* [Notification Component ](https://www.youtube.com/watch?v=blGp6vslw7s&list=PL1TrjkMQ8UbVSDkDaLkjpeNGkblNU8rpW&index=10 "Notification Component ")