teleren/devto huggingface dataset:
Mini Social Network with React,Typescript, NodeJS,and Tailwind
Tags: react, node, mongodb, tailwindcss
Published: 2021-12-28 18:10:17

## I built a  simple mini-social network with  MERN Stack, ,Typescript and Tailwind

Check it out 
Demo : **https://react-social-network-101.netlify.app/**
Source Code :**https://github.com/albeniskerqeli10/react-social-network-v1**

 P.s If you don't want to register to this web app, you can use  a demo account to login in the  social network:
demo email:testtest@gmail.com 
demo password:testtest

😊
Dec 28: Dev Holidays Guide ⛄️
Tags: stateofdevs, bahhumbugtip, mentalhealth, tips
Published: 2021-12-28 18:00:59

Bah Humbug Tips are my own way of coping & recovering from burnout & holiday stress.

###🎄  Today's Bah Humbug Tip of the Day. 
{% twitter 1475876954381303812 %}

######🎁 Today's Options 
{% twitter 1475876965009661952 %}

You can find more tips here & on [Twitter](https://twitter.com/stateofdevs). Let me know in the comments if any of these tips helps.

> If you're struggling w/ burnout & open to sharing your story, please [take the State Of Devs survey](https://stateofdevs.com/helps/dev). 🗳 Thanks!
Codepen User Profile Card
Tags: codepen
Published: 2021-12-28 18:00:12

<p>Type in your username to view your profile. This is based on the <a href="https://dribbble.com/shots/4633918-User-Info">shot</a>. Still Working on placing search bar at right place. This uses the codepen V2 API by Nate Wiley. </p>

{% codepen https://codepen.io/harunpehlivan/pen/LYzevGa %}
Handle scope changes without coming across as a naysayer 🙌
Tags: career, management, communication, softskills
Published: 2021-12-28 17:37:01

---
title: Handle scope changes without coming across as a naysayer 🙌 
published: true
description: Here are 3 things software developers can do to handle scope changes without coming across as a naysayer 🙌 
tags: career, management, communication, softskills
// cover_image: https://imgs.xkcd.com/comics/tasks.png
---

![XKCD Comic Strip Showing a Product Manager and Developer, talking about introducing scope changes to a Software](https://imgs.xkcd.com/comics/tasks.png)

Sooner or later, every developer finds themselves in this situation where "simple" scope changes are introduced in the project. Instead of saying "No!" to those changes, let’s learn some communication skills today: **Here are 3 things software developers can do to handle scope changes without coming across as a naysayer 🙌**

## 1️⃣ Assume they don’t know what is easy/hard 

For outsiders in any field it is very difficult to estimate effort it takes. E.g. I don’t know what things are easy/hard to do in an average biology lab 🤷‍♂️

Software is the same for non-developers. So cut them some slack, and explain what parts are easy/hard to do. Most of the time that helps them to rephrase their request into something you can implement more easily. 

## 2️⃣ Understand the problem and propose a different solution 

In the XKCD example above try to understand why birds? Ask them about the confidence they need? Most of the time, having a thorough understanding of the problem allows you to come up with simple alternative solutions that will provide 80% of the value with 20% implementation effort


## 3️⃣ Explain your capacity

If you know the effort it takes to implement, don’t  just add it to your backlog, instead show your capacity and backlog to them.

By looking at your capacity and backlog together you can visualize what you are currently working on and explain that, in order to do the new thing, you will need to remove something else. This is better then just saying “we don’t have time” because it gives the other person the option to make a trade off and reprioritize, while still protecting your workload.

However, in my experience, most of the time the new request get dropped as the things in your backlog are more important 😉

Image Credits: [XKCD](https://xkcd.com/1425/)
Let's Add Buy Me a Coffee Widget to your WebSite in 30 Seconds
Tags: webdev, programming, tutorial, beginners
Published: 2021-12-28 17:36:25

Buy Me a Coffee is a great place to get help from your clients. Maybe you've seen some people put a Buy Me a Coffee widget on their website or in their products. Today I will gonna show you how to add a Buy me a Coffee widget to your website like that. It is simple as ABC and it only takes as little as 30 seconds. I think most of you already know what Buy Me a Coffee is. But it doesn't matter if you don't know. Let’s take a look at what Buy Me a Coffee is and why people use it.

**What is Buy me a Coffee? and Why?**

Buy me a Coffee is a service for online content creators where you can get tips and donations from your clients for your work. Although the title is "Buy Me a Coffee", subscribers actually donate money to you. All you have to do is start a page. Then your customers can go to it and help you by buying a coffee. Here you can change *coffee☕* to whatever you want, like pizza🍕 or beer🍺.

![buymeacoffee.gif](https://media.giphy.com/media/TDQOtnWgsBx99cNoyH/giphy.gif)

Let’s move on to our main topic. First, you should have a Buy me a Coffee page. If you do not have a page, go [here](https://www.buymeacoffee.com/)  and create your Buy me a Coffee page. It is completely free and very simple. And it takes just about 1 minute.

Now go ahead to your [dashboard](https://www.buymeacoffee.com/dashboard), and scroll down to *Integrations to take it to the next level*. Then click on the button labeled Website Buttons. Now you can see Pop Up like this.

![img-1.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1640527755350/pSBY5l3rS.png)
Then go to the overlay widget. Now you can see one of these. You can enter the message you want from the text box here. You can also choose the color you want. Once you have customized it, you have to click on the Generate Widget button.

Then you will see a code like this. Yours may be different than mine.

![Screenshot_13.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1640528182686/R8IiA16yl.png)

Now you go to the HTML file of your website. Now you have to paste the code inside the header tag. And it will be like this.👇

![carbon (15).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1640526274619/aREoIm-U6.png)

Now go to your website and you will be able to see something like this.

![Screenshot_9.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1640526372351/rOp16FAU8.png)
![Screenshot_10.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1640526333251/xMvfqDMh3.png)

That's all congrats🎉! You did it🤩

Thank you for reading. If you enjoy reading this and find something useful hit the like💖 and share this💬. If you have any questions or feedback for me, feel free to leave them below.😊

And don't forget to follow me on  [Twitter](https://twitter.com/Lakira_md)  for more updates!😉

Thanks again for reading✨!Happy Hacking🎉
Keep man output in the screen
Tags: linux, man
Published: 2021-12-28 17:31:26

Reading [man man](https://man7.org/linux/man-pages/man1/man.1.html) I found out that the pager used by man can be overridden.

```
 -P pager, --pager=pager
              Specify which output pager to use.  By default, man uses
              less, falling back to cat if less is not found or is not
              executable.  This option overrides the $MANPAGER
              environment variable, which in turn overrides the $PAGER
              environment variable.  It is not used in conjunction with
              -f or -k.

              The value may be a simple command name or a command with
              arguments, and may use shell quoting (backslashes, single
              quotes, or double quotes).  It may not use pipes to
              connect multiple commands; if you need that, use a wrapper
              script, which may take the file to display either as an
              argument or on standard input.
```

# MANPAGER variable


```shell
export MANPAGER="less -FirSwX"
```

And after closing `man` you can still read the man page that you were reading.
Mobile Phone - Hover Effects (HTML/CSS)
Tags: codepen
Published: 2021-12-28 17:27:22

<p>Cell phone with simple animations: 
the appearance of the lock menu, button and 
standby mode (keyframes);</p>

<p>Thanks for viewing: з</p>

<h1>phone #cellphone #keyframes #animation</h1>

{% codepen https://codepen.io/harunpehlivan/pen/xxXpBLp %}
[BTY] Day 3: Docker Container CPU Limits
Tags: betterthanyesterday, docker
Published: 2021-12-28 17:15:53

Today I found an interesting fact (for myself only, you've probably already known) about Docker Container CPU Limits from this 
article: https://www.thorsten-hans.com/docker-container-cpu-limits-explained/. 

By default, Docker does not apply any CPU limitations. Containers can all of the hosts given CPU power (mentioned in [the official doc](https://docs.docker.com/config/containers/resource_constraints/#cpu)).

However, a Docker container will not consume the entire CPU power of your physical host. If you are using Docker Desktop, the mentioned host, it is **a virtualized host**, responsible for running your Docker containers. On macOS, the host is a virtualized system leveraging Apple’s Hypervisor framework. We can use the Docker Desktop application to control the overall limit of CPU utilization in all Docker containers.

For example, by default, Docker Desktop is set to use half the number of processors available on the host machine (as mentioned [here](https://docs.docker.com/desktop/windows/#resources)).

I will definitely check it out.
Opening files in vim from output of command
Tags: vim
Published: 2021-12-28 17:02:15

---
title: Opening files in vim from output of command
tags:
  - vim
canonical_url: https://waylonwalker.com/til/nvim-telescope-custom-command/
series: til
published: true
---

Many command line tools can output a list of files, this is quite powerful. I often want to search for something, then open it from a fuzzy picker.  This can be done with fzf in the terminal, but often I am already in vim and I want to open it inside my current session.

## Telescope
_how to pass a custom command to telescope_

Telescope is the fuzzy file finder I use every day inside of neovim.  Its pretty fantastic and easy to extent like this.  This first example I am only passing in files from the current working directory by using `ls`.

``` vim
:Telescope find_files find_command=ls
```

This brings up a normal Telescope picker with results from the `ls` command.

## More arguments
_how to pass a muli-argument command to telescope_

Adding more arguments can be done by comma separating them as shown in the example below.  This command will run the silver-searcher, search for all occurrences of nvim inside of a markdown file, and return only the file paths so Telescope can pick from them.

``` vim
:Telescope find_files find_command=ag,nvim,--md,-l
```
🚨 More Feedback = More Features 🚨
Tags: javascript, reactnative, graphql, webdev
Published: 2021-12-28 16:58:36

Hello Wunderfans! If you enjoy our content, never miss a blog post or a feature update by subscribing to our newsletter or even better, joining our Discord! Hope you enjoy our latest features and happy coding!

Wundergraph is obsessed with delivering the best developer experience for working with API's. 


Based on some awesome feedback from the community, we've got two more new features: [React Native Integration](https://wundergraph.com/docs/integrations/react-native) and [Custom Scalars](https://wundergraph.com/docs/reference/wundergraph_config_ts/configure_graphql_datasource#custom-scalars)


##Ask And You Shall Receive 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kkknnunwygoedbw0acuv.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p2rn9hv6vo3byhhzcnzk.png)

#Wundergraph 🤝 Open Source
Come join the [waitlist! ](https://8bxwlo3ot55.typeform.com/to/S7Zah3ZZ?format=json&referrer=https%3A%2F%2Fmedium.com%2F%40wundergraph%2Fyou-gave-us-feedback-and-we-listened-2b00535134b0&typeform-embed-id=2066135053895184&typeform-embed=popup-blank&typeform-medium-version=next&typeform-medium=embed-sdk&typeform-source=wundergraph.com)
Want FASTER build time with Next.js? DO THIS! ⚡
Tags: nextjs, webdev, git
Published: 2021-12-28 16:53:43

_This article was originally published on [my newsletter](https://www.tuomokankaanpaa.com/newsletter). If you want to stay up to date and read these as soon as they are published, [sign up](https://www.tuomokankaanpaa.com/newsletter) for the newsletter!_

Ahoy,

In my last email I mentioned that I was planning on still making one or two Next.js videos this year. Last week I published one of those.

The video is about reducing your Next.js application build time with Incremental Static Regeneration (ISR).

This Next.js feature is super cool since it allows you, among other things, to render dynamic content on static pages!

### Want FASTER build time with Next.js? DO THIS!

{% youtube r3yqNI4v47g %}

I also published another video about how you can use GIT branches to easily test different features or make a demo of a new feature. If your GIT-game is not in a good shape, this video is great refresher / tutorial for you!

### Use this GIT trick to test new features fast & easily

{% youtube DSyg1MJVBTY %}

That's all for this week!

Cheers,
Tuomo
Create Clock progress bar style Clock using html css javascript
Tags: html, css, javascript, webdev
Published: 2021-12-28 16:52:31


 In this blog, we learn that how we create a Clock progress bar. We use HTML, Css, and javascript for this Clock progress bar. Hope you enjoy our blog so let's start with a basic HTML structure for a Clock progress bar.

HTML code 
`<div id="clock" class="progress-clock">  
      <button class="progress-clock__time-date" data-group="d" type="button">  
           <small data-unit="w">Sunday</small><br>  
           <span data-unit="mo">January</span>  
           <span data-unit="d">1</span>  
      </button>  `

[read more](https://www.codewithrandom.com/2021/12/clock-progress-bar-style-clock-using.html)
📦 Introducing pkg.land (beta) - find similar packages on npm
Tags: javascript, node, npm, webdev
Published: 2021-12-28 16:52:24

Web developers, you probably use NPM everyday at work, but do you know how many packages are on NPM? (Hint: it is the biggest software registry in the world)

. . . 

Got a number? 

Today, NPM hosts about 1.8M packages. To put it in perspective, the second biggest registry is PyPI (Python Package Index) at about 350K packages. (Source: http://www.modulecounts.com/)

![Thats a lotta packages](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4j2ee74lkva6wx8g2yy3.jpeg)

With so many packages to choose from, no wonder we have a saying called “JavaScript Fatigue”.

There are many ways we can improve this situation, and we will probably need all of them. But today, I would like to introduce you to…

## [https://pkg.land (beta)](https://pkg.land) 🎉

![pkg.land homepage](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6voqdpdwg6i0z516n8po.png)

Summary: pkg.land (beta) suggests you a list of similar packages based on a npm package you search.

Example: if you search `moment`, https://pkg.land/moment will suggest you similar packages like `dayjs`, `date-fns` and more.

Screenshot of search results of `jest`:
![similar packages for jest](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nwd44pjep7fktgcfjyto.png)

### Important Notes

- This project is still in its early and experimental stage, all features are likely to change in the future as more improvements will be made gradually

- You will **not** find every package from npm on pkg.land. For example, `@types/` packages are excluded.

- Any feedbacks are welcome, leave a comment below or DM on [https://twitter.com/pkgland](https://twitter.com/pkgland)

**If you find the project useful, please share it with whoever might find it helpful too!** 🌟
**And give it a follow on [Twitter](https://twitter.com/pkgland), it would really help the project grow!** 🪴
CodePen User Card
Tags: codepen
Published: 2021-12-28 16:47:00

<p>Just checking out CodePen API v2 by Nate Wiley. It's pretty cool, I recommend checking it out. <a href="http://cpv2api.com/" target="_blank">http://cpv2api.com/</a></p>

{% codepen https://codepen.io/harunpehlivan/pen/WNZdmwe %}
Want to build a startup and grow like crazy? Maybe creating an open source alternative to a well-known service is a good option
Tags: webdev, startup, showdev, remote
Published: 2021-12-28 16:46:38

I recently noticed how many new startups decided to go to a massive competitor market with an open-source alternative. Seemingly, this approach works quite well. For sure, the number of stars on Github does not represent how a startup is doing in reality, but it shows interest in developers and can demonstrate its development trajectory.

For illustrative purposes, I found several examples of this approach; it will be exciting to check how projects will grow in the near future.

Calendly → [Cal.com](https://cal.com/), 9k ⭐️ achieved in 9 months
Google Analytics → [Plausible](https://plausible.io/) ⭐️9.5k achieved in 16 months
Firebase → [Supabase](https://supabase.com/) ⭐️25.5k achieved in 27 months
Mixpanel, Amplitude → [Posthog](https://posthog.com/) ⭐️5.5k achieved in 24 months
Shopify → [Medusa](https://www.medusajs.com/) ⭐️5.6k achieved in 24 months
FullStory, LogRocket → [OpenReplay](https://openreplay.com/) ⭐️2.9k achieved in 8 months
Retool  → [Appsmith](https://www.appsmith.com/) ⭐️10.8k achieved in 35 months
Zapier   → [n8n](https://n8n.io/) ⭐️19.3k achieved in 29 months

All these startups are quite different, but there are some similarities:
- they are all going for a huge competitor with a $3b+ valuation
- all main competitors are mature well-established startups (6+ years)
- their product is in on massive B2B market with a relatively low price point

I personally think it's a great idea to compete in a massive market using all the benefits of an open-source community. To me, it is not easy to find any disadvantages (excluding possibilities of users migrating to their servers, but it happens quite rare).

What is your take on that? Do you have another examples of this approach?
Accelerating agility for dev teams
Tags: programming, startup, management, microservices
Published: 2021-12-28 16:39:42

Swimm's release cycle is one week long. And we have an (almost) perfect record! This not so new approach allows for us to respond quickly to requests, remain competitive, and recruit talented developers who thrive in an up-to-date environment. 

## So, what is agile development? 
A software development process that prioritizes both speed and feature delivery over long-term planning and multi-feature releases. These workflows are usually made up of sprints. 

## Here's a checklist for you 

- Reexamining your mindset

- Deciding on the right method

- Plan the development cycle

- Determining agile roles 

- Evaluate your tools

- Choose the proper metrics (cycle time, code coverage, and the list goes on) 

- Run & optimize! 

Our team broke down each step for you. [Check it out here.](https://swimm.io/blog/the-ultimate-checklist-for-agile-software-development/)
NavBar - Toggle mobile
Tags: javascript, beginners, programming, codepen
Published: 2021-12-28 16:37:00

My first creation on CodePen :D 
I make my own toggle menubar. In real, I use a flower for the toggle icon. 

I used a little of JavaScript. I'm just a beginner of it. 

**Check out**
{% codepen https://codepen.io/stephaniemeys/pen/poWpYov %}
I want to create a blog page in my website which works very similar to the DEV.to app's "Create Post" page 
Tags: webdev, javascript, html, beginners
Published: 2021-12-28 16:31:02

Hi I'm a beginner web developer who is ok at front end stuff but not good at backend. 

I'm creating a webpage for this DJ/Model as a part of my internship and the frontend is smooth, it's done, thing is I have little to no idea about the backend of this project, which involves creating a blog that's similar to the working on this app where you can write text and add images anywhere in the blog.
That's basically it.  

A blog page in it in which the Admin can log in and create posts and add images to the gallery. 

The DEV.to create post interface is very close to what I want. Anyone have any suggestions or tutorials regarding this because I'm kinda lost.
How to Add Schema Markup in WordPress
Tags: wordpress, tutorial, beginners, webdev
Published: 2021-12-28 15:54:30

![Add Schema Markup in WordPress](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z0737jsw1jtjpsdb1dhq.jpg)Schema markup helps you supply search engines with important information that they can use to increase your listing in search results. 

In this article, I will show you how to easily insert schema in WordPress and get more users to your website. But first, you need to know what a WordPress schema is and why it is prominent in your SEO strategy. So let's get started!

##What is Schema Markup?

Schema is a personal structure or idea that supports managing and representing information. In computer programming, the schema is the control and structure for a database. 

Schema is useful because it allows us to bring shortcuts to analyze the extensive amount of information and knowledge available in any condition.

##How to Add Schema Markup in WordPress

The most comfortable way to add schema markup to WordPress is to use [RankMath](https://wordpress.org/plugins/seo-by-rank-math/) SEO for WordPress. This is the best WordPress SEO plugin on the market and allows you to easily add schema markup to your WordPress site.

There is a bundle of schema markup templates available to use. 

1. Go to WordPress Dashboard.
2. Click on RankMath from left sidebar.
3. Go to Schema Templates.
4. Click on Add New.

Here you can see "**Available Schema Types**" like Article, FAQ, Service, choose one of them and add it to your posts. Also, there is an option to create a custom schema and import it from the URL. If you want to create a custom schema markup then click on it and add properties and property groups.

I shared this post from [Add Schema Markup in WordPress](https://softcodeon.com/wordpress/add-schema-markup-in-wordpress.htm) you can read in detail from there.

If you have any question please discuss below help to improve. Thank you.
Css units 
Published: 2021-12-28 16:18:57

```html
<div class="box"></div>
```

```css
body{
    width: 300px;
}

.box {
    /* ⚜️ 50% of the width of body (300px) */
    width:50%;
    height: 100px;
    background-color:gold;
    border-top: 3px solid orange;
}
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hdxd5c0h3zp14xxuo3s8.png)

```css
body{
    margin: 0px;
}

.box {
    /* ⚜️ 50% of the viewport */
    width:50vw;
    /* ⚜️ 100% of the viewport */
    height: 100vh;
    background-color:gold;
    border-top: 3px solid orange;
}
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3to8f7khp7xii27geinw.png)
 

```css
body{
    margin: 0px;
}


.box {
    /* ⚜️ because the font size defaults is 16 px
    so width will be 10 * 16 = 160 px */
    width:10em;
    height: 100vh;
    background-color:gold;
    border-top: 3px solid orange;
}
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z0h0zkdxg11cjd2sq61s.png)
 

```css
body{
    margin: 0px;
}

.box {
    /* ⚜️ change font size */
    font-size:20px;
    /* ⚜️ because the font size defaults is 16 px
    so width will be 10 * 20 = 200 px */
    width:10em;
    height: 100vh;
    background-color:gold;
    border-top: 3px solid orange;
}

```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oylxwwwkqqaxx9znvnu9.png)

استفاده از
`rem` 
محاسبه رو آسون تر می کنه

```css
html{
    /* 1️⃣ it means 62.5% of 16px = 10px 
    so 10px will be root font size!*/
    font-size:62.5%;
}

body{
    margin: 0px;
}

.box {
    /* 2️⃣ rem x root font size 
    the result will be 150 px*/
    width:15rem;
    height: 100vh;
    background-color:gold;
    border-top: 3px solid orange;
}

```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lg35dsudm7jmh7oiu17h.png)