teleren/devto huggingface dataset:
Start with your first Tailwind CSS Project
Tags: css, html, design
Published: 2020-09-17 08:10:13

Tailwind CSS is a low-level css framework which provides you hundred of classes to make styling easier. I have even written a full website without writing any custom css. Tailwind can do that. Lately, it is being used in many big projects and companies

## Making a directory
```sh
mkdir tailwind_dev && cd tailwind_dev
```
Paste the above in your terminal/command prompt

Now to install tailwind, we need to use **npm** which is a package manager for node and javascript. So, to install tailwind, you need to have node installed on your machine, which brings in npm with it
> You can download Node from https://nodejs.org/en/download/

## Initializing npm
To use npm inside a project, you need to initialize the project to use npm. So, to do that, paste the below in the command line
```sh
npm init -y
```
This will create the following file in the directory
- package.json

## Installing **Tailwind**
```sh
npm install tailwindcss --save
```
This will create a folder called *node_modules*

## Using tailwind
We will be having two directories in our folder
- src
- public

The src folder will have the uncompiled css.
The public folder will have everything ready and all the html, js, etc, files.

So, to do that create these two using the following command
```sh
mkdir public && mkdir src
```

```sh
cd src && touch styles.css && cd ..
```

This will create the two directories and create are style.css file inside the src directory

```sh
cd public && touch index.html && cd ..
```

Now, open the folder in your favourite code editor. My favourite is VS Code, and if you have it installed you can open the directory with the following command
```sh
code .
```
## Start editing CSS
Now, go to the style.css file inside your src folder and add the following:
```css
@tailwind base;

@tailwind components;

@tailwind utilities;
```
These are just some basic tailwind css you need to import to get started.

Now, in you package.json file and **remove** the following line:
```json
"test": "echo \"Error: no test specified\" && exit 1"
```
And **add** the following in place of it
```json
"build-css": "tailwindcss build src/styles.css -o public/styles.css"
```
Now, run the following in the terminal
```sh
npm run build-css
```

Now, you would be able to see a styles.css file inside the public directory

## Editing HTML to use tailwind

Now in the *index.html* file, add the following inside the head tag

```html
<link rel="stylesheet" href="styles.css">
```

Voilà, you are ready to use tailwind. To verify, just add the following in the body tag

```html
<h1>H1</h1>
<h2>H2</h2>
<h3>H3</h3>
```

If the size of all the three texts, is the same, then you're ready to start off.
I would suggest going through the video below and the following videos of the playlist, of **The Net Ninja**. I learnt Tailwind CSS from his videos and personally love the way, he teaches it

{% youtube 3ZMUgga6SsY %}

You should also go through the [Tailwind documentation](https://tailwindcss.com/docs/installation) for better understanding
Deploy static websites on Azure App Services
Tags: azure, html, webdev
Published: 2020-09-17 07:58:02

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/s3uq7gunltb4fahkchy5.jpeg)
###So let's start
<ul>
<li>
First of all open <a href="https://portal.azure.com">Azure Portal</a>
</li>
<li>
Open Azure CLI in the portal, or you can also login in your local terminal.
<li>
Create a resource group:
<pre>az group create --name myResourceGroup --location "West Europe"</pre>
</li>
<li>
Create an App Service Plan:
<pre>
az appservice plan create --name myAppServicePlan --resource-group myResourceGroup --sku FREE</pre>
</li>
<li>
Create Web App:
<pre>
#Bash
az webapp create --resource-group myResourceGroup --plan myAppServicePlan --name <app-name> --runtime "PHP|7.4" --deployment-local-git
#PowerShell
az --% webapp create --resource-group myResourceGroup --plan myAppServicePlan --name <app-name> --runtime "PHP|7.4" --deployment-local-git
</pre>
You should see something below as the output:
<pre>
Local git is configured with url of 'https://<username>@<app-name>.scm.azurewebsites.net/<app-name>.git'
{
  "availabilityState": "Normal",
  "clientAffinityEnabled": true,
  "clientCertEnabled": false,
  "cloningInfo": null,
  "containerSize": 0,
  "dailyMemoryTimeQuota": 0,
  "defaultHostName": "<app-name>.azurewebsites.net",
  "enabled": true,
  < JSON data removed for brevity. >
}
</pre>
</ul>
<li>
Now navigate to 
<pre>http://your-app-name.azurewebsites.net</pre> 
And you should see page like below
</li>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/0j4j7kfynvap59z1iidh.png)
<ul>
Now navigate to your project directory in your local
<li>
Create a new file named <pre>index.php</pre> in your project root and write the following line in the file:
</li>
<div class="highlight"><pre class="highlight php"><code><span class="cp">&lt;?php</span>
 include_once("index.html"); 
