teleren/devto huggingface dataset:
How to style HTML elements tags using class names in CSS?
Tags: css
Published: 2021-07-19 00:00:00

---
  title: How to style HTML elements tags using class names in CSS?
  published: true
  tags: CSS
  date: Mon Jul 19 2021 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/style-html-element-tags-using-classnames-css
  cover_image: https://melvingeorge.me/_next/static/images/main-66c101944b2a1429c9140ffe91d59f87.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/style-html-element-tags-using-classnames-css)
  
To style an HTML element tag using class names, you can use the `class` attribute on the HTML element tag and then assign the name of the class to it.

For example, consider 2 `p` (paragragh) tags with classname of `color-red` in HTML like this,

```html
<!-- Paragragh tags-->
<p class="color-red">Hello World!</p>
<p class="color-red">Hello Devs</p>
```

Now in the CSS stylesheet, we can apply the styles to `p` HTML tags by writing the name of the class.

To denote that we are using a class name in the CSS stylesheet we need to use the `.` (dot character) before writing the name of the class.

It can be done like this,

```css
/* Use the "color-red" class name in any HTML element tags
 to get the text colors as red */
.color-red {
  color: red;
}
```

This will apply a font color of `red` to the text inside the `p` (paragraph) HTML element tags.

See the above code live in [JSBin](https://jsbin.com/bepakeziye/2/edit?html,css,output).

### How is it different from using the `id` attribute?

- When using the `id` attribute to style HTML elements, we need to have a unique name for the `id`. We cannot reuse or have the same `id` defined on more than 1 HTML element tag.

- But when using a `class` attribute and class names instead of using the `id` attribute, we can reuse it more than once. In our case, we have used the class name `color-red` in both of the paragraphs tags and both of the tags got the text color change to `red`.

That's all 😃!

### Feel free to share if you found this useful 😃.

---
How can we make remote work more effective?
Tags: remotework, wfh, remotefirst
Published: 2021-07-22 08:11:45

---
title: How can we make remote work more effective?
published: true
date: 2021-07-19 00:00:00 UTC
tags: remotework,wfh,remotefirst
canonical_url: https://jhall.io/archive/2021/07/19/how-can-we-make-remote-work-more-effective/
---

Remote work is all the rage these days. For obvious reasons.

But as many companies begin to move back into the office, particularlly on an optional or partial basis, how can we continue to make remote work, or perhaps more important _partially_ remote work, effective?

In a nutshell: Even if you’re sitting next to some of your colleagues, pretend you aren’t.

Its a “Remote-First” mindset, not flexible HR policies, that make or break remote work.

I explore this topic in much greater detail in my recent article [_Is remote work doomed to failure?_](https://jhall.io/posts/remote-work-doomed-to-failure)

* * *
_If you enjoyed this message, [subscribe](https://jhall.io/daily) to <u>The Daily Commit</u> to get future messages to your inbox._
Save() mongoose não salva modificação de array
Tags: braziliandevs, javascript, mongoose
Published: 2021-07-18 23:49:56

Isso é apenas uma dica pra quem teve problemas ao modificar uma array do tipo misto usando o método save() do mongoose. 

ele não vai salvar e se você é lerdo como eu. 
Vai demorar horas e horas para achar o problema. 

Já que o mongoose não lança erro. 
Não acontece nada! 

É muito simples. 
O mongoose na hora que você utiliza o método save(). 
Ele primeiro faz uma verificação de tipos. 
E o interessante é que ele não verifica tipo de array misto. 

E eu me ferrei horas sem saber disso :) 
Iniciante no mongoose! 
um exemplo bobo e mal feito para entender
```javascript

SchemaMeu = {
pessoa:string, 
votos:array [ pessoa:string, votos:number]
} 

//isso é apenas exemplo, não copie que vai dar problema
```
então você chama 
SchemaMeu.finOne({_id})

```javascript
const dados = SchemaMeu.finOne({_id})
dados.pessoa = 'uriel'
pessoa.save()
```
E isso salva que é uma beleza no banco! 

Você deseja mais! Claro! 
```javascript
dados.votos[0] = [{pessoa:uriel, votos:33}]
pessoa.save()

```
Não salva! 
E você sofre, eu sofri... 
Não da erro. 
O meu pai o que ta acontecendo? 

Você pesquisa errado, passei o dia pesquisando 
sobre como modificar arrays no mongo e no mongoose. 

Fiz tanta coisa... Nada me levava para o salvamento... 

Então pesquisei por 
mongoose save() not Work. 

E pronto apareceu no primeiro link :( 
que é este > https://stackoverflow.com/questions/35733647/mongoose-instance-save-not-working 

O mongoose precisa de mais coisas para saber que você esta tentando salvar um array com tipo misto. 

```javascript 
dados.votos[0] = [{pessoa:'uriel', votos:33}]
dados.markModified('votos')
pessoa.save()

```
E salvou magicamente kkk. 
Basicamente o mongoose verifica os tipos dos campos. E não faz isso sem um "aviso" em arrays.... 

Li isso aqui pois fiquei curioso > 
https://sarav.co/understanding-markModified-in-mongoose

Abraços até mais!
My Best Tweets (Part 2)
Published: 2021-07-18 22:54:41

## How to... in ASL

{% twitter 1402326521692377088 %}

### Thread

{% twitter 1400213934041288713 %}

## Awesome Tweet

{% twitter 1415041834351403011 %}

{% twitter 1396790653779013634 %}

## Accessibility

{% twitter 1403589828017496065 %}

{% twitter 1403549365453475841 %}

{% twitter 1403931074791493634 %}
My Best Tweets (Part 1)
Tags: twitter, programming, computerscience
Published: 2021-07-18 22:52:45

I'm using this space to highlight all of my best tweets.  Also, you can check out my Polywork profile at  [timeline.vphreak.net](https://timeline.vphreak.net) 

## Programming Concept in ASL

{% twitter 1358810584158937094 %}

{% twitter 1359529247438565376 %}

{% twitter 1360450767300136960 %}

{% twitter 1361053430962294785 %}

## Computer Science

{% twitter 1394736118273220609 %}

{% twitter 1395860043585581060 %}

{% twitter 1412281477413302276 %}
Support over 36 programming languages running and code snippets
Published: 2021-07-18 21:59:18

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8xk9t4btlcnjusmswtke.png)
Now we(kunming.io) have support programming languages running and code snippets on the website as the following:
* PHP/HTML/CSS
* Javascript
* C Language
* C++
* Go
* Java
* Python
* Rust
* Swift
* Assembly
* ATS
* Bash
* Clojure
* Cobol
* Coffee
* Crystal
* C#
* Elixir
* Elm
* Erlang
* F#
* Groovy
* Haskell
* Julia
* Kotlin
* Lua
* Nim
* Nix
* Ocaml
* Perl
* Ruby
* Scala
* TypeScript
NextJS build ReferenceError imported module
Tags: nextjs, webpack5, externallibrary, react
Published: 2021-07-18 21:50:49

Hello,

I am working on a React component library to use with Next.js and I am having trouble getting it to run in a Next.js project.

When I try to build the project I receive an error:

`info  - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5
info  - Checking validity of types  
info  - Creating an optimized production build  
info  - Compiled successfully`

`> Build error occurred
ReferenceError: document is not defined at u (/home/userName/devProjects/techblog/node_modules/badenweiler-ui/dist/index.js:1:3835)`

I've tested the library out using Link with a React project and it works without issue. What could be causing this issue?

My next.config.js is as follows:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rc2b4r28xr334p4xr0nr.png)

I've included a screenshot of the component that imports the external node_module that is causing the problem. Any advice would be much appreciated.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tya8xeud35ln31ojc7xa.png)
NextJS With Redux
Tags: help, nextjs, redux, react
Published: 2021-07-18 20:54:39

Hey Guys,
I need a help :((
How can I use Redux With Nextjs , Is it recommended to use with the pattern of the NextJs ??
If there's any projects with NextJs and Redux can you give them to me to review the usage of the redux with next 
Thanks in advance <3
JSX ! 
Tags: javascript, webdev, react, html
Published: 2021-07-18 20:39:59

##So first of all let me tell you what actually is a *JSX* !

#### A JSX(JavaScript XML) is a syntax extension to JavaScript. It is used with React to describe what the UI should look like. JSX may remind you of a template language, but it comes with the full power of JavaScript.
Here is an Example :

```javascript
const element = <h1>Hello, world!</h1>;
```

It is pretty similar to HTML syntax. 🐱‍👤

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

## Why do we need JSX ??

React embraces the fact that rendering logic is inherently coupled with other UI logic: how events are handled, how the state changes over time, and how the data is prepared for display.

Instead of artificially separating technologies by putting *markup and logic in separate files*, React separates concerns with loosely coupled units called **“components”** that contain both. ~ *React 😎*

* This is what was said by react developers when it was first announced, in my opinion this is a very useful syntax extension to JavaScript, it has made things very easy to configure and manage in a very large code base.

* It makes it easier for us to create templates.

## The main difference between HTML and JSX 🤯

1)  HTML is a Hypertext Markup Language, the standard markup   language for documents designed to display and view on the web in a web browser.

2) JSX JSX (JavaScript + XML) is an extension of JavaScript that permits you to write down HTML directly within JavaScript

3) HTML elements have attributes where as JSX elements have props.

