teleren/devto huggingface dataset:
4 Must-Have VSCode Extensions for TailwindCSS
Tags: css, vscode, webdev, productivity
Published: 2021-02-17 05:25:39

---
canonical_url: https://blog.katherinempeterson.com/4-must-have-vscode-extensions-for-tailwindcss
---
[TailwindCSS](https://tailwindcss.com/) is a utility-first CSS framework that has been rapidly gaining popularity. One of its many advantages is how quickly developers can implement beautiful designs. The following VSCode extensions can make you even more productive with Tailwind. 


## 1. [Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss)
![Tailwind CSS IntelliSense Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/72o5a2jstro8p5re4y7y.png) 
This extension provides autocomplete, syntax highlighting, and linting for Tailwind classes. With this extension, there is no need to memorize the exact spelling of all the utility classes or to spend the time typing them out. 

## 2. [Tailwind CSS Explorer](https://marketplace.visualstudio.com/items?itemName=PeterMekhaeil.vscode-tailwindcss-explorer)
![Tailwind CSS Explorer image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xipdwcnvaq9jxzau9en3.png)
Get a full list of all of the Tailwind classes available in your project in the sidebar of your editor. Click on any of the classes to instantly insert it into your code. 

## 3. [Tailwind Docs](https://marketplace.visualstudio.com/items?itemName=austenc.tailwind-docs)
![Tailwind Docs demo gift](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kngjvsg1ygufgxblnc77.gif)
Docs are a developer's best friend, and Tailwind has some great ones. Easily search for anything in the Tailwind docs directly from VSCode, and it will open to the exact page of the docs you need. 

## 4. [Headwind](https://marketplace.visualstudio.com/items?itemName=heybourn.headwind)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pyb3ax218fecid17w1lm.gif)
Headwind is an opinionated class sorter that automatically organizes your class names on save. We all know utility frameworks come with long lists of class names. This extension will keep your sorting consistent and automatically remove any accidental duplicate class names. 

---

That's all! For my favorite non-Tailwind VSCode extensions, check out my post: [My 12 Favorite VSCode Extensions](https://dev.to/katherinecodes/my-12-favorite-vscode-extensions-cld)

Let me know in the comments or on Twitter if there are any others that have helped you out.

https://twitter.com/katherinecodes
How to Import Markdown Files in Vue CLI + TypeScript Projects
Tags: webpack, vue, markdown, typescript
Published: 2021-02-17 04:55:34


Recently, I came across the need to import a markdown file in a Vue component and realized that the internet is full of confusing solutions. Fiddled around for a few hours and found out that it's really quite simple.

Here's a little bit about the setup I have.

- Vue CLI
- TypeScript

I am also using the [Vue Markdown](https://www.npmjs.com/package/vue-markdown) component. What I wanted to do is

- Write the content in a `.md` file.
- Import it in my component.
- Pass it to Vue Markdown as the `source` prop.

So I imported the markdown file in my component and the first thing I saw is the squiggly telling me this.

```
TS2307: Cannot find module './query-guide.md'.
```

That's because TypeScript doesn't know where to find this module or _is it even a module_. To fix this, I went to `shims-vue.d.ts` and declared any markdown file as a module.

```ts
declare module "*.md";
```

...and the squiggly was gone.

> **NOTE**: You can do this do any kind of file. In my project I also declare all `scss` files to be module so I can import them directly in my component. [Read more on why I do that](https://praveenpuglia.com/how-to-use-sass-variables-in-javascript-in-a-webpack-project/).

Once that's sorted, I came across this.

```
Module parse failed: Unexpected character '#' (1:0)

You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
```

Which means that Webpack has no idea about how to load a markdown file as a module. Quick googling pointed out that I need to use [raw-loader](https://github.com/webpack-contrib/raw-loader) to get the content of the file as is.

> _A loader for webpack that allows importing files as a String._

I installed `raw-loader` as dev dependency.
```sh
yarn add -D raw-loader
```

Next I needed to direct webpack to use it via `vue.config.js`. Here's what that configuration looks like.

```js
module.exports = {
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.md$/i,
          loader: "raw-loader",
        },
      ],
    },
  },
};
```

That did it for me. I was able to import markdown file in my component just like any other module and use it.

```ts
import guideContent from "./query-guide.md";
```

Hope this helps you save a lot of time fiddling around.

<small>Originally posted on [praveenpuglia.com](https://praveenpuglia.com/how-to-import-markdown-files-in-vue-cli-typescript-project/).</small>
34 JavaScript Optimization Techniques to Know in 2021
Tags: javascript, beginners, codenewbie, webdev
Published: 2021-02-17 04:50:58

##Optimize your JavaScript code using modern shorthand techniques, tips, and tricks
The life of a developer is always learning new things and keeping up with the changes shouldn't be harder than it already is, and my motive is to introduce all the JavaScript best practices such as shorthand and features which we must know as a frontend developer to make our life easier in 2021.

**1. If with multiple conditions**
We can store multiple values in the array and we can use the array includes method.
```//longhand
if (x === 'abc' || x === 'def' || x === 'ghi' || x ==='jkl') {
    //logic
}
//shorthand
if (['abc', 'def', 'ghi', 'jkl'].includes(x)) {
   //logic
}
```

**2. If true … else Shorthand**
This is a greater short cut for when we have if-else conditions that do not contain bigger logics inside. We can simply use the ternary operators to achieve this shorthand.
```
// Longhand
let test: boolean;
if (x > 100) {
    test = true;
} else {
    test = false;
}
// Shorthand
let test = (x > 10) ? true : false;
//or we can use directly
let test = x > 10;
console.log(test);
```
When we have nested conditions we can go this way.
```
let x = 300,
test2 = (x > 100) ? 'greater 100' : (x < 50) ? 'less 50' : 'between 50 and 100';
console.log(test2); // "greater than 100"
```

**3. Declaring variables**
When we want to declare the two variables which have the common value or common type we can use this shorthand.
```
//Longhand 
let test1;
let test2 = 1;
//Shorthand 
let test1, test2 = 1;
```

**4. Null, Undefined, Empty Checks**
When we do create new variables sometimes we want to check if the variable we are referencing for its value is not null or undefined. JavaScript does have a really good shorthand to achieve these functions.
```
// Longhand
if (test1 !== null || test1 !== undefined || test1 !== '') {
    let test2 = test1;
}
// Shorthand
let test2 = test1 || '';
```

**5. Null Value checks and Assigning Default Value**
```
let test1 = null,
    test2 = test1 || '';
console.log("null check", test2); // output will be ""
```

**6. Undefined Value checks and Assigning Default Value**
```
let test1 = undefined,
    test2 = test1 || '';
console.log("undefined check", test2); // output will be ""
Normal Value checks
let test1 = 'test',
    test2 = test1 || '';
console.log(test2); // output: 'test'
```
(BONUS: Now we can use ?? operator for topic 4,5 and 6)
**Nullish coalescing Operator**
The nullish coalescing Operator ?? is returned the right-hand side value if the left-hand side is null or undefined. By default, it will return the left-side value.
```
const test= null ?? 'default';
console.log(test);
// expected output: "default"const test1 = 0 ?? 2;
console.log(test1);
// expected output: 0
```
##[Continue reading »](https://medium.com/javascript-in-plain-english/34-javascript-optimization-techniques-to-know-in-2021-d561afdf73c3)
Project 47 of 100 - Year Progress Bar with React
Tags: react, javascript, 100daysofcode
Published: 2021-02-17 04:49:09

*Hey! I'm on a mission to make 100 React.js projects ending March 31st. Please follow my dev.to profile or my [twitter](https://www.twitter.com/jwhubert91) for updates and feel free to reach out if you have questions. Thanks for your support!*

Link to the deployed project: [Link](https://100-react-projects-day-47-year-progress-bar.netlify.app/)
Link to the repo: [github](https://github.com/jwhubert91/100daysofreact/tree/master/day-47-year-progress-bar)

So just a forewarning... I'm going to disappoint you. Sorry about not providing the content you likely crave from a #100daysofcode blog.

However even tiny projects can become real timesucks when you add the time to configure and deploy the project then write a blog post on it.

Since I've been on my grind recently and have been thinking about getting certain things done before the end of 2021 I wanted to publish a year progress bar built in React. Progress bars are one of those things that everyone builds eventually (or at least implements via a library) and it's actually a nice exercise in native Javascript Date functions.

I modified the tutorial [here](https://www.w3resource.com/javascript-exercises/javascript-basic-exercise-9.php) to calculate the days remaining until December 31 2021 and provide that info for the rest of the application to read within the `App` component. Then I followed [this tutorial](https://dev.to/ramonak/react-how-to-create-a-custom-progress-bar-component-in-5-minutes-2lcl) from an amazing Dev.to blogger I am following (and you should too!) to create the progress bar component.

```
  const today = new Date();
  const newYear = new Date(today.getFullYear(), 11, 31);
  if (today.getMonth() == 11 && today.getDate() > 31) {
    newYear.setFullYear(newYear.getFullYear() + 1)
  }
  const one_day = 1000 * 60 * 60 * 24;
  const remainingDays = Math.ceil((newYear.getTime()-today.getTime())/(one_day));
  const yearCompleted = 365 / (365-remainingDays);
  const readout = (`${remainingDays} days left until 2022!`);
...
<div className='readout-container'>{readout}</div>
<ProgressBar bgcolor={'green'} completed={yearCompleted} />
```

Instead of using inline styles I mostly switched everything over to CSS, and simply fed the requested props into the ProgressBar component.

```
import React from 'react'

function ProgressBar(props) {
  const {bgcolor,completed} = props;

  const fillerStyles = {
    width: `${completed}%`,
    backgroundColor: bgcolor,
    transition: 'width 1s ease-in-out'
  }

  return (
    <div className='progress-bar-container'>
      <div className='progress-filler' style={fillerStyles}>
        <span className='progress-label'>{`${completed}%`}</span>
      </div>
    </div>
  )
}

export default ProgressBar
```

That's it! Hope you enjoy and remember to give [Kate](https://dev.to/ramonak) from dev.to a follow! 

Like the site says, if you enjoy these kinds of projects you can find me on [the twitters](https://twitter.com/jwhubert91).
Best Love Spell That Works Really Instantly
Published: 2021-02-17 04:39:58

The significance of affection spellings in human existence is a great deal and truly on the off chance that you need to keep an eye out the superb impacts with assistance of adoration spelling then you are watching it effectively however need to pick an expert crystal gazer once. Indeed, even you could be getting the useful impacts at whatever point you once picking the Pandit who really causes you to get wanted objectives for your relationship. 

Do you want to love back in your life with the help of voodoo spell without negative effect? Do you want to love marriage but your parents not allow for your love marriage? Then you can use the most powerful spell. The best <a href="https://sites.google.com/view/blackmagicremove/voodoo-priest-in-miami">Haitian voodoo priest</a> gives you the effective voodoo spell to solve your love issues.<a href="https://sites.google.com/view/blackmagicremove/voodoo-priest-in-miami">Voodoo Priest in Miami</a> have many years experience in the spells. He has solved many people's life problems with his power of spells. 

Consult The best <a href="https://sites.google.com/view/blackmagicremove/voodoo-priest-in-miami">Voodoo Priestess in Miami</a> now to solve your life problems. He use the supernatural power and forces to reconnect you with one of the specific person you want back in your life.his spell never failed and he gives you 100% guarantee solution to solve your problem. 

In spite of the fact that you should need to get your adoration in those days you will give some consideration to cherish spell for a messed up relationship. In reality getting your affection back before long couldn't be simple yet you need to do a ton of endeavors when once your accomplice unloaded you. Genuinely on the off chance that you need to make it an easy than you need to once attempt this affection spelling and this will assist you with getting your adoration back soon. So you don't should be concerned on the grounds that you could be getting your adoration back in your life at the earliest opportunity. 

At whatever point you should need to think about adoration spell for ex-love in those days you need to visit stargazer once. At whatever point you need to think about the job of adoration spell then genuinely you will get your affection back with Vashikaran mantra yet you need to spell the correct words. Plainly at whatever point you can't spell the correct words then it never gives viable outcomes and genuinely you need to confront a ton of downsides. So you don't have to face a challenge with dark sorcery controls and will put the correct spelling and words to get your affection back as quickly as time permits in your day to day existence. 

After some time, you should begin speaking with your darling so you can develop and support your relationship in a compelling way. Try to discuss certified thinks and don't contend with the things that occur in the past so it doesn't influence your present relationship. It is one final possibility for you to get your adoration back in your life.
What is the difference between BehaviourSubject, Subject, ReplaySubject and Async Subject?
Tags: javascript, webdev, react, angular
Published: 2021-02-17 04:36:52

Daily Angular Tips, Tricks, and Best Practices: Part 5

tags: programming,webdevelopment,coding,angular


[![](https://cdn-images-1.medium.com/max/1200/0*qJupWo0gohg96VrV.jpg)](https://medium.com/javascript-in-plain-english/what-is-the-difference-between-behavioursubject-subject-replaysubject-and-async-subject-946f4121709b?source=rss-795bd33d705------2)



##[Continue reading »](https://medium.com/javascript-in-plain-english/what-is-the-difference-between-behavioursubject-subject-replaysubject-and-async-subject-946f4121709b?source=rss-795bd33d705------2)
100DaysOfCode — Day 08
Tags: docker, 100daysofcode, programming
Published: 2021-02-17 04:27:10

Today, I finished the following sections in "Learn How To Code: Google's Go (golang) Programming Language" course:
	•	Section 10: Data Grouping
	•	Section 12: Structs

###### End of day 8 of 100DaysOfCode.
Learn: Developed Extension Pack for Visual Studio Code
Tags: learn, story, vscode
Published: 2021-02-17 03:32:53

This post will not cover step by step on how to create Visual Studio Code Extension Pack. If you are looking for a tutorial, I found this article helpful :

https://code.visualstudio.com/blogs/2017/03/07/extension-pack-roundup

Moving on to my first intention when I developed it cause I have to re-install operating system in my laptop. For the cleaner installation, I decided to delete any installed programs. It means that I need to set everything up from the very start. 

Focus on the Code Editor that I use all this time and it's Visual Studio Code. So, I think that I have to setup my developer environment again. There are many options that can be taken, but I choose to make the VS Code Extension Pack to solve it. The reason was...

> When you can create a tool that may give the benefit to others as long as it also solved your problem. Share it instead!

If you are willing to take a glance at my Visual Studio Code Extension, come visit the [VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=BaraJS.extension-pack). Feedbacks are welcome and I really appreciate that.
7 Habits of Highly Effective People.
Tags: career, devops, writing, 100daysofcode
Published: 2021-02-17 02:45:24

*The 7 Habits of Highly Effective People.*
__1. Sharpen the saw.__
 Don’t work yourself to death. Strive for a sustainable lifestyle that affords you time to recuperate, recharge and be effective in the long-term.

 __2. Be proactive.__
 You have a natural need to wield influence on the world around you so don’t spend your time just reacting to external events and circumstances. Take charge and assume responsibility for your life. 

__3. Begin with an end in mind.__
 Don’t spend your life working aimlessly, tackling whatever job is at hand. Have a vision for the future and align your actions accordingly to make it into a reality. 

__4. Put first things first.__
 To prioritize your work, focus on what’s important, meaning the things that bring you closer to your vision of the future. Don’t get distracted by urgent but unimportant tasks. 

__5. Think win-win.__
When negotiating with other, don’t try to get the biggest slice of the cake, but rather find a division that is acceptable to all parties. You will still get your fair share, and build strong positive relationships in the process. 

__6. Seek first to understand, then to be understood.__
When someone presents us with a problem, we often jump right to giving a solution. This is a mistake. We should first take time to really listen to the other person and only then make recommendations. 

__7. Synergize.__
Adopt the guiding principle that in a group, the contributions of many will far exceed those of any individual. This will help you achieve goals you could never have reached on your own.
Digital Photo Recovery
Tags: discuss
Published: 2021-02-17 02:14:04

Digital photographs are important to all of us.  Most of the pictures we take happen once in a lifetime, which is why they are so very important.  From your child’s first steps to pictures of your family, photographs are very important.  As important as they are, nothing is worse than losing them.  This can be very traumatic and frustrating, especially knowing that you’ll never capture the picture again.

Even though it may appear that the camera malfunctioned, all hope isn’t completely lost.  There are ways that you can recover your digital photographs, even though you may not be aware of them.  Most digital camera’s for instance, use smart cards that will store the information.  To be on the safe side, you should always save your photographs to your card, and transfer them to your computer the first chance you get - then back them up to a CD or DVD.

Sometimes, when you have your photographs on your computer, you may move them to the recycle bin and not even realize it.  You can always correct this, by right mouse clicking the recycle bin then choosing to open it up.  If the pictures are there, simply drag them to your desktop or right-click them and choose to restore.  This will put them back in the location they were in before they were moved to the recycle bin.

There are other instances where your photographs aren’t this easy to recover.  If the card in your camera has become corrupted or if your camera has experienced hardware problems, then it won’t be so easy to recover your pictures.  If this is the case, you should always look towards software or professional repairmen.  There is software out there that is designed for most types of digital camera problems, and it can normally recover your pictures in the case of malfunction.

Most services and software can recover almost all files that you have on your camera, from JPEG pictures to video files.  Most people transfer their pictures to their computer as soon as they can, which can be recovered using data recovery methods.  On the other hand, those who don’t will need a professional to take a look at the camera.  If you don’t waste any time and seek a professional immediately, your pictures can normally be recovered.

Digital cameras are something that most of us own these days, as they take professional-quality photos.  Anytime that it appears you have lost your pictures, you can turn to software and professional recovery services to get your pictures back.  Your digital photographs are very important, which is why you’ll want to take care of them.  Mistakes and disasters do happen though - which is why there are recovery services.

https://www.tekhnopedia.my.id/2021/02/rekomendasi-browser-android-terbaik.html
JavaScript journey 
Tags: javascript, programming, codenewbie
Published: 2021-02-17 01:16:00

I've been learning JavaScript recently after a few years of quitting on my first trial which could have open the door of many success for me earlier than now but it's never too late to do it anyway. I've been making progress so far which I never expected because I hate maths and first thing I saw on my first trial of JavaScript was var x = 5 * 7; which scare me off because I never expected such for someone that just learn HTML & CSS and enjoyed it. 

Now I'd like to know how you all learn JavaScript and understand everything about it because I'm finding it hard to know how to use the basics of JavaScript that I've learned to build stuffs such as apps and on website.
What are your favourite podcasts?
Tags: podcast
Published: 2021-02-17 00:32:49

---
title: What are your favourite podcasts?
published: true
description: I'm searching for new podcasts to listen
tags: podcasts
---
At the moment I'm listening to **Demoni Urbani**, an Italian (Italian is my native language) podcast which tells about some of the worse crime episodes really happened in Italy. It intrigues me. It's available on [Apple Podcasts](https://podcasts.apple.com/gb/podcast/demoni-urbani/id1409782375) and on [Spotify](https://open.spotify.com/show/36dX67Whak48QfCISNOQyO).

{% spotify spotify:show:36dX67Whak48QfCISNOQyO%}

Recently I discovered **The Joe Rogan Experience** podcast. It sounds interesting!! I started listening the episode with Elon Musk. It's amazing listening about all the stuff about space and Mars colonisation directly from him - who, I suspect, has to know a lot about it! This show is available on [Spotify](https://open.spotify.com/show/4rOoJ6Egrf8K2IrywzwOMk).

{% spotify spotify:episode:2aB2swgyXqbFA06AxPlFmr?si=i_U7Zh0ZSISNLRkzwrjRiA%}

And what about you? What are your favourite podcasts? Anything to share? True Crime, Tech, Actuality.. I'm ready to listen! :headphones: Preferred languages: English :uk: and/or Italian :it:.