teleren/devto huggingface dataset:
How to add tailwindcss to a simple HTML Project 🍵

Tags: tailwindcss, tutorial, liveserver
Published: 2021-02-12 02:37:27

# How to add tailwindcss to a simple HTML Project

This article explains how to add Tailwindcss stylesheet to an HTML project. Tailwind CSS is a highly customizable, low-level CSS framework that gives you all the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override. 

## To add Taillwind CSS to an HTML project, you can follow these steps:

### Initialize a project

```bash
yarn init
```

Install taillwindcss, postcss-cli and autprefixer

```bash
yarn add tailwindcss postcss-cli autoprefixer -D
```

-D option if to save package to your `peerDependencies`

### Create a default configuration file for tailwindcss

```bash
npx tailwind init tailwind.js -full
```

### Create a **postcss.config.js** file

```bash
touch postcss.config.js
```

### Edit postcss.config.js and type

```bash
const tailwindcss = require('tailwindcss');
module.exports = {
    plugins: [
        tailwindcss('./tailwind.js'),
        require('autoprefixer')
    ],
};
```

### Create file tailwind.css as follows

```css
@import "tailwindcss/base";

@import "tailwindcss/components";

@import "tailwindcss/utilities";
```

### Use **postcss** to generate the stylesheet style.css

```css
npx postcss tailwind.css -o style.css
```

### Use style.css in your HTML project

```html
<html>
 <head>
	<link rel="stylesheet" href="style.css"/>
	</head>
 <body>
	 <h1>Hello world</h1>
</body>
</html>

```

### Test it with liveserver

```bash
yarn add live-server -D
```

```bash
live-server 
```
Create a summary for your forem(dev.to) posts easy and fast with Summaryze!
Tags: nextjs, javascript, react
Published: 2021-02-12 02:11:47

