teleren/devto huggingface dataset:
CSS Progress Bars!
Tags: webdev, css, javascript, html
Published: 2020-07-04 16:44:14

For a number of reasons, HTML's standard progress bars are just not usable. They look ugly on different browsers and you'll always have to look at the alternative ones such as **Bootstrap** which is good but when we're building something from the scratch and do not wanna include any frameworks, it won't be the option anymore. 

That's where you'll realize that CSS is much more than just coloring and positioning things. You can have some amazing looking progress bars with in a few minutes. As a beginner, I always try doing everything without any frameworks and this is no exception. I've created these progress bars without putting much effort, and they're responsive too. Below is the demonstration:

Here's the markup for it: 
``` HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>CSS Progress Bars</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1>CSS Progress Bars</h1>
    <div class="bar-holder">
      <div class="bar-1">20%</div>
    </div>
    <div class="bar-holder">
      <div class="bar-2">40%</div>
    </div>
    <div class="bar-holder">
      <div class="bar-3">60%</div>
    </div>
    <div class="bar-holder">
      <div class="bar-4">80%</div>
    </div>
    <div class="bar-holder">
      <div class="bar-5">100%</div>
    </div>
  </body>
</html>
```
Here's the magic:

```CSS
h1 {
  text-align: center;
  margin-top: 30vh;
  font-size: 2.3em;
}

/* INDIVIDUAL BAR HOLDER */

.bar-holder {
  width: 60%;
  background-color: rgb(231, 231, 231);
  border-radius: 20px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -ms-border-radius: 20px;
  -o-border-radius: 20px;
  margin: 0 auto;
}

/* INDIVIDUAL BAR'S STYLING, SAME GOES WITH OTHER BARS */

.bar-2 {
  width: 20%;
  background-color: rgb(22, 21, 21);
  color: #fff;
  border-radius: 20px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -ms-border-radius: 20px;
  -o-border-radius: 20px;
  text-align: center;
  margin-top: 15px;
  font-weight: 400;
}

/* HERE'S ONE WITH GRADIENT WHICH LOOKS SUPER COOL */

.bar-5 {
  width: 100%;
  color: #fff;
  border-radius: 20px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -ms-border-radius: 20px;
  -o-border-radius: 20px;
  text-align: center;
  margin-top: 20px;
  font-weight: 400;
  background-image: linear-gradient(100deg, rgb(38, 0, 255), red, yellow);
}

```
I've used `%` unit for them to be responsive, so you can use other units according to your preference. Thanks for reading. Hope you like these.
Day 8 of #30DaysOfCode | Building Restful APIs
Tags: codenewbie, node, go, challenge
Published: 2020-07-04 16:39:22

Hey everybody! Firstly, I would like to thank you for reading this post. I am thankful to all of you who is following me in my journey of becoming a better programmer and a better person.

Today is the 8th day of my #30DaysOfCode challenge. For the last 7 days, I was mostly focused on learning and writing Go code but today decided to focus my entire time in building the Journal API which I talked about in the last post. So, let's talk about the tech stack I am using to write my Restful API.

I am building the API with NodeJs and MongoDB. I am using ExpressJS and mongoose to make development easier. For dealing with user authentication, I am using bcryptyjs and jsonwebtoken. There are many other dependencies but these are the main ones.

Now, comes the golden question.
<b>How can you build a Restful API?</b>
There are many options available in the market for building Restful APIs. There are the languages that I know of which can be used to build Restful APIs:- Javascript, Python, Ruby, Php, and Golang. There are not the only options but the ones I know of. Now, let's talk about how can these languages be used to build a Restful API.
Javascript can be used in the backend with NodeJs. You can also choose to build an API with Javascript framework like ExpressJS, AdonisJs. These frameworks are really popular and have a demand in the market.
Python can be used with Flask or Django Rest framework. You can use Django Rest Framework for rapid development.
Ruby was a popular choice a few years ago and it still is a very capable language. You can use the Ruby on Rails to build an API very quickly.
Php is a very popular choice. Many developer don't like Php but it's still a very capable technology. You can use Laravel or any other Php framework to build an API.
Golang can also be used to build APIs. In fact, it has an inbuilt library for that. You can also use frameworks like Fiber or Buffalo to build your API.

All these languages are very capable for this task. But that's not the only thing that you need. You also need a database to store data. MongoDB, MySql, PostgreSQL, etc are popular choice. Choose the one that suits your need and you will never go wrong.

Alright! that's gonna be it for today and hopefully, I will see you in the next post.

