teleren/devto huggingface dataset:
What I love about Tailwindcss
Tags: css, tailwindcss, frontend
Published: 2020-07-03 18:30:12

I have always been a bootstrap guy when it comes to building layouts rapidly. I use Material UI occasionally when the layout contains a lot of advanced components (datepicker, pagination, and others) but bootstrap has always been my go-to framework.

Recently, I was asked to develop a website at work, a fairly simple one to showcase a product. My initial reaction was to go with the framework I am most comfortable with but wait. developers don’t do the same thing again and again right? Developers are meant to be curious by nature. So, I stepped out of my comfort zone, searched for a lightweight framework, and found this beauty called Tailwind.

Here are the top five things I love about Tailwindcss.

**It is a utility-first framework**
Most CSS Frameworks come with lots of predesigned components from buttons to alerts. These are very helpful when you don’t have to add your personal touch but it can be time-consuming to overwrite all of their predetermined classes for implementing a custom design.

But Tailwindcss has been developed with utility-first mentality. Unlike component-based frameworks like Bootstrap and Material UI, Tailwindcss gives you highly customizable utilities to work with. And btw, utilities are the shorthand classes for CSS like mt-auto for margin-top: auto.

**All the Styles can be written on the HTML document**
If you use Tailwind at its fullest potential, I doubt you will ever need a separate file for styles. The utilities are highly customizable and with the responsive variants, you can make up all the CSS on your HTML document. But if your HTML is starting to get messy with all the repeated styles, you can always create a new file for keeping these styles. But my point is not about the separate stylesheet, it’s rather about not having to go through the process of forcing yourself to come up with unnecessary class names.

**The small size of Style Sheet**
Tailwind under the default configuration outputs 1996 KB of uncompressed CSS. This is because it has a lot of utility classes and each class corresponds to a new style. But you can always remove the unused styles using a tool called PurgeCSS. After removing unused styles, I ended up with 12 KB of compressed CSS.


**Many Thanks to Tailwind Authors**
The authors are super active on the project and the official documentation is so well made that you can catch up on the framework in a very short period of time.

