teleren/devto huggingface dataset:
How I get 2K daily traffic with Web Stories?
Tags: blogging, seo, tutorial, beginners
Published: 2022-09-23 16:44:52

Today, we will be learning about how to get 2K daily traffic with Web Stories, and the experiment I ran with Web Stories.

## What are Web Stories?

Web Stories are a new way to tell stories on the web; are swipeable, full-screen, and fast-loading AMP Pages.

## Why are Web Stories important?

Web Stories are favored by Google, and they are a great way to get more traffic to your website.

## How much traffic can you get with Web Stories?

You can get huge traffic with Web Stories. I am getting 2K daily traffic with Web Stories.

## Are Web Stories good for SEO?

Yes, Web Stories are highly favored by Google, and they're highly engaging and fast-loading, which makes them good for SEO.

## What kind of content can you create with Web Stories?

Web Stories are commonly known as swipable, snackable content; so you can create web stories for news, entertainment, and information.

## Are Web Stories good for affiliate marketing?

Yes, Web Stories are good for affiliate marketing. You can create web stories for affiliate products and services.

## What kind of audience can you target with Web Stories?

You can target any kind of audience with Web Stories. But mostly web stories are audience related to IT, tech, news and entertainment.

## Am I getting traffic from Google Search?

I am getting 2K daily traffic with Web Stories by creating web stories for my blog posts.

## Which platform should I use to create Web Stories?

I am using the Web Stories plugin for WordPress to create web stories for my blog posts.

## How to check Web Stories validation and optimization?