Connect With Me:
Youtube: <a href="https://www.youtube.com/c/ShubhamSauravYT" target="_blank" rel="noopener noreferrer">ShubhamSauravYT</a>.
Twitter: <a href="https://www.twitter.com/hiShubhamSaurav" target="_blank" rel="noopener noreferrer">@hiShubhamSaurav</a>
Instagram: <a href="https://www.instagram.com/hiShubhamSaurav" target="_blank" rel="noopener noreferrer">@hiShubhamSaurav</a>
Facebook: <a href="https://facebook.com/hiShubhamSaurav" target="_blank" rel="noopener noreferrer">@hiShubhamSaurav</a>
Installing Composer(PHP Package Manager)
Tags: php
Published: 2020-07-04 16:31:23

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/uhh8mmhfhdmc5udiy2vb.jpg)
Follow the steps to install composer on windows or mac environment.

Before following these steps you must install PHP already as composer is dependent on PHP.

Step1: Download the installer to the current directory
```
php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
```
Step 2: Verify the installer SHA-384
```
php -r "if (hash_file('sha384', 'composer-setup.php') === 'e5325b19b381bfd88ce90a5ddb7823406b2a38cff6bb704b0acc289a09c8128d4a8ce2bbafcd1fcbdc38666422fe2806') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;"
```
Step 3: Run the installer
```
php composer-setup.php
```

Step 4: Remove the installer
```
php -r "unlink('composer-setup.php');"
```

Step 5: Make composer globally available on your machine
```
mv composer.phar /usr/local/bin/composer
```
ADB, Instalando y ejecutando APK desde el PC.
Tags: android, tutorial
Published: 2020-07-04 16:28:29

ADB es una herramienta que permite por un cable usb hacer instalacion y ejecucion de algunos comandos dentro de dispositivos Android.  En mi caso lo empleo en puntos de venta android no directamente en teléfonos o tablets Android. 

#Instalando.
Primero descargamos ADB de la pagina oficial:
[ADB Android Studio](https://developer.android.com/studio/releases/platform-tools)

#Usando
Esta aplicación es de consola, se descomprime y se ejecuta; por lo que es conveniente copiar el APK que se va a instalar directamente en la misma carpeta donde esta ADB.  

Después de tener conectado el equipo correctamente al USB de la computadora, y seleccionar la opción Transferir Archivos (Transfer Files).  Ejecutamos en consola:
```
adb devices
```
Esto nos arrojará el id del equipo conectado; si nos presenta: List of devices attached, pero sin ningun id es por que no encuentra el dispositivo, debemos verificar la conexión.

Para instalar la aplicación dentro del dispositivo android:
```
adb install -r AnyDesk.apk
```

Si intentamos instalar nuevamente la aplicación podremos ver el package name.  Esto lo necesitaremos para la instalación empleando la herramienta monkey.
```
adb shell monkey -p com.nombre.del.package -c android.intent.category.LAUNCHER 0
```
Simplemente reemplazamos el nombre del package en el anterior comando, y ejecutará nuestra aplicación dentro del dispositivo.

Hay muchas otras funcionalidades que ADB puede realizar, pero para este caso en particular era el instalar y ejecutar una aplicación desde el computador conectado por un USB.

Si esta guia te sirvio no olvides compartir, seguir para mas tutoriales, y comenta en que te ayudo.


[Saber mas, clic aqui...](https://www.linkedin.com/in/sanchezedison/)
Leetcode - Rotate Array (with JavaScript)
Published: 2020-07-04 16:23:18

Today I am going to show how to solve the Leetcode Rotate Array algorithm problem.

Here is the problem:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/0icbkor9b6gknwpimiik.png)

There are several ways to solve this problem. The most basic solution is to remove the last element from the array and place it in front of the array K number of times.

```javascript
var rotate = function(nums, k) {
    for (let i = 0; i < k; i++) {
        nums.unshift(nums.pop()) 
    }
    return nums;
};
```
But I decided to use a different approach. In this solution, I first reverse all elements of the array. Afterwards, I reverse again the first k elements and then reverse the rest of elements.

Original List                   : 1 2 3 4 5 6 7
After reversing all numbers     : 7 6 5 4 3 2 1
After reversing first k numbers : ***5 6 7*** 4 3 2 1
After revering last n-k numbers (Result) : 5 6 7 ***1 2 3 4***

1) First I create my own reverse function. 
```javascript
var rotate = function(nums, k) {

    var reverse = function(nums, start, end) {
        while (start < end) {
            var temp = nums[start];
            nums[start] = nums[end];
            nums[end] = temp;
            start ++;
            end --;
        }
    }
};
``` 
2) Then I can start reversing elements of the array.

