teleren/devto huggingface dataset:
6 VScode Extensions to boost your Code
Tags: vscode, javascript
Published: 2020-06-30 14:54:50

## 6 VScode Extensions to boost your Code
### Lets get to it then 🚀

1. ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/kgseb6e4udn9qb0b5427.png) <figcaption>Live Server</figcaption> 
  - Live server is useful to create local server of your file.
  - It also gets updated automatically on save
  - No more reloading the pages 🤣
  - Link [🔗](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)


2. ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/l13z592ig0oo3zot6vvx.png)<figcaption>Auto Rename Tag</figcaption> 
  - This extension automatically renames the tag on change
  - good for working with html
  - Link [🔗](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag)


3. ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/m0w2jg8k1sl1uz7qif8s.png)<figcaption>Prettier</figcaption> 
  - Prettier is used to beautify the code, It supports variety of languages
  - To format on save go to VScode `settings` then search and enable `Format on Save`
  - Link [🔗](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)


4. ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/o5hxry21ok66248vnvhp.png)<figcaption>EsLint</figcaption> 
  - EsLint is a JavaScript linter, It identifies problems in your JavaScipt code leading to less bugs
  - To use EsLint one must have installed EsLint globally or locally, tho global install is recommended
  - for global install run  `npm install -g eslint` in your terminal
  - Link [🔗](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)

5. ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/djfzdc1uyzmy3lpuvgwf.png)<figcaption>TabNine</figcaption> 
  - TabNine is an AI Code Completions for All Languages and IDEs
  - It indexes all your files and predicts what you may write
  - Though still in infancy, it is worth a try
  - Link [🔗](https://marketplace.visualstudio.com/items?itemName=TabNine.tabnine-vscode)

6. ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/o4teoh2xop02rvijryld.png)<figcaption>Bracket Pair Colorizer 2</figcaption> 
  - This extension allows matching brackets to be identified with colours.
  - It saves time looking for the closing tag 🕶
  - Saves from syntax typos
  - Link [🔗](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2)
Introduction To Regular Expression
Tags: python, codenewbie, regex
Published: 2020-06-30 14:47:49

* Commonly known as RegEx
* RegEx is a string containing some special characters. These characters taken together forms a pattern.
* This RegEx is used to check whether that particular pattern exists in any given string or not.

**Python module *re* is imported to use Regular Expression methods**

##RegEx Functions

####1.findall
* It returns a list containing all matches or an empty list in case of no match.
* It takes two parameter i.e, RegEx and String respectively.

####2.Search
* It Search the string for one match.
* In case of match, it returns a **MATCH OBJECT** of only first match.
* In Case of no match, it returns **None**.
* It takes two parameter i.e,RegEx and String respectively.

####3.Split
* It returns a list where the string has been split at each match.
* It takes 2-3 parameters.
* First two parameters are RegEx and String respectively.
* The Third parameter is an optional parameter,known as maxsplit parameter and takes int value as input.
* This max split parameter controls maximum number of split can be performed on the String.

####4.Sub
* It looks for a match then replace it with new text string.
* It takes 3-4 parameters,4th parameter is optional.
* First 3 parameters are RegEx, newText and  string respectively.
* Fourth parameter is known as count parameter and takes int value as input.
* This count parameter controls the maximum number of replacement performed on the string.
Adding Home Assistant to my Pantahub-ONE Appliance for Raspberry Pi
Tags: raspberrypi, one, pantahub
Published: 2020-06-30 14:47:16