I used a tool called [Web Stories Checker](https://apps.webmatrices.com/web-story-checker) to check the validation and optimization of my web stories.

## How I get 2K daily traffic with Web Stories?

I ran an experiment to know how Google and Web Stories works; I create a web story and used an image provided by Google in the web story. I published the web story and waited for a day.

After a day, I checked the web story and found that the web story was not getting nice traffic hits. So I changed the image in the web story, I used an image that was never in Google and published the web story again.

After publishing the web story again, I checked the web story and found that the web story was getting heaps of traffic hits.

## Conclusion

Web Stories are a great way to get more traffic to your website. You can create web stories for your blog posts and get more traffic to your website. I am getting 2K daily traffic with Web Stories. You can also get traffic with Web Stories.
💬 “French company Luos brings the concept of microservices to ESP32 embedded radio microcontrollers"
Tags: opensource, microservices, esp32, luos
Published: 2022-09-23 16:43:19

🎉 If you missed the news, Luos engine is now plug-and-play compatible with the ESP32 family!

⏩ https://www.lembarque.com/article/le-francais-luos-apporte-la-notion-de-microservices-aux-microcontroleurs-a-radio-integree-esp32

The Luos team developed a HAL based on ESP-IDF SDK provided by Espressif to create a Robus network and natively exchange messages and information through the Luos protocol.

Thanks to the team of L'embarqué for this article!
Custom Domain Support in Creator Economy Platforms
Tags: laravel, domain, php, dns
Published: 2022-09-23 16:10:35

Most creator platforms support two forms of custom domains: \

- Subdomains - such as *johndoe.platformX.com*
- Custom domain - such as *platformX.johndoe.com*

Describing the creator domain as part of the URL of the site, such as *www.platformX.com/johndoe*, is much less common.

If you are about to construct such a platform, you may wonder how complicated it is to build custom domain support. 

It turns out it is straightforward. 

It boils down to two things:

1. The user doing setup in their domain registrar or website hosting company
2. Routing in your platform

# Domain Setup by User

You should instruct users to add appropriate DNS records in their domain registrar or hosting company. There are many examples of instructions in existing platforms that you can borrow. 

The [Transistor podcasting platform](https://support.transistor.fm/en/article/using-a-custom-domain-for-your-podcast-website-ivsoyr/) instructions that I recently used are excellent.


# Routing in Platform

While I do not know which backend programming framework or language you use, the following in [Laravel](https://laravel.com) PHP is pretty generic and can be adapted to:

- Any PHP framework
- Express.js or any Node.js backend framework
- Ruby on Rails
- Java Spring Boot


## Domains

	Route::group(['domain' => '{subdomain}.{domain}.{tld}'], function(){
	
	    Route::any('/', function($sub, $domain, $tld){
	        return 'custom domain: ' .  
		        $sub . '. ' . 
		        $domain .  '. ' . 
		        $tld;
	    });
	
	});

## Subdomain

	Route::domain('{account}.example.com')->group(function () {
	    Route::get('user/{id}', function ($account, $id) {
	        //
	    });
	});
How to promote your NFT?
Tags: nft, marketing, tutorial, news
Published: 2022-09-23 16:05:18

A video tutorial of how to grow and **promote your NFT project** using [Social Media Bot](https://www.pelock.com/products/social-media-bot) on social media sites:

- Twitter
- TikTok
- LinkedIn
- Gettr
- SoundCloud
- Gab
- Sina Weibo
- Truth Social

{% embed https://www.youtube.com/watch?v=bShLx11OhMA %}

## Installation

You can use it on Google Chrome, Mozilla Firefox and Opera, and any other compatible web browser:

{% embed https://www.pelock.com/products/social-media-bot/install %}

## User reviews

Read what user says about it:

> This Social Media Bot is exactly what I needed! Simple and gets the job done.
> It basically emulates real-life activity by clicking for you, nothing crazy like some of these other bots. This is all done through your own browser as well.
> I have tried many other bots that are monthly subscriptions such as IBF, Instazood, and Instamber. They all took my money and didn't even work.
> They also made me give them my login credentials which was very sketchy.
> Some of these other bots had my account being logged in from a foreign country in order to have automation, which is ridiculous.
> I was about to give up until I found this Social Media Bot.
> This is no fake review. I literally gained 80 followers, and it hasn't even been 24 hours. Try it your self you will see!
> I am definitely satisfied!
> The only concern is I know social media sites updates their sites often to protect against automation bots. Just hoping this Dev stays on top of this bot, so it continues to work this great in future updates.
> Michael W.
How to create the Perfect README for Your Project
Tags: webdev, beginners, github, readme
Published: 2022-09-23 16:05:02

## **Why should I create a README?**
READMEs are fun to create and are an important part of your personal profile and your organization's profile. Writing an excellent README file for your open-source project's repository is equally important. The README file is the first impression of your project that potential contributors and new users get. While your Contributing .md allows contributors to make and merge pull requests in your repository,Users can find instructions on how to use your project in your README file.

## What should I write in my README?

1. - Start by adding the title for your project
2. - Make sure there is a banner image or logo included
3. - Be brief and to the point when describing your project
4. - Prerequisites should be listed
5. - Specify the installation commands
6. - Provide as many examples as possible.


A README is very important, but can be intimidating to a beginner. Using a README generator can make creating a README for a project easy. 

- Readme.so
- Github profile readme generator
- https://www.makeareadme.com/

**My Top pick would be: [Readme.so](https://readme.so/)**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7lp5nyix3iy0nkb1bvzp.png)
Follow Friday: Python Edition (23 September 2022)
Tags: meta, writing, python
Published: 2022-09-23 15:45:53

---
title: Follow Friday: Python Edition (23 September 2022)
published: true
description: 
series: Follow Friday
tags: meta, writing, python
---

_Happy Friday, friends! 🎉 Follow Friday is your weekly opportunity to shout out fellow DEV Community members doing awesome work. Check out the comments and follow someone new!_

Python is an interpreted programming language that is considered "batteries-included". It was created by Guido van Rossum in 1991, and is popular for application and web development, as well as for scientific computing and data analysis.

So, devs: who are your favorite DEV community members dedicated to taming the Python? 🐍

_**Formatting tip**: to populate a card with a follow button, use the liquid tag syntax `{% embed https://... %}` and insert the URL of your favorite author's profile._

Join in on the #FollowFriday fun by @mentioning your favorite author to follow on the topic of Python (and letting us know why you love their posts!) ⤵️
react-dnd: Dragging Over An Element Without Triggering Hover State
Tags: react, drag, drop, typescript
Published: 2022-09-23 15:38:36

This is an answer to a `react-dnd` v17 bug.

It's still a bug even though it's marked as closed in Github.

### [I tried the suggestions display in the issue thread, but The only thing that helped me is this](https://github.com/react-dnd/react-dnd/issues/476#issuecomment-1188787847):

#### Instead of using `monitor.isDragging()` to set the isDragging state use `!!monitor.getItem()`, like so:


```ts
const [{ opacity, isDragging }, drag] = useDrag({
    type: itemType,
    item: () => originalItem,
    canDrag,
    collect: (monitor: DragSourceMonitor) => ({
      opacity: monitor.isDragging() ? 0 : 1,
      isDragging: !!monitor.getItem()
    })
  });
```

**That way the `isDragging` state will be `false` whenever no dragging is occurring and `true` when an item is dragged.**

and the hover styles will be applied only when `isDragging` is `false`:

```ts
 <Box
      ref={ref}
      sx={{
        opacity,
        ...(!isDragging && {
            '&:hover': {
              borderRadius: '4px',
              border: `1px solid blue`
            }
          })
      }}
      data-handler-id={handlerId}
    >
....
</Box>
```

### [Click here for the StackOverflow answer](https://stackoverflow.com/a/73034047/14831834)
The Value Of Off-Boarding Ramps In Communities
Tags: community, devrel
Published: 2022-09-23 15:28:42

People that show up and do work on anything deserve two really important things in my opinion:

 - A clear path to see all knowledge related to the work, and the freedom to consume it in a way that works for them, and, 
 - A clear path to pass the torch to someone else, and provide feedback to the rest of the group about their experiences as a contributor. 

This post is more about the second item.

When I recently [chimed in on a conversation about community on-boarding](https://twitter.com/tinkertim/status/1573060718710198273) and mentioned off-boarding in the same sentence, it seemed novel to others and I think its worth explaining in meta terms.

When you think about joining a community, you have questions, right? Is it relevant? Is it safe? How much time will it occupy? What's it like to contribute? All of these neatly fit into structured on-boarding materials that can come in many forms. 

But what about when you think about *leaving* a community? Don't you have questions then, too? Did you make a difference there? Did you reach a lot of people? Is there a way you can hand-off information others should know, or even ideas that you wished you could have explored more? This is structured *off-boarding*, and it's super important to have. 

People sometimes stay _way_ longer than their generosity just because they don't know what an exit would look like, so they keep putting it off. This is no less true in communities than it is in companies, and the toxicity it can cause is just as real. 

People also deserve to be reminded of what _their_ part is in something, not just when they're leaving, but _especially_ when they leave. This inspires them to pass on knowledge that would otherwise be lost, and plant their ideas somewhere to grow rather than letting them eventually be forgotten.

Finally, what could have been better? If you're not surveying anonymously you're probably in danger of having your head in the sand and not even know it. You should at least have a well-conceived exit survey. 

How this is implemented is going to depend vastly on the size of the community and goals of those that manage it, but at the minimum, you should have a way to show people _how_ something is better for them having been there, and some place to not let knowledge leak, even if it's anonymous insight on how the community needs to grow.

This concept (structured off-boarding) is relatively new to engineering teams, and is gaining popularity among micro-service engineers that change teams frequently. However, the practice is no less wise for any kind of community, at least that I can think of :)
Have you noticed that you can short-circuiting the spread operator?
Tags: todayilearned, javascript
Published: 2022-09-23 15:24:36

### WTF is short-circuiting in Programming?
![](https://media2.giphy.com/media/l2Je4zlfxF6z0IWZi/giphy.gif?cid=ecf05e47s4y1w2cljqpgb4z4x8xef2mqep0g9tiw761im2cf&rid=giphy.gif&ct=g)
Short-circuiting is where an expression is stopped being evaluated as soon as its outcome is determined.

### How its work with spread operator?
Basically, we can short-circuit the spread operator using the && operator. 
So, if the condition is met, the spread operator will be executed and the object's properties will be spread out. Otherwise, it will be ignored.

Let's see an example:
```javascript
const isActiveOnMenu = true;

const pastaCarbonara = {
  ingredients: ['pasta', 'bacon', 'eggs', 'cheese', 'garlic'],
  price: 10.0
};

const menu = {
  ...isActiveOnMenu && pastaCarbonara
};

console.log(menu);
// { ingredients: ['pasta', 'bacon', 'eggs', 'cheese', 'garlic'], price: 10.0 }

```
As you can see, in the example above, the `pasta carbonara` object will only get `spread` when the `isActiveOnMenu` is true and since logical AND (&&) evaluates operands from left to right, returning immediately with the value of the first falsy operand it encounters; if all values are truthy, the value of the last operand is returned.
Remote debugging in Rails 7
Tags: rails, ruby, webdev
Published: 2022-09-23 15:04:11

_This post was extracted and adapted from [The Rails and Hotwire Codex](https://railsandhotwirecodex.com)._

Rails 7 includes the [official Ruby debugger](http://github.com/ruby/debug). It also uses [Foreman](http://blog.daviddollar.org/2011/05/06/introducing-foreman.html) to orchestrate multiple processes in development. This way you can run the Rails server along with processes to watch and compile your frontend assets using a single command.

Annoyingly, this makes debugging trickier. You can't just add a breakpoint in your app and run commands in the console. The same Terminal window is running multiple processes, so won't always be interactive.

The `debug` gem supports remote debugging which is useful in such cases. Using this setup, an external, independent debugger process attaches to another _debuggee_ Ruby process.

Enable remote debugging in your Rails app by adding the below lines to your `application.rb`.

```ruby
require "rails/all"

if defined?(Rails::Server) && Rails.env.development?
  require "debug/open_nonstop"
end

# ...
```

We verify the Rails environment is development and that the `Rails::Server` constant is defined before enabling remote debugging. The latter check ensures remote debugging is enabled only when the app runs in the context of a web server. It shouldn't be enabled in other contexts like the Rails console or a background job processor like Sidekiq.

Now when you start the Rails server in development, the `debug` gem will open a [UNIX domain socket](https://en.wikipedia.org/wiki/Unix_domain_socket) which the debugger process can connect to.

Start the server using `bin/dev` and in another Terminal window, run:

```
$ bundle exec rdbg -a
```

If the Rails server is the only debuggable process running (it should be), the debugger will connect. You can add then breakpoints in the app and run commands in the debugger process!

`Ctrl+D` will exit the debugger and leave the Rails server running. I recommend doing this after you've finished debugging. Check out the docs for the full list of available commands: https://github.com/ruby/debug#control-flow.

**NOTE**: _You can also use the statement `require "debug/open"` instead of `require "debug/open_nonstop"`. The downside here is the program will be paused on launch until you attach the debugger and `continue` it. This can get very fiddly given how often the server needs to be restarted during development._

_If you liked this post, check out my book, [The Rails and Hotwire Codex](https://railsandhotwirecodex.com), to level-up your Rails and Hotwire skills!_
Dependent Props In React Typescript
Tags: react, typescript, webdev, dependent
Published: 2022-09-23 15:00:58

**A dependent prop** is a prop that should only be set when another prop has a specific value.


In the example below we can see one use case (click on [`Open Sandbox`](https://codesandbox.io/s/dependent-props-in-react-typescript-3txhlb?file=/src/App.tsx) to see the code):

{% embed https://codesandbox.io/embed/react-typescript-forked-3txhlb?fontsize=14&hidenavigation=1&theme=dark %}

Here we have two options of the same generic card.
- Card1 - has **only** two props: `title`, `description`
- Card2 - has **only** two props: `title`, `footer`

In order to use the full power of typescript when writing generic components, we need to give typescript the specific options that are acceptable to us.

We might think that passing `Card1 | Card2` to the `Props` type is enough, but when we do that typescript will show us the following errors: 
![Property 'description' does not exist on type 'ICardBase & (ICard1 | ICard2)'](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yh597a8nafzj4bwoq1ku.png)

![Property 'footer' does not exist on type 'ICardBase & (ICard1 | ICard2)'](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rpa0yhh28qiqm0as4fu5.png)


And that's because we can only have **one or the other**, and so if we're currently rendering `Card1` then we won't have the `footer` prop, and vice versa, when we render `Card2` we won't have the `description` prop.

To solve this, we need to still pass the missing prop as `never` (`undefined` will work as well but `never` indicates that the prop will <u>never</u> occur).

We could do it manually like so:

![Manual interfaces](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d00vujqmo64y6gd7pf3l.png)



But a cleaner way is to create a utility type 🔥, like so:

![Never type utility](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9d8gn624jz9vbl7aoyzr.png)

> The `Never` util takes every prop and makes its type `never`.

> It allows for **scalable** code.
Naturally, the component starts small until the product/UX team wants it to be a **_bit_** different...


![Types with the Never util](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/80j2nskvd7mc5l82kwi6.png)


---

By doing all that we get a better experience using the generic component - typescript will throw errors when we are incorrectly using it, (for example, passing both `footer` and `description` - an impossible situation).
 

![Error shown by typescript to make sure we are using the component correctly](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u8e1lfou2vbbay37dnlq.png)

This protects us, the developers, from mixing up between the two separate (but similar) cards. 🦾
Sveltekit, Typescript, TailwindCSS & Pug Starter
Tags: svelte, pug, tailwindcss, starter
Published: 2022-09-23 14:59:21

If anyone is interested in quickly spinning up projects using:

- Sveltekit
- Typescript
- TailwindCSS
- Pug
- Eslint
- Prettier
- Playwright

I created and will continue maintaining this starter template on Github: [https://github.com/lightning-jar/svelte-typescript-tailwind-pug-starter](https://github.com/lightning-jar/svelte-typescript-tailwind-pug-starter). 

There was a breaking change to Sveltekit just [today](https://github.com/sveltejs/kit/blob/master/packages/kit/CHANGELOG.md#100-next499).  So it reminded me how useful an up-to-date starter can be.
Mac OS for the Web!
Tags: opensource, javascript, react, webdev
Published: 2022-09-23 14:50:26

 # v0.1
---

- [x]  Basic wallpaper
- [x]  Basic dock with its cool hovering animations
- [x]  Basic toolbar
- [x]  Everything to built with theme switching in mind

# v0.2

- [x]  Action center
- [x]  Light/Dark mode switcher
- [x]  Brightness slider(Not functional)
- [x]  Sound slider (Not functional)
    - [x]  Wifi (Not functional)
    - [x]  Bluetooth (Not functional)
    - [x]  AirDrop (Not functional)
- [x]  Do not disturb (Not functional)
- [x]  Keyboard Brightness (Not functional)
- [x]  Screen Mirroring (Not functional)

---

  [MacOS Web](https://macos1.vercel.app/)

## v0.3

- [x]  Basic API for Menu Bar
- [x]  Menu bar, and menu items. Not necessarily functional
- [x]  Menu for Finder only (For now)

## v0.4

- [x]  Add the MacOS startup chime.
- [x]  Make windowing solution
- [x]  Add open/close trigger to apps(Dock included)
- [x]  Window should have traffic light buttons, with close, minimize, fullscreen buttons(functional)
- [x]  Show "Apps coming soon"

## v0.5

- [ ]  Clicking on unsupported apps in dock should show a window saying that this app isn’t available and list the available ones.
- [ ]  Make  twitter a profile for Aswin

## v0.6

- [ ]  A wallpaper switcher app. Offers automatic day/light wallpapers too
- [ ]  Probably Safari. Uses Iframe and basic tabs functionality.
- [ ]  A text editor. Like VSCode or Notepad, haven’t thought ¯\_(ツ)_/¯

## v1

- All kinds of crazy apps like clock, weather, and much more. Would be great if community jumped in to make some of these apps.