teleren/devto huggingface dataset:
Light/dark mode: the simple way
Tags: webdev, css
Published: 2021-05-30 10:02:54

In the previous post, we've seen how to use the `color-scheme` html meta tag to benefit from the browser default themes.

{% post https://dev.to/ayc0/light-dark-mode-the-lazy-way-4j71 %}

In this post, we’ll iterate on that and use our own styles.

## CSS variables

CSS variables ([documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties)) are runtime variables that you can dynamically re-assign. For instance, consider this example:

```css
:root {
  --color: orange;
}
.color-blue {
  --color: blue;
}
* {
  color: var(--color);
}
```

By default, all elements will be in orange. But when wrapped in an element with the classname `color-blue`, their color will now be blue (and as usual in css, it cascades).

## Media query

Media queries aren't only useful for responsive design and changing the layout based on the screen size. When using [`prefers-color-scheme`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme), you can modify your rendering based on if your user prefer to view their website in light/dark mode.

## End result

By combining both, you can create a color palette that will automatically adapt to your users preferences:

```css
:root {
  --text: black;
  --background: white;
}

@media (prefers-color-scheme: dark) {
  :root {
    --text: white;
    --background: black;
  }
}

body {
  color: var(--text);
  background: var(--background);
}
```

I'd still recommend adding a `<meta name="color-scheme" content="light dark" />` in your HTML as seen in the previous post to have native inputs that will look good in dark mode.

{% codepen https://codepen.io/ayc0/pen/yLMPbLz %}
How to abort a fetch API call?
Tags: javascript, programming, webdev, codesandbox
Published: 2021-05-30 10:02:44

You probably faced a situation where you wonder is there a way to abort an API call before it gives back a response. For example, when you are downloading a large size video and you want to cancel the downloading process after waiting for a certain amount of time.

Well, there is a good way to handle this. JavaScript provides an interface called [AbortController](https://developer.mozilla.org/en-US/docs/Web/API/AbortController).
>The **AbortController** interface represents a controller object that allows you to abort one or more Web requests as and when desired.

The basic syntax of AbortController would look like this,

```javascript
let controller = new AbortController();

function downloadVideo() {
  // ...
  fetch(url, { signal: controller.signal })
    .then(function (response) {
      // ...
    })
    .catch(function (e) {
      // ...
    });
}

function abortDownload() {
  controller.abort();
}
```

Nothing much fancy, isn't it?
We need to understand few basic points here though,
* Create an instance of AbortController, which in return gives us a signal object instance.
```javascript
controller.signal
```
* Pass this signal object to our fetch request as an option inside the request's options object.
```javascript
fetch(url, { signal: controller.signal })
```
* When `abort()` is called, the `fetch()` promise rejects with a `DOMException` named `AbortError`, so we should handle it in `catch` block.

Here is working example from CodeSandbox.

{% codesandbox abortcontroller-fdu7z %}

### And more...
- Check [Hybrowlabs](https://hybrowlabs.com/react-js-dev-outsourcing) for React app development services.
Making a custom toggle/switch button with Tailwindcss and Vue.js
Tags: javascript, webdev, beginners, vue
Published: 2021-05-30 10:00:50

{% youtube RhXMtdymVnU %}

Not sure what you call them, toggles or switches, but here's how you make a toggle button with Tailwindcss and Vue.

> [Here's how it looks and works.](https://tailwindcss-toggle.vercel.app/)

![UI](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a1onow0bh9awk08t7u3c.png)

Let's make a new component called `toggle.vue` and add the below code

```HTML
<template>
  <div
    class="w-14 h-8 flex items-center bg-gray-300 rounded-full p-1 duration-300 cursor-pointer"
    :class="{ 'bg-green-500': value }"
    :aria-checked="value.toString()"
    @click="toggle"
  >
    <div
      class="bg-white w-6 h-6 rounded-full shadow-md transform duration-300"
      :class="{ 'translate-x-6': value }"
    ></div>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    toggle() {
        this.$emit('input', !this.value)
    }
  }
};
</script>
```

Now, use the component in your code, whoever you'd like to.
```HTML
<template>
  <div>
    <toggle v-model="toggleValue" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      toggleValue: false,
    };
  },
};
</script>
```

Let's break down the component and try to understand.

![Toggle Component](https://i.imgur.com/PU7H67c.png)

Sorry for the bad image quality, not sure why is dev reducing the quality, even if it's hosted somewhere else, here's the [link](https://i.imgur.com/PU7H67c.png) to a higher resolution pic

1. An outer which acts as a container for our toggle button, styled with rounded corners, and `display: flex` properties.

2. Here's the thing when we want to add `v-model` to custom events, there are two important things involved, a prop named **value** and a event named **input** to emit. so technically you custom component should look like this.

```HTML
<custom-component :value="variable" @input="doSomething"/>
```
The interesting thing is `v-model` directive is a shorthand for the above attributes, which would make our component markup like this.

```HTML
<custom-component v-model="variable"/>
```
That is exactly what we're doing here with our toggle component.

3.. Add a rounded div and bind this class to it `translate-x-6` so it is gets slided to the right when `value === true`
```HTML
:class="{ 'translate-x-6': value }"
```
4.. The final thing, just add a receive a prop with name `value`, which is very important that it be named **value**. 

We now have a working custom toggle component. Just call it wherever you need like below.

![Index.vue](https://i.imgur.com/6czBgGl.png)

Here's a [demo](https://tailwindcss-toggle.vercel.app/) if you'd like to test it and here's the [source code](https://github.com/fayazara/tailwindcss-toggle)

> Shameless plug, do follow me on [twitter](https://twitter.com/fayazara) for more articles and announcements
Creating Email Verification in Laravel
Tags: webdev, laravel
Published: 2021-05-30 09:43:37

Laravel Email Verification - In this article I will explain how to make email verification in Laravel using the mailtrap service. To make email verification with mailtrap is quite easy. And here are the steps to make email verification with mailtrap in laravel:

> Don't forget to install the laravel project and install laravel ui for the authentication feature. And also don't forget to create a new database, adjust DB_DATABASE in .env and run php artisan migrate.

1. The first step, we we must first register in mailtrap. If you have registered, we will get a mailtrap username and password as shown below.
![Laravel Email Verification](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oo2bac7g2h89kvhjuct2.png)

Next we can copy the script marked above, then paste it in the .env file so that the .env file will look like below
![Setup Laravel Email Verification](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xwfn3p45f5wkbvcu69gi.png)
2. Next, open the User model and add **implements** **MustVerifyEmail** as shown below.
![add implements MustVerifyEmail](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ya3101m1ooqrt9quvnnp.png)
3. In Step three, add route Auth::routes(['verify' => true]); in routes/web.php. So that the display in the web.php file will be like below
![add route Auth::routes(['verify' => true]);](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ee37cfnz89jq9h1za89v.png)
4. And the last step is adding 'verify' middleware in HomeController. So the display in the HomeController will be like the image below.
![adding 'verify' middleware in HomeController](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/syshmeq71qn54r780h3h.png)
By adding the verify middleware, it means that the controller or home page that is called on this controller can only be accessed by users whose emails have been verified.
 
OK, now we try to verify the email by registering first. run **php** **artisan** **serve**, then open our project in the browser. Go to the register menu and enter your name, email, password and confirm password as in the example below.
![try to verify the email by registering first](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qeezakakowiawmfadjfk.png)
When you click register, you will be directed to the email/verify page as shown below.
![directed to the email/verify page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wdezmf0y0djjy2oqxcwo.png)
And if we check again on the mailtrap, there will be a new email that comes in as below.
![check on the mailtrap](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yzl8opkmgy2zzxrhwdsh.png)
If we click Verify Email Address, then we will be directed to the homepage or our project home page.

Thank's for your attention and don't forget to visit [Codelapan.com](https://codelapan.com), to get articles about web programming, web design, and others.
7 Ways to Use Your Linux Terminal
Tags: linux, codenewbie
Published: 2021-05-30 09:40:19


The terminal is the command line interface (CLI) to a Linux or Unix-like computer operating system. It’s a place where you can type in commands and get things done. Here are 7 ways to use your Linux terminal

**1. Manage your hard drive**

In order to get anything done with your computer, you will need to manage your hard drive. Using commands in your terminal, you can easily perform tasks like creating, moving, copying and deleting files. 

It's important to note that these commands can be destructive, so any `rm` command you perform with them will remove data from your computer 

**2. Manage Your Cloud Servers**

You can connect to your cloud servers / vps servers using a program called ssh. After logging in to your server, you can use any Linux command.

One click deploy vps servers and then control them using the command line. Any Linux distribution or operating system you want.

![linux power](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/52csz787m6b0aeedu1fl.gif)

**3. Keep the logs**

You often hear tales of sysadmins having a thing for “the logs”. Many of the troubleshooting problems can be solved if you know what was going on in the logs.

Log files are stored in the directory `/var/log`.

```bash
cd /var/log
ls
cat syslog
```

**4. Development**

It's easy to do development in the terminal. Because there are so many commands aimed at developers like ssh, gcc, g++, python, go etc. 

The editor vim is great for development too, although it has quite a steep learning curve. You can learn [by exercise](https://vim.is)

![vim editor for development](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0qu7to3us0nav8jkkb1f.jpg)

**5. Run a server**

Linux is the most widely used server operating system in the world. You can deploy a web server on your box for development. 

These days nginx is used quite a lot, in the past it was Apache. Regardless of which server software you use, you will have to [secure your server](https://bsdnerds.org/7-top-nginx-security-pracitces/) if you open it to the internet.

**6. Install software**

You can remove and install software using the terminal. Every Linux distribution has their own package manager. The most common ones are **apt** (Debian, Ubuntu, Mint), **rpm** and **yum**.

Because there's lots of open source software, you can compile it yourself too. Run the commands shown below

```bash
./configure
make
sudo make install
```

**7. Play Games**

Entertainment. There are plenty of games you can play in the terminal, including Tetris and Snake. 

Tetris is probably the most well-known terminal game, but it’s actually quite old and has been around since the early days of Unix.

**8. More**

There are many more [Linux commands](https://bsdnerds.org/what-is-linux-shell/) and you can do many things with terminal than the ones shown here.

If you want to improve your Linux skils, you can use [this site](https://www.practicelinux.com/).
Run GUI apps in docker container.
Published: 2021-05-30 09:31:52

Hello learners,
Today i got a new task **how to run GUI applications in container**.
we known that by default we can't run GUI applications in docker container because of non-availability of xserver which is required to meet this challenge.
let me show you how to overcome with this challenge:-
Follows these instructions carefully
Install docker in your os
  -yum install docker-ce
start docker services
  -systemctl start docker 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1r7wykkfptr5b0w22o1g.png) 
Now pull any image you want in my case i pulled centos latest one
  -docker pull centos:latest
It is already in my system you can download it from above command.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hmuigqby6lzz9kg91n7s.png)
launch the docker container with following options.
  -docker run -it --net=host --env="DISPLAY" centos:latest
here i pass --net=host means i want to use host connectivity and provide an --env to share docker's host display.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v43soj6gwodscge06sfm.png)
After successffully launch of docker container install firefox
   -yum install firefox -y
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/boq4zusiegsrtzbm19bw.png)
Now run firefox command
  -firefox
so you see it runs successfully👍
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a1s7anyy3rltxg647hs8.png)
**Now we can run jupyter notebook**
install python
  -yum install python3
install jupyter notebook
  -pip3 install jupyter
After successfully installed launch jupyter notebook
  -jupyter notebook
it shows some error so we have to bypass it with root permission
  jupyter notebook --allow-root
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0pau6rx5u34ivh2hkivl.png)
Finally it is launched successfully👍
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g08b1f6iov3eo4ui3aua.png)
Thanks for reading.
A Beginner's Guide to Linux Commands
Tags: linux, ubuntu, beginners
Published: 2021-05-30 09:13:09

The world is going Linux. At least that's what we tell ourselves every time we open a terminal window and type in a cryptic series of characters that do nothing but make us more frustrated than we were when we started. If you've ever considered using Linux, but aren't sure where to start, this guide is for you.

The [command line](https://bsdnerds.org/what-is-linux-shell/) might seem intimidating at first, but it's actually not so bad. You can use the GUI (Graphical User Interface) if you want, but the terminal has a lot of cool features that make using Linux much easier.

If you're on Ubuntu and want to see what commands you have available, just hit the CTRL+ALT+T key combination and a box will appear in the top left corner showing you all the different programs available. 

![command line ubuntu terminal](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ynzsnrdwe5etfo04rqbk.jpeg)

## Commands

Linux commands are essentially small bundles of text designed to perform a specific task, such as move files from one location to another or run a program.

The Linux command line is not intimidating once you learn a few basic commands. The following are some of the most common commands and cover a wide range of tasks you might want to do.

The **cd** command stands for "change directory" and it changes the current working directory on your computer. It's very useful for navigating around your filesystem.

For example, if you're in your home directory and want to get to /etc/hosts, you could type:

```bash
cd /etc/hosts
```

You could also do this if you're already in /etc/hosts but want to go back up one directory:

```bash
cd ..
```

If you want to see what's in your current working directory, use the ls command like this: `ls`.

```
ls
```

This will list all of the files and directories in the current working directory.

There are many other commands that accomplish the same tasks for some commands, such as `cp` (copy) and `mv` (move).

```
cp file /home/user/Desktop/
```

There's a lot more to learn, but the commands in this article will serve you well no matter which Linux distro you're using. They even work on Mac OS X and on the BSD systems.

If you are new to the command line, I recommend [this site](https://www.practicelinux.com/)
Reset git add
Tags: git, howto, tips
Published: 2021-05-30 08:37:26


I sometimes meet the situation:

```console
$ git add <some-file>
```

"Oh, it was mistake ( ﾟдﾟ)"

In such a case, `git reset HEAD <some-file>` is available.

```console
$ git reset HEAD <some-file>
Unstaged changes after reset:
M	<some-file>
```

Happier a bit😊
Laravel Dynamic Page Title | Set Page Title
Tags: laravel, php, tutorial
Published: 2021-05-30 09:09:36

As Laravel use Blade template engine, many time we have to use the page title to be displayed dynamically, 

Let's Consider you have a master layout for your app.
which have a structure something like
```php
<html>
<head>
    <title>App Name - @yield('title')</title>
</head>
<body>
    @section('sidebar')
        This is the master sidebar.
    @show

    <div class="container">
        @yield('content')
    </div>
</body>
```
Here in Master Layout the code for title is.
```php
<title>App Name - @yield('title')</title>
```

Then You load the Content Page which looks like.
```php
@extends('layouts.master')

@section('title') {{'Page Title Goes Here'}} @endsection

@section('content')
<p>This is my body content.</p>
@endsection
```
Here in Content file the code for title is.
```php
@section('title') {{'Page Title Goes Here'}} @endsection
```

You can watch the video below for live coding.

{% youtube 0VMrGn2d198 %}

Thank You for Reading

Reach Out To me.
[Twitter](https://twitter.com/shanisingh03)
[Instagram](https://www.instagram.com/shanisingh03/)
[TechToolIndia](https://youtube.com/techtoolindia)
What is Podcast?
Tags: podcast, productivity, mobile, startup
Published: 2021-05-30 08:59:27

What Is a Podcast?

When you think about something that is "traditional", your mind wanders to Netflix, yoga exercise, or mobile phones. It is the brand names, individuals, or tasks that both a 10 or 80-year-olds know about without a lot description. When points become this common, they begin to influence our habits and society. Having actually that quantity of impact is why being traditional is so effective, and why so many aim to get to it.

Reaching this degree of importance is a landmark event. And since 2019, podcasts have made it. Tom Webster, SVP at Edison Research amounts it up perfectly. He says, "This is a watershed minute for podcasting-a real turning point. With over fifty percent of Americans 12+ saying that they have ever listened to a podcast, the medium has securely crossed right into the traditional."

Edison Research's information shows 212 million Americans know podcasting. But, that also means there is a remaining 119 million individuals still at night, waiting to discover the fascinating content podcasts need to offer. To educate the various other fifty percent of the populace, this article is the overview of specify what a podcast is and how everything began.

What Is a Podcast: Specified

The first question for someone that has never ever listened to a podcast is, "what is a podcast?" It is name does not instantly inform you what it's or does, so the easiest answer is a fundamental meaning.

Inning accordance with Merriam-Webster, a podcast is "a program (since songs or talk) offered in electronic style for automated download and install over the Internet." But regurgitating a thesaurus meaning isn't mosting likely to win over any new audiences so let's damage it down right into ordinary English.

Among the beautiful aspects of podcasts is that there are several ways to explain them. But a couple of keywords do specify the fundamentals of podcasting. Specifically, podcasts cover almost any subject, are typically free and on-demand. This means anybody can access them, at any moment, about any one point and throughout a variety of systems, all free of charge. To put it right into context, these simple meanings work:

Podcasts are sound content just like talk radio shows or electronic books.

Podcasts have to do with anything and everything, exactly how radio, publications, tv, or movies explore every subject imaginable.

Podcasts are free to access throughout desktop computer and mobile devices. Anybody can pay attention to a podcast with a web link and a set of earphones.

source: https://modalkonten.com
AJ Knowledge Hub - A Great Place To Learn
Published: 2021-05-30 08:13:09

Welcome to AJ Knowledge Hub, AJ Knowledge Hub  is best website for GK General Knowledge Questions, Current Affairs in hindi, hp gk questions, HP GK in hindi,HP GK Quiz, samanya gyan, gk questions, hp general studies, and answers for UPSC, SSC, Banking, IBPS, Railways and other states best hindi gk website, government job recruitment examinations of India.
<a href="https://www.ajknowledgehub.com">gk questions and answers</a>
Escaping Ctrl + S in Vs Code
Tags: vscode, codenewbie, code, tutorial
Published: 2021-05-30 08:09:15

Are you also tired of pressing ctrl + s every single time?

Here you can change your setting to AutoSave

**Open Vs code -> Click on file -> Select AutoSave****


- 

{% youtube e15nV4NR6b8 %}



- 
Twitter:
https://twitter.com/NewGenDeveloper
Epic battles Apple
Tags: ios, epicgames, technews
Published: 2021-05-30 07:56:38

It's been 9 months since Epic games tried to bypass Apple's in-app purchases rule on Fortnite, one of the biggest multiplayer battle royale games. 

After the violation of the rule, Apple decided to ban Fortnite from the iOS store after which Epic filed a suit on the grounds of the antitrust model.

The whole trial made one thing quite clear, that apple lets an app stay till it is convenient for them. 
Recently, the new updates in iOS made it harder for users to set up [tile](https://www.thetileapp.com/en-us/)
 and the next thing we know is the launch of [AirTag](https://www.apple.com/in/airtag/). 

Apple is very vocal about supporting iOS developers, but are they telling the truth.

During this trial, Microsoft argued along with Epic that iPhone must not be treated like something special. Launching Office on iOS with their own subscription in place of in-app purchases has been another side battle along the way.

An email from Phil Schiller, an Apple Exec, was enough to close the matter from Apple's side which said:
        
     ## "We run the store, we collect the revenue"
Space Physics
Tags: javascript, canvas, physics, math
Published: 2021-05-30 07:46:45

So last month I was bored and decided to have some fun by coding some space related stuff. I took 5 space related topics but I have added 2 of them here since the rest are still in work in progress. I have been so much in to Space and Astronomy recently and then I wrote this simply to understand what happens and how it happens. These are my codepens

1. How a satellite/asteroid/comet changes it speed and trajectory using the help of a planet or any other object with a gravitational force.

{% codepen https://codepen.io/SoorajSnBlz/pen/QWpOGvq default-tab=result %}

2. Saturn's rings using real gravitational physics. The rings are actually small particles moving at high speed held together by the gravitational force but I keep the trails to look like there are more particles there. There are lots of properties to adjust on the codepen. Feel free to check it out.

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

The code is a little unoptimized for now so I am not adding the codepen embed here but here is the link to check it out https://codepen.io/SoorajSnBlz/pen/Vwprmdv