teleren/devto huggingface dataset:
Share your tailwindcss theme with the world
Tags: tailwindcss, css
Published: 2019-11-23 20:45:35


Tailwind CSS, the utility first css framework, comes with an amazing default theme that works very well with most of the designs you need to make, but you might want to tweak it a little bit. Changing colors, for example, is one of the most common uses I have found when working with tailwindcss.

Once you have your _custom_ configuration you may want to share it with your team or with the world. Imagine sharing the colors of your company brand, or your new design system. This is now possible with tailwindcss.

# Create a tailwindcss plugin

First, create a new file and give it a name. I will use `acme-design-system.js` as an example:

```js
module.exports = {
    config: {
        //
    },
    handler: function() {
        //
    }
}
```
This is how you can define a tailwindcss plugin using an object. Inside the `config` key you can define your own settings, overwrite the default settings or extend the default settings. In this case we will extend the defaults.

```js
module.exports = {
    config: {
        theme: {
            extend: {
                colors:
                    primary: {
                        900: '#055324',
                        800: '#18672B',
                        700: '#298538',
                        600: '#3BA444',
                        500: '#4DBB4E',
                        400: '#6ED36A',
                        300: '#A2E69A',
                        200: '#CBF4C4',
                        100: '#F0FCED',
                    },
                }
            }
        }     
    },

    handler: function({ addUtilities, addComponents}) {
        addUtilities(...);
        addComponents(...);
    }
}
```

In this example I am adding a new set of colors named `primary`, and tailwindcss will generate new utilities based on this color. Also, I could add some utilities or components that will be part of the design system.

# Require the plugin

Now, you can make use of your plugin. In your `tailwind.config.js` file, require the plugin file in the `plugins` section.

```js
module.exports = {
    theme: {
        ...
    },
    plugins: [
        require('acme-design-system.js'),
    ]
};
```
Then, the plugin will be used whenever you process your tailwindcss config.

# Share with the world

Given that a plugin is just a file (`acme-design-system.js`), you can choose the channel you want to use to share this file, and the way you want to keep it updated.