**Resources**
* [Tailwindcss official docs](https://tailwindcss.com)
* [Repository for community components](https://tailwindcomponents.com)
Learning How to Learn In Bootcamp and Beyond
Tags: codenewbie, beginners, bootcamp
Published: 2020-07-03 18:15:06

One of the topics that I've always enjoyed teaching is learning. Understanding how to learn and what it takes to get the most out of a learning experience is infinitely helpful. Knowing how you learn and curating learning experiences that match your learning style increases your capacity and ability to learn quickly, a benefit that's useful in many paths. 

In this video, I share learning styles, tips, and a bit on imposter syndrome for students of Flatiron School on their first day of bootcamp. While some of the information shared is specific to Flatiron (and publicly available on their site), a lot of information you'll gain is general helpful advice for preparing yourself for an intense learning experience like a bootcamp or short course. 

{% youtube SPCh2G1SgaA %}

I hope you gain some nuggets that help you maximize learning in your next experience!
Curse Words Heisenbug in Alexa
Tags: alexa, voice, bugs
Published: 2020-07-03 17:51:16

Recently Skill I was working on got rejected from certification by Amazon - the reason was that the content was not played properly.

I started to dig deeper and checked some random content files, all were played just fine. Then I found one problematic file. 

At first, I thought that it might be related to ID3 tags embedded in the mp3 file. I knew that Alexa Audio Player does not work with mp3 files containing custom tags.
I ran `eyeD3` with `--remove-all` option and tried again,
unfortunately, it didn't work.
 
I hosted the file locally on my machine and made it public using `ngrok`. Then when I looked into `ngrok` logs I couldn't believe my eyes:

![Alexa alters file names containing curse words](https://dev-to-uploads.s3.amazonaws.com/i/6lei2jqty1s44uw96irk.png)

It turned out that Alexa device is censoring all content going to the device from skill, even if it's a file name! After removing swear words playback worked like a charm.

Did you found any mind-boggling Alexa bugs? Share them in the comment :)
What was your win this week?
Tags: discuss, weeklyretro
Published: 2020-07-03 17:42:11

---
title: What was your win this week?
published: true
description: Got to all your meetings on time? Started a new project? Fixed a tricky bug?
tags: discuss, weeklyretro
cover_image: https://cl.ly/188e843c2985/download/Image%202019-02-15%20at%202.36.37%20PM.png
---

👋👋👋👋

Looking back on your week -- what was something you're proud of?

All wins count -- big or small 🎉

Examples of 'wins' include:

- Getting a promotion!
- Starting a new project
- Fixing a tricky bug
- Cleaning your house...or whatever else that may spark joy 😄


![happy-bunny](https://media.giphy.com/media/2lQCBjuFMLCOvXno4l/giphy.gif)

Happy Friday!
Why P2P WebRTC Text Chat Isn't A Good Idea
Tags: php, webrtc, webdev, p2p
Published: 2020-07-03 17:39:23

If you're interested in peer-to-peer (P2P) encrypted text chat, and seem enthused by using WebRTC for that for multiple people at once, then you might want to think again.

So, if you combine this fantastic example of audio/video chat, strip out audio/video...

https://github.com/nielsbaloe/webrtc-php

...implement RTCDataChannel from WebRTC, and make a true, many-to-many, peer-to-peer text chat (where the server is only used for the signalling step, connecting one or more peers together), it really isn't desirable.

Why?

It's simple -- you won't get state management of the last 100 messages or so that were posted. People like to login and see the last 100 messages in a chat. (That's *at least* -- many will want to see even more.) And if you want state management, then you're better off just using ordinary AJAX and a web server with ordinary state management (database, RAM file, file, YAML file, JSON file, serialized object file, etc.).

For security, ensure you're running https instead of http, and never permit http connections. To be even more secure, you could ensure the state management is an encrypted shared memory component and/or an encrypted file. By requiring extra HTTP authentication headers and utilizing nonces, you can also add even more security.
Add sitemap.xml and robots.txt to Next.js app (SEO - 01)
Published: 2020-07-03 17:28:46

---
title: Add sitemap.xml and robots.txt to Next.js app (SEO - 01)
published: true
description: Simple dynamic and static recipe to add sitemap.xml and robots.txt files into Next.js app
tags: 
cover_image: https://i.ibb.co/1RFNJk7/SEO-ARTICLE-01.png
---

Since Next.js has become the best option (in my opinion) to create serverless apps with React, I will start a new group of articles talking about how to perform SEO with this great library.

This first one is a very simple recipe to add sitemap.xml and robots.txt files. As almost every body knows, these files are used by the Google Search Bot in order to know the site structure and the files that should list.

In order to don't extend much the post, I'll show you only the static files. Anyway, you can transform these files into dynamic ones by fetching previously and passing to getSitemap and getRobots methods the data you want to put in. 



**pages/sitemap.xml.tsx**
```typescript
import React from 'react';

const getSitemap = () => `<?xml version="1.0" encoding="utf-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://example.com/</loc>
    <lastmod>2020-07-01</lastmod>
    <changefreq>daily</changefreq>
    <priority>0.9</priority>
  </url>
</urlset>`;

class Sitemap extends React.Component {
  public static async getInitialProps({ res }) {
    res.setHeader('Content-Type', 'text/xml');
    res.write(getSitemap());
    res.end();
  }
}

export default Sitemap;
```

**pages/robots.txt.tsx**
```typescript
import React from 'react';

const getRobots = () => `User-agent: *
Disallow: /_next/static/
`;

class Sitemap extends React.Component {
  public static async getInitialProps({ res }) {
    res.setHeader('Content-Type', 'text/plain');
    res.write(getRobots());
    res.end();
  }
}

export default Sitemap;
```
Day 7 of #30DaysOfCode | lifetime of variables in golang
Tags: go, codenewbie, challenge, motivation
Published: 2020-07-03 17:24:50

Today is the 7th day of my #30DaysOfCode challenge. I have so many exciting things to share with you guys. So let's just get into it.

The first thing that I would like to share is about the lifetime of the variables. Some of you know that Golang is a garbage-collected language. Being a garbage collected language means that the memory will be automatically reclaimed by the language itself. The developers don't have to worry about collecting or reclaiming the memory in code manually. The language will do that for you. But this doesn't mean that developers don't need to think about memory or learn about the lifetime of variables. To write efficient programs, developers still need to be aware of the lifetime of variables. So, let's learn about that.

<b>What is the lifetime of a variable?</b>
The lifetime of the variable is the time interval in which the variable exists as the program runs.

<b>The lifetime of variables in Golang:</b>
The package-level variable exists during the entire execution of the program while the local variable exists for a limited period of time. A local variable is created each time the declaration is executed and it lives on until it becomes unreachable and then, their memory is reclaimed. The function parameters and loop iterator variables are examples of local variables. The function variables are created each time their function is called. The loop iterator variables are created each time the loop begins. And when the variables become unreachable, the Go compiler reclaims their memory.

Okay. That was a brief introduction to the lifetime of variables in Go. Now, let's talk about a pet-practice project I am working on.

Some of you may know that I am also learning to write Restful APIs using NodeJs. And today, I have started working on a Journal API. At the moment, this project is just for fun and practice. Nothing serious but the project will be full packed though. The API will have all the functionality that any production project has. And I will be making it open source in the end.

Alright! That's enough talk for today. And hopefully, I will see you guys tomorrow.


Connect With Me:
Youtube: <a href="https://www.youtube.com/c/ShubhamSauravYT" target="_blank" rel="noopener noreferrer">ShubhamSauravYT</a>.
Twitter: <a href="https://www.twitter.com/hiShubhamSaurav" target="_blank" rel="noopener noreferrer">@hiShubhamSaurav</a>
Instagram: <a href="https://www.instagram.com/hiShubhamSaurav" target="_blank" rel="noopener noreferrer">@hiShubhamSaurav</a>
Facebook: <a href="https://facebook.com/hiShubhamSaurav" target="_blank" rel="noopener noreferrer">@hiShubhamSaurav</a>
Feature Toggle at Nginx Level
Tags: devops, architecture, fastfeedback, migration
Published: 2020-07-03 16:34:31

I would like to share with you how we manage to replace, using a cookie as a "[Feature Toggle][featuretoggle]", the entire web application at run-time using Nginx.

_Application Toggle_ might be a better name for this scenario tho :joy:

## The Need

The scenario is that we have two independent Web Applications, as example we used a React App and a Vue App. One is the legacy version that should be replaced with a new version that needs to be build from scratch.

There are different risks in replacing a fully functional application with a new one, and a lot of good reasons to not replace a working application by a new one but that's out of the scope of this article 😜.

Some risks are:

- We miss some obvious features
- Late feedback from the team-mates and the end user
- Late integration in the release process

## A possible solution

Include the new application under a Feature Toggle at Nginx Level so:

- The application is included in the CI/CD pipeline and available in the different environments
- Teammates can check how the application is growing in the development and production environment without disturbing the current application
- Given the point where you can share the application with end users, you have it already available and tested by the team in the production environment.

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

## The implementation

Using the [map nginx module][nginx-map].

You can use a Cookie to map from which point you want to serve the Web Application from like:

```
    map $cookie_Toggle $app {
        default /workdir/react-app/;
        true /workdir/vue-app/;
    }

    server {
        listen       80 default_server;
        server_name  _;

        access_log   /var/log/nginx/local-wc.access.log;
        error_log    /var/log/nginx/local-wc.error.log;

        location / {
            root $app;
            try_files $uri $uri/ /index.html =404;
        }
    }
```

Quite simple and straightforward 😄!

Depending on the `Toggle` cookie, you can switch between Legacy Application and the new Application.

We a Browser Extension as [Cookie Editor](https://cookie-editor.cgagnier.ca/) to switch the cookie value in a non-developer way.

## Demo

![demo](https://dev-to-uploads.s3.amazonaws.com/i/hhs96t659llh0jgf5osq.gif)

## Source Code

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

Demo + Source Code at https://github.com/aleixmorgadas/feature-toggle-at-nginx-level/

## Feedback

Looking forward to hear about different strategies you used in similar situations! 😋

I hope it helped you in some way :)

![ty](https://media.giphy.com/media/26DOMeaD2gdGE44LK/giphy.gif)

[featuretoggle]: https://en.wikipedia.org/wiki/Feature_toggle
[angular]: https://angular.io/
[material]: https://material.angular.io/
[react]: https://reactjs.org/
[bootstrap]: https://getbootstrap.com/
[nginx-map]: https://nginx.org/en/docs/http/ngx_http_map_module.html
How to Recruit a Remote Team
Tags: management, productivity, webdev
Published: 2020-07-03 16:27:44

When it comes to hiring, at the end of the day you only need two things;

i.	That the person you bring on board has the skills they say they have, and
ii.	Is a culture fit. 

Basically, the way they see things is similar to yours. They value the same principles and can be a part of the mission. Not having the skills will be costly in the short run... because you as a manager have to invest time and resources to grow those skills. 

Not having the mindset will cost you in the long run because they will simply leave for the next opportunity that is more in alignment with their interests... or worse, create unnecessary conflict and tension inside your organization. So once more, remember to check both requirements are met when making a new hire. But this is valid for any recruiting process you might say, and that's perfectly true. 

<strong>So what makes remote teams better? </strong>

And here is one of the gems. With remote work you can hire the best talent you can afford... not the best talent at your location, which can either lack the skills, or if you live in a big city, can be extremely expensive. But you also are exposed to some risk. 

<strong>How do you know if that person you are about to hire has the qualifications... they're advertising and isn't overselling themselves and their ability to perform?</strong>

The most efficient way to put this to the test, is do just that. Put them to the test. Create a small project that you will pay for. It can be anything from a few hours to a few days depending on your industry. If you'll be recruiting on a consistent basis, you might even consider investing in a practical aptitude test that will semi-automate things.

Using this method, you'll not only determine their expertise, but also gauge their communication skills, punctuality... and many other strengths and weaknesses. Look, I started my career as a freelancer... and for over twelve years I've been applying to projects, taking calls and interviews... and have been on both sides of the fence. And something that is extremely important when recruiting... and evaluating the potential of a candidate is to ask them what they work on in their spare time.

So if let's say you hire a web designer, look at what they work on in their spare time. If it's still design work, it means that for them it's not a job. It's a calling. It's a passion. 

Also, there can be a big difference between what he or she considers great design and what a client wants. On many occasions, client went with a different option than I advised on. Long story short, when recruiting, make sure they have the right skills with a practical test. Find out if they can be a member of the mission as well, and if possible, get someone that isn't doing this as a job, but is truly passionate about it.
How to fix npm create-react-app stuck at 'found 0 vulnerabilities'?
Tags: npm, react
Published: 2020-07-03 16:27:04

I started learning to React recently. I was following The Net Ninjas' over YouTube. So as I was instructed to install Node.js, I downloaded and installed it (64-bit). I ran npx `create-react-app app` which is responsible for creating a react app with boilerplate required.

# **What problem did this command cause?**
Once I ran this command, It would start fetching data from the repository. The folder would be created with the project name having `package.json`, `package-lock.json`, and `node_modules` folder. After this, the command would run and get stuck at `found 0 vulnerabilities`.

>If you are using cmd on windows

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/qodc4srgdp1v3l2kmilk.jpg)

>If you are using bash

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

# **How to fix this?**
I was searching a lot and found out people were asking on StackOverflow about this fix but none of them had answers and
even if some had but they were not useful. So I kept searching on GitHub under issues and came across some fixes. There are 2 ways to solve this.

## **Fix 1 (Easy One)-**
I don't know why but this problem is observed with 12.16.2-x64.msi node version. If you installed x64 version then you just need to uninstall this version and install x32 bit version. This fix should solve your problem.

## **Fix 2-**
If you don't want to reinstall node and continue with the current version then this fix would work. 

* Open a new cmd window and run `resmon` command.
  This command opens resource monitor and you would see something like this -

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ysb4zql8qh4dw4rxcqj3.PNG)

* Once you could see resource monitor. You need to start looking for cmd.exe processes (because there would be more than one cmd.exe based on how many windows you have got open) which are suspended. You could see if a process is suspended by right-clicking on it.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/g5v55gjbaqa23bhx5r8r.PNG)
* If you find any cmd.exe suspended resume it. Your cmd process would also get resumed. There might be a case where cmd again stops, you just follow the above steps again. 

The only problem with this is you might need to follow these steps 1 or 2 times more when using npx create-react-app before the error goes away.

*Conclusion -*
This was my first blog. This problem was faced by so many people out there so I tried to write this blog. 

**Thank You**
500+ Contributions on GitHub
Tags: github, showdev, productivity, git
Published: 2020-07-03 16:22:12

Due to COVID 19, I am actively active in open source communities and I am contributing to many projects and also learning new things. I was able to do 500+ Contributions for the first time.

![GitHub Contributions](https://dev-to-uploads.s3.amazonaws.com/i/jix8omh0udbnq7a01vw6.png)


I am glad that I am using my free time wisely. Hopefully more people are learning new things and contributing to Open Source.
My personal website built with Gatsby and tailwindcss
Tags: showdev, gatsby, webdev, codenewbie
Published: 2020-07-03 16:18:58

After a month of research, designing, and coding, I'm happy that I was able to make my personal website. Developing with Gatsby is so fast due to their plugins and clear documentation. Styling with tailwindcss is just 💯

You can view my site here: [jeffjadulco.com](https://jeffjadulco.com)

![Landing page](https://dev-to-uploads.s3.amazonaws.com/i/ip83phnki8285tvxlckv.png)
Turn your browser into an WYSIWYG editor with "document.designMode"
Tags: webdev
Published: 2020-07-03 16:08:15

**TLDR;** 
* Open the browser's Javascript console.
* Execute `document.designMode = 'on';`.
* Click on any text in the screen and start typing!

Isn't it crazy!  :nerd_face:

[designMode] is a not so well known feature that allows us to make the entire webpage editable.
By default, its value is `off`, but once we set the value to `on`, it makes the entire page editable and allows us to change the content as we wish.

If you want to disable it, you simply set its value back to `off` (`document.designMode = 'off';`).

It's also worth mentioning that the vast majority of modern browsers support this feature.

Hope you find this little tip helpful! :rocket:

[designMode]: https://developer.mozilla.org/en-US/docs/Web/API/Document/designMode
WeeklyFinds(1) : Elevator.js | Enjoy the journey
Tags: weeklyfinds, projects
Published: 2020-07-03 15:54:55

_This is the first of a series I'm planning on doing each Friday called **"WeeklyFinds()"**. Where I share a cool project I found that week._

In this first installment, I found quite a **serious** project named ["Elevator.js"](http://tholman.com/elevator.js/)

> Finally, a "back to top" button that behaves like a real elevator, by adding elevator music to quietly soothe the awkwardness that can ensue when being smoothly scrolled to the top of the screen.
> _Excerpt from Elevator.js [README.md](https://github.com/tholman/elevator.js#elevatorjs)_

It made me laugh quite badly... it's always nice to find some humourous projects!

What do you think?
ไม่ควรทุกข์โดยไม่จำเป็น
Published: 2020-07-03 15:41:53

---
title: ไม่ควรทุกข์โดยไม่จำเป็น
published: true
description: 
tags: 
---
มีสามีภรรยาคู่หนึ่งประกอบการงานด้วยความซื้อสัตย์สุจริต อยู่ศีลในธรรม ประสบความสำเร็จในชีวิตเป็นอย่างดี และอยู่ในระดับของครอบครัวผู้มีฐานะครอบครัวหนึ่ง.

เขาทั้งสองได้ให้กำเนิดบุตรชาย 2 คน. และได้ส่งลูกชายทั้งสอง ไปเรียนต่อที่ประเทศอังกฤษตั้งแต่อายุ 11 ปี.

จนเมื่อเร็วนี้ ลูกชายคนโต ซึ่งบัดนี้อายุ 32 ปี เรียนจบในระดับปริญญาเอก ได้รับการตอบรับจากบริษัทในประเทศไทย เพื่อเข้าทำงานตำแหน่งผู้บริหาร ด้วยอัตราเงินเดือนที่น่าสนใจ. จึงเดินทางกลับมาอยู่ที่บ้าน และ จะแต่งงานกับแฟน สร้างครอบครัวของตน.

พ่อแม่ ซึ่งปัจจุบันก็มีบ้านหลังใหญ่ อยู่บนที่ดิน ที่มีเนื้อที่กว้างขวาง จึงมีความปรารถนาที่จะให้บุตรคนนี้ ได้ปลูกเรือนขึ้นใหม่ ให้อยู่ในบริเวณที่ดินเดียวกัน.

แต่ในที่สุดลูกก็ตัดสินใจไปซื้อบ้านใหม่ เป็นหมู่บ้านจัดสรรที่อยู่ที่อื่น

และวันนั้นก็ใกล้เข้ามาถึง คือวันที่ลูกจะย้ายออกไปอยู่บ้านใหม่ที่เขาซื้อไว้

ปัญหาคือ **พ่อแม่ทำใจไม่ได้** เมื่อวันที่ลูกต้องย้ายออกไปอยู่บ้านใหม่ของตนเอง พร้อมกับภรรยา พ่อแม่จำทำใจอย่างไร?

เมื่อท่านได้อ่านประเด็นปัญหาเรื่องนี้แล้ว. ท่านคิดว่า จะให้คำแนะนำสามีภรรยาคู่นี้อย่างไร?