teleren/devto huggingface dataset:
How I manage my browser tabs to maximize focus
Tags: browser, management, productivity, tips
Published: 2021-02-19 13:48:00

---
title: How I manage my browser tabs to maximize focus
published: true
date: 2021-02-16 14:03:05 UTC
tags: Browser, Management, Productivity, Tips
canonical_url: 
---

 ![How I manage my browser tabs to maximize focus](https://res-3.cloudinary.com/josebrowne/image/upload/q_auto/v1/blog-images/tabs.png)

I'm not here to pick on tab hoarders but browser tab chaos gives me anxiety. Making it harder for me to stay focus and productive.

For years now I've followed a simple mental model that keeps me from falling into this trap. Didn't think much of it until I was screen sharing with a friend who thought it was awesome! So here it is:

The rule is simple: Open each task or topic in its own window and related links in tabs.

That's it.

So let's say I'm working on fixing a bug. I start this journey with a new window `CMD + n`. The first tab is usually the Jira ticket where the work is defined. Next is often a google search and the rabbit hole of tabs that usually springs from that (ex: docs, blogs, StackOverflow, GitHub issues and so on).

Now let's say that in the middle of that I need to review an API design doc. Well, that's a different task/topic. It's a context switch. So it gets a whole new window 🌟

This approach has two main benefits:

1. I always have a birds eye view of what I'm working on. Nothing gets lost in tabs. I can quickly cycle throw everything I'm working on by just cycling throw my open windows  `CMD-``
2. But the best is that when I'm done with a task I just close the whole window. This means that in one shot I say goodbye 👋🏽 to all the related tabs too. #noHoarding #feelsGreat #tinyDopamineDump 😌

* * *

- Pro Tip I: Every once and a while I'll need to send home a tab I've opened in the wrong window. Instead of Jiu-Jitsu dragging windows to get it home, I've recently discovered Chrome's new "Move To Tab" feature which makes this a breeze 🙏🏽

![How I manage my browser tabs to maximize focus](https://firebasestorage.googleapis.com/v0/b/firescript-577a2.appspot.com/o/imgs%2Fapp%2Fjcb%2F7zgD7cKGBA.png?alt=media&token=ce497c01-bed0-4b97-a2f3-b21843a8e9ed)

- Pro Tip II: Chrome recently released a new Tab Grouping feature that can be used to implement this workflow. Personally, I prefer using windows because it makes it easier to keep everything I'm not currently focused on out of sight and out of mind. But feel free to give it a shot and see if it works for you.

![How I manage my browser tabs to maximize focus](https://storage.googleapis.com/gweb-uniblog-publish-prod/images/Chrome_BlogHeader_TabGroups_May.max-1000x1000.png)

If you have other tips related to this please share them with me [@JoseBrowneX](https://twitter.com/JoseBrowneX)
Is Online Learning College a Scam?
Tags: news, security, elearning, onlinecourse
Published: 2021-02-27 07:56:11

---
title: Is Online Learning College a Scam?
published: true
date: 2021-02-16 14:00:00 UTC
tags: News,Security,elearning,onlinecourse
canonical_url: https://centocode.com/is-online-learning-college-a-scam/
---

![Is Online Learning College a Scam?](https://centocode.com/wp-content/uploads/2021/02/markus-winkler-bbUpSCy2XyM-unsplash-1.jpg)

Everyone just trying their hands in this online education field. Always you see a new site selling their courses on the internet.

The post [Is Online Learning College a Scam?](https://centocode.com/is-online-learning-college-a-scam/) appeared first on [CentoCode.com](https://centocode.com).
First API based Frontend Project - Find Movies App
Tags: react, javascript, programming, webdev
Published: 2021-02-16 13:42:24

# Hi Folks,

As we are not slowing down the tempo, we just released another project idea with high-quality designs.

[Find Movies App](https://bigsondev.com/projects/find-movies-app-project/)

It's available for free (and always will be). This one is quite difficult but I tried my best in describing acceptance criteria and recommending technologies, providing core concepts.

Can't see what you gonna build, your own "Find Movies App" version in React.

Happy Coding!

---
I'm thinking about creating YT video series - building [projects](https://bigsondev.com/projects/) from my website, step-by-step, modern technologies, best coding practices with a thorough explanation.

If you enjoy the content and like the idea, [Buy me a pizza](https://www.buymeacoffee.com/bigsondev).
Let's reach that goal together. 😊

Thanks for all the support!

Get in touch: [Mentorship](https://bigsondev.com/mentorship/) | [Twitter](https://twitter.com/BigsonDev) | [LinkedIn](https://www.linkedin.com/in/adrian-bigaj-282277130/)
Paynow Integration Part 3: Installation
Published: 2021-02-16 13:39:18



In the last tutorial we got keys from PayNow, in this one we will go through installation of Paynow SDK in PHP based projects.
I will touch on these scenarios:
-	Composer
-	Manual Installation

Also make sure curl extension is enabled in your PHP
##1. Composer

Type the following command to install paynow php sdk
```sh
$ composer require paynow/php-sdk
```

Then include it in you project like this

```php
<?php
require_once 'path/to/vendor/autoload.php';
// your code here
```

If you are using Laravel include it like this

```php
<?php
use \Paynow\Payments\Paynow;
// your code here
```

Thats it!

##2. Manual Installation
If you don't have composer installed then [Download Paynow Here](https://github.com/paynow/Paynow-PHP-SDK/archive/master.zip)

Extract it into your project directory then type this into your code

```php
<?php
require_once 'path/to/library/autoloader.php';
// Do stuff
```

###Example: Manual Installation
If your your folder structure is like this

```
- Paynow
- checkout.php
- success.php
- cart.php
```

Then you include Paynow like this(inside checkout.php)

```php
<?php
require_once './Paynow/autoloader.php';
```

And BAM you have access to PayNow!!!

Congratulations we have finished the boring stages now we move to the interesting stuff

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kj7s46r45m1ytvqyp975.png)
We should be teaching our kids how to code. Or should we?
Tags: healthydebate, discuss, codenewbie, beginners
Published: 2021-02-16 13:21:09

The debate over whether children should be taught to code in school has been going on for quite a while now. One side says that coding is the new literacy, and everyone should know how to. The other side rejects this claim.

First of all, though the idea that coding will be beneficial to children is still under debate, I do not envisage it ever being at the same level as indispensable skills like reading or writing. Coding is not a skill needed by everyone. An actuary may benefit from knowing how to code, but a nurse wouldn't. Coding is beneficial only if it solves a problem. People should not learn how to code just because. Jeff Atwood said about this argument in [an article of his](https://blog.codinghorror.com/please-dont-learn-to-code/):

> It assumes that coding is the goal. Software developers tend to be software addicts who think their job is to write code. But it's not. Their job is to solve problems.

Some people say coding could make our kids get better at problem-solving. But so could chess. And maths. And sports. My point is that there are many other skills that would be beneficial to kids. Coding is a practical subject, and if schools started teaching it, they might probably take away all the practicalness from it and teach it just like every other subject.

We could instead introduce kids to code and get them to know how it looks like. Then it would be their choice to continue, either in a club or in their own time on platforms such as Codecademy and SoloLearn. Coding should not be forced on children in any way, as by doing so, we risk sucking the creativity out of it, the very skill we are trying to grow.

What do you think about teaching kids to code? Leave a comment below!
Locking scroll of multiple containers simultaneously 
Tags: javascript, html, css, webdev
Published: 2021-02-16 13:19:37

Hi Friends! Every one of us must have seen the commit comparer of Github or some other source control providers. There, we have two containers scrolling simultaneously so that we can have a look at 
the same place of both the files at the same time.

I am talking of something like this...
![Notepad++ Code Compare](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mgnu3ck8w7vwfqg3blav.gif)

Achieving this in the web is quite simple, with **_JavaScript_** and **_Css_**.

I have made an example but it's horizontal. Yes! It seems quite odd but the main thing I wanna showcase here is the scrolling.

Here, we can assign a **scroll** event listener to the scroll sections or containers and access the _scrollLeft_ property of the scroll target. 
```
f.addEventListener('scroll', (e) => {
    console.log(e.target.scrollLeft);
  }
});
```

Now we assign the _scrollLeft_ value to our second container's _scrollLeft_, and we have a working demo. And yes, we can do the same for the first container as well so that scrolling the second container will also scroll the first.

```
f.addEventListener('scroll', (e) => {
    s.scrollLeft = e.target.scrollLeft;
  }
});
```
But, now we have an issue. We can surely notice the stuttering of the scroll-bar. It's not smooth anymore. This is because setting the _scrollLeft_ value of any container will trigger the **scroll** event on it.

To tackle this, we utilize debouncing. We maintain two variables, _isFirstScrolling_ and _isSecondScrolling_. We use this to track whether the other one is scrolling, and we can update the scroll position of that container. If it is scrolling, we should not update the scroll value, this causes the stuttering.

```
f.addEventListener('scroll', (e) => {
  if(!isSecondScrolling) {
    isFirstScrolling = true;
    customDebounce("first");
    s.scrollLeft = e.target.scrollLeft;
  }
});