In this post we will talk about how easy it is to turbo charge your [Pantahub-ONE Raspberry Pi](https://one.apps.pantahub.com) with a Home IoT Management Hub by installing the awesome [Home Assistant platform](https://www.home-assistant.io) with just a few clicks.

Thanks to Pantahub you won't have to log-in, or follow long tutorials of (cryptic and buggy) commands to then get it done or not... 

Instead, with your [Pantahub-ONE Raspberry Pi](https://one.apps.pantahub.com) adding home assistant is rather straight forward. It basically boils down to COPYing an already working home assistant package from a fellow Pantahub user that has published his work to the public.

Give these 2 steps a a try:

1. Follow [instructions on how to install the ONE appliance]( https://www.pantahub.com/blog/build-your-own-wi-fi-hotspot-with-parental-controls-using-a-raspberry-pi-and-cloudflare%E2%80%99s-1-1-1-1/). Skip this if you already have a RPI running one...
2. Next simply **COPY** `homeassistant` from our app tutorials device to yours [dolly cloning app](https://highercomve.github.io/dolly/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/als04pn9lxhcvelb57ai.gif)
 * select as source 'tutorials/apps_arm32v7' and select "home-assistant"
 * select as destination the name of your device
 * press copy button
 
After a while your device will come up and you can reach Home Assistant through http://one.local:8123/.

![Pantahub-One running Homeassistant](https://dev-to-uploads.s3.amazonaws.com/i/6508quz6cq5iel3r29dm.png)

Hope you enjoyed it. If you managed to setup some home automation project running on [Pantahub-ONE Raspberry Pi](https://one.apps.pantahub.com)please reach out to me and tell your story. I would be super exciting to hear about it...
My Project is now Open Source
Tags: opensource, news
Published: 2020-06-30 14:40:43

I am very happy to announce that the Project I have been silently or not so silently mentioning here on dev.to is now Open Source.

It took some reasoning for me to decide if to publish the Source Code or not and now I feel naked. The License is AGPL, here is the [page on GitHub](https://github.com/ihucos/simple-web-analytics.com)

Please allow me to make some obligatory advertising statement about the product here and stay with us for one sentence more. [Simple Web Analytics](https://simple-web-analytics.com/) is a Free web analytics app that just makes what you would expect from such a product and nothing more or less. That was it.

Thank you for reading and Goodbye :-)
Power BI Training
Published: 2020-06-30 14:40:15

Power BI training course from Mindmajix will make you master Microsoft Power BI - No.1 BI tool. Our best online training course teaches you all important concepts like Power BI Desktop, Mobile, Power Query & Power Pivot, Data modeling, visualization, creating dashboards and reports, DAX, etc. At the end of this Power BI certification training program, you will work on two useful real-time projects. Also, our Power BI course curriculum will equip you with all the key skills that are required to clear the Microsoft Power BI Certification exam
https://mindmajix.com/power-bi-training
How to celebrate an achievement as an open source developer?
Tags: opensource, github, motivation, docker
Published: 2020-06-30 14:40:05

✏️ As an open source developer, I've maintained on GitHub a docker image since July 2017: an ["Alpine Chrome"](https://github.com/Zenika/alpine-chrome) and now the image has been pulled more than 🎉 **1 000 000 times** 🎉 on the Docker Hub.

I wrote about it recently on Dev.to 👇

{% link https://dev.to/jlandure/crafting-the-perfect-container-to-play-with-a-headless-chrome-ilp %}

# 🎯 What can I do to celebrate this achievement?

🤔 I do not know what kind of celebration I could do! It's a big achievement from my point of view.
🚀 I've started with a tweet here

{% twitter 1277969952415215617 %}

😊 _Disclaimer: I am not a designer and I've spent too much time designing the arrows to highlight the `docker pulls: 1M` information. Please do not judge it... and I've successfully added a `:rocket:` emoji on the screenshot._

# 🎉 What else?

💚 Do you have any kind of ideas or stories to share about celebrating your open source achievements?
 - Create a GIF?
 - Invite my friends to celebrate it in a restaurant?
 - _[your turn]_
Ansible Automation for Oracle RMAN / Apex Restores
Tags: oracle
Published: 2020-06-30 14:37:12



The video here shows a demonstration of how effective Ansible can be used for Oracle databases refreshes , an APEX is used to demonstrate this automation 

{% youtube 1ooQAvdhO3c %}

The Presentation for of above video is here

{% slideshare pCtt3qtAel5P3u %}
Effective Java Part 5 - Prefer dependency injection to hardwiring resource
Tags: java
Published: 2020-06-30 14:22:24

There are a ton of situations that you need to create an object that depends on the other objects. In those situations, using Singleton or static class is not appropriate. 

It's better to have the class constructor to allow to pass in the resource that needs to parameterized the constructed object instead of using setter to change its behavior that may cause the class hard to test and maintain as well as hard to track its status transformation.

When writing the constructor, let's think about what we really depend on when we create the object. And pass those dependencies in the object is somewhat called dependency injection. 

Nowadays, there are lots of framework help to do dependency injection easily so we don't have to do it manually. But the idea of them is the same. By showing the interface of what we depend on in the constructor and satisfy those dependencies when initiating them.
TrucTiep.XemChua.TV | Xem bóng đá trực tuyến HD
Tags: tructiepbongda, xemchuatv, anhemtv, chuanbongda
Published: 2020-06-30 14:18:27

Bạn sẽ không còn phải lo lắng vì trên tv không có những trận đấu đó. Hình ảnh các trận đấu với chất lượng vô cùng tốt và độ phân giải cao. Âm thanh sôi động và rõ ràng vì được sử dụng công nghệ P2P tiên tiến nhất. Đặc biệt, khi coi trên mạng nhiều người sẽ lo lắng vì mạng bị lag, giật hay tốc độ chậm. Tuy nhiên, khi xem tại Anhemtv tình trạng này sẽ không hề xuất hiện.
Các trận đấu như giải trực tiếp Ngoại hạng Anh, V-League, La Liga, Champions League (Cúp C1), World Cup, Euro, bóng đá Việt Nam, Bóng đá Anh, Bóng đá Tây Ban Nha, AFF Cup, SEA Games,Serie A, Bundesliga, FA Cup, Europa League, Vòng loại World cup, V League, World Cup, Euro, U20 thế giới…đều sẽ được chúng tôi tổng hợp đầy đủ. Không những vậy, người xem còn có thể xem lại các tính huống hấp dẫn của trận đấu.
Nhằm giúp người hâm mộ dễ dàng khi xem bóng đá trực tiếp XemChua.TV còn hỗ trợ bình luận bằng tiếng Việt. Bạn chỉ cần một chiếc điện thoại hay máy tính hoặc ipad có kết nối mạng.
Lịch thi đấu bóng đá luôn luôn được XemChua.TV cật nhật liên tục và sớm nhất. Bảng thi đấu sẽ được hiển thị trên trang chủ. Bạn có thể hoàn toàn yên tâm vì sẽ không bị bỏ lỡ một trận cầu kinh điển nào.
Postman vs Insomnia: which API testing tool do you use?
Tags: webdev, discuss, api, testing
Published: 2020-06-30 13:58:47

---
title: Postman vs Insomnia: which API testing tool do you use?
published: true
description: 
tags: webdev, discuss, API, testing
//cover_image: https://direct_url_to_image.jpg
---
API testing is a crucial part of web development, allowing us to pass a specific set of data (or not) to application and making sure the expected response is returned, without using fancy UIs.

Currently I'm using [Postman](https://www.postman.com/) for this purpose, tho I've seen more and more people using [Insomnia](https://insomnia.rest/) lately.

Which API testing tool do you prefer and why?
How to use map() reduce() and filter() ?
Tags: javascript, beginners, programming, coding
Published: 2020-06-30 13:47:50

---
title: How to use map() reduce() and filter() ?
published: true
description: javascript blog
tags: #javascript #beginners #js #programming #coding
//cover_image: https://direct_url_to_image.jpg
---

# How to use map() reduce() and filter() ?

In javascript to perform operations in the array of objects we can use **.map(),.reduce(),.filter()**.

## .map()

The map function is capable of accessing each object in an array and perform the desired operation on the each item of an array.

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

Let's look at the above example, a new array **groceryNames** is created by the map function which stores only the the names of the groceries stored in array of objects.The map function performs the callback for each value in the array and returns each new value in the resulting array.

It becomes even more easier when we use arrow function in map

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

As the name shows the **.reduce()** function reduces the values inside an array.The reduce passes the result of this callback (the accumulator) from one array element to the other.
The accumulator can be pretty much anything (integer, string, object, etc.) and must be instantiated or passed when calling .reduce()

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

After running the callback for each element of the array, reduce will return the final value of our accumulator (i.e 120).The 0 is the initial value of an accumulator,if we change value ,say 10, the resultant value would be 130.

In ES6,using arrow function
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/j4v3n5yw06epsexhe4ch.png)

## .filter

Obviously the filter operation filters the values of an array based on certain condition and stores them in a new array.

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

Using arrow function,
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/qj8mpttknp5y181itn19.png)

Now let us consider a scenario where we need to get the rate of **Non-veg** items.We can combine these methods to get the rate from the **grocery array**.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ityaohorcd0aodhaqy8g.png)
CSS Grid Tutorial | Frontend Mentor Challenge
Tags: javascript, programming, beginners, webdev
Published: 2020-06-30 13:47:15

---
title: CSS Grid Tutorial | Frontend Mentor Challenge
published: true
description: I build a challenge from Frontend Mentor
tags: #javascript #programming #beginners #webdev
---

Frontendmentor is a cool place where you can find challenges of different levels. In this free video tutorial, I'll show how I tackled one of the challenges. 😃

{% youtube mh2L7suxj6o %}
Customizable Gradient Button Using Function and Map in SCSS (CSS Loop)
Tags: codepen, html, css, showdev
Published: 2020-06-30 13:32:14

This is a customizable gradient button built in SCSS or Sass.<br>

I used CSS loop technique through the Sass map, so that I could shorten the Sass source code.<br>

The gradient is animated by just moving the x-axis background position, 100% to the left.<br>

This comes with 3 styles:<br>Normal<br>Rounded<br>Pseudo-3D<br>

But you can combine the rounded and pseudo 3D.<br>

The basic usage is like this:<
&lt;button class="btn-gradient btn-gradient-{color&gt;BUTTON&lt;/button&gt;

The available colors:
btn-gradient-blue
btn-gradient-green
btn-gradient-yellow
btn-gradient-red
btn-gradient-light
btn-gradient-dark

You may add another colour or style on the Sass map, to add another colour.

Adding 'btn-gradient' is important, for the common style of the buttons. I could add it on the CSS loop, but, it will make the compiled CSS source code longer, and also it will be harder to customize when compiled.

Usage of another style:
&lt;button class="btn-gradient btn-gradient-blue btn-gradient-round"&gt;ROUND&lt;/button&gt;
&lt;button class="btn-gradient btn-gradient-blue btn-gradient-3d"&gt;PSEUDO 3D&lt;/button&gt;
&lt;button class="btn-gradient btn-gradient-blue btn-gradient-round btn-gradient-round-ed"&gt;ROUND 3D&lt;/button&gt;

{% codepen https://codepen.io/takaneichinose/pen/LYGzqMo %}
Diversity in Tech Groups added and removed so far this year
Tags: diversityintech, diversity, irishdev
Published: 2020-06-30 13:29:47

Each year since I started the post to keep track of diversity in tech groups, the scene has changed a lot. I x-posted it here on dev.to and decided to make this a series when I see changes.

{% link whykay/diversity-in-tech-groups-in-ireland-51fk %}

And this year is no different, even with the disruption Covid-19 has caused to many in-person events (where we have now gone virtual and looking forward to in-person events again... safely, of course).

For anyone who is curious, the following changes of groups created and left so far this year:-

| Date        | Organisation  |
| ----------- | ------------- |
| 2020-06-30  | Tech Women Dublin |
| 2020–06–04  | GirlScript Ireland (Dublin) |
| 2020–02–05  | Added Coding Girls Dublin, Ladies Tech Meetup, Women in AI Ireland. |
| 2020–01–16  | Added Tech Léi and TechFoundHer |
| 2020–01–16  | Removed Moms Who Tech (Dublin) |

If I'm missing any diversity groups in Ireland & Northern Ireland, do let me know and I'll update the list.
Accordions with indicator. 
Tags: help, accordion, indicator, responsive
Published: 2020-06-30 13:25:34

Hello all. Looking for some help. 
At my work we use the eCommerce software Sellerdeck for our website. 
We currently have accordions and dynamic pricing in use for our products although we cannot work out how to have the accordion change colour or have a tick once the selection of a component/ choice  has been selected.
Here's a link to a product for example:
https://www.livinghouse.co.uk/acatalog/brushed-brass-heated-towel-rail.html
Anyone have any experience with this and know what is required to get this functionality? Thanks.
Dark Art of centering elements in CSS
Tags: css, flexbox, html
Published: 2020-06-30 13:19:11

Hello folks, this is my first blog 😊

Alright, lets dive into it.

## What will you learn 🤔

### How to magically center anything in FLEXBOX

Lets get to it, then

### First create a pen at codepen.io

### Lets add some code

- Add this to the html sections
-  `<div class="box"> <div class="sm-box"></div> </div>`
- We have created a 🙎‍♂️ parent div of class box which has 👶 child div sm-box
- and this to the css
-  `.box {height: 200px; width: 200px; border: 1px solid #c51244;}`
-  `.sm-box{ height: 100px; width: 100px; background-color: red; }`
- It will look like this 
-![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/64lkw7kxuj4xf2yuxnjc.PNG)
- this css is used for us to see 👶child div layout in 🙎‍♂️parent div

- ### We are ready now

### Flexbox basics 🚀

- In order to use flex box u must add `display: flex` to the parent div i.e `.box`
- Flex box uses two axis to layout out elements
  - main axis
  - cross axis
- flexbox uses flex direction property to define the main axis, it takes any of these value
  - `row` `row-reverse` `column` `column-reverse` 
- ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/0swpqtc8wvcxyae8fe38.png)
- the diagram above defines the direction of main axis for all different `flex-direction` properties
- by default (when not defined) flex-direction is `row`

### Alright we are done with theory lets center our 👶 child div now
- Since now u know about axis and flex-direction, we can move on to the main properties `justify-content` and `align-items`
  - `justify-content` handles the main axis
  - `align-items` handles the main axis
- to center child element we add `justify-content: center` and `align-items: center` to the parent css
- and voila!! child div is centered
- ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/8veesj4fjdy77u0zmyyc.PNG)

### Overview 
- In order to center all elements inside a parent element u can use flexbox
- Add `display: flex` to parent div 
- Add `justify-content: center` to center  the main axis
- Add `align-items: center` to center the cross axis
## Keep Coding 👨‍💻
I fell down the terminal customization rabbit hole. Ask me anything.
Published: 2020-06-30 13:14:53

It's been one of those months. I ended up totally falling head-first into the world of decking out the terminal, including taking some steps into vim. It's something I've had in my mind for a while, just never ended up taking the steps until now. I figure that there are probably others who are interested, but don't know where to start, or what to look for, so feel free: ask me anything.

For the record:
- Using Alacritty on one machine, Kitty on the other for the terminal
- Zsh for the console
- tmux on the Alacritty machine
- Neovim with coc, nerdtree, and more (still adjusting)
- spaceship command line
- nerd fonts
- and probably some more stuff I've already forgotten about.
👨‍💻Super useful keyboard shortcuts for browser
Tags: productivity
Published: 2020-06-30 13:08:54

One day during my college days, I sat near my roommate to complete the project. He was using his laptop and I was amazed at seeing his working speed. He operated things like switching tabs, opening developer tools, jumping to the address bar, etc blazingly fast without using mousepad. He memorized and practiced keyboard shortcut keys of the browser to work flawlessly. Everything looked so professional and cool as if he is the master of the machine.

I liked his skill and desired to learn it too. I learned the shortcuts and it felt like the browser dancing at my command.

The best and most useful keyboard shortcuts for browsers like Chrome, Firefox, Edge, and Opera for Windows, Mac, and Linux are as follows:

#### 1. Open the developer tools to inspect element
windows/linux: `CTRL` + `SHIFT` + `C`
mac: `Command(⌘)` + `SHIFT` + `C`


#### 2. Open a New Tab
windows/linux: `CTRL` + `T`
mac: `Command(⌘)` + `T`


#### 3. Open previously closed tab.
window/linux: `CTRL` + `SHIFT` + `T`
mac: `Command(⌘)` + `SHIFT` + `T`


#### 4. Switch between open tabs.
windows/linux: `CTRL` + `TAB`
mac: `Command(⌘)` + `TAB`


#### 5. Switch to the tab of the corresponding number from left to right
windows/linux: `CTRL` + `1` to `8`
mac: `Command(⌘)` + `1` to `8`


#### 6. Open a new browser window
windows/linux: `CTRL` + `N`
mac: `Command(⌘)` + `N`


#### 7. Open the home page
windows/linux: `ALT` + `Home`
mac: `ALT` + `Home`


#### 8. Go back    
windows/linux: `Backspace` or `ALT` + `Left Arrow`
mac: `Backspace` or `ALT` + `Left Arrow`


#### 9. Go forward
windows/linux: `ALT` + `Right Arrow`
mac: `ALT` + `Right Arrow`


#### 10. Reload the current page
windows/linux: `CTRL` + `R` or `F5`
mac: `Command(⌘)` + `R` or `F5`


#### 11. Print the web page
windows/linux: `CTRL` + `P`
mac: `Command(⌘)` + `P`


#### 12. Open a file stored on your computer(Eg: Pdf, xml, html, etc.)
windows/linux: `CTRL` + `O`
mac: `Command(⌘)` + `O`


#### 13. Open browser history
windows/linux: `CTRL` + `H`
mac: `Command(⌘)` + `H`


#### 14. Open downloads history.
windows/linux: `CTRL` + `J`
mac: `Command(⌘)` + `J`


#### 15. Add the current web page to the bookmarks
windows/linux: `CTRL` + `D`
mac: `Command(⌘)` + `D`


#### 16. Adds www and .com to the name of the website typed in the address bar
windows/linux: `CTRL` + `Enter`
mac: `Command(⌘)` + `Enter`


#### 17. Zoom-in
windows/linux: `CTRL` + `+`
mac: `Command(⌘)` + `+`


#### 18. Zoom-out
windows/linux: `CTRL + –`
mac: `Command(⌘)` + `–`


#### 19. Search the web page
windows/linux: `CTRL` + `F`
mac: `Command(⌘)` + `F`


#### 20. Jump to the address bar
windows/linux: `CTRL` + `L` or `F6` or `ALT` + `D`
mac: `Command(⌘)` + `L` or `F6` or `ALT` + `D`


#### 21. Open the web address typed in the address bar in a new tab
windows/linux: `ALT` + `Enter`
mac: `ALT` + `Enter`


#### 22. Open the Clear Browsing Data option
windows/linux: `CTRL` + `SHIFT` + `Delete`
mac: `Command(⌘)` + `SHIFT` + `Delete`



I believe that you find it useful too. Keep on memorizing and practicing to become a beast.