?>
</div>
<li>
Next, create a composer.json file in the root directory and write the following in it: <pre>{}</pre> 
</li>
<li>
First, lets use git to initialize or create a version of the site we want to deploy:
<pre>git init</pre>
</li>
<li>
Then, we will add all the files to the git repository.
<pre>git add .</pre>
</li>
<li>
Commit the changes
<pre>
git commit -m "Initial Commit"
</pre>
</li>
<li>
Add the remote of Azure Repo:
<pre>git remote add azure your-deploymentLocalGitUrl-from-create-step</pre>
</li>
<li>
<pre>git push azure master</pre>
</li>
<li>
Navigate here and your website is live 🎉🎉
<pre>http://your-app-name.azurewebsites.net</pre>
</li>
</ul>
WebDev for beginners: The Path
Tags: webdev, mvc
Published: 2020-09-17 07:47:48

This starts when I was starting with WebDev. I was suggested to start with HTML, CSS, and JavaScript. I returned to my room and started with HTML. It was the easiest. Then I started CSS and to be frank it seemed easy, just a bunch of style elements like font, position, paddings, etc, easy-peasy right? Here my actual love-hate relation started with CSS :unamused:. Now came Js it was easy as I came from C++.

After this done, most of the beginners including me :relieved: think that we're now WAB DEVLAPEORS.

#THE PATH

Now that I somehow have managed to get some experience in WebDev. I wanted you to not go through the same pain. Here is a kind of right path for learning WebDev.