s.addEventListener('scroll', (e) => {
  if(!isFirstScrolling) {
    isSecondScrolling = true;
    customDebounce("second");
    f.scrollLeft = e.target.scrollLeft;
  }
});
```

The ***customDebounce*** function helps to set the scroll trackers to _false_ once scrolling is over.

```
let timeOut;

const customDebounce = (tracker) => {
  console.log(timeOut);
  clearTimeout(timeOut);
  console.log("cleared",timeOut);
  timeOut = setTimeout(() => {
    if(tracker === "first")
      isFirstScrolling = !isFirstScrolling;
    else
      isSecondScrolling = !isSecondScrolling;
  }, 700);
}
```

So, with this, we have our working example.
{% codepen https://codepen.io/jyotirmayasahu38/pen/MWwqaVJ %}

Kindly check out the code and give valuable feedback to improve my further posts.

Thank You.
Daily Developer Jokes - Tuesday, Feb 16, 2021
Tags: jokes, dailydeveloperjokes
Published: 2021-02-16 13:00:26

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

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

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

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

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

<!-- 
Joke text:
___Q:___ What kind of computer can hold a musical note?

___A:___ A Dell.
 -->
Search and debug gems with `bundle open`
Tags: ruby, rails, webdev
Published: 2021-02-16 15:47:28

---
title: Search and debug gems with `bundle open`
published: true
date: 2021-02-16 13:00:00 UTC
tags: ruby,rails,webdev
canonical_url: https://boringrails.com/tips/bundle-open-debug-gems
---

Ever get frustrated trying to search through code on GitHub? Or wish you could put a breakpoint in a gem so you could figure out what it was doing?

Don’t mess around with cloning the gem repo or monkey patching code in your own app. Use `bundle open` instead.

![Example of bundle open command](https://boringrails.com/images/bundle-open.gif)

## Usage

In your shell, run the command: `bundle open GEM_NAME`

`bundler` will open the source code for the exact version of the gem you’ve got installed in your editor. You can search the code inside your editor and even add breakpoints or make code changes locally to test out things.

## Options

The `bundle open` command launches the editor that you’ve set via the `EDITOR` or `BUNDLER_EDITOR` environment variables. You can set this to be `vim`, `emacs`, `VS Code`, or whatever tool you like to use.

If you’ve made changes to the local gems for debugging or experimental purposes, you can use the `bundle pristine` command to restore your gems to their “original” state.

## Additional Resources

Bundler Docs: [bundle open](https://bundler.io/bundle_open.html)

Bundler Docs: [bundle pristine](https://bundler.io/v2.2/man/bundle-pristine.1.html)

* * *
[![](https://boringrails.com/images/twitter-banner.png)](https://twitter.com/_swanson)
🦊 Simple OTA updates for Micropython with Senko.
Tags: python, tutorial, showdev
Published: 2021-02-16 12:31:39

With the rise of **Micropython** usage across Espressif microcontrollers, It is worth noting the importance of **Over-The-Air** updates in developing new features and maintaining security.

------

<img width="100%" style="width:100%" src="https://media.giphy.com/media/YWH83KyJGiI9rCO3K4/giphy.gif">

------

That is why I built **Senko**, a simple way to update your **Micropython** microcontroller from the **GitHub** repository, which I used for my **ESP8266** based sensor fleet.

{% github RangerDigital/senko no-readme %}

------

## 🛠 Operating Principle

Senko synchronizes selected files on your microcontroller with the remote ones from the GitHub repository.

Every time `.fetch()` or `.update()` methods are called Senko compares **SHA1** hashes of local files with remote ones to determine if they are the same.

If they are not, Senko saves remote files from **GitHub** repository to your microcontroller. This means you need to reboot to run the latest code.

> 🚧 You are responsible for implementing a network connection and reboot strategy!

------

## 🔥 Installation

Senko consists of a single `senko.py` module that you import.

You can use **uPip** to install Senko from **PyPi**:

```python
import upip