## Attributes in JSX 

JSX allows us to use attributes with the HTML elements just like we do with normal HTML. But instead of the normal naming convention of HTML, JSX uses camelCase convention for attributes 

*THIS WAS A BASIC PREVIEW OF WHAT IS THE MAIN USE OF JSX, IF YOU WANT TO GO IN DEPTH OF THIS TOPIC THEN CHECK OUT THE FOLLOWING BLOG*

https://reactjs.org/docs/introducing-jsx.html

*Bonus Meme 😂*
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/izunz3s5le0v266rdqvk.png)
  

**Happy Coding 🚀**
How to download google drive files with direct link?
Tags: tutorial, googledrive
Published: 2021-07-18 20:03:52

Google drive give us 15 gigabyte free space per account to upload and share our files. of course we can create another account and yes! another free 15 gigabyte. what if we can use it as of a free download host?
well fortunately we can do that. we can generate direct download link of our files, create a streaming app like Netflix or Spotify with our uploaded files on google drive and in this post, we're gonna learn how to do it.

first things first, upload a file on your drive if you have nothing already, then right-click on it and select "Get Link".

![How to download google drive files with direct link?](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c355hu3aqho6hp5wjvr6.png)

now change the "Restricted" to "Anyone with the link". now a link generated for you so you can share the file with anyone with that.