Hi guys, how have you been ?
Today I want to show you an app that I created for forem platforms (like dev.to), it’s called [Summaryze Forem](https://summaryze-forem.vercel.app/), it’s an app that will read your post, get all [anchors links](https://dev.to/p/editor_guide#markdown-links) and create a summary on markdown!

## About it
I like to add summaries to my posts(it’s easier to read), on one of my posts here I was so lazy to make it (it takes so long) and I thought, “Hum, why not create a tool to make it for me?” So I remembered that a [friend](https://github.com/Cledersonbc) made something [like this](https://github.com/autociencia/summaryze) for [Blogger](https://www.blogger.com/) posts with python and typescrip and I thought "Hmm, why not with javascript to forem platforms?”.
[Created a prototype on figma](https://www.figma.com/file/ywNwI4gYMH3cXiUIZ9ZiuS/summaryze-forem) and started working on this.

## How use it
It’s very easy to use. Just [open the app](https://summaryze-forem.vercel.app/), copy your post url (draft or public post) and paste on url field, after that, just click "Generate" button:

![Preview](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s2031xg0cks8b0t9lxa1.gif)
Now, copy the markdown code (it’s possible to have a preview too) and paste it on your post!

## How it works
I wanted to create a full stack application with react for this project, I began some tests with [express](https://expressjs.com/) and [express-react-views](https://github.com/reactjs/express-react-views) but without success. I thought,  “Why not [Nextjs](https://nextjs.org/) ?"
I started creating the web scraper, using [Cheerio](https://github.com/cheeriojs/cheerio) to manipulate the fetched page and [Node-fetch](https://www.npmjs.com/package/node-fetch) to make the page request and pass the page body to cheerio.
After inspecting a post with Chrome Dev Tools, I see that every anchor link has an "anchor" class so it’s very easy to scrape. After getting all elements, I see that the text with the name of the link is in the parent element, I create two arrays, one to add the link and another for the title.
I make an iteration on all elements and for each, I push the values. Lastly, I create a final array and make a map to format it all using [template string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals).

## Conclusion 
A special thanks to [Thais](https://www.linkedin.com/in/thais-teodoro-perez-3153a161/) 💛 for help me write this post!
That’s all! I hope you like it and use it!
Check here the project on github:
{% github tuliocll/summaryze-forem %}
IntelliJ shortcuts 
Tags: java, intellij, feesher, productivity
Published: 2021-02-12 01:50:11

I always feel that understanding your tools have the same significance as learning your work. 

so we start our new youtube playlist for understanding IntelliJ IDEA.

I make sure that will help a lot of freshers and new learners to make their work more productive and comfortable.

IntelliJ Shortcuts: https://www.youtube.com/playlist?list=PLPOIAXKg9lWHVgKF6hV3BOKbFkS5VhwXo
 
 #fresher #intellij #productive #java11
Automation with Systemd & Code
Tags: python, gmail, api
Published: 2021-02-12 00:50:35

Final part in a series of articles on implementing a notification system using Gmail and [Line Bot](https://notify-bot.line.me/doc/en/)


Today I will briefly share how the systemd configuration files are set and provide a link to the GitHub repo.


## Systemd Service
I am running my code under Debian. In order to learn something new. I chose to use systemd to provide scheduling for the script execution.

These files should be placed under `/etc/systemd/system/`

Here is the script: `gnotifier.service`
```bash
[Unit]
Description=Monitor Gmail Notifier
Wants=gnotifier.timer

[Service]
Type=oneshot
ExecStart=/usr/bin/python3 /home/ACCOUNT/gmail/gmail.py
WorkingDirectory=/home/ACCOUNT/gmail


[Install]
WantedBy=multi-user.target
```

This is fairly straight forward. The filename itself provides the service name `gnotifier`. We also specify that this script executes once and terminates: `oneshot`.
To have the service execute multiple times we provide the `Wants=gnotifier.timer`; this says that we need to read `gnotifier.timer` to get schedule information.

## Systemd Timers
`gnotifier.timer`
```bash
[Unit]
Description=Triggers gnotifier service
Requires=gnotifier.service

[Timer]
Unit=gnotifier.service
# KidzDuo arriving
OnCalendar=Mon,Tue,Thu *-*-* 14:20,25,30,35,40,45,50,55:00
# Swimming
OnCalendar=Wed *-*-* 15:50,55:00
OnCalendar=Wed *-*-* 16:0,5,10,15,20:00
OnCalendar=Wed *-*-* 18:0,5,10,15,20,25:00
# KidzDuo Leaving
OnCalendar=Mon,Tue,Thu *-*-* 18:0,5,10,15,20,25,30,35:00
OnCalendar=Mon,Tue,Thu *-*-* 19:0,5,10,15,20,25:00
AccuracySec=1s

[Install]
WantedBy=timers.target
```
There are many ways to configure the timers. Here I have chosen `OnCalendar`
Let's take a look at one example:
`OnCalendar=Mon,Tue,Thu *-*-* 14:20,25,30,35,40,45,50,55:00`

Days of the week: `Mon,Tue,Thu`  
Hour: `14` (2pm)  
Minutes: `20,25,30,35,40,45,50,55` Every 5 minutes starting at 20 minutes.  
Seconds: `00`

## Enable the service
You will need to issue the following commands
```
systemctl enable gnotifier
systemctl start gnotifier
```
You can check your `systemd timers` using
```
systemctl list-timers
```

### Some references
[OpenSource Article](https://opensource.com/article/20/7/systemd-timers)  
[ArchLinux Wiki](https://wiki.archlinux.org/index.php/Systemd/Timers)

## GitHub Repo
You can find the code for this project [here](https://github.com/Bas-Man/gnotify-to-line).
February 11th, 2021: What did you learn this week?
Tags: weeklylearn, discuss, weeklyretro
Published: 2021-02-12 00:44:41


It's that time of the week again. So wonderful devs, what did you learn this week? It could be programming tips, career advice etc.

![Dog lying back and typing on a computer](https://media.giphy.com/media/wpoLqr5FT1sY0/giphy.gif)

Feel free to comment with what you learnt and/or reference your TIL post to give it some more exposure.

{%tag todayilearned %}
And remember, if something you learnt was a big win for you, then you know where to drop it as well.👇👇🏻👇🏼👇🏽👇🏾👇🏿

{% link https://dev.to/devteam/what-was-your-win-this-week-3b64 %}

![A show host dancing a winning in their seat](https://media.giphy.com/media/l3q2Z6S6n38zjPswo/giphy.gif)
Only JavaScript gets template strings' syntax highlighting
Tags: javascript, typescript, webdev, discuss
Published: 2021-02-12 00:39:28

![html-in-template-string](https://raw.githubusercontent.com/mjbvz/vscode-lit-html/master/docs/example.gif)

Of course, I know well that **Markdown is the only another language that have non-parent language syntax highlighting**. (with triple-backticks + language name)

Furthermore, TypeScript also gets error checking.

![template-string-error-checking](https://dev-to-uploads.s3.amazonaws.com/i/vvyksulvqfdhk1hg6dpo.png)

<small>Oops, I forgot `string += ts[i]`</small>

Along with JSX, JavaScript and TypeScript can easily be the second most highlighted languages in the world; second only to Markdown.

## There is also fake template string literal (via VSCode IDE only)

Thanks to [Comment tagged templates](https://marketplace.visualstudio.com/items?itemName=bierner.comment-tagged-templates)

![comment-tagged](https://raw.githubusercontent.com/mjbvz/vscode-comment-tagged-templates/master/docs/example.png)

<small>
Although not really that popular. Only 1K installs...
</small>
Testing out some features from the Golang 1.16 Beta (Embedded files)
Tags: go, code, beta
Published: 2021-02-12 00:37:12

So with Go 1.16 coming out soon I figured it would be good to talk about a feature that is coming which I thought was pretty cool. This feature is included in the new [embed package](https://tip.golang.org/pkg/embed/). 

### Installing Go 1.16

As of the time of writing Go 1.16 is still in beta so the steps to install it are as follows

```bash
go get golang.org/dl/go1.16rc1 
go1.16rc1 download 
```

When it's out of beta you will just need to make sure you have upgraded using your usual upgrade mechanism `brew upgrade go` or download it.

### //go:embed

The embed package coming in 1.16 allows you the ability to embed files as part of the Go binary. This is a pretty cool feature and with so many tools existing to provide this kind of functionality it’s clear that it will be popular. 
Some examples are 

- [gobindata](https://pkg.go.dev/github.com/jteeuwen/go-bindata)
- [packr](https://pkg.go.dev/github.com/gobuffalo/packr)
- [stuffbin](https://pkg.go.dev/github.com/knadh/stuffbin)

### In action 

Now lets see embed in action..
Create a file called `main.go` and add the following code.. 
```go
package main

import (
_ "embed"
"fmt"
)

//go:embed hello.txt
var message string

func main() {
	fmt.Println(message)
}
```

Before we run this code we need to make sure we have a `hello.txt` that contains our message. This message can be whatever you like but I'm going for the trusty "Hello, World!".

Run the code with the following (if we're still in beta)

```bash
go1.16rc1 run main.go
```

which should output something along the lines of 
```bash
Hello, World!
```

Now a more practical example may be embedding a `version.txt` or some kind of configuration file. Another use case may be to embed assets for a webapp. 
The code to do that would look something like this.
```go
package main

import (
	"embed"
	"net/http"
)

//go:embed assets/*
var assets embed.FS

func main() {
	fs := http.FileServer(http.FS(assets))
	http.ListenAndServe(":8080", fs)
}

```

That is all for today and hopefully you enjoyed the post!
Dribbble Shots via v2 API
Tags: codepen
Published: 2021-02-12 00:18:37

---
title: Dribbble Shots via v2 API
published: true
tags: codepen
---

<p>Use the Dribbble v2 API to display your latest shots on a webpage. </p>

<p>Full post: <a href="https://matthewelsom.com/blog/display-shots-on-webpage-with-dribbble-v2-api.html" target="_blank">https://matthewelsom.com/blog/display-shots-on-webpage-with-dribbble-v2-api.html</a></p>

{% codepen https://codepen.io/dizzydaizys/pen/jOVVKGa %}
How to check if a string contains at least one letter using regular expression (regex) in JavaScript?
Tags: javascript
Published: 2021-02-12 00:00:00

---
  title: How to check if a string contains at least one letter using regular expression (regex) in JavaScript?
  published: true
  tags: JavaScript
  date: Fri Feb 12 2021 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/check-if-string-contains-atleast-one-letter-regex-javascript
  cover_image: https://melvingeorge.me/_next/static/images/main-7112f9d400b7d11efb619dc30d74fc42.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/check-if-string-contains-atleast-one-letter-regex-javascript)
  
To check if a string contains at least one letter using regex, you can use the `[a-zA-Z]` regular expression sequence in JavaScript.

- The `[a-zA-Z]` sequence is to match all the small letters from `a-z` and also the capital letters from `A-Z`. This should be inside a square bracket to define it as a range.

```js
// Check if string contain atleast one letter 🔥
/[a-zA-Z]/.test("12345hello6789!"); // true
```

To get a more in-depth explanation of the process. Read on 📖.

Consider we have a string with some letters `12345hello6789!` like this,

```js
// String with some letters
const str = "12345hello6789!";
```

Now let's write the regex by wrapping the `[a-zA-Z]` sequence range inside regular expression delimiters like this `/[a-zA-Z]/`.

```js
// String with some letters
const str = "12345hello6789!";

// Regular expression
const regex = /[a-zA-Z]/;
```

At last, we can use the `test()` method in the regular expression and pass the string as an argument to the method to test if the string contains at least one letter. It can be done like this,

```js
// String with some letters
const str = "12345hello6789!";

// Regular expression
const regex = /[a-zA-Z]/;

// Check if string contians letters
const doesItHaveLetter = regex.test(str);

console.log(doesItHaveLetter); // true
```

- The method returns boolean `true` if present and `false` if not.

See the example live in [JSBin](https://jsbin.com/vakexecipi/2/edit?js,console).

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

---
Reducing “value”
Tags: career
Published: 2021-03-04 13:03:46

---
title: Reducing “value”
published: true
date: 2021-02-12 00:00:00 UTC
tags: career 
canonical_url: https://jhall.io/archive/2021/02/12/reducing-value/
---

Many years ago I was working on a small team when we were approached by a would-be investor.

“We’re interested in buying your company. How many lines of code are in your software project?”

We did a quick calculation, and responded with something like “Eh, about 30,000. Maybe. Not sure. Why?”

”Oh, never mind. We only invest in projects with 1 million lines of code or more.”

From that day on the running joke became that every time one of us deleted some dead code, or refactored some code to be shorter, our commit message would say `Reduced value by N lines.`

How much value does your code provide? And how closely is that value related to the amount of code?

True value is measured by utility, not bulk.
W3C Games CG - February 2021 meetup
Tags: gamedev, w3c, meetup
Published: 2021-02-12 15:52:58

---
title: W3C Games CG - February 2021 meetup
published: true
date: 2021-02-12 00:00:00 UTC
tags: gamedev, W3C, meetup
canonical_url: https://end3r.com/blog/w3c-games-cg-feb-2021/
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/d94t6ku0bj6mb440ixgq.png
---

After gathering at [TPAC in October](https://end3r.com/blog/w3c-games-cg-tpac-2020/), deciding to do that bi-monthly and having a dedicated [meetup in December](https://end3r.com/blog/w3c-games-cg-dec-2020/), we had another **W3C Games Community Group online meetup** that happened earlier this week, on Tuesday February 9th.

The time for February’s meetup was shifted to accomodate Asia-based speakers and participants, since the previous two were happening for them in the middle of the night. It wasn’t a problem for me at all, since it was happening in the morning rather than in the evening Europe time.

We had three speakers this time: **Alicia Nie** from **Tencent** , **Andre Bandarra** from **Google** , and **Jacob Clark** from **BBC**. Alicia showed us **WeChat** mini game runtime, which is specifically optimized to run games. Andre talked about the ways web content can be embedded on Android: through **WebView** , **Chrome Custom Tabs** , and **Trusted Web Activities**. **WebLayer** was mentioned as something that might be useful in the future as well. Jacob spoke about BBC’s cross platform HTML5 runtime that works for both the native platform and the web, mentioning persistent storage as something problematic.

Overall it was another knowledge-packed session, and I’m happy we are having them regularly every two months, with new topics to discuss each time. Can’t wait for the April one already!
Day 307 : The Questions
Tags: hiphop, code, coding, lifelongdev
Published: 2021-02-11 23:50:42

_liner notes_:
- Professional : Pretty good day. Responded to some of the questions that were asked on our community board. Then built out an application to use as a template for a future project I'll be making.

- Personal : Last night, I caught up with "The Watch". Listened to some tracks for the radio show. Looked into some stuff for a side project.

![Overhead view of Kelingking Beach, Indonesia with a part with a mountain sticking into the ocean](https://dev-to-uploads.s3.amazonaws.com/i/dp1xvz9hmb81x1776e75.jpg)

Going to go through some more tracks for this week's radio show. I've been downloading submitted tracks while I have free WiFi at the park. Going to eat some sushi, do some coding and go to sleep. Maybe watch some anime.

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube mauK4kEuSDI %}
Change in my Life
Tags: javascript, html
Published: 2021-02-11 23:46:22

Well, I wanna tell you that my life had a change of 180° since I started learning to program. 
Let me tell you, How was my life when I had a common job.  I got up early to take the bus (keep in mind that in Peru public transport is not good), I came back very tired, more because of the return trip than because of my work, due to the same traffic.  Many times, due to lack of time, I ate junk food, because it was within reach.  
Now my rhythm of life has changed a lot, I prepare my meals depending on the energy I will expend, I have time to do exercise and have a healthy body and mind, I feel less heavy.  So I hope to live and enjoy programming, it is a world that I like.
Oh! I forgot to tell you something!  I'm starting to get familiar with the different APIs, now I'm learning a little more about "canvas". 
Night night and have a good coffee! 🤙🏻
How to explain backend requirements to dev team
Published: 2021-02-11 23:27:31

Hi, with no back end experience, I have been put in charge of explaining back end requirements for a news media app. It will require user login, storage of votes, archiving of articles after one active week, and storage of data on long term voting trends. How much of a plan do i need to develop for the dev team to work with? any suggestions for where to start? Thanks
The Secrets of An Authenticated GitHub Action Workflow
Tags: devops, github, githubactions
Published: 2021-02-11 23:26:13

GitHub Actions is a combination of primitives for users to quickly ship integrations for their repos. Some of these primitives include the API, webhooks, and authentication.

The approach towards authentication has previously been centralized around the **GITHUB_TOKEN**. Before GitHub Actions, your need to create these manually. 

_If you are unfamiliar tokens, let me point you to the docs on [creating a personal access token](https://docs.github.com/en/github/authenticating-to-github/creating-a-personal-access-token)._

GitHub automatically creates a **GITHUB_TOKEN** secret to use in your Github Action workflows. You can use this **GITHUB_TOKEN** to authenticate in a specific workflow runs.

When you enable GitHub Actions, GitHub installs a GitHub App on your repository. The **GITHUB_TOKEN** secret is a GitHub App installation access token. You can use the installation access token to authenticate on behalf of the GitHub App installed on your repository. The token's permissions are limited to the repository that contains your workflow. 

For more information, see "[Permissions for the GITHUB_TOKEN](https://docs.github.com/en/actions/reference/authentication-in-a-workflow#permissions-for-the-github_token)."


Permission | Access type | Access by forked repos
-- | -- | --
actions | read/write | read
checks | read/write | read
contents | read/write | read
deployments | read/write | read
issues | read/write | read
metadata | read | read
packages | read/write | read
pull requests | read/write | read
repository projects | read/write | read
statuses | read/write | read

If you need a token that requires permissions that aren't available in the given **GITHUB_TOKEN**, you can create a personal access token and set it as a secret in your repository.

Before each job begins, GitHub fetches an installation access token for the job. The token expires when the job is finished.

**GITHUB_TOKEN** to create an issue in my team's repository. As an aside, GitHub uses GitHub to build GitHub, and that means most teams have a repository associated with them, including (finance).

The permission to create and manage issues is granted through the **GITHUB_TOKEN**. To leverage it, I pass it to my created Action directly.

```yml
on:
  schedule:
  - cron: 01 13 * * 0
name: Top 5
jobs:
  createAnIssue:
    name: Create an issue
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v2
    - name: Create an issue
      uses: bdougie/create-an-issue@e43b083ea71e22e77a81ffb4a55dacb2addb71ed
      env:
        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
      with:
        args: .github/ISSUE_TEMPLATE/TOP5.md
``` 

_This is part of my 28 days of Actions series. To get notified of more GitHub Action tips, follow the GitHub organization right here on Dev._

{% link https://dev.to/github/run-complex-matrix-builds-in-github-actions-29o1 %}
Tales from the Scrum Dungeon: The Safety Dialog
Tags: scrumdungeon
Published: 2021-02-11 23:25:20

---
title: Tales from the Scrum Dungeon: The Safety Dialog
published: true
description: When users should be careful doing something, so should developers.
tags: scrumdungeon
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/i6t484s10cvopb1vgjy1.JPG
---
Once upon a time, there was a tool that was written that allowed a client to alter their own database in a fairly serious way.  The tool wasn't written on a whim, but was actually needed in some select cases.  Because of the seriousness of the operations being performed, there had to be some mechanism to ensure that the user running it was _really_ sure that they wanted to run it.

Enter the "safety dialog".

It wasn't so much as a single dialog, as a series of message boxes with "yes" and "no" options.  The user running the tool would have to select "yes", then "no", then "yes".  Each message box explained the correct option to select to proceed.  There had been more than one support call where some user had complained along the lines of "Well, I selected 'yes, yes, yes', and it's not working!".

In theory, the idea behind the safety dialog was good - wanting to prevent users from doing irreversible damage to a database, but the implementation could have used some improvement.

These days, a better alternative I've seen is to get the user to type in a specific series of words or a phrase when deleting things like API keys.  It's maybe still not the best option (designing a system where such tools aren't necessary), but at least the "safety dialog" prevented a few accidents from happening along the way.