upip.install("micropython-senko")
```

------

## 🎉 Usage

You should start by importing the module and creating a `Senko` object.

You have to specify **user** with your GitHub username, **repo**, and **files** that you want to keep synchronized.

```python
# boot.py
import senko

OTA = senko.Senko(
  user="ocktokit", # Required
  repo="octokit-iot", # Required
  branch="master", # Optional: Defaults to "master"
  files = ["boot.py", "main.py"]
)
```

Check out other examples in the Senko repository!

------

### Updating

Then after connecting to Wi-Fi network call `OTA.update()`:

```python
# boot.py
import senko
import machine
import network

OTA = senko.Senko(
   user="ocktokit", 
   repo="octokit-iot", 
   files=["boot.py", "main.py"]
)

# Connect to Wi-Fi network.
connect_wlan()

if OTA.update():
    print("Updated to the latest version! Rebooting...")
    machine.reset()
```

**That's It!**  
This setup will try to keep `boot.py` and `main.py` updated every time the microcontroller boots.

Check out my other projects at https://bednarski.dev!
Probando código en diferentes versiones de PHP
Tags: tip, desarrollo, php
Published: 2021-02-16 12:22:14

---
title: "Probando código en diferentes versiones de PHP"
published: true
tags: ["tip", "desarrollo", "php"]
canonical_url: https://marceloandrader.github.io/blog/2021/02/16/probando-c%C3%B3digo-en-diferentes-versiones-de-php/
---


Cuando estoy dando mantenimiento a una aplicación escrita en PHP y actualizando la versión de PHP para mantenerla segura, a veces es necesario probar por qué cierto código en una versión funciona y en otra no.

Entre versiones de PHP siempre hay diferencias aunque sean sutiles, o por que la nueva versión de PHP arregló alguna función y la hace no compatible con la nueva versión, o cambio de orden en argumentos o nuevas funciones no disponibles en anteriores versiones.

Para esto se puede usar [https://3v4l.org/](https://3v4l.org/) el nombre proviene de `eval` escrito con números para acordarse más fácilmente.  En esta app se ingresa el código que se desea probar y puedes realizar un preview en una versión específica o evaluar para todas las versiones de PHP actuales, o con un checkbox se puede probar con las versiones de PHP que ya están en fin de vida (EOL).

Como pueden ver en esta imágen un código inofensivo en la última versión da un error que es lo correcto. En las anteriores da un warning pero en las antiguas funciona normal.

![3v4l screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1g30nk49ee6jkvddb0gc.png)

Es útil también como un [REPL](https://en.wikipedia.org/wiki/Read%E2%80%93eval%E2%80%93print_loop) para revisar y probar código antes de ejecutarlo en tu propia aplicación.
The benefits of ReactJS and reasons to choose it for your project
Tags: react, javascript, devops, android
Published: 2021-02-16 12:16:26

Maintained by Facebook and a large community of dedicated developers, ReactJS does not need any introduction. As a robust open-source, front-end, JavaScript library, ReactJS can be used as a base in single-page or [mobile app development](https://www.suriainternational.com/). The best possible rendering functionality and easy, reusable components make it an ideal choice for creating excellent user interfaces (UIs).

In [ReactJS app development company](https://www.suriainternational.com/reactjs-development-company/), developers can impart the complex UI into easier components instead of working on the entire website application. There is no need of reloading web pages while making changes in web app data. What’s more, ReactJS can be integrated with other JavaScript platforms but it is different than other popular frameworks including Angular. Virtual DOM facilitates the development process by enabling developers to update just the changed portion of the web page quickly.

Here is a list of the top reasons why developers prefer ReactJS for developing enterprise-level applications.

Top Reasons Why Developers Select ReactJS Framework

Thanks to advancing technology, many frameworks are available for developing web and mobile applications with desired features. Here are some of the top features that make ReactJS a preferred choice among developers globally.

Virtual DOM- As mentioned above, virtual DOM is a robust feature that helps developers in coding while rendering the elements, components, and data to process. ReactJS converts memory data structures into components for computing the modification and updating the browser. Developers can perform the task with JSX instead of pure JavaScript because of this feature and build sophisticated user interfaces for web applications.

Easy and Effective Testing- The ReactJS framework enables developers to browse ecmascript6 modules that can be utilized with Babel and react-di. These modules are simple to test and you can treat them as the present state’s function. Dedicated ReactJS developers can monitor modules from the triggered functions, events. And output.

Data Binding and Reusability of Code- These are two significant advantages of the React (or ReactJS) framework. When it comes to Android web app development, the framework supports code reusability. With this, one side data binding and flux that controls data flow from a single point can be utilized effectively.

Read More: https://www.suriainternational.com/reasons-to-choose-reactjs-for-your-web-development-project/
Day 17: d20 Dice Roller
Tags: 100daysofcode, csharp
Published: 2021-02-16 12:11:43

Simple d20 dice roller.

```c#
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