![Google drive direct link generator](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m6m96bkwzvguqxjw258h.png)

now if you open that link, you see file details and download it:

![Google drive direct link generator](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c0f5jzx3tggwxvtmhxh9.png)

but this is not a direct link, there is two way to convert this link to a direct download link:

### Simple way

using a magic online tools, watch this video:

[Free unlimited host for your website and apps | google drive direct download link](https://youtu.be/7Fh40jVId9s)

{% youtube 7Fh40jVId9s %}

### Geeky way

copy the file id in shared link, for example:

drive.google.com/file/d/**1YNZp0m3jGaaqjtw2jvC6qD7k5eGdh_RZ**/view?usp=sharing

file id of above link is :
**1YNZp0m3jGaaqjtw2jvC6qD7k5eGdh_RZ**

now put it in the end of this link:

drive.google.com/uc?export=download&id=**1YNZp0m3jGaaqjtw2jvC6qD7k5eGdh_RZ**

now if you open the link about, this file will be downloaded directly.
2 Simple ways you can truncate text using CSS
Tags: css, webdev, html
Published: 2021-07-18 19:54:17

As part of this blog lets see two ways in which you can truncate a text using CSS


### 1) Truncate a single line text using ellipsis


```
.truncate-ellipsis {
  width: 350px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}
``` 


With text-overflow , ellipsis can be applied to single line of text, provided the following conditions are met. [ For truncating after multiple lines, keep reading  😉 ].
- the element  must have 
> width , max-width or flex-basis(if using flex)
- the element must have property 
> word-wrap: nowrap  
- *overflow* property should have *value other than visible* . 
> eg: overflow: hidden;
- must have display value as *block, inline-block* or any other equivalent such as flex item etc.  display:inline will not work here.
> eg: display: inline-block;

Did you know that you can reverse the direction of the truncation using the CSS direction property? 

```
direction: rtl; //show from right to left
``` 
The direction property will truncate the text in the start of the line and show the end of the paragraph instead. 


![Truncate text single line with direction right to left](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/efla7iem8u1o556wc9xm.png)



### 2) Truncate text after multiple lines using line-clamp

```
.truncate-line-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical; 
  width: 250px;
  overflow: hidden;
}
``` 

With line-clamp text can be truncated after multiple lines, whats even more interesting is you can truncate it by specifying the line number where you want to truncate it.
eg: -webkit-line-clamp: 3; will truncate start truncating the text from the third line.

Below are the list of conditions which should be met in order to make this work.
- *display* property should be *webkit-box*
> eg: display: -webkit-box;
- webkit-line-clamp value should be specified , value should be greater than 0.
> eg: webkit-line-clamp: 3;
-   box-orient should be set to vertical 
> eg: -webkit-box-orient: vertical;
- *overflow* property should have *value hidden* . 
> eg: overflow: hidden;

**Browser Compatability:** webkit-line-clamp at the moment is not supported in IE.
For detailed information refer:  [caniuse.com](https://caniuse.com/?search=webkit-line-clamp) 

### Codepen: 
The below codepen will show you a live preview of the above two methods will look.
https://codepen.io/kpattalam/pen/jOBXvyg

{% codepen https://codepen.io/kpattalam/pen/jOBXvyg %}


### References - MDN docs
-  [webkit-line-clamp](https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp) 
- [white-space: nowrap](https://developer.mozilla.org/en-US/docs/Web/CSS/white-space)
- [ text-overflow](https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow)

Lets connect on [Twitter](https://twitter.com/KritikaPattalam) | [LinkedIn](https://www.linkedin.com/in/kritika-p-296739155/) for more web development related tips.
Show Dev: I built a personal blog for displaying mdx articles ✍🏼💤
Tags: showdev, webdev, javascript, gatsby
Published: 2021-07-18 19:45:29

<div align = "center">

<h1><a href="https://2kabhishek.github.io/mdx-blog">MDX Blog</a></h1>
<h3>A lazily named blog that hosts markdown files ✍🏼💤</h3>
</div>

![MDX Blog Screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bf8eypoikbaouijw78g0.png)

## Inspiration

I have been hearing a lot about static site generators and wanted to try them, this was a exploratory POC created for learning purposes.

## What it does

mdx-blog is a lazily named blog that hosts markdown files (surprisingly!) built using Gatsby JS.

## Prerequisites

Before you begin, ensure you have met the following requirements:

- You have installed the latest version of `node, npm`

## Getting mdx-blog

To install mdx-blog, follow these steps:

```bash
git clone https://github.com/2kabhishek/mdx-blog
cd mdx-blog
```

## Using mdx-blog

Clone this to your local and run the following to run the server and play around with the code.

```bash
# From the cloned directory
npm install # Install dependencies
gatsby develop # Run the local dev server
$EDITOR . # Open in your preferred editor, TIP: Hot Reload!
```

## How it was built

mdx-blog was built using `Gatsby JS v3`, behind the scenes it's also using `React`, `Graph QL`, `Theme UI` etc.

## Challenges faced

While building mdx-blog the main challenges were mostly conceptual, really understanding the benefits and drawbacks of static site generators.

Also faced a minor issue with MDX rendering initially.

## What I learned

While building mdx-blog I learned about:

- `Static site generators` in general
    - When to use and when not to use
- `Gatsby JS`: A great tool for quickly building static sites
    - Very extensible
    - Has great documentation
- `GraphQL` (and the GraphiQL tool)
    - Really love the specificity and usability of this
    - Side tracked a bit and learned about `Hasura` as well
- `Theme UI` didn't play much with it, but really love the idea behind centralized styling.
- `React` ;)

## What's next

Want to add syntax highlighting for code blocks.

### To-Do

- Add better MDX rendering

Hit the ⭐ button if you found this useful.

{% github 2kabhishek/mdx-blog no-readme %}
Maintenance: Update Statistics
Published: 2021-07-18 19:10:00

<sub>Photo by <a href="https://unsplash.com/@benhershey">Ben Hershey</a> on <a href="https://unsplash.com/collections/9006099/maintenance">Unsplash</a></sub>

SQL Azure let you define [maintenance windows](https://docs.microsoft.com/en-us/azure/azure-sql/database/maintenance-window).

But you can use a script to perform maintenance tasks such as [updating index](https://techcommunity.microsoft.com/t5/azure-database-support-blog/how-to-maintain-azure-sql-indexes-and-statistics/ba-p/368787). This script has a lot of option.

```SQL
DECLARE @dbname nvarchar(200) 
SELECT @dbname = DB_NAME()

EXECUTE dbo.IndexOptimize
@Databases = @dbname,
@FragmentationLow = NULL,
@FragmentationMedium = 'INDEX_REORGANIZE,INDEX_REBUILD_ONLINE',
@FragmentationHigh = 'INDEX_REBUILD_ONLINE',
@FragmentationLevel1 = 5,
@FragmentationLevel2 = 30,
@UpdateStatistics = 'ALL',
@OnlyModifiedStatistics = Y,
@Indexes = 'ALL_INDEXES',
@MinNumberOfPages = 1,
@LogToTable = 'Y'
```

This [blog](https://techcommunity.microsoft.com/t5/azure-database-support-blog/automating-azure-sql-db-index-and-statistics-maintenance-using/ba-p/368974) explains how using it with Azure Automation, to perform it recurrently.


Hope this helps !
Project ideas for MERN stack dev
Tags: help, node, react, javascript
Published: 2021-07-18 18:57:16

I have done 1 project using MERN that was a simple url shortner and other I was trynna do was to pull data with apis and show on the site.
I need some project ideas that I'd be doing with MERN stack, comment down you ideas kind people.
Thanks in advance.
How to Add media.net Advert Scripts to a React Website
Tags: javascript, react
Published: 2021-10-02 15:07:08

---
title: How to Add media.net Advert Scripts to a React Website
published: true
date: 2021-07-18 18:51:42 UTC
tags: JS,ReactJS
canonical_url: https://robertmarshall.dev/blog/add-media-net-scripts-to-react-website
---

I was recently asked to add a media.net ad script onto a clients React based website, as they were moving from one ad provider to another.

----

This article was originally posted (and is more up to date) at https://robertmarshall.dev/blog/add-media-net-scripts-to-react-website

----

My concern was media.net needs a script adding to the website, which then injects its own code. Then once this is complete it also requires individual scripts in each location that an advert is to be shown.

Media.net do not provide a React package themselves to help publishers add the script (missed opportunity I feel). So there are a number of suggested solutions online. After trying several, this is the solution I found works the best (altered to my needs).

## Solution

### Adding the main media.net JS script to the head

Firstly to add the main body script to a site we need to use Helmet from ‘react-helmet’ Like so:

```
import React from "react";
import { Helmet } from "react-helmet";
const myReactPage = () => (
  <div className="application">
    <Helmet>
      <script type="text/javascript">
        window._mNHandle = window._mNHandle || {}; window._mNHandle.queue =
        window._mNHandle.queue || []; medianet_versionId = "YOUR VERSION ID";
      </script>
      <script
        src="https://contextual.media.net/dmedianet.js?cid=YOUR CUSTOMER ID"
        async="async"
      ></script>
    </Helmet>
    {/* Rest of page */}
  </div>
);
```

(Make sure to update the script to use your IDs.)

### Adding media.net ads to each location

Then to allow us to simply re-use the Ad component throughout the site easily, make a component for where we want the media.net ads to show up.

```
import React, { useEffect } from "react";

const MediaNetAd = ({ id, size }) => {
  useEffect(() => {
    if (typeof window !== "undefined") {
      try {
        window._mNHandle.queue.push(function () {
          window._mNDetails.loadTag(id, size, id);
        });
      } catch (error) {}
    }
  }, [id, size]);

  return (
    <div className="mediaAdWrapper">
      <div id={id} />
    </div>
  );
};

export default MediaNetAd;
```

I added a wrapper around the div that holds the id. This allow me to control the spacing between the adverts and my content using CSS.

This component is then used like this:

```
const PageOfApp = () => (
  <div className="content">
    {/* Something here */}
    <MediaNetAd id="YOUR ID" size="300x250" />
    {/* Something here */}
  </div>
);
```

Depending on how much control you wanted, you could move the ID into the component so you only need to pass in the size prop.

I hope this helps!
Vite is too fast!
Tags: javascript, react, productivity
Published: 2021-07-18 18:20:18

Recently I tried [Vite](https://vitejs.dev/) and I was blown away by how fast it was. I re-checked if I started the app correctly because I couldn't belive that it started the dev server under `200ms`!

So, here's a short article on what is Vite and how can we create a new react project with it.

{% youtube x-kEyibIM1o %}

## What is Vite?

[Vite](https://vitejs.dev/) is build tool created by Evan You (creator of [Vue](https://vuejs.org/)), it provides faster developement experience with instant server start, super fast Hot Module Replacement (HMR) and out of the box support for TypeScript as well.

Vite pre-bundles dependencies using esbuild. Esbuild is written in Go and pre-bundles dependencies 10-100x faster than other JavaScript-based bundlers.

_[Blazing fast TypeScript with Webpack and ESBuild](https://dev.to/karanpratapsingh/blazing-fast-typescript-with-webpack-and-esbuild-4mhh) If you'd like to learn more about esbuild setup with Webpack 5_

## Create a new project

Let's create a new project with Vite

```
yarn create vite
```

![vite select framework](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jppg9dtz2xdio63fekwl.png)

![template select](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lk75zsr0bx1949wqotq9.png)

![vite done](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3bg4cv1egwt85cqzh60f.png)

And we have our vite project 🎉!

```
├── index.html
├── package.json
├── src
│   ├── App.css
│   ├── App.tsx
│   ├── favicon.svg
│   ├── index.css
│   ├── logo.svg
│   ├── main.tsx
│   └── vite-env.d.ts
├── tsconfig.json
└── vite.config.ts
```

Let's start our dev server

```
cd vite-project
yarn install
yarn dev
```

![vite dev](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/00g4uk2a0748lyvnmvqm.png)

## Build

Vite uses [rollup](https://rollupjs.org/) to build and optimize static assets. Let's build our project

```
yarn build
```

![vite build](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nidopbydbgrdex4fmzfw.png)

We have our static assets ready to be served!