teleren/devto huggingface dataset:
Bootstrap 5 Shadow
Published: 2021-03-25 11:23:32

You can add or remove shadows to elements with box-shadow utilities.

-----
## Crucial resources


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

- [📄 Shadow tutorial & documentation](https://mdbootstrap.com/docs/standard/content-styles/shadows/) <-- start here
- [⚙️ Bootstrap Shadows Generator](https://mdbootstrap.com/docs/standard/tools/design/shadows/)
- [📦 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 5 Datatables
Published: 2021-03-25 11:17:33

The Datatable is a component which mix tables with advanced options like searching, sorting, and pagination.

-----
## Crucial resources


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

- [📄 Datatables tutorial & documentation](https://mdbootstrap.com/docs/standard/data/datatables/) <-- start here
- [⚙️ Bootstrap Datatable Generator](https://mdbootstrap.com/docs/standard/tools/builders/datatables/)
- [📦 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 9zHuZXMhMrA %}

-----

## 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 Alerts
Published: 2021-03-25 11:12:41

Alerts provide contextual feedback messages for typical user actions with a handful of responsible and flexible alert boxes.
-----
## Crucial resources


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

- [📄 Alerts tutorial & documentation](https://mdbootstrap.com/docs/standard/components/alerts/) <-- start here
- [⚙️ Bootstrap Alerts Generator](https://mdbootstrap.com/docs/standard/tools/builders/alerts/)
- [📦 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/)
Bullet point series - Intro 
Tags: productivity, tutorial
Published: 2021-03-25 11:10:32

Hello, 

Firstly excuse my idiocy, I published part one before the intro. 

Damn it Grant, remember the semver training we did. 

I will try keep this brief. 

I am going to try and write some bullet point series posts on a regular basis. These will be _hopefully_ short and _hopefully_ easily digestible little nuggets of knowledge. 

Stay Tuned for more code shenanigans 

Bye for now :wave:
Bootstrap 5 Icons
Published: 2021-03-25 11:09:41

You can place icons just about anywhere using the CSS Prefix "fa" and the icon's name. 

-----
## Crucial resources


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

- [📄 Icons tutorial & documentation](https://mdbootstrap.com/docs/standard/content-styles/icons/) <-- start here
- [⚙️ Bootstrap Icons Generator](https://mdbootstrap.com/docs/standard/tools/builders/icons/)
- [📦 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 F5lhPZJGycs %}

-----

## 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/)
Is item in array?
Tags: javascript, tutorial
Published: 2021-03-25 11:06:29

Task: Check if item is in array. Return `boolean`.

### for loop
```javascript
function forHas(arr, x) {
  for (let item of arr) {
    if (item === x) {
      return true;
    }
  }
  return false;
}
```

### Index is not -1
```javascript
function compareHas(arr, x) {
  return arr.indexOf(x) !== -1;
}
```

### Using includes
```javascript
function includesHas(arr, x) {
  return arr.includes(x);
}
```

### Some
```javascript
function someHas(arr, x) {
  return arr.some(item => item === x);
}
```

### Bitwise `not` indexOf
If you want to don't understand your code.
```javascript
function bitwiseHas(arr, x) {
  return !!~arr.indexOf(x);
}
```
`~-1 === 0`, then `!!0 === false`, any other number than `0` is truthy.

### With Set
```javascript
function setHas(arr, x) {
  return new Set(arr).has(x);
}
```

### * Filter 😵
```javascript
function filterHas(arr, x) {
  return !!arr.filter(item => x === item).length; // 😂
}
```

### * Reduce 🐱‍👤
```javascript
function reduceHas(arr, x) {
  return arr.reduce(function (has, item) {
    if (!has) return item === x;
    return has;
  }, false); // 💣
}
```

What piece of code are you using for that task? What is the strangest, but efficient way to do that?
Gravitee.io v3.7 is available for download.
Tags: api, apiplatform, graviteeio, flexibleapi
Published: 2021-03-25 10:57:28

📢 Gravitee.io v3.7 is available for download. 

In this new release 🚀, benefit from extended support of Kubernetes, allowing you to register your APIs directly from Kubernetes by using Gravitee's CRDs.  

Also, because your API security is one of our priorities, AM 3.7 is now integrated with alert engine, allowing platform and security domain managers to know quickly about abnormal behaviour. 💫

🆕 in API Management: 
- Global markdown template pages
- Define Group as Primary Owner of an API
- New cache features
Download here: https://www.gravitee.io/downloads/api-management

🆕 in Access Management: 
- Alert Engine integration
- Kerberos integration
- Password policy
Download here: https://www.gravitee.io/downloads/access-management
First Week of Figures is In
Tags: nutcoder, brainhacking, mentalhealth
Published: 2021-03-25 10:56:57

---
title: First Week of Figures is In
published: true
description: Personal Mental Health Measurement Project
tags: nutcoder, brainhacking, mentalhealth
//cover_image: https://direct_url_to_image.jpg
---

Mental Health issues do not go away when the Mental Health Week subsides and when the related hackathons are finished.

1) Data - which I am gathering on a daily basis 
2) Statistical insights
Perhaps in a year or so I might look into Machine learning to uncover some additional insights

If it is the form of assessment and self review _which is_ something I can sustain consistently then perhaps I could find some alleviation of symptoms or an improvement in the quality of life and personal care at least.

I am getting the idea that some figures tend to form waves in trends while others seem to be constant.
I need to look at these qualitatively.

At another experiment that I could run on this data is focusing on the high figures which I would invert to positive skills which I might be able to learn, such educational practices to build my brain and develop habits and skills would grant me several advantages for recovery or improvement in quality of life. 

If you would like to participate or know of someone who could be suffering from mental health issues then please let them know of this harbinger of project aiming to provide data for machine learning in order to get insights into our daily habits, thought patterns, heart status and personal PANSS assessments, etc.
please let me know!
Is It Possible to Convert EDB files to PST format with free Tool
Tags: edbtopstconverter, convertedbtopst, edbfileformat, pstfileformat
Published: 2021-03-25 10:56:00

Yes, there are many ways to convert an EDB file to a PST format. Some of them are free, while others need payment. To convert an EDB file to a PST file, you should first use a free tool. If you were successful in converting EDB files, you won't need to invest in paid software. 

However, if you struggle, then using third party to migrate EDB files to PST format is a better choice. I highly suggest you to use this EDB to PST Conversion Tool, that can instantly convert all EDB emails to PST format, including attachments.

I was also searching for the perfect way to convert an EDB file to a PST file before using this software, and one of my technical friends suggested this safe and secure tool.  

It can convert single or multiple EDB files to PST files in a single process. It offers a free trial edition that allows you to test the software's functionality and functions. 

Follow this link http://www.edbtopstconverter.osttopstconverter-tool.com/ to get more info about this Tool
Auto Deployment Of Website With Github and Hostinger
Tags: devops
Published: 2021-03-25 10:55:49

Creating a website? You might know the hassle of zipping the build folder, uploading via FTP to Web Server, extracting the folder. And repeating it every time whenever you made changes to the website. It's a time-consuming process. Isn't? So let's make it Automated.

> Note: For Automated deployment, As webserver here, I'm using Hostinger, and Github to host my code. Let's begin.

First of all, create a public repository on _**Github**_, make it _**public**_. And upload website content to it.

After that Login to your Hostinger account. Go to the _**Hosting tab**_, Choose the website in which you want to perform the automatic deployment. Click the _**Manage**_ button.

Scroll down to _**Advanced Section**_ and choose _**Git**_.

Enter the details in the _**Create a New Repository section**_. what details did you ask? 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fc2wvg8uicoixph11cko.png)
Well on the _**Repository**_ field put the git repository link which we created earlier. On _**Branch**_ put the name of the branch. By default, it was used to be the master branch. but now Github using _**main**_ as the default branch. if you not sure about your branch name open the GitHub repository and check the branch name. And the _**Directory**_ field, leave it blanks. So your website will be deployed to the root folder (`/public_html`). Now click _**Create**_ button.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3uwi9i9gt3gl9z70vfxv.png)
On successful creation, you will able to see the information on the _**Manage repository**_.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7d6nk1d66dezhb8tvque.png)
After that Click the _**Auto Deployment**_ button. Once you clicked a window will pop up on the screen. You might be wondering what it this, well we need to set up a webhook in the Github repository. 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y0ir7xbubabmamif54fx.png)

The popup windows have the `webhook URL`. Copy the _**webhook URL**_ from that window, and open the _**Github**_ repository. Go to the _**setting**_ tab of the repository, Select **Webhooks** in the left side panel. Click on _**Add Webhook**_. 

Or you can simply click the 2nd URL on that popup window which says _**Set up webhook on Github**_. 

It will directly bring you to the webhook page on the GitHub repository. 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7e0026shn47qnp2h9tbm.png)
Once you there, paste the `webhook URL` which you copied earlier into the _**Payload URL**_ field on Github, and the _**content-type**_: `x-www-form-urlencoded`. 

Select `“Just the push event”` in the _**Which events would you like to trigger this webhook?**_ section. Select _**“Active”**_. And click _**Add Webhook**_. 

That’s all folks. Automatic deployment of the website is complete.
Adding Tailwindcss to an Angular 11.2+ project
Tags: angular, tailwindcss
Published: 2021-03-25 10:51:37

Angular CLI recently, as of version 11.2, added out of the box support for Tailwindcss. Adding Tailwindcss used to be quite hard but is now a breeze and it is an absolute pleasure to work with Tailwindcss.

## Adding the necessary packages and basic setup
```bash
npm install tailwindcss postcss autoprefixer
// or ...
yarn add tailwindcss postcss autoprefixer

// Update with file below
// You can also do npx tailwindcss init, 
// but be sure to update the file
touch tailwind.config.js

// Update with file below
touch postcss.config.js
```

## Configuring tailwind and postcss
This is a basic setup that adds `important!` to all styles, this is not necessary for all projects, but I found it to be very helpful while working alongside Angular Material, which has quite a few very specific styles.

This also sets up purging of unused styles when built for production, otherwise you would end with very big style files.

```javascript
// tailwind.config.js
module.exports = {
  important: true,
  purge: {
    enabled: process.env.NODE_ENV === "production",
    content: ["./src/**/*.{html,ts}"],
  },
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};
```

This is a just bare bones config for postcss.
```javascript
// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};
```

## Add tailwind styles to styles.css
Next step is to add the necessary imports to your styles.scss file.

```scss
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
```

## Build for production
Finally, when you build for production, you have to use this line so postcss will purge the unused styles.

```bash
NODE_ENV=production ng build --prod
```

## Final thoughts
I wasn't sold on the Tailwindcss approach when it first came out, but after trying it in a few projects now I absolutely love it, it really is a breath of fresh air. I'm not a CSS expert by any stretch of the imagination and Tailwindcss helps me a lot in my work.

You can find a code only version of this at https://gitlab.com/-/snippets/2095311
Adding tracking to your Nuxt site with GA4
Tags: nuxt, tracking, analytics, javascript
Published: 2021-03-25 10:49:18

I've been wanting to see how my site did in analytics for a while now but never got to actually installing and preparing it. Now that I finally attached a new domain ([elian.codes](<https://elian.codes>)) and fixed my DNS for [elianvancutsem.com](<https://elianvancutsem.com>). I put in the works to add google analytics to my site. (blog post coming up about how I did that soon...)

Here is a little guide on how I did it and integrated it with [Nuxt](https://nuxtjs.org)

## Using nuxtjs/google-analytics

The [nuxtjs/google-analytics](<https://google-analytics.nuxtjs.org/>) module is a [Nuxt Community](<https://github.com/nuxt-community>) maintained module for Nuxt. It depends on the [vue-analytics](<https://github.com/MatteoGabriele/vue-analytics>) package and optimizes it for Nuxt. It's very easy to install and configure, but it doesn't support GA4 (yet).

Install the module with:

```bash
yarn add --dev @nuxtjs/google-analytics
```

and configure the `nuxt.config.js` by adding the module to the `buildModules`

```js
{
  buildModules: [
    '@nuxtjs/google-analytics'
  ],
}
```

Note that if you're using Nuxt `< 2.9` you need to add it to the `modules` instead of `buildModules`.

Then simply add a new section `googleAnalytics` to your `nuxt.config.js`

```js
export default {
  googleAnalytics: {
    id: 'UA-XXX-X'
  }
}
```

If your source code is private you can add it right in the config, but it's good practice to add it as an environment variable. more about that [here](<#using-an-environment-variable>).

### other options and configurations

There are a lot of options available to customize your config to your need and you can read more about that on [the documentation](<https://google-analytics.nuxtjs.org/options/>).

## Using vue-gtag

If you need or want to use the newer GA4, you'll have to wait a bit longer until nuxtjs/google-analytics supports it, or use a little workaround.

You can install [vue-gtag](<https://www.npmjs.com/package/vue-gtag>) as a package and configure Nuxt to use it as a plugin.

You can install vue-gtag via cli using:

```bash
yarn add vue-gtag
```

then make a new file in the `plugins` directory called `gtag.js`.

then add the following to the `gtag.js` file:

```js
import Vue from 'vue'
import VueGtag from 'vue-gtag'

Vue.use(VueGtag, {
  config: { id: 'G-XXXXXXXXXX' }
})
```

Next, configure Nuxt to use the plugin by adding this to your `nuxt.config.js` file:

```js
{
  plugins: ['~/plugins/gtag.js']
}
```

That should be it!

## Using an environment variable

It's good practice to don't expose your Google GTag. So you can add it as an environment. To do this you can just add `process.env.GOOGLE_ANALITICS_ID` instead of the tag in your config.

In the case of nuxtjs/google-analytics:

```js
googleAnalytics: {
  id: process.env.GOOGLE_ANALITICS_ID
}
```

and in the case of vue-gtag:

```js
Vue.use(VueGtag, {
  config: { id: process.env.GOOGLE_ANALITICS_ID }
})
```

Now you can add the environment variable in your CI/CD or build config.

Hope you got something useful out of this!
jetbus 3 shd uhd hdd ets2 indoensia
Published: 2021-03-25 10:42:11

Berjumpa lagi di artikel Mod ets2 indonesia. Masih dari dunia games euro truck simulator 2, salah satu pc game pc dari scs sofware yang banyak di negara kita indonesia. kali ini admin ingin mengajak melihat mod bus dari karoseri Adiputro Jetbus 3 varian shd, Uhd, Hdd yang dapat saudara download secara / geratis di situs bit.ly/2NPvI5Z


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a7tnj6gh93skn8umc4m1.jpg)
Semakin hari game ets2 ini semakin maju dan selalu update versi nya yang lebih baik, tidak saja di Indonesia tapi juga di negara luar banyak penggemar nya seperti jetbus 3 ini sudah banyak diposting pada website dalam dan  luar negeri
Readmore : https://bit.ly/2NPvI5Z
7 Best Project Management Softwares 2021
Tags: projectmanagement, software
Published: 2021-03-25 10:32:34

Businesses- doesn’t matter how large or small, simultaneously handle multiple projects, tasks and people at one time is a difficult task.  Thus, this is why project management softwares are really required. These Project Management softwares appear to be a solution in getting everything systematically arranged while drafting and implementing projects, in a way that’s reliable because of its immense accuracy; profitable and predictable. 
Read more
https://eyestech.in/apps-and-services/project-management-softwares-2021/
Bootstrap 5 Breakpoints
Tags: bootstrap, javascript, webdev, html
Published: 2021-03-25 10:14:31

## What are Bootstrap Breakpoints?
Breakpoints are customizable widths that determine how your responsive layout behaves across device or viewport sizes in Bootstrap.

----

## How to use Breakpoints in Bootstrap 5?

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

1. Read [📄  Breakpoints tutorial & documentation](https://mdbootstrap.com/docs/standard/layout/breakpoints/) <-- start here
2. In to get the most out of your project, you should also get acquainted with other Layout options related to Breakpoints. See the section below to find the list of them.
3. You can use predesigned Breakpoints in [📥 Starter Bootstrap 5 templates](https://mdbootstrap.com/freebies/)
4. Templates are a part of [📦 Free UI Kit for Bootstrap 5](https://mdbootstrap.com/docs/standard/)
5. After finishing the project you can publish it with CLI in order to receive [💽 Free hosting (beta)](https://mdbootstrap.com/docs/standard/cli/)

-----

## Related Layout options & features
- [Grid System](https://mdbootstrap.com/docs/standard/layout/grid/)
- [Containers](https://mdbootstrap.com/docs/standard/layout/containers/)
- [Columns](https://mdbootstrap.com/docs/standard/layout/columns/)
- [Display](https://mdbootstrap.com/docs/standard/layout/display/)
- [Flexbox](https://mdbootstrap.com/docs/standard/layout/flexbox/)
- [Float](https://mdbootstrap.com/docs/standard/layout/float/)
- [Gutters](https://mdbootstrap.com/docs/standard/layout/gutters/)
- [Horizontal alignment](https://mdbootstrap.com/docs/standard/layout/horizontal-alignment/)
- [Utilities for layout](https://mdbootstrap.com/docs/standard/layout/utilities-for-layout/)
- [Vertical alignment](https://mdbootstrap.com/docs/standard/layout/vertical-alignment/)
- [Z-index](https://mdbootstrap.com/docs/standard/layout/z-index/)

-----

## Learn Bootstrap 5 in 1.5H

{% youtube c9B4TPnak1A %}

-----

## 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/)