```javascript
var rotate = function(nums, k) {
    
    var reverse = function(nums, start, end) {
        while (start < end) {
            var temp = nums[start];
            nums[start] = nums[end];
            nums[end] = temp;
            start ++;
            end --;
        }
    }
    
    k = k % nums.length
    reverse(nums, 0, nums.length - 1)
    reverse(nums, 0, k-1)
    reverse(nums, k, nums.length - 1)
};
``` 
You might be wondering why we need to do ***k = k % nums.length***

Imagine we have an array [1,2,3,4,5]. What happens when you rotate it by 5 steps? All of the elements stay in place. Essentially, no change occurred  because the size of the array is also 5. 
So rotating it by 5 (the size of the array) gives you the same result as rotating it by 0. Similarly, rotating it by 6 gives you the same result as rotating it by 1. Rotating it by 7 gives you the same result as rotating it by 2.
JustDeleteMe in the real world
Tags: bureaucracy
Published: 2020-07-04 16:21:09

Recently I was canceling some contracts with my internet provider, insurance, mobile operator, ... Unfortunately, it was not always easy and fast. I was wondering if there is some site for it. There are sites like [JustDeleteMe](https://backgroundchecks.org/justdeleteme/) with the guides on how to cancel virtual accounts, but I would like to see the same for the real contracts.

I know this is not so easy because the real world has borders and in every country, the rules are different even for the same company. But I hear from all sides how hard is to cancel some contract just because the company has some absurd rules, the intentionally complicated process, etc.

I heard that the EU plans to force organizations to not make canceling harder than it has to be. But it's not the thing today and the countries outside the EU will be probably out of luck.

Do you know such a site? Do you think it would be useful? I found https://www.cleevio.com/ but it's not the same thing I guess.
Java REGEX based scanner
Tags: java, regex, string
Published: 2020-07-04 16:17:27

I often use the java built-in `java.util.Scanner` in order to retrieve information from string streams, but what I wasn't able to do, is to extract some tokens that match a predefined regex, and then consume the character sequence till the end.
For the java built-in scanner example, the regex is used only to define the delimiters, for example the tokens are separated by blank spaces, say ` `, `\t`, or `\n`.
I could not tell it to retrieve well defined information, for example `123a4567-e89b-12d3-a456-123442445670`, especially when it is inside a text mixed with some other tokens.
All I have to do now is to provide the regex example, and I get all the matching tokens from the given text. 
# Exemple
```java
@Test
    public void testUUID() {
        final String regex = "[0-9abcdef]{8}(-[0-9abcdef]{4}){3}-[0-9abcdef]{12}";
        final String text = "uuid : 6d0a3538-9760-41ae-965d-7aad70021f81\n" +
                "uuid : d7d97fb3-3676-4109-9a94-7acc5f593ace\n" +
                "uuid : 02e87dd3-10ff-43cf-9572-bd9d151bb439\n" +
                "uuid : 632a4c31-8dfe-43a3-8f8d-15b472292cc9";
    
        final List<String> expectedUUIDs = Arrays.asList("6d0a3538-9760-41ae-965d-7aad70021f81",
                "d7d97fb3-3676-4109-9a94-7acc5f593ace",
                "02e87dd3-10ff-43cf-9572-bd9d151bb439",
                "632a4c31-8dfe-43a3-8f8d-15b472292cc9");
        
        final List<String> foundUUIDs = new ArrayList<>();
        final RegexScanner regexScanner = new RegexScanner(text, regex);
        while (regexScanner.hasNext()) {
            foundUUIDs.add(regexScanner.next());
        }
        Assert.assertArrayEquals(expectedUUIDs.toArray(), foundUUIDs.toArray());
    }
```

This way, the scanner is consumed by the while loop until the end is reached, which means all the token are read and processed.

It is possible also to provide a function that maps the found token to another object using the `next(Function<String ,R> mapper)` method. 

The code is available on github via this [link](https://github.com/BelmoMusta/regex-scanner).
Convert date formats in Google Sheets
Published: 2020-07-04 16:12:36

---
title: Convert date formats in Google Sheets
published: true
description: 
tags: 
//cover_image: https://direct_url_to_image.jpg
---

The other day I downloaded transactions from my bank account and found that the date format had changed from DD/MM/YYYY to MM/DD/YYYY. There is nothing in the CSV file that tells Google Sheets what the format is, so I was seeing 01/09/2019 as "Jan 9, 2019". 

I bet TD Bank is not even aware of this, nor the mess this will cause, but anyways, I couldn't find any builtin function in Google Sheets to fix that. Data format did not help either (I guess the formatting says how to render, not how to interpret data). 

In the end I resorted to this transformation: 

1. Import data into Google Sheets
2. Notice the dates are all messed up, and swear profusely that the data provider did this, try a few things and fail, search web, nothing really comes up except (hopefully!) this post!
3. Insert a column to the right of your date column
4. Paste the formula `=REGEXREPLACE(A1, "(\d+)/(\d+)/(\d+)", "$2/$1/$3")` and fill the remainder of the new column with that formula
5. Select the new column and copy it
6. Paste the new column over the old, BY VALUE (don't just ctrl-v, instead right-click on the top cell where you want the paste to start, and select *Paste... -> Values Only*); ignore that the new column now shows re-inverted date format
7. Remove the new column you created; the old column now contains dates correctly interpreted. 

Note: changing locale might have been an option, didn't try, but for me it wasn't really an option anyways, my current locale is exactly the way I want it.
Learning HTML? Here's some tips.
Tags: html, beginners, tips
Published: 2020-07-04 16:03:31

Many people will have nothing to do in lockdown. Bored and surprisingly tech-savvy, I got into coding. As many people do, I started with HTML, and I suggest that you do too. It's a basic framework for coding and once you get the hang of it you can do amazing things. So, here are my five top tips for starting HTML:

### 1: Use a learning platform
I used a combination of two platforms: a nifty little iOS and Web app called SoloLearn and a free HTML course on Udemy. The Udemy course really helps because there's real-life advice. However, if you want to be a bit more by-the-book, SoloLearn is your best fit.

### 2: Don't be afraid to borrow snippets
Without using code snippets from various websites, I wouldn't have grasped CSS or JavaScript at all. I mostly used `www.w3schools.com` because they're reputable, have many tutorials, and have easily customisable snippets.

### 3: When ready, use a CSS Framework
I would say the thing that speeds up HTML development the most has to be things like Bootstrap, Bulma and TailwindCSS. They add so much customisation and take away the effort of writing a full-on stylesheet. Bootstrap works best for me, combining ease of use with more complex yet powerful features.

### 4: Experiment
Experimentation and trying new things is key to learning. Test out theories in CSS, JavaScript and HTML to help learn how the system works.

### 5: Don't be afraid to stop and check
Development isn't always about knowing exactly what to put and when, or being able to recite the syntax of something in a split-second. Even the best developers have to stop and Google it every so often.
Expand disk in virtualbox Ubuntu 18 guest
Published: 2020-07-04 15:59:17

---
title: Expand disk in virtualbox Ubuntu 18 guest
published: true
description: 
tags: 
//cover_image: https://direct_url_to_image.jpg
---

I needed to expand the virtual disk drive of several Ubuntu 18.10 vm guests I had. I looked around the web a bit and found that the posts explaining how to do that involve more steps that is now necessary on Ubuntu 18. So here is what was sufficient on 3 separate VM's: 

1. Resize virtual disk in VirtualBox:
    1. Power down the VM 
    2. Go to Virtual Media Manager (VMM) 
    3. Select the disk that corresponds to your VM and resize the disk file (this is possible only on powered down VM)
    4. Start VM
2. Resize partition in guest:
    1. Install gparted: `sudo apt install gparted`
    2. Start gparted
    3. Select partition
    4. Select resize
    5. Stretch it to desired size
    6. Check the details to confirm it did what you want
    7. Make OS see the entire partition using pvresize:
        ```
        $ sudo pvresize /dev/sda1
          Physical volume "/dev/sda1" changed
          1 physical volume(s) resized / 0 physical volume(s) not resized
        ```
3. Resize the logical volume using lvresize:
    ```
    $ sudo lvresize -l +100%FREE /dev/mapper/ubuntu--vg-root
      Size of logical volume ubuntu-vg/root changed from 29.03 GiB (7432 extents) to <48.85 GiB (12505 extents).
      Logical volume ubuntu-vg/root successfully resized.
    ```
4. Resize the filesystem:
    ```
    $ sudo resize2fs /dev/mapper/ubuntu--vg-root
    $ df -h
    /dev/mapper/ubuntu--vg-root   48G   21G   26G  45% /
    ```

Two of the pages that helped a lot: 
- [How to resize an Ubuntu 18.04 LVM disk][https://vander.host/knowledgebase/operating-systems/how-to-resize-an-ubuntu-18-04-lvm-disk/]
- [Ubuntu VM in VirtualBox: How to increase the size of a disk and make small(er) exports for distribution][https://technology.amis.nl/2017/01/30/ubuntu-vm-virtualbox-increase-size-disk-make-smaller-exports-distribution/]
Telefoonnummer voor Dell printerondersteuning +32-25885504 België
Published: 2020-07-04 15:31:56

Dell Printer Ondersteuning  telefoonnummer +32-25885504 helpt de Dell-printergebruikers die technische problemen ondervinden. De staat van de printers hangt af van het onderhoud ervan en ook dat is mogelijk met de hulp van de beste en gecertificeerde technici. We hebben een van 's werelds beste technici die betrouwbare begeleiding zal bieden in de juiste context. U kunt dus voor hulp contact opnemen met ons ondersteuning team door ons gratis telefoonnummer voor <a href="https://dellprinter.klantenservicebelgium.be/">Dell Printer Ondersteuning</a> +32-25885504 te bellen en snel hulp te krijgen.
Responsive Checkout Form In Bootstrap 4
Tags: css, html, webdev, weeklyui
Published: 2020-07-04 15:17:53

The checkout form is mostly used in the eCommerce website or any selling product websites. So here we design awesome Responsive Checkout Form In Bootstrap 4 with CSS3 and HTML5.


In this form, we used a grid class of bootstrap and also used utility class like padding, margin and alignment classes. Here we modify input filed a class and also button with custom colors. For making responsive we used media quires only for custom classes like padding-left & for container widths mobile-side. For make grid column to full width, we used bootstrap col-* classes. This is a fully responsive and mobile-friendly user-interface.

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

[Get Source Code](https://w3hubs.com/responsive-checkout-form-in-bootstrap-4/)
TerminusDB Webinar - Introduciton to WOQL Library
Tags: database, tutorial, webinar, querylanguage
Published: 2020-07-04 15:00:26

---
title: TerminusDB Webinar - Introduciton to WOQL Library
published: true
description: In the newest release, WOQL Library has added to both the Javascript and Python client. Do you want to know how to use them? Do you want to know what you get out of them? This week we will have Kevin Feeney the King of WOQL to give us an introduction.
tags: database, tutorial, webinar, querylanguage
---
In the newest release, WOQL Library has added to both the Javascript and Python client. Do you want to know how to use them? Do you want to know what you get out of them? This week we will have Kevin Feeney the King of WOQL to give us an introduction.
Bad Programming Habits
Tags: tips, productivity
Published: 2020-07-04 14:41:39

1. can’t focus on one language
2. don’t have fundamentals clear
3. think you know everything
4. don’t utilize the resources
5. ignore errors
6. don’t know how to optimize the code
7. refuse to ask for help
8. freeze under pressure
9. don’t write enough comments
10. can’t accept new technologies
11. copy code from online
12. don’t plan before implementing
13. count hours
14. over engineer simple problems
15. ignore suggestion of others
16. don’t practice much
17. give up too soon
18. don’t use social media
19. don’t interact with programming community
20. don’t keep project manager updated
21. are not clear about what you’re doing
22. You pass blame to others

##see more [here](https://www.codesnail.com/bad-programming-habits-you-should-quit/) with detail
PhpStorm, But Better! - Tips & Tricks Newsletter
Tags: phpstorm, ide, php, newsletter
Published: 2020-07-04 14:39:42

There is a plethora of tips and tricks about PhpStorm that are unknown out there. People tend to set it up once and leave it as it is. Which is good, however, from time to time new features, new plugins or new settings come out and people are just unaware of them, even though they can increase productivity or improve the overall workflow.

The purpose of this newsletter is to inform you about:
* New features coming to PhpStorm
* Useful shortcodes, plugins or other neat tricks
* Links to resources (blogs, tweets etc.) from the great community that uses PhpStorm
* How to make PhpStorm look better
* **Many more!!!**

**Anyone, that it is interested in receiving such updates from time to time is welcomed to join by going to http://phpstormbutbetter.com/.**

### When will I receive the first email?
The first email (containing information about setting up PhpStorm, the importance of picking up a theme based on your surrounding and more) will be sent very soon.

### Can I be part of the newsletter?
You are more than welcomed to send your posts, tweets or other information related to PhpStorm that you want to see on the newsletter. More information can be found on the website.

### Can I partner up with you?
I'm opened to anyone who wants to help the newsletter grow. You can contact me on Twitter (@NikolayTsanov - https://twitter.com/NikolayTsanov)

**Check out an [archive](https://dev.to/ntsanov/phpstorm-but-better-1-getting-rid-of-the-distractions-51ki) of the first email from the series!**