namespace DaySeventeen
{
    class Program
    {
        static private Random rand = new Random((int) DateTime.Now.Ticks);

        static void Main()
        {
            string input;
            Console.WriteLine("Input dice info in d20 form separated by spaces:");
            input = Console.ReadLine();
            foreach (string s in input.Split(' '))
            {
                for (int i = 0; i < Convert.ToInt32(s.Split('d')[0]); i++)
                {
                    Console.Write("{0} ", rand.Next(Convert.ToInt32(s.Split('d')[1]))+1);
                }
                Console.WriteLine();
            }
        }
    }
}
```
One Simple Way To Improve Your Dev.to Experience
Tags: productivity, todayilearned, devjournal, meta
Published: 2021-02-16 11:56:37

A couple of weeks ago, I was almost giving up on Dev.to. I would open the app, scroll through the suggested posts, and sigh in dismay. I couldn't help but think aloud: **My Dev.to feed sucks!**

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

My feed was filled with posts of beginner articles in React, JS, etc. I'm not against beginner articles, but when you have read several of these, you can get bored pretty easily with suggestions to read more of the same.

However, something didn't make sense: I knew that there were people writing posts on advanced/intermediate topics. Why was I then only being shown the beginner topics? Sometimes I was lucky enough to stumble upon such an article, and I'd light up as my interest in the app got renewed. But these were just once-in-a-blue-moon occurrences.

## How I Came Across The Solution By Accident

One evening, I opened the Dev.to app, and I immediately noticed how bright it was, in contrast to my other apps. For some reason, the app did not automatically activate dark mode after sunset. I went exploring in the app settings, and voila! Not only did I find the option to activate dark mode, but also an option to customize my feed.

Hidden deep in the settings, is a section that asks you your experience level:

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

You can access this via [this link](https://dev.to/settings/customization). Just scroll to the bottom.

By default, no value was selected, and out of curiosity, I updated this to option 5 (Expert), just to see what would happen. I went back to my feed and forgot all about it.

I didn't notice until much later that my feed had greatly improved. I suddenly wanted to read and save every article on my feed. It only hit me later that the above change had somehow refreshed my feed experience (I guess the cache took a while to update).

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

There you have it! If your Dev.to feed sucks, don't despair. Just change your experience level and you will start seeing better content in no time.

Cheers!

PS - it still sucks that there is no auto dark mode to match the device preferences 😩. Dev.to, please do something about it! 😃