My choice was to make a npm package and publish it in npm.js. You can see that it is very easy, just by following [some simple steps](https://dev.to/destrodevshow/how-to-publish-your-awesome-package-to-npm-405m).

# Closing

Plugins are not a new thing on tailwindcss, but this new syntax is very useful when working with configuration keys.

Tailwindcss plugins allow many possibilities to extend the framework; this is just one of them.

You can see the package I published in [placetopay-org/flate](https://github.com/placetopay-org/flate), it is still a work in progress but was designed to fit our needs, and I wanted to share it with you.

Share your thoughts.
How to implement a robots.txt file in a Nuxt project — Nuxt 2.10
Tags: vue, nuxt, webdev
Published: 2019-11-23 20:36:34

A **robots.txt** file helps us to control the way in which Google and other **search engines** explore and **index** our content.

The first thing that a robot does when gets to your site it’s to check if a **robots.txt** file exists and if yes, they examine it to understand how to **crawl** it.

It’s just a simple public text file in which we can tell the **crawlers** to which parts of our site should or shouldn’t be **crawled** and **indexed** by **allowing** and **disallowing** pages.

**@nuxtjs/robots** it’s a **Nuxt** module that injects a middleware to **automatically** generate a **robots.txt** file.

**@nuxtjs/robots** it’s a **Nuxt** module that injects a middleware to **automatically** generate a **robots.txt** file.

Requirements:

- Nuxt
- npm or yarn
- Node


To begin with, we’ll install the module:
```
npm i nuxt-robots-module
```

Once it finishes, we are ready to go.

We’ll add it to our **nuxt.config.js** file in the modules array and give some **options** to it. As an example, I’ll use **top-level** options disallowing only the **/user URL** for **all user-agents**:

```javascript
export default {
  modules: [
    '@nuxtjs/robots'
  ],
  robots: {
    UserAgent: '*',
    Disallow: '/user',
  }
}

```

But what if we want to disallow different URLs for different user-agents?
We can transform our options object into an array and add as many user-agents and urls as we want:

```javascript
export default {
  modules: [
    '@nuxtjs/robots'
  ],
  robots: [
    {
      UserAgent: 'Googlebot',
      Disallow: '/user',
    },
    {
      UserAgent: '*',
      Disallow: '/admin',
    },
  ]
}

```

Now let’s say that we don’t want **DuckDuckBot user agent** to **crawl** any URL that we could have after /admin.

We can achieve by adding a /* to the URL like this:

```javascript
export default {
  modules: [
    '@nuxtjs/robots'
  ],
  robots: [
    {
      UserAgent: 'Googlebot',
      Disallow: '/user',
    },
    {
      UserAgent: '*',
      Disallow: '/admin',
    },

  ]
}

```

And finally, to **disallow** several URLs for the same **user-agent** we'll do it by **passing** an array to the **Disallow** property.
The final code will look like the following:

```javascript
export default {
  modules: [
    '@nuxtjs/robots'
  ],
  robots: [
    {
      UserAgent: 'Googlebot',
      Disallow: ['/user', '/admin'],
    },
    {
      UserAgent: '*',
      Disallow: '/admin',
    },

  ]
}

```

That’s all! You can build your application and check the file in **/robots.txt** URL.
The Most Useful Websites and WebApps
Tags: usefulwebsitelinks
Published: 2019-11-23 20:24:30

---
title: The Most Useful Websites and WebApps
published: true
description: useful Website Links
tags: Useful Website Links
---
Hi, all this is my first post am learning to code for a year I use to read tech blogs tech post every day I found this beautiful useful website resources I hope it will be useful.

here is the link https://github.com/dudelybhai/Useful-Websites
What font do you use in your editor of choice?
Tags: discuss, editor, font
Published: 2019-11-23 19:29:06

I'm participating in Lambda School (look at my profile for posts of my thoughts) who "strongly recommends" using VSCode.

I've been using the VSCode default settings for years, but today as I was beginning a personal project, I got ~~sidetracked~~ to thinking: Would a good, readable, code font actually and truly be better than VSCode's default Consolas font?

**So tell me, oh gurus of editor visuals...**

### **What fonts do you use for coding?**
(and color scheme, too, if you're feeling industrious).

Everyone's opinion counts... unless you're using daylight mode with a proportional font.
Who are your favorite writers here on DEV?
Tags: discuss
Published: 2019-11-23 19:27:41

---
title: "Who are your favorite writers here on DEV?"
published: true
description: "Who are some people whose posts on DEV you particularly enjoy?"
tags: #discuss
---

Who are some people whose posts on DEV you particularly enjoy?

Here are a few of mine:

 - **[Emma Wedekind](https://dev.to/emmawedekind)** &mdash; she writes about a variety of topics, with her latest post being about speaking at conferences. She's also a co-host of the Ladybug Podcast with other DEV community members Kelly Vaughn and Ali Spittel.
 - **[Andrew Healey](https://dev.to/healeycodes)** &mdash; He writes technical content in a few languages such as Python, JavaScript, and Go. He also runs a weekly newsletter on his website and has been featured on DEV's top 7.
 - **[DEV.to Staff](https://dev.to/thepracticaldev)** &mdash; I had to list this one because of their daily code challenges, which are interesting algorithm-like coding problems in which DEV users show off their solutions in their language-of-choice.
 - **[Jacob Herrington](https://dev.to/jacobherrington)** &mdash; Jacob runs a super interesting Podcast called DevPath.fm, and writes about a variety of topics. He's been featured on the top 7, and now, in fact, works at DEV.

So, who are your favorite writers on the DEV community?

*&mdash; Gabriel Romualdo, November 23, 2019*

Note: I formerly wrote under my pseudonym, Fred Adams.
I Threw Together a Cute JavaScript Sandbox
Tags: javascript, showdev, webdev
Published: 2019-11-23 19:07:14

---
title: I Threw Together a Cute JavaScript Sandbox
published: true
description: 
tags: javascript, showdev, webdev
---

I wanted to create a fun practise environment for anyone trying to learn JavaScript for the first time. To build this site, I used the JAMstack with Jekyll serving as the peanut butter to all of that JAM-y goodness. 

I am aware that the "sandbox" is not secure; I used a pre-built compiler that I had to tinker with a little. When I remember the name of the dependency, I will add it here. This is was more of a fun concept design project than a treatise on expert jailing techniques. 

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/u56mprf6qado4ha5nusm.JPG)

Here's the link of to the sandbox, if you want to play around with it: https://www.howtocodejs.com/variables/


The sandbox has a classic full page view and what I named the Lex view, for a more fun aesthetic.
What I wish I had known before becoming a software developer.
Published: 2019-11-23 18:21:28

Leave work early and have a side-hustle.

Because you are not going to stay in the corporate world for long if you love hands-on technical work like coding, even if you are in a tech firm.

The longer you work, you are going to realize the only way up is to move to management or sales.

When that time comes, you no longer touch code. You will make a lot more money, but you would probably miss coding and do it on your free time anyway.

The alternative is that you stay as a line level grunt, making considerably less money than your peers who have moved up, and becoming disillusioned with the company, the industry, or life in general.

Either way, your only hope is what you do in your free time. If there’s one thing in the world left for a technical person to do with all the limited time he/she has in life, it is to code.

By learning new technologies or even practicing your existing skills, you could either 1) build your own profitable products, 2) start a profitable consulting practice, or even 3) find a better job oppportunity.

Thinking back, I should even start when I was in university.
How do you know that you've reached expert level at some programming language?
Published: 2019-11-23 18:09:47

When you stop reading and start answering questions in Stack Overflow.
When you start consulting the official manual of the language to check for difficult to interpret programming details.
When you contribute to the community
When your co-workers use you as a reference for the language
When you start seeing beauty (and ugliness) in programs
When you start disliking the code you did some time ago, because now you know more than that
When your errors become much more complex, because you don´t make simple errors anymore
When even without thinking your code is consistent, and you follow the same programming patterns and they are all clearly good.
Testing the Waters with RSpec (Part 2)
Tags: testing, ruby, beginners
Published: 2019-11-23 18:05:12

So the past couple of weeks I've been in the interview process for a company that I'm really interested in. For their technical assessment, I had to create a CLI app in Ruby using the Google Books API and of course, write some tests. In this blog, I'll go over one of the tests that I found to be the most fun, but I want to note that the application I wrote did not use Rails, it is purely Ruby.

## Testing User Input

Here I have a method that takes in user input, checks if it's valid and returns that input:

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/rvfgac55gfjge0fvnjaz.png)

And here I have a test for that method:

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/orkh1gic5c3qzdyc6jc7.png)

'rl = ReadingList.new' is creating a copy of the application to run inside the test. 

'number = rl.save_book' runs #save_book and saves the result of that (@book_number) to the variable 'number'.

'allow($stdin).to receive(:gets).and_return(3)
expect(number).to eq(3)' takes in user input with the expectation that the user types the number 3. If the number 3 is not typed, the test will fail.

## Run The Test

To run the test in the terminal, you type `rspec` with a space after followed by the file path. For me that looked like:

`rspec spec/testing/ReadingListCLI_spec.rb`

## Thoughts

I found this test to be the most interesting because it requires that the tester actually type exactly what the test is expecting in order to pass. The first time I ran the test I thought it was broken because it presented me with what I would see running the application - "If you would like to save any of these books to your reading list please select the number of the book."

That's it for this post but stay tuned for more! If you know of a better way or a different way to test user input let me know in the comments.

## Resources

- [RSpec User Input Testing](https://stackoverflow.com/questions/37329190/using-rspec-to-test-user-input-with-gets)
Twitter, uma ferramenta importante para devs
Tags: twitter, devs
Published: 2019-11-23 17:38:26

---
title: Twitter, uma ferramenta importante para devs
published: true
description: Como o Twitter pode ser uma ferramenta importante para devs 
tags: twitter,devs
---
Recentemente tive a oportunidade de participar de um evento internacional, o [WebSummit, em Lisboa](https://deploy.codenation.com.br/codenation-no-web-summit-2019-e0ce8cf8cdd).

Assisti palestras de diversos assuntos, desde cloud, data science, robótica, empreendedorismo e liderança. Mas uma coisa a grande maioria das apresentações, especialmente as mais técnicas, tinha em comum: o palestrante estampava sua conta do Twitter nos slides.

Eu fico surpreso como os devs brasileiros usam pouco esta relevante rede social. 
Alguns motivos pelos quais eu acredito que devs deveriam usar mais a rede do passarinho azul:

- facilidade de encontrar e conversar com as pessoas mais relevantes da nossa área. Quer saber o que o [criador do Laravel](https://twitter.com/taylorotwell) ou do [Symfony](https://twitter.com/fabpot) estão preparando para estes frameworks? Saber das novidades da próxima versão da [linguagem Go](https://twitter.com/golang)? Basta seguir as pessoas que fazem parte destes e de outros projetos. 
- Objetividade. Por ser uma rede baseada em pequenas mensagens, atualmente 280 caracteres, os usuários tendem a serem mais objetivos na comunicação. Ou seja: sem textão! E é fácil dar uma passada rápida no seu feed enquanto o build ou o pipeline de deploy estão executando ;)

Se consegui convencer você a investir seu tempo no Twitter dou aqui duas dicas:

- siga apenas as pessoas que são relevantes para as tecnologias que você usa. Eu tenho uma regra pessoal que é seguir no [máximo 150 contas](https://twitter.com/eminetto/following). Mais do que isso eu acabo me perdendo nos assuntos. Mas isso é uma regra que funciona pra mim, crie a sua.
- Seja objetivo mas sem ser mal educado. São pessoas do outro lado da conta, mesmo que for de um projeto open source ou empresa.

Ahh, e aproveita e [me segue também](https://twitter.com/eminetto) ;)
I've written my first blog post!
Tags: blogging, writing, articles
Published: 2019-11-23 16:56:58

---
title: I've written my first blog post!
published: true
description: What do you think? Feedback welcome!
tags: blogging, writing, articles
---

Nearly two weeks ago (how time flies) [I asked for suggestions](https://dev.to/marcellothearcane/what-should-i-write-blog-posts-about-1h7a) on what to write blog posts about for [Nhost](https://nhost.io) a GraphQL-based backend as a service.

Here's the first one! I'm new to all this, so your feedback is appreciated - as well as any suggestions for more blogs:

https://blog.nhost.io/building-a-photo-app-with-nhost/
CSS Quickies: text-indent
Tags: css, beginners, webdev, html
Published: 2019-11-23 16:13:27

### What is CSS Quickes?

I started to ask my beloved community on Instagram: "what CSS properties are confusing for you?"

In "CSS Quickies" I will explain one CSS property in depth. These are community requested properties.  If you also confused about a CSS property, then write to me on [Instagram](https://www.instagram.com/lampewebdev/) or [Twitter](https://twitter.com/lampewebdev) or down below in the comments! I answer all the questions.

### Lets talk about `text-indent` in CSS

Sometimes it is needed to indent text on a website. This helps the user to quickly scan the page and understand the context of what he/she is looking at. The first-line Indentation is a common thing in books and magazines. In some scientific papers, it is required to indent every paragraph.

CSS has a property to achieve this behavior. It is called 'text-indent'.

#### How to use it

You can use typical values, like px, rem, rm, and percentage. The most simple example would be the following.

```css
p {
    text-indent: 4rem;
}
p {
    text-indent: 20%;
}
p {
    text-indent: 100px;
}
```
The `text-indent` will indent the first line of your text to the specified amount. With the full-lengths like px, it is clear how much indented it will be, but what about the percentage? How is the percentage calculated? The percentage refers to the width of the containing block. So if the element your text is in is 100px and you won't to indent 20%, then you will have an absolute value 20px. Easy right?

#### negative indent.

The neat thing about this property is that it will accept a negative length. So we can move the text not only to the right but also to the left. This technic is called "hanging indent" and it used in books and magazines and can elevate your design above the of your competitors.

```css
p {
  text-indent: -2rem;
}
```
I created a codepen example. In this example, you can play around with `text-indent`.
{% codepen https://codepen.io/lampewebdev/pen/WNNWWPN %}

#### `each-line` and `hanging`

`each-line and `hanging` are not implemented in any browser as I'm writing this article in November 2019. So please don't use them in production code. I can not even show you an example. This is how experimental this is.

`each-line`: the Indentation affects the first line of the block container as well as each line after a forced line break but does not change lines after a soft wrap break.

and

`hanging`: Inverts which lines are indented. All lines except the first line will be indented. We created this on our own. 

**👋Say Hallo!** [Instagram](https://www.instagram.com/lampewebdev/) | [Twitter](https://twitter.com/lampewebdev) | [LinkedIn](https://www.linkedin.com/in/michael-lazarski-25725a87) | [Medium](https://medium.com/@lampewebdevelopment) | [Twitch](https://dev.to/twitch_live_streams/lampewebdev) | [YouTube](https://www.youtube.com/channel/UCYCe4Cnracnq91J0CgoyKAQ)
How Dark mode on Dev and other platforms has made me lazy Developer
Published: 2019-11-23 16:02:39

To be sincere, I really love the part of the dark mode design on all tech platforms and social media. When dark mode were roll out as update on different platforms I subscribed to it but never knew it will make me lazy as a young developer. Prior before now, I read a lot of articles from developers on different platforms like Dev.to, Medium, Hashnode, Frontend Masters, Twitter and so which I gained alot and I really grow up in learning codes as a newbie.
But now I just scroll up and down to see the latest articles or updates also save the interesting articles for further reading but I will not read it at the moment and I will never open the saved article again . Having been doing this for months and is affecting my learning part. As young or newbie in coding or tech, notice yourself and be guided. Just my view 👍 you might find it interesting to you 😉. Drop your view
Feeling special, love from Dev.to
Tags: support, growth
Published: 2019-11-23 15:28:37

before I start making it known to you guys my aim for today blog post I would love to share with you guys 2 or more reasons why you should tell a developer about dev.to today.

1. Dev.to SEO strength: I can remember yesterday when I searched my name on google (codeuiandy) without adding dev.to, Boom I was able to see my name and image of me like that's not enough I was able to see my top blog post and top comments on dev.to based on my post, OK NOW 
Imagine the impression it will give to recruiters when they are able to see posts about you when they search for you, so if you have that beginner or an expert not on dev.to it would be nice to invite that individual here.

2. The Awsome community: I made my first post here 3 days ago and for the first time in my 3.5 million years of living on earth I actually feel noticed and loved by the community compare to other platforms.

3. What Gained: thanks to the community I was able to gain self-confidence, online presence and more.
<center><h1><b>Why today post</b><h1></center>
I have been learning, still learning and working as a frontend engineer, I have always wish of having a youtube channel where I can teach beginners how to code so after days of learning how youtube rank videos, etc so I decided to create my own youtube channel which actually ranks pretty well when you search css position for absolute beginner (currently the only video there now).
<center><h3><b>What is the difference between your youtube channel and other channel out there?</b><h3></center>
A. the channel will focus on front-end development

B. you won't be seeing one face every day, I have experienced developers as friends and they can't wait to share some knowledge and css tricks with you.

C.we will build websites together not just me building but I will explain every step on the way.

D. we will learn all a web developer use every day such as card dialog box etc.

<center><h2><b>wow how can we support</b><h2></center>
I just made a youtube channel with 0 subsribers i need you to subscribe, turn on the notification share channel with friends and anticipate new videos from me

so if you wish to be an instructor on the channel kindly message me.
Youtube channel link <a href="https://www.youtube.com/channel/UCDYCcqfrlFUJpfPYNjvUMoA">Click here</a>

thanks, guys
Getting started with TypeScript for Node
Tags: eslint, node, javascript, babel
Published: 2019-11-23 15:30:58

---
title: Getting started with TypeScript for Node
published: true
date: 2019-11-23 15:23:10 UTC
tags: eslint,nodejs,javascript,babel
canonical_url: 
---

A step by step guide

[Continue reading on Medium »](https://medium.com/@bartwijnants/getting-started-with-typescript-for-node-50679fa596e?source=rss-3dd8c36bc285------2)
3065 followers
Tags: meta, writing
Published: 2019-11-23 15:20:20

The last time I properly checked, I was on ~1000 followers, and I've just realised I've now surpassed 3,000.


Firstly, thanks to everyone that has hit the follow button. 

Secondly, Dev is clearly helping people reach wider audiences; I don't think I got higher than ~50 followers on medium. 


Thirdly, to those that are following me, I know I've not really blogging for a while. I recently had a child and started a new job, so have really struggled with finding the time. But, is there anything specific you'd like to see from me next?

Fourthly,and lastly, a shameful plug -you can also find me on Twitter at [devdrake0](https://mobile.twitter.com/devdrake0) and check out [CodeTips](HTTPS://www.codetips.co.uk) ([@realcodetips](https://mobile.twitter.com/realcodetips))