First HTML, CSS and JavaScript
 - HTML is the easiest of all, you can find awesome blogs anywhere on the internet for this.
 - CSS (love-hate :blush:) is a great tool if learned the right way. After learning the bare basics, immediately go for the layouts the grids, flex. These are the most important, I repeat go for the Layouts. And Done! :heart_eyes:. Now CSS frameworks will be pieces of Cake.
 - JavaScript, if you come from C/C++, Java it will be very easy for you. For those who don't have any priors experience with any programming language. Go learn!.
  Continuing with Js:
    - Start with the usual variables, conditional statements, loops, etc.
    - Then go for DOM-Manipulation, you'll be able to implement hell lot of cool stuff. Like, make the Legendary Snake Game or any animations. See mine here [animations](https://ankiiitraj.github.io). I loved [The Coding Train](https://www.youtube.com/user/shiffman) youtube channel. You can learn in-depth JS here following fun animation.
    - Lastly, you need to know about the *asynchronous* nature of JavaScript. This is what makes JavaScript, *JavaScript*. I learned this while making [Sorting Visualizer](https://ankiiitraj.github.io/sorting-wait).

Now you are ready and you can go ahead and create a Portfolio website of your own, as a cool project, to showcase your learning. BTW here's mine [https://ankiiitraj.github.io](https://ankiiitraj.github.io) :grimacing:.

Now comes the interesting part of creating a full-fledge **Web-Application** that will have servers and databases.

I will suggest going for the basics of Design-Patterns. I **can not emphasize** more on this. I have been going on circles for months figuring out why/what is this folder and files.

I finally read about **MVC** and things got clearer form there.

And that's it, now you're well equiped to learn any frameworks and libraries you will need, more efficiently.

Make cool applications and help making lives better.

###Thank you for reading

#Peace ☮️
Designing Tips & Tricks for Developers
Tags: css, design, uiweekly, design4dev
Published: 2020-09-17 07:47:47

Being a web developer is not an easy task. You have to learn many things from making APIs to managing database😑. In this world of full-stack developers where organizations want everything from one developer, you might think that for you code optimization and performance is a great success but if your webapp don't look good nobody will give you praise for your work that should be given to you. 
![SedLife](https://media.tenor.com/images/316c9431a29277fb85fe6b6165cf21b9/tenor.gif)
In this series, I will tell you some cool tricks and tools to decide layout, colors, typography, and illustrations.🚀

We will be working step by step towards this goal.
First of all draw layout for your website on a piece of paper. Yes, you heard right **on a paper**. You must be asking why we should start our work from the paper when we have many amazing tools available. Don't worry we will do it with tools also. There are some reasons for using paper:
- Everyone can easily draw their thoughts on paper. 
- They don't need to install any software. They don't need to learn any tool for this. 
- When you are drawing on paper. You erase it redraws it then erase it through this whole process of drawing and erasing, you will certainly create the best thing which you can't create directly on any software.
- If you are working in a team, give everyone tasks to depict their thoughts and present them on paper.

Now you have collected and drawn many designs. Ask your team which one is best to go with. Maybe you all come with a point where you merge different ideas together to create one **masterpiece**.
If you are working alone then maybe you can ask someone for advice or go with that thing which looks great from your perspective. 

You must be thinking that since we are not good with frontend stuff how we will implement them? The answer to that is this: [GridByExample](https://gridbyexample.com/examples/) 🤩🤩 just go to this website pick that layout which is matching most with your selected masterpiece, add some tweaks to it and yes now you are good to go. You can use many frontend libraries for your components.
e.g: bootstrap, material-ui, tailwind-css. But since you have created a proper layout of one part of your webpage, you now have to focus on other things like colors and fonts. But for that, you have to wait for the next part of this series 🙌

If you want to learn more go to this website and learn many things in 4 minutes [WebDesignin4Minutes](https://jgthms.com/web-design-in-4-minutes/)
HandyVITA - Compiling PS Vita Homebrew with Github Actions
Tags: actionshackathon, emulation, psvita, vitasdk
Published: 2020-09-17 07:35:40

[Instructions]: # (To submit to the GitHub Actions x DEV Hackathon, please fill out all sections.)


### My Workflow

This is a very simple workflow that allows you to use the [Vita SDK](https://vitasdk.org/) docker to compile projects for Playstation Vita. Therefore, you will be able to build and download the built homebrew just on/from Github. To do this, it uses the [actions/checkout@v2](https://github.com/marketplace/actions/checkout) action to access the source code of the repository and the [actions/upload-artifact@v2](https://github.com/marketplace/actions/upload-a-build-artifact) action to associate the created package to the workflow execution. Moreover, this action can be associated with any commit or pull request to download and test the code.

### Submission Category: 

Wacky Wildcards


### Yaml File and Link to Code

{% gist https://gist.github.com/frangarcj/717519fda68014e16a48659dad423456 %}

{% github https://github.com/frangarcj/HandyVITA no-readme %}



### Additional Resources / Info

Thanks to [fjtrujy](https://github.com/fjtrujy) for helping on setting up the docker.
Submission for the actions hackathon
Tags: actionshackathon, github, opensource, showdev
Published: 2020-09-17 07:17:22


This is the post for the submission of my action for the [actionshackathon](https://dev.to/peter279k/getting-started-with-github-action-to-deploy-website-continuously-2gn0) on DEV.


### My Workflow
The GitHub Actions for pushing to GitHub repository local changes authorizing using GitHub token.

### Submission Category: 
I am submitting my action under the Wacky Wildcards category.


### Yaml File or Link to Code

[Repository link](https://github.com/Garvnanwani/github-push-action)


### Additional Resources / Info
September
Tags: actionshackathon, bash
Published: 2020-09-17 06:59:31

[Instructions]: # (To submit to the GitHub Actions x DEV Hackathon, please fill out all sections.)

### My Workflow

This github action just check if date is 21st september or not. If true then change all files with September lyric.


### Submission Category: 

Wacky Wildcards


### Yaml File or Link to Code

```yaml
on:
  push:
    branches: master
  schedule:
    - cron: '30 17 * * *'
      
jobs:
  build:
    name: September
    runs-on: ubuntu-latest
    env:
      GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
    steps:
      - uses: actions/checkout@v2
      - name: September action
        uses: ekickx/september@master 
```

{% github github.com/ekickx/september %}

[Note]: # (Our markdown editor supports pretty embeds. Try this syntax: `{% github link_to_your_repo %}` to share a GitHub repository)
3 Useful tricks for every new developer out there...
Published: 2020-09-17 06:58:05

1- KNOW HOW TO SEARCH 🕸 🙃
What will be the ideal solution is some tool that you can use to find the piece of code that you are looking for. Possibly, a file searching tool. Many of them exist, I use AstroGrep at work. It is a GUI version of grep for Linux. What it helps you to do is: to search for a piece of text through a directory.

2- READ THOSE ERROR MESSAGES 😫
What I discuss is simple, but paying close attention to those small details is a time-saver. Eventually, you will become self-reliant and more productive at your job. YES! THEY ARE DISPLAYED FOR YOU.

3- MY CLOSEST FRIEND 🕺💃
Try debugging the application by stepping through the code and see how it works. This will help you to have a better sense of what the code is doing. STEP BY STEP...

CONCLUSION 🏁
The goal is for you to become a better self-reliant developer. Thanks for reading.

HAPPY CODING!🎊
GitHub Actions for GitLab (OSS)
Tags: actionshackathon, github, opensource, gitlab
Published: 2020-09-17 06:55:11

---
title: GitHub Actions for GitLab (OSS)
published: true
description: I introduced macOS Testing Kit for GitLab Development Kit (GitHub Actions x DEV Hackathon)
tags: actionshackathon, github, opensource, gitlab
---

![mTK4GFK](https://dev-to-uploads.s3.amazonaws.com/i/4z1nr4ljncj6y4y0yowx.png)

### My Workflow

I implemented GitHub Actions for GitLab Development Kit quality assurance on macOS device, which is available at https://github.com/tnir/gdk-mac-testing-kit/actions .

![GitHub](https://dev-to-uploads.s3.amazonaws.com/i/lkrrgdpxk85uto4s14nz.jpg)

### Submission Category: 

Maintainer Must-Haves

### Yaml File or Link to Code

https://github.com/tnir/gdk-mac-testing-kit/blob/brew/.github/workflows/gdk.yml

`{% github tnir/gdk-mac-testing-kit %}`
`{% github https://github.com/tnir/gdk-mac-testing-kit/blob/brew/.github/workflows/gdk.yml %}`

https://gitlab.com/gitlab-org/gitlab-development-kit
`{% gitlab https://gitlab.com/gitlab-org/gitlab-development-kit %}`

### Additional Resources / Info

- https://gitlab.com/gitlab-org/gitlab-development-kit

---

### Why?

Since early 2018, I have suggested to use GitLab CI/CD for external Git repositories, more specifically one called as GitLab CI/CD for GitHub, simply GitLab CI for GitHub. [1](https://qiita.com/tnir/items/ee991101a7c948a84f7e), [2](https://gitlab.com/tnir/trivy-ci-test/-/pipelines), [3](https://twitter.com/tn961ir/status/1042249279488765952), [unpublished source]

![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fabout.gitlab.com%2Fimages%2F10_6%2Fcicd_project.png?ixlib=rb-1.2.2&auto=format&gif-q=60&q=75&w=1400&fit=max&s=ed4f892b8a87ecbe83a169b813a0b298)

By the end of 2019, at GitHub Universe 2019, [GitHub Actions](https://github.com/features/actions) went from Beta to General Availability, so I could use this for Linux/Windows and macOS environment.

As a community (quarterly) Hackathon organizer of GitLab, [GitLab Development Kit (GDK)](https://gitlab.com/gitlab-org/gitlab-development-kit) is crucial to make hackathons successful. Many developers use macOS on their MacBook's, but the instruction documentation has not been tested continuously.

As the latest Hackathon was scheduled on 2020-09-02/03, I started to verify the entire document of GDK on GitHub Actions on 2020-08-12. At that time it was still valid through on Actions and my local environment. But a few hours later on it, it was suddenly broken. (...snip... no time to write down everything happened during the Hackathon event)

So on the Hackathon days, we spent 30 person-hours through the 3 days. If we had fully setup it, this Action would help us save 20-30 hours in total.

Even after GitHub Actions X Dev Hackathon, I will improve this Actions for the upcoming Hackathon :hearts:


---
<small><small>Photo by <a href="https://unsplash.com/@richygreat?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Richy Great</a> on <a href="https://unsplash.com/s/photos/github?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></small></small>
Replace querySelector with Alpine.js x-show 
Tags: webdev, productivity, tutorial, beginners
Published: 2020-09-17 06:32:26

I challenged myself to make a screencast, to keep the barrier minimal I decided to start with something small.

Here's my video on how to replace `document.querySelector` with Alpine.js `x-show`.

{% youtube MJhbLoQOfSo %}

Please let me know any feedback you have on my first video! :)
What paid services do you use?
Tags: webdev, discuss, productivity
Published: 2020-09-17 05:49:36

---
title: What paid services do you use?
published: true
description: 
tags: webdev, discuss, productivity
cover_image: https://mk0supsystic186fa3rj.kinstacdn.com/wp-content/uploads/2018/08/paid-membership-levels.png
---
Maybe you have bought some tools, extensions, libraries, etc, or you have some active paid subscription plans on some services?

Currently,  I can't think of any of my own, but I would be interested to discover recommendations on the best cost-value stuff worth paying for?
LeetCode 844. Backspace String Compare
Tags: leetcode, algorithms, javascript, stack
Published: 2020-09-17 05:31:54

###Description:
Given two strings `S` and `T`, return if they are equal when both are typed into empty text editors. # means a backspace character.

Note that after backspacing an empty text, the text will continue empty.

###Example 1:
```
Input: S = "ab#c", T = "ad#c"
Output: true
Explanation: Both S and T become "ac".
```

###Example 2:
```
Input: S = "ab##", T = "c#d#"
Output: true
Explanation: Both S and T become "".
```

###Example 3:
```
Input: S = "a##c", T = "#a#c"
Output: true
Explanation: Both S and T become "c".
```

###Example 4:
```
Input: S = "a#c", T = "b"
Output: false
Explanation: S becomes "c" while T becomes "b".
```

###Solution:
Time complexity : O(n)

```javascript
// In this solution we use an array like a stack 
// to create 2 new strings from the inputs
// Then we check if they are equal
const backspaceCompare = (S, T) => buildString(S) === buildString(T);
// Helper function
 function buildString(S) {
    // Data structure that we will use to create the compare strings
    const stack = [];
    for (const c of S) {
        // Add letter to the stack if it is not '#'
        if (c != '#')
            stack.push(c);
        // Remove the most recently added letter if we encounter '#'
        // and the stack is not empty
        else if (stack.length!==0) {
            stack.pop();
        }
    }
    // Convert array to an string
    return stack.join('');
}
```
Find all ip addresses in a project
Tags: devops, grep, regex
Published: 2020-09-17 05:28:55

---
title: Find all ip addresses in a project
published: true
description: 
tags: devops, grep, regex
//cover_image: https://direct_url_to_image.jpg
---

When doing a task about migration server for a project, my first thing to do is find what these external API endpoint (usually it comes with ip address like
```
10.10.0.1
123.123.123.123
```

To find all ip address in a project we can use `grep` command from root project directory:

```
 grep -r -oE "([0-9]{1,3}\.){3}[0-9]{1,3}" .
```

You can also exclude directory when using `grep`, example: 

```
 grep -r --exclude-dir=node_modules -oE "([0-9]{1,3}\.){3}[0-9]{1,3}" .
```
Hiring Part Time Remote Developer
Tags: reactnative
Published: 2020-09-17 05:04:18

We are looking to bring a new App Developer onto our team asap! The position is part time and remote, and applicant must be proficient in using the React Native framework! We are looking to bring someone on as soon as possible, so get super excited as joining our team is an awesome opportunity to aid us in huge potential growth and expansion! 

We want to bring on someone who truly believes in what it is we are creating, is excited to help us build this app, and wants to work with ocean loving advocates striving to produce something great for the diving/ocean industry! 

If you’re interested please send over your resume to our email info@diveviz.com  

About DIVEVIZ: Our app is dedicated to bringing the dive community consistent and accurate ocean visibility reports and forecasts. Our goal is to provide the most accurate representation of what a dive site would be like, before having to enter the water.

DiveViz, LLC. has developed an app and algorithm to communicate accurate real-time and forecasted ocean visibility reports. The platform is a prognostic tool that will lead to more coordinated and timely responses to high visibility events for the recreational, commercial, scientific, and military diving communities and improve advanced activity planning for all ocean activities. DiveViz is working to use predictive analytics and machine learning to address the numerous influences that must be accounted for in visibility forecasting, including physical factors like currents, wind, waves, storm patterns, near shore rainfall, upwelling strength, and thermohaline circulation, as well as biological factors including algae blooms, nutrient inputs, and human activity, but without any historic ocean visibility data researchers cannot begin this analysis. DiveViz will be engaging with the recreational diving community to crowdsource the first dataset of visibility reports and in collaboration with the Scripps Institute of Oceanography, begin refining the forecasting algorithm.