teleren/devto huggingface dataset:
Bootstrap 5 Table
Published: 2021-03-25 10:11:18

The table is a component that allows you to aggregate a huge amount of data and present it in a clear and orderly way.

-----
## Crucial resources


Here are the resources that we have prepared to help you work with this component:

- [📄 Table tutorial & documentation](https://mdbootstrap.com/docs/standard/data/tables/) <-- start here
- [📥 10 examples of Bootstrap 5 Tables](https://mdbootstrap.com/docs/standard/data/tables/examples-and-customization/)
- [⚙️ Bootstrap Footer Generator](https://mdbootstrap.com/docs/standard/tools/builders/table/)
- [📦 Free UI Kit for Bootstrap 5](https://mdbootstrap.com/docs/standard/)
- [💽 Free hosting for any Bootstrap project (beta)](https://mdbootstrap.com/docs/standard/cli/)


-----
## Video tutorial

{% youtube iJdg9vGCnX4 %}

-----

## Additional resources

Learn web development with our **learning roadmap**:
**[:mortar_board: Start Learning](https://mdbootstrap.com/docs/standard/getting-started/)**

Join our mailing list & receive **exclusive resources** for developers
**[:gift: Get gifts](https://mdbootstrap.com/newsletter/)**

Join our private FB group for **inspiration & community experience**
**[👨‍👩‍👧‍👦 Ask to join](https://www.facebook.com/groups/682245759188413)**

**Support creation of open-source packages** with a STAR on GitHub
[![GitHub Stars](https://img.shields.io/github/stars/mdbootstrap/mdb-ui-kit?label=Star%20now&style=social)](https://github.com/mdbootstrap/mdb-ui-kit/)
Bootstrap 5 Flexbox
Published: 2021-03-25 09:47:19

Flexbox is a component where you can quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities. 

-----
## Crucial resources


Here are the resources that we have prepared to help you work with this component:

- [📄 Flexbox tutorial & documentation](https://mdbootstrap.com/docs/standard/layout/flexbox/) <-- start here
- [⚙️ Bootstrap Flexbox Generator](https://mdbootstrap.com/docs/standard/tools/builders/flexbox/)
- [📦 Free UI Kit for Bootstrap 5](https://mdbootstrap.com/docs/standard/)
- [💽 Free hosting for any Bootstrap project (beta)](https://mdbootstrap.com/docs/standard/cli/)


-----
## Video tutorial

{% youtube XI-VYE7ftNM %}

-----

## Additional resources

Learn web development with our **learning roadmap**:
**[:mortar_board: Start Learning](https://mdbootstrap.com/docs/standard/getting-started/)**

Join our mailing list & receive **exclusive resources** for developers
**[:gift: Get gifts](https://mdbootstrap.com/newsletter/)**

Join our private FB group for **inspiration & community experience**
**[👨‍👩‍👧‍👦 Ask to join](https://www.facebook.com/groups/682245759188413)**

**Support creation of open-source packages** with a STAR on GitHub
[![GitHub Stars](https://img.shields.io/github/stars/mdbootstrap/mdb-ui-kit?label=Star%20now&style=social)](https://github.com/mdbootstrap/mdb-ui-kit/)
How to debug a Github Actions' secret
Tags: github, tooling, devops
Published: 2021-03-25 09:46:13

---
title: How to debug a Github Actions' secret
description: How to debug a Github Actions' secret so it no longer shows ***.
canonical_url: https://zellwk.com/blog/debug-github-actions-secret/
tags: github, tooling, DevOps
cover_image: https://zellwk.com/images/2021/debug-github-actions-secret/separate-characters.png
published: true
---
One irritating thing about Github Actions is you can't debug secrets. If you try to debug secrets you'll get `***` in the log.

<figure role="figure">
  <img src="https://zellwk.com/images/2021/debug-github-actions-secret/run-echo.png" alt="run echo">
</figure>

This makes sense because Github is trying to help us keep the secret secret (ha!). But it doesn't help when we're trying to figure out whether there's something wrong with the secret we provided.

There's still a way to show this secret if you really want to show it. You can separate the characters with a space using the following code. The secret will now show up.

```yaml
run: echo {% raw %}${{secrets.YOUR_SECRET }}{% endraw %} | sed 's/./& /g'
```

<figure role="figure">
  <img src="https://zellwk.com/images/2021/debug-github-actions-secret/separate-characters.png" alt="separate characters with a space">
</figure>

That said, **make sure you're testing a fake secret if you use this method**, since this secret will get logged into the Github Actions panel for everyone to see.

<hr>
Thanks for reading. This article was originally posted on [my blog](https://zellwk.com/blog/debug-github-actions-secret/). Sign up for [my newsletter](https://zellwk.com) if you want more articles to help you become a better frontend developer.
Bootstrap 5 Navbar
Published: 2021-03-25 09:39:13

Navbar is a component at the top of a website. It's mostly used for website navigation, branding, and much more.

-----
## Crucial resources


Here are the resources that we have prepared to help you work with this component:

- [📄 Navbar tutorial & documentation](https://mdbootstrap.com/docs/standard/navigation/navbar/) <-- start here
- [⚙️ Bootstrap Navbar Generator](https://mdbootstrap.com/docs/standard/tools/builders/navbar/)
- [📦 Free UI Kit for Bootstrap 5](https://mdbootstrap.com/docs/standard/)
- [💽 Free hosting for any Bootstrap project (beta)](https://mdbootstrap.com/docs/standard/cli/)



-----

## Additional resources

Learn web development with our **learning roadmap**:
**[:mortar_board: Start Learning](https://mdbootstrap.com/docs/standard/getting-started/)**

Join our mailing list & receive **exclusive resources** for developers
**[:gift: Get gifts](https://mdbootstrap.com/newsletter/)**

Join our private FB group for **inspiration & community experience**
**[👨‍👩‍👧‍👦 Ask to join](https://www.facebook.com/groups/682245759188413)**

**Support creation of open-source packages** with a STAR on GitHub
[![GitHub Stars](https://img.shields.io/github/stars/mdbootstrap/mdb-ui-kit?label=Star%20now&style=social)](https://github.com/mdbootstrap/mdb-ui-kit/)
How to Setup a Data Science Project - Creating a virtual environment
Tags: python, datascience, machinelearning, tutorial
Published: 2021-03-25 09:22:23

As a data scientist, or a software engineer, or whatever you are doing, you have to ensure that your code is clean, reusable, and iterable upon. 

There are certain basic rituals you do as a data scientist before start working on your project. That is setting up the environment in which you will work on.
 
As you work on projects, you have to be careful not to install the packages you need for your project directly on your system. It is strongly advised even as you work with other people.

You should have a virtual environment for each project you want to work on.
Why? This is because of the dependencies your project will need. You don't want confusion concerning the packages your application will need. When you create a virtual environment and install the necessary packages that your project will need, the package names are listed in your requirements.txt file so that when your teammate needs to work on that project with you, s/he will be able to install only the packages and dependencies s/he needs for the project by typing this code below.  

```
pip install -r requirements.txt


```
Setting Up Your Virtual Environment 

Create the folder you want to use for the project
Open the command line terminal. copy the file path of the terminal and paste it into the command line. 
Create a virtual environment using the code below

```
python -m venv name-of-virtual-environment

``` 

Activate the virtual environment

A folder will be created in your project folder.  if you look into the folder, you will see a bunch of folders and files. copy the path of the folder and paste it into the command line

In that scripts folder, there is a file called activate.bat

we are going to run that file in order to activate the virtual environment


```
activate.bat

``` 

Now your virtual environment has been activated on your project folder, you can start installing the dependencies you will need. 

Note:
If you use a Linux environment, since you will be working on the terminal, just do this code below

```
source name-of-environment/bin/activate
``` 

It's straightforward.


I hope you learnt something new. 
Happy Coding!!! 🥳🎉
Bootstrap 5 Modals
Published: 2021-03-25 09:16:17

Modal is a responsive popup used to display extra content. That includes prompts, configurations, cookie consents, etc.

-----
## Crucial resources


Here are the resources that we have prepared to help you work with this component:

- [📄 Modal tutorial & documentation](https://mdbootstrap.com/docs/standard/components/modal/) <-- start here
- [⚙️ Bootstrap Modals Generator](https://mdbootstrap.com/docs/standard/tools/builders/modals/)
- [📦 Free UI Kit for Bootstrap 5](https://mdbootstrap.com/docs/standard/)
- [💽 Free hosting for any Bootstrap project (beta)](https://mdbootstrap.com/docs/standard/cli/)



-----

## Additional resources

Learn web development with our **learning roadmap**:
**[:mortar_board: Start Learning](https://mdbootstrap.com/docs/standard/getting-started/)**

Join our mailing list & receive **exclusive resources** for developers
**[:gift: Get gifts](https://mdbootstrap.com/newsletter/)**

Join our private FB group for **inspiration & community experience**
**[👨‍👩‍👧‍👦 Ask to join](https://www.facebook.com/groups/682245759188413)**

**Support creation of open-source packages** with a STAR on GitHub
[![GitHub Stars](https://img.shields.io/github/stars/mdbootstrap/mdb-ui-kit?label=Star%20now&style=social)](https://github.com/mdbootstrap/mdb-ui-kit/)
Bootstrap very little essentials!
Tags: html, cod
Published: 2021-03-25 09:15:57

As a child, it took a while for me to walk for a while. I dragged my feet so many times in a bid to even stand properly. 

This however was because my feet was slightly broken at birth and i had to manage till i was finally able to stand well. The excitement I felt was amazing!

I’ll relate to this story of mine later.

Learning CSS, was for me, from the very beginning really exciting. I was fascinated by the way HTML documents were easily manipulated using this language, how i was able to add colors and create boxes and shadows.. Truly mind blowing.

And then came BOOTSTRAP!

In this article I’ll be explaining what Bootstrap really is and how to use it. I believe you’ll find it as interesting as I still do.

OVERVIEW

Bootstrap is a frontend, open source, free to use, web and mobile responsive framework for building and deploying web pages.

As a frontend language, its components are designed to connect with the user directly, which simply means that it is used for designing web pages.

As an open-sourced language, millions of developers can contribute to it and modify to suit the required design.

Bootstrap is free for anyone to use, anytime… anywhere. Its resources are available.

Bootstrap was built “mobile first” which means that it is responsive across a variety of mobile screen sizes.

Bootstrap is majorly composed of already styles css files, already compiled javascript and jquery files as well as some others like the animate.css and popper.css.

These files are designed to perform specific actions either relating to a certain css feature or javascript feature.

The secret to properly using bootstrap is understanding its components and proper class names that perform specific functions.

To effectively use bootstrap in creating web pages, you can decide to use the online CDN or import and link bootstrap files in your HTML document.

Just like this.

    <!DOCTYPE html>
    <html>
    <head>
    <title>Bootstrap practise class</title>
    <link rel=”stylesheet” type=”text/css”      href=”bootstrap/css/bootstrap.css”>
    <link rel=”stylesheet” type=”text/css” href=”bootstrap/css/style.css”>
    </head>
    <body>

    <div class=”bg-success p-5">
    <p class=”text-light display-4 small text-right”>HELLO AND WELCOME TO THIS BOOTSTRAP CLASS</p>
    </div>

    <script type=”text/javascript” src=”bootstrap/js/popper.js”></script>
    <script type=”text/javascript” src=”bootstrap/js/bootstrap.jquery.js”></script>
    <script type=”text/javascript” src=”bootstrap/js/bootstrap.js”></script>

    </body>
    </html>


YOU TOO CAN USE BOOTSTRAP

It’s no longer news that bootstrap has come to stay and you too can learn to use this amazing framework!

In my next article i’ll talk about a very important component of bootstrap and how it forms the basis for everything you will likely build with bootstrap.

MY LITTLE STORY

A few decades down the lane, i still have that excitement i felt the first day i stood.

Well, Bootstrap can give you this feeling if you so desire.

Learn the basics…. Practice……Keep coding.
2021-03-24 | Daily diary again
Tags: learninpublic, beginners, webdev, career
Published: 2021-03-25 09:04:17

---
title: "2021-03-24 | Daily diary again"
description: "Summary of my day"
published: true
tags: ["LearnInPublic", "Beginners", "Webdev", "Career"]
series: "miku86 Diary"
canonical_url: "https://miku86.com/blog/2021-03-24"
---

I will restart my daily diary again.

I think I answered some of [my questions](https://miku86.com/blog/day-2020-11-18/).

My mind is interesting. Biased all the way.

My diary is a way to look back and check reality.

Is this how it was back then? Are my memories exact?

Writing is some sort of meditation. While writing this post, I let my hands go and my thoughts flow. Some of the stuff feels "weird".

Like when I wake up at night and think about stuff that matters to me. When my conscious mind is not a filter to my inner me. These moments are rare.

> Why do I even write this daily diary?

**To get in touch with myself.**
The way you should install C++ libraries and install Visual Studio on Windows 10
Tags: cpp, windows10
Published: 2021-03-25 08:56:02

In this tutorial, I will show you the way to install Visual Studio as small as minimum as possible.

# Install Visual Studio

Download [Visual Studio Installer](https://visualstudio.microsoft.com/vs/community/)

When in Visual Studio Installer GUI windows, I suggest you tick like this

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wfq8ktu2ohepdx7dm1dk.png)

It will consume your diskspace at most **4gb**.

# Install vcpkg

[vcpkg](https://github.com/Microsoft/vcpkg) is a cross-platform C++ libraries manager. It will do the hard work for you such as building, importing, setting up PATHS, ..etc.

[How to install vcpkg](https://github.com/microsoft/vcpkg#quick-start-windows)

To install vcpkg

```cmd
> git clone https://github.com/microsoft/vcpkg
> .\vcpkg\bootstrap-vcpkg.bat
```

To install the libraries for your project, run:

```cmd
> .\vcpkg\vcpkg install [packages to install]
```

You can also search for the libraries you need with the `search` subcommand:

```cmd
> .\vcpkg\vcpkg search [search term]
```

In order to use vcpkg with Visual Studio,
run the following command (may require administrator elevation):

```cmd
> .\vcpkg\vcpkg integrate install
```

**All installed libraries** are **immediately ready to be `#include`'d** and used in your project without additional configuration.

# Example

I want to setup glut, glew, glm for my Computer Graphics course.

I go to where my vcpkg is installed. Then I run

```
vcpkg.exe install freeglut glew glm
```

I wait until it is done.

```
vcpkg.exe integrate install
```
Unseen app for WhatsApp and FB messenger
Tags: android, mobile, googlecloud
Published: 2021-03-25 08:29:49

Have your friends been mad at you because they noticed you saw their message, and you didn't respond to it? Have you ever wished to use WhatsApp and Messenger without people noticing if you have read their messages?

 

Unseen for Facebook Messenger app will help you to read the messages of Facebook and another chatting apps without the sender's knowledge. If you want to hide your own privacy and want to stay Unseen or No blue tick mark on the receiving SMS, This type of No seen App is really helpful if you’re chatting with any FB groups and you don’t want them to be seen while reading their Messages. 

No Seen–Unseen for Facebook app will help you to provide a platform for private and secure communications in Facebook, WhatsApp, and Instagram. In this app, you will read the messages and the sender will not know that you have read the message. It will not let your contacts know that you have seen messages. Be like an incognito messenger, now you have the freedom to read anyone's messages without leaving last seen and blue ticks.
https://play.google.com/store/apps/details?id=com.unseen.nolastseen.hiddenchat.whatsdownload
GoLand tip of the day: clean up GoLand leftover cache and log folders
Tags: goland, go, jetbrains
Published: 2021-03-25 08:18:14

---
title: GoLand tip of the day: clean up GoLand leftover cache and log folders
published: true
date: 2021-03-25 08:15:05 UTC
authoringdate: 2018-12-08 16:10:28 UTC
tags: ["goland", "go", "jetbrains"]
canonical_url: https://blog.riff.org/2018_12_08_goland_tip_of_the_day_clean_up_goland_leftover_cache_and_log_folders
---

- [Goland](https://blog.riff.org/taxonomy/term/242)

When GoLand is upgraded from one version to the next, the deployment process adds a new set of configuration, cache, and log directories. But it does not remove the versions associated to the previous versions of the IDE, to ease rolling back to the previous version if an upgrade happens to cause an issue.

So after some time, removing these now-unused folders will regain some disk space, possibly more than 1 GB. Here are their respective locations and content on macOS:

| Role | Size indication | Configuration variable | Default location |
| --- | --- | --- | --- |
| Configuration | 3 to 10 MB | `idea.config.path` | `~/Library/Preferences/Gogland1.0` `~/Library/Preferences/Goland.(version)` |
| Plugins | 50 to 100 MB | `idea.plugins.path` | `~/Library/Application Support/Gogland1.0` `~/Library/Application Support/GoLand-EAP` `~/Library/Application Support/GoLand ~/Library/Application Support/GoLand.(version)` |
| Caches | 200 MB or (much) more | `idea.system.path` | `~/Library/Caches/Gogland1.0` `~/Library/Caches/GoLand2018.(version)` |
| Logs | 1 to 10 MB | `idea.log.path` | `~/Library/Logs/Gogland1.0` `~/Library/Logs/GoLand2018.(version)` |

On Windows and Linux, lookup the location using the name of the configuration variable in the third column.

Notice that the Toolbox app uses similar locations
Destructuring Arrays in JS
Tags: javascript, codenewbie, 100daysofcode, arrays
Published: 2021-03-25 08:11:21

A somewhat new tool in JavaScript is `destructuring`. Sounds scary, but after working with it a little it becomes less intimidating, I swear. Destructuring allows us to just take a few elements (also works with objects and you'll see it plenty in [import statements](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#import_multiple_exports_from_module)) from our array and we can even rename them. Let's have a gander.

Let's make an array of trees and destructure to grab the first and second trees, separating them from the rest of the trees:

```js
const trees = ["spruce", "elm", "maple", "aspen", "walnut"];

const [tree1, tree2, ...otherTrees] = trees;

console.log(tree2);
> 'elm'

console.log(otherTrees);
> [ 'maple', 'aspen', 'walnut' ]
```

What we're doing here is creating a new variable that holds the element at index 0, setting it equal to `tree1`, doing the same with index 1 of our trees array, then spreading the rest of the trees into a new variable called `otherTrees`.

This also works for any number of elements you want to grab. Maybe you only want to create a new variable from the first element in the array. We can do that!

```js
const trees = ["spruce", "elm", "maple", "aspen", "walnut"];

const [tree1] = trees;

console.log(tree1);
> 'spruce'
```

We can also skip elements in the array. For instance, to grab the maple tree, we can just provide a comma for each element we want to skip:

```js
const trees = ["spruce", "elm", "maple", "aspen", "walnut"];

const [,,mapleTree] = trees;

console.log(mapleTree);
> 'maple'
```

One really cool use for destructuring is when you need to swap 2 elements in an array. Say we wanted to switch the spruce and elm trees positions in the array of trees:

```js
const trees = ["spruce", "elm", "maple", "aspen", "walnut"];

[trees[0], trees[1]] = [trees[1], trees[0]];

console.log(trees);
> [ 'elm', 'spruce', 'maple', 'aspen', 'walnut' ]
```

Destructuring can be a little tricky, but the more you see and use it, the easier
it'll be to use in your own code. Be sure to take some time to explore uses in any codebase you're
working in, you might be surprised just how much it's used!

### To dive deeper into arrays, check out my course [Working with Arrays](https://speek.design/arrays) 🔥
Did you have any travel experience that you can share?
Published: 2021-03-25 07:19:49

If you did, please share

1. Where and when?
2. How did you manage all aspects including allocating the time?
3. How was your experience?
4. Is it cost you much money?
5. Any tips?

I'm an introvert and rarely going out, and I'm thinking about travel to take a break from my routine activity.

Comments below, hoping someone to give their experiences and tips on this topic. Thanks!
UI Dev Newsletter #49
Tags: html, css, javascript, webdev
Published: 2021-03-25 07:14:22

- [Official CSS Nesting – the last piece of the puzzle](https://bit.ly/3lArmw0)
Ben Frain writes about a possible upcoming CSS feature―the native nesting selectors


- [Did You Know About the :has CSS Selector?](https://bit.ly/3cRulfz)
Robin Rendle explains how the :has CSS selector will significantly impact how we write CSS in the future.


- [Show/hide password accessibility and password hints tutorial](https://bit.ly/3r8bTV2)
Nicolas Steenhout shares suggestions to improve 'show/hide password accessibility' as well as 'password hint accessibility.'


- [Conditional animations with CSS properties](https://bit.ly/3c6DUZ6)
Christian Heilmann shows how to use CSS Variables and 'prefers-reduced-motion' media query to enable/disable CSS animations.


- [Using Custom CSS to improve the web](https://bit.ly/2NBeGbI)
Bart Veneman explains how to use a browser plugin to apply custom styling to websites like Twitter and Wikipedia.


- [Overenhancement](https://bit.ly/2OSEn8k)
Michael Scharnagl explains why enhancements might not be helpful in some cases.


- [California is banning companies from using dark patterns](https://bit.ly/3lBrV8L)
Allana Akhtar reports that California announced new protections for residents seeking to protect their personal information.


- [HEAD](https://bit.ly/2QhTHeW)
Josh Buchea shares a free guide to HTML5 '<head>' elements.



Happy coding!

[Subscribe to the newsletter here!](https://bit.ly/34155z3)