teleren/devto huggingface dataset:
How to setup a project using tailwindcss for beginners
Tags: html, css, tailwindcss, webdev
Published: 2020-12-30 14:11:52

Hi there!
With [tailwindcss](https://tailwindcss.com/) you can rapidly build modern websites without ever leaving your HTML.

to start a project using tailwind follow me!

 1. Make a folder
--------------
if you use linux OS just open you'r terminal and type:
```bash
mkdir tailwind_dev
```
and then go to tailwind_dev folder
```bash
cd tailwind_dev
```
2. Make package.json file
-------------
to make package.json file you need npm ;
if you don't have npm just follow [this](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm) link.
after that,in you'r terminal type
```bash
npm init -y
```
now if you check the tailwind_dev folder; you'll see the package.json file!
3. Install tailwindcss
------------
for install tailwind just type
```bash
npm install tailwindcss --save
```
4. Make public and src folder
------------
now its time to make two folder
in you'r terminal type
```bash
mkdir public
```
and
```bash
mkdir src
```
5. Make css file
-----------
first with 
```bash
cd src
```
enter to you'r src folder and with 
```bash
touch style.css
```
make you'r css file.
6. Make html file
-----------
then type 
```bash
cd ../public
```
in you'r terminal to enter public folder and type 
```bash
touch index.html
```
7. Import basics
-----------
open you'r IDE  and then open you'r style.css file in src folder and write this codes to import tailwind  base,components and utilities
```css
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
```
save you'r changes !
8. Change package.json for install basics
-----------
open you'r package.json file

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/7onoqtzfijoa7xbx0mtj.png)

and replace 
```javascript
"test": "echo \"Error: no test specified\" && exit 1"
```
with
```javascript
"build-css": "tailwindcss build -i ./src/style.css -o ./public/style.css"
``` 
9. Npm run
-----------
it's almost done, just type ```bash
npm run build-css
```
in you'r terminal.
after that, if you check the public folder you can see the style.css that include tailwindcss class !
10. Last thing for done
----------
just open you'r html file and make you'r project,
to link style.css to you'r html file;in head tag write this code:
```html
<link rel="stylesheet" href="style.css">
```

#### _Be happy!_


<a href="https://www.buymeacoffee.com/mohammadhassani"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--epLLqT_x--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1gn0quro9llouuhzkxbj.png" alt="buy me a coffee" loading="lazy" width="170" height="37"></a>
Partition Solutions with Switchable Smart Glass
Published: 2020-12-30 14:07:26

Let Priviglaze transform your office partitioning between frosted and clear modes, enabling privacy on-demand at the touch of a button. Our made in UK switchable glass are laminated and toughened, offering safety and security that conform to British Kitemark Standards. Our retrofit option means we can apply smart film to existing glass partitions. Both solutions will improve and enhance the efficiency of your business by making collaborative workspaces unique, efficient, productive and aesthetically pleasing.

https://priviglaze.com/office-solutions/
Smart Glass Sustainability
Published: 2020-12-30 14:03:21

Priviglaze sustainability in our smart glass production is important to us. Our smart glass is a sustainable and elegant solution that promotes design aesthetics and energy-efficiency with benefits that far outweigh conventional glass.

Like most glazing solutions, Priviglaze uses low E soft coating. Our product is designed to prevent radiant heat loss, combined with Argon gas utilisation for improved superior thermal performance. Importantly, this regulates a building’s temperature by limiting any heat loss through our smart glass. https://priviglaze.com/sustainability/
How to edit the head tag in Next.js
Tags: react, nextjs, tutorial, javascript
Published: 2020-12-30 14:00:14

---
title: How to edit the head tag in Next.js
published: true
description:
tags: #react #nextjs #tutorial #javascript
//cover_image: https://direct_url_to_image.jpg
---
Want to add some link or script tags in the head?
In this post I'm going to show how to edit the content of the head tag.

In Next.js we can do it by overriding the default `Document`;

Create the file `pages/_document.js` and extend the `Document` class. 

In render method we return the actual structure of the whole application tree. Don't put UI or business logic here.

In this examples, between the Head tag, I placed the link tags to Google fonts. 

```javascript
import Document, { Html, Head, Main, NextScript } from "next/document";

export default class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx);
    return { ...initialProps };
  }

  render() {
    return (
      <Html>
        <Head>
          <link rel="preconnect" href="https://fonts.gstatic.com" />
          <link
            href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap"
            rel="stylesheet"
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}
```

That's it!
Top JavaScript ⚡ Resource to Learn 🙌
Tags: javascript, tutorial
Published: 2020-12-30 13:50:03

If you have no previous programming experience but interested in learning programming, JavaScript is the best option for you. JavaScript is the language of web, and thankfully there are tons of free resources to learn and master it online.

# Why JavaScript?

JavaScript is relatively simply to begin as compared to other languages like C/C++, Java and Ruby. It doesn’t require any specific setup like installing IDE, VM or hardware configuration  – just a plain text editor and your web browser is enough.

JavaScript is an open and cross-platform language with wider developer ecosystem and support. With emerging technologies like Node.js & MongoDB and popular frameworks like AngularJS & Backbone.js, JavaScript has a bright future. Even if you don’t have any intention to become a professional programmer, you should try out JavaScript.
</br>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/etqgj1eimv8gm20ohwvi.png)
</br>
Here is the list of <b>JavaScript Resource</b> for you all start learning and mastering the JavaScript :
</br>

## Website to visit :
- [**Codecademy.com**](https://www.codecademy.com/)
- [**developer.mozilla.org**](https://developer.mozilla.org/)
- [**Freecodecamp.org**](https://www.freecodecamp.org/)
- [**w3schools.com**](https://www.w3schools.com/js/DEFAULT.asp)
- [**learn javascript.online**](https://learnjavascript.online/)

## Books to read :
- A Smarter Way to Learn JavaScript
- JavaScript : The Good Parts
- JavaScript : The Definitive Guide
- Learn JavaScript Visually
- Eloquent JavaScript

## Youtube channels to watch :
- [**LearnCode.academy**](https://www.youtube.com/user/learncodeacademy)
- [**Traversy Media**](https://www.youtube.com/user/TechGuyWeb)
- [**The Net Ninja**](https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg)
- [**freeCodeCamp.org**](https://www.youtube.com/channel/UC8butISFwT-Wl7EV0hUK0BQ)
- [**thenewboston**](https://www.youtube.com/user/thenewboston)

## Courses site to check :
- [**Udemy**](https://www.udemy.com/)
- [**Javascript.info**](https://javascript.info/)
- [**Pluralsight**](https://www.pluralsight.com/)
- [**Udacity.com**](https://www.udacity.com/)
- [**Coursera.org**](https://www.coursera.org/)

## Challenges to try :
- [**exercism.io**](https://exercism.io/)
- [**codewars.com**](https://www.codewars.com/)
- [**edabit.com**](https://edabit.com/)
- [**jschallanger.com**](https://www.jschallenger.com/)
- [**coderbyte.com**](https://coderbyte.com/)

## GitHub repos to explore :
- [**trekhleb/javascript-algorithms**](https://github.com/trekhleb/javascript-algorithms)
- [**getify/you-dont-know-js**](https://github.com/getify/You-Dont-Know-JS)
- [**airbnb/javascript**](https://github.com/airbnb/javascript)
- [**freecodecamp/freecodecamp**](https://github.com/freeCodeCamp/freeCodeCamp)
- [**facebook/react**](https://github.com/facebook/react)

Did you find it helpful ? Thanks for reading this post.
If you have another resource, just comment down below. Thanks 🙌
Sapper, a framework for JAMstack applications
Tags: dohackathon, sapper, jamstack
Published: 2020-12-30 13:13:41

#### Alright, What the heck is Sapper?

Sapper is the companion framework of svelte, like how Next/Nuxt is for React/Vue.

#### JAMstack?

**J**avascript **A**PIs and **M**arkup is an architecture that is easy to build, maintain and scale.

#### The DEV API

Dev has great [API documentation](https://docs.dev.to/api/) but there is still a lot of room for improvement.

#### Getting started with Sapper

This is the standard way to get a default starter template for docs head to [Sapper](https://sapper.svelte.dev/) site.

```
# for Rollup
npx degit "sveltejs/sapper-template#rollup" my-app
# for webpack
npx degit "sveltejs/sapper-template#webpack" my-app
cd my-app

npm install
npm run dev & open http://localhost:3000
```

Now we got the all ingredients for making a JAMstack application we can start building the app but first, this is the anatomy of Sapper directory

```
src
├───components
│       Nav.svelte
└───routes
    │   about.svelte
    │   index.svelte
    │   _error.svelte
    │   _layout.svelte
    └───blog
            index.json.js
            index.svelte
            [slug].json.js
            [slug].svelte
            _posts.js
```

The majority of the work is done inside the src folder. The next part will have details of how the blog is fetched from DEV API.


<center>

###### Pretext, [SvelteKit](https://svelte.dev/blog/whats-the-deal-with-sveltekit) is coming out and the same can be made using SvelteKit

</center>
Daily Developer Jokes - Wednesday, Dec 30, 2020
Tags: jokes, dailydeveloperjokes
Published: 2020-12-30 13:00:05

---
title: "Daily Developer Jokes - Wednesday, Dec 30, 2020"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
cover_image: "https://private.xtrp.io/projects/DailyDeveloperJokes/thumbnail_generator/?date=Wednesday%2C%20Dec%2030%2C%202020"
published: true
tags: #jokes, #dailydeveloperjokes
---

Generated by Daily Developer Jokes, a project by [Fred Adams](https://xtrp.io/) ([@xtrp](https://dev.to/xtrp) on DEV)

___Read about Daily Developer Jokes on [this blog post](https://xtrp.io/blog/2020/01/12/daily-jokes-bot-release/), and check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/).___
### Today's Joke is...
![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e1258ab6087f.png)

---
*Have a joke idea for a future post? Email ___[xtrp@xtrp.io](mailto:xtrp@xtrp.io)___ with your suggestions!*

*This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit.*

<!-- 
Joke text:
___Q:___ Where did the parallel function wash its hands?

___A:___ Async
 -->
Day 7 of 100DaysOfCode: Python Code to Find Fibonacci Numbers Up To Given Number
Tags: 100daysofcode, codenewbie, programming, python
Published: 2020-12-30 12:50:50

This is my 7th day of 100daysofcoding. I continue to learn from Coursera Python Data Structure course and also did some program regarding to some mathematical problems. I tired to write code to find Fibonacci numbers up to given number. My code is right below.
```python
def fibonacci_number(n):
    a = 0
    b = 1
    fib = [a, b]
    
    for i in range(n):
        f = a + b
        a = b
        b = f
        fib.append(f)
    print(f"{fib}")
fibonacci_number(10)
```

<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Day 7 of <a href="https://twitter.com/hashtag/100daysofcode?src=hash&amp;ref_src=twsrc%5Etfw">#100daysofcode</a> and <a href="https://twitter.com/hashtag/Python?src=hash&amp;ref_src=twsrc%5Etfw">#Python</a><br>* More about HTML<br>* More about python program<br>* More about Python Data structure<br>* Python program to find the Fibonacci number from the given number <a href="https://t.co/QrDuJsaQ1N">pic.twitter.com/QrDuJsaQ1N</a></p>&mdash; Durga Pokharel (@mathdurga) <a href="https://twitter.com/mathdurga/status/1344261544830406658?ref_src=twsrc%5Etfw">December 30, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
A.I. Learns to play Google Chrome Dinosaur Game
Tags: machinelearning, gamedev, csharp, deeplearning
Published: 2020-12-30 12:46:14

I made A.I. play the "Google Chrome's Dinosaur Game". I did this with the help of Genetic Algorithms and Neural Networks, basically Neuroevolution.
Here's the link if anyone is interested.

Video - https://youtu.be/nnR4rI_viqU
Question on Inverted Paging | Operating System - M05 P15
Tags: linux, beginners, devops, tutorial
Published: 2020-12-30 12:40:58

**This is a multipart blog article series, and in this series I am going to explain you the concepts of operating system. This article series is divided into multiple modules and this is the fifth module which consists of 26 articles.**

_In this article we will see a question on inverted paging and try to understand the concept of inverted paging._

***Question:*** Consider a virtual address space of 32 bits and page size of 4 KB, system is having a RAM of 128 KB. Than what will be the ratio of page table and inverted page table size, if each entry in both is of size 4 B?

***Answer:*** Virtual address space = 32 bits

Page size = 4 KB = 2<sup>2</sup> x 2<sup>10</sup> = 2<sup>12</sup>

Therefore, Number of page = 2<sup>20</sup>

Number of page bits = 20

Size of page table = 2<sup>20</sup> x 4 B

In inverted paging table `number of entries = number frames in main memory`

Physical address = 128 KB = 2<sup>7</sup> x 2<sup>10</sup> = 2<sup>17</sup>

`Frame offset = Page offset`

Therefore, number of frames in main memory = 2<sup>5</sup>

Size of inverted page table = 2<sup>5</sup> x 4 B

Therefore, according to the question 

2<sup>20</sup> x 4 B/ 2<sup>5</sup> x 4 B = 2<sup>15</sup>:1

_So this was a simple question on inverted paging. Hope you liked it and learned something new from it._

If you have any doubt, questions, quires related to this article or just want to share something with me, than please feel free to contact me.

### 📱 Contact Me

[Twitter](https://twitter.com/r_mishra10)
[LinkedIn](https://www.linkedin.com/in/rahul-mishra-66210b185)
[Telegram](https://t.me/rahul_mishra10)
[Instagram](https://www.instagram.com/rahul_mishra10/?hl=en)

### 📧 Write a mail
<rahulmishra102000@gmail.com>

#### 🚀 Other links

[GitHub](https://github.com/rahulMishra05)
[HackerRank](https://www.hackerrank.com/rahulmishra10201)
dişli imalatı
Tags: discuss
Published: 2020-12-30 12:23:16

Dişli imalatı
bir dişlinin ham malzemeden çeşitli araçlarla, makinelerle işlenerek nihai boyutlara ulaşmasındaki süreci ifade eder. Bu nihai boyutlara ulaşması için dişli tipini, boyunu, enini esas alarak bazı imalat yöntemleri uygulanır.

Bu yöntemlerden en önemlisi ve en çok kullanılan yuvarlama yöntemi olarak adlandırılan maag yöntemi , fellow yöntemi ile azdırma yöntemi  olarak sıralayabiliriz.
https://kavtech.com.tr/disli-imalati/
Checklist for a skilled Node.js developer
Tags: node, backend, todayilearned, todayisearched
Published: 2020-12-30 12:02:46

Outstanding developers have a comprehensive knowledge of Node.js development processes, software, and technologies. Here’s the list of the most required skills:
* Complete understanding of Node.js and common resources for development (broccoli, npm, gulp, brunch, grunt, and others)
* Understanding specific (Express, Solid Loop) frameworks and languages (HTML, CSS, Jade, EJS, etc.)
* Database experience and MongoDB
* Angular, jQuery, and PHP experience
* Experience with CSS server-side (Stylus) preprocessors
* Comprehension of asynchronous programming in depth
* Semantic versioning, code versioning, databases, and data integration hands-on experience
* Microservice architecture comprehension 
* Experience with the implementation of unit tests through automated platforms for testing

For being one of *the best Node.js developers*, you should practice all the things from the list below:
1. Observe the structure of the project to keep the code clean and avoid errors 
2. Develop a new project using `npm init` to allow more metadata to be added 
3. To use `process.env` effectively, apply environment variable 
4. Try to avoid synchronous functions to prevent other codes from being blocked
5. Utilize Gzip to minimize time lags 
6. Make deployment safer by using dockers
7. Test Written Code
8. Find problems by using a `.catch()` handler. 
9. Use and observing the current guidelines when coding.
10. Know the best JavaScript practices

If you want to know more about Node.js developer hard skills, read <a href="https://exceed-team.com/hire-node-js-developers">our article</a>. We also recommend you to check <a href="https://exceed-team.com/tech/5-best-nodejs-frameworks">5 best Node.js frameworks</a> because they are crucial in some Node.js projects and make a great difference in product performance and code quality.
電路圖這樣畫但廠商不是這樣做的災難 D1 mini
Tags: d1mini, arduino, esp8266
Published: 2020-12-30 11:44:29


因為機緣巧合的關係, 意外發現某些廠商生產的 [D1 minin 相容控制板](https://www.wemos.cc/en/latest/d1/d1_mini.html)會把從 5V 的外部供電直通給 Micro-USB, 如果你的 Micro-USB 連接電腦的 USB 插孔, 這樣就可能會出事。

如果你看原廠的[電路圖](https://www.wemos.cc/en/latest/_static/files/sch_d1_mini_v3.0.0.pdf), 在 Micro-USB 到 5V 的路徑中會有一顆 B5819W 二極體擋在中間, 防止 5V 的外部電源回流到 Micro-USB：

![](https://i.imgur.com/CK8Bb16.png)

不過有些廠商生產的 D1 mini 卻像是沒有這一顆二極體, 導致外部供電時會直通 Micro-USB 的插孔, 也就會讓外部電源直通電腦的 USB 插孔, 像是以下這個小實驗就可以讓外部電源經由 D1 mini 的 Micro-USB 供電給另一端的 RPi2(當然, 這個 RPi2 可以透過 USB-A 供電也很怪, 他真正供電的地方應該是他自己的 Micro-USB, RPi3 就無法這樣供電)：

{%youtube jWdao-PCXsA %}

如果你的外部供電電壓太大或不穩, 或者你的電腦主機板上的 USB 設計不是很好, 就要小心, 避免這種 D1 mini 損壞主機板。
Covtact: It's about first impressions [DO-Hackathon]
Tags: dohackathon, react, design, illustration
Published: 2020-12-30 11:41:15

---
description: Build a contact diary / logging app for the DigitalOcean Hackathon: Improve the emtpy state
---

## Project recap
During the DigitalOcean Hackathon 👨‍💻 I want to build an app which allows you to log with whom you had contact. This is so you can inform people if need be and stop further COVID-19 spreading.

There is already a working version, hosted on DigitalOcean’s App platform, available: [Covtact](https://covtact.app). 

## Working on the first empression: Empty state with illustrations

After taking it kind of slow during the christmas days, I'm now back on this side project. One thing which needed improving was the 'empty state'. After first setting the encryption password, users obviously couldn't have logged any contacts  yet, so there wasn't a lot to show. Users were pretty much greeted with an blank screen. This needed to change. Since there is not much data to show, I decided to add a nice illustration and some copy to tell the user what's going on.

I browsed [undraw](https://undraw.co/illustrations) for a nice illustration. By the way, undraw is awesome! I found one wich just the right vibes, a women standing alone in front of a window and looking in the night. Fitting for the time and this app! After importing it in my React Application, it was straightforward to use. Loving the React ecosystem...

![Covtacts' Empty screen, telling users nothing is logged yet, and encouraging them to do so](https://dev-to-uploads.s3.amazonaws.com/i/9z9r60oqjoxjysjfud2p.png)

Next, I want to tackle translation for this app, stay tuned.

## Feedback?

Again, try it out, [log your contacts](https://covtact.app) if you had any and help stop this pandemic. [Hint: It might become extra important during the holidays, please stay responsible in your actions]. 🙏

And tell me what you think about this project down in the comments, or let‘s connect on [twitter](https://twitter.com/kriswep)!
(Video Series)⚡️Docker Practical Guide⚡️Part-4: Install WordPress and MySQL with Docker-Compose 🤓
Tags: docker, wordpress, mysql, webdev
Published: 2020-12-30 11:36:08

It's a Series on DOCKER- ⚡️DOCKER Practical Guide⚡️
All the  Docker concept in this series can be applied in any technologies like - Java, .Net, Python, Go, you name it.

<h1>Part-3: Install WordPress and MySQL with Docker-Compose </h1>

In today's video, we will see how we can use Docker-Compose to install WordPress and MySQL and create a Basic Hello-World Website easily in a few minutes. 💪

Enjoy 🌸

{% youtube N6pO24XVSVo %}

This is the basic docker-compose.yml file config. 👇

```yaml
services:
  my_wp_site:
    image: wordpress:latest
    ports:
      - "8000:80"
    restart: always
    depends_on:
      - mysql_db
    environment:
      WORDPRESS_DB_HOST: mysql_db:3306
      WORDPRESS_DB_USER: wordpress
      WORDPRESS_DB_PASSWORD: wordpress
      WORDPRESS_DB_NAME: wpdb
  
  mysql_db:
    image: mysql:5.7
    restart: always
    volumes:
       - db_data:/var/lib/mysql
    environment:
      MYSQL_ROOT_PASSWORD: somewordpress
      MYSQL_DATABASE: wpdb
      MYSQL_USER: wordpress
      MYSQL_PASSWORD: wordpress
volumes:
    db_data: {}
```

In this Series, I will post the following topics and more 🙌
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/b2vpj4sgpf059uvh253g.png)

As I will show some fun Docker stuff we might need in our day-to-day work, That's why the name of the series is - ⚡️DOCKER Practical Guide⚡️

SUBSCRIBE to YouTube Channel - https://www.youtube.com/c/TheDestroDevShow?sub_confirmation=1
LIKE FB Page - https://www.facebook.com/the.destro.dev.show/
Follow on Twitter - https://twitter.com/destro_mas
Follow on DEV - https://dev.to/destro_mas

Made with ❤️ in Berlin!

Cheers!
👋

<hr />
As I am trying to contribute contents on the Web, you can buy me a coffee for my hours spent on all of these ❤️😊🌸

<a href="https://www.buymeacoffee.com/destrodevshow" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" style="height: 45px !important;width: 117px !important;" ></a>