teleren/devto huggingface dataset:
Real world DS/Algo book recommendation needed
Tags: books, algorithms, discuss, programming
Published: 2022-01-04 09:22:59

I want to study data structures and algorithms again. I am a computer science graduate and have studied these in past and I can solve easy/medium leetcode problems.

What I want to learn is where these are used in real-world problems, while building software.

In my experience, I have mainly directly used HashMap, Sets, Queues, and Arrays while building applications.

I know about graphs are very useful and are used in many practical problems like dependency injection graph, dependency resolution in tools like Gradle, routing algorithms. Tress in databases, AST in compiler design.
Is there any book which teaches data structures and algorithms like this, by telling about their practical applications also?
Cool Symbol Fonts - Font Generator & Font Changer
Tags: design, githunt, css, webdev
Published: 2022-01-04 09:17:35

Generate **[cool symbol fonts](https://coolsymbolfonts.com/)** to make your normal text look more appealing. Use our online Font Keyboard to generate multiple stylish font text. You can also download the Font app to get access to fancy fonts and cool symbols. 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q19w3p832g7jexxruxvc.gif)
Code splitting (bundle-split) in React
Tags: react, beginners, javascript, webdev
Published: 2022-01-04 07:56:04



As you probably already know, when you build your React app (npm run build), Webpack will bundle all of your files into one big chunk.

If your app is not that big that's usually just fine. But what happens when your app grows dramatically? You can end up with a really big JS file and that can hurt your UX, especially the initial loading time.

Luckily there is a simple solution we can implement. Its name is code-splitting. By splitting our bundle, we can tell React (or Webpack) to load only the code that is absolutely necessary for the initial load (-for the current page, for example).

Later, we can "lazy load" the rest of our code upon request (when navigating or scrolling down).

One of the easiest ways to implement code splitting is by using a dynamic import. As the name suggests, the dynamic import will asynchronously import our file and will return a promise.

It looks like this:

```
export default (numA, numB) => numA * numB

async function loadModule() {
  
 const dynamicImport = await import('./file1')
  
 dynamicImport.default(10, 10)
}

loadModule() //output: 100
```


But what if we want to dynamically import a component?
Let's assume we have a component that is used by our app only on page B. We don't want to import it when we are on page A. Well, with `React.lazy` it's a breeze!

Have a look at the attached image. All we have to do is use React.lazy to import our component. This component will now be excluded from our bundle and imported only on runtime when we load that specific page.
We are also using the Suspense component to render a fallback while the user is retrieving the bundle.


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

---

- For more posts like this [follow me on LinkedIn](https://www.linkedin.com/in/nitsan-cohen/)

- I work as frontend & content developer for [Bit](bit.dev) - a toolchain for component-driven development (Forget monolithic apps and distribute to component-driven software).
Hello world with Alpine.js
Tags: javascript, webdev, programming
Published: 2022-01-04 07:48:12

# Alpine.js

>Your new, lightweight, JavaScript framework.

If you've been in tech for a while, you might have heard about a distribution of linux named `alpine` and know how minimalistic yet powerful is the distribution.

Alpine.js takes exactly the same approach, to the extent that I'll show you how to master it in a series of tutorials which shouldn't take you more than an hour to cover it all!

It's Alpine.js, so the blog post should be the same, straight to the point.

Let's create a file `index.html` and create a Hello world website with Alpine.js.

## Step 1: Import Alpine.js 

We import the js file of Alpine.js in our html file:

``` html
<html>
  <head>
    <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
```

## Step 2: use directives

We want to show "Hello, world!" in a `h1` tag with the use of Alpine directives, so add this line to the body of our html file:

```
<h1 x-data="{ message: 'Hello, world!' }" x-text="message"></h1>
```
A bit of theory:

`x-data` defines a chunk of HTML as an Alpine component and provides the reactive data for that component to reference.

`x-text` sets the text content of an element to the result of a given expression.

And that's it, you've created your webpage with Alpine.js! This is how our `index.html` looks like:

``` html
<html>
  <head>
    <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
  </head>
  <body>
  <h1 x-data="{ message: 'Hello, world!' }" x-text="message"></h1>
  </body>
</html>
```
You can find the source code  [here](https://github.com/mkamrani/alpinejs-helloworld-utopiops).

Now that we have our code ready, let's deploy it on  [utopiops](https://www.utopiops.com). 

Head over to the `Fully managed applications` section as we want to use free static website deployment and hosting that Utopiops offers.

![Screen Shot 2021-12-31 at 8.16.15 pm.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1640944738538/QMMZQKUtp.png)

Now we choose `Static website` as the application type to be created. (Utopiops also offers free plans for `Function` and `Dockerized` applications)


![Screen Shot 2021-12-31 at 8.16.35 pm.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1640944848567/j_pE1HukP.png)

Now the only thing we need to know is to specify the  [repository](https://github.com/mkamrani/alpinejs-helloworld-utopiops)  that we store our code (Utopiops supports Github, Bitbucket and Gitlab).

Remember we don't need to provide any build command!


![Screen Shot 2021-12-31 at 8.18.29 pm.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1640944946072/futHyHNOK.png)

And that's it, in a few seconds we have our website ready and every time we make a change to our code it automatically deploys our changes.

https://alpinejs-hello-world-a8c82a86.sites.utopiops.com

Note: Utopiops is in public beta at the time of writing this post and the view you see when you log in to Utopiops at https://www.utopiops.com might be different, but the good news is that it sure just have become more user-friendly and easier to use.
Window mouse position hook in React
Tags: react, javascript, beginners, webdev
Published: 2022-01-04 07:39:50

In this video we will create a reuseable hook for getting the window mouse position. It's a simple hook and easy to implement. If you are just getting started with React Hooks this might just be a nice entrypoint to get started with hooks.

{% youtube p0wltDooH7Q %}
🔒 Password Gen
Tags: codepen
Published: 2022-01-04 07:31:09

<p>Password Generator</p>

<p>Thanks,  CODER,DESIGNER,PUBLİSHER,DIGITAL CONTENT PRODUCER <a href="https://dev.to/harunpehlivan" target="_blank">HARUN PEHLİVAN </a></p>

{% codepen https://codepen.io/harunpehlivan/pen/eYGrVQx %}
Slack workspaces in the browser
Tags: productivity, webdev, beginners, tutorial
Published: 2022-01-04 07:25:52

I always try to avoid using Electron apps when I can, more so when I need them running all day like Slack. It doesn't make much sense to me, it forces my computer to run another WebKit engine just for Slack when it already works perfectly in a browser.

But Slack does not offer a way to get all workspaces notifications in a single tab, and keeping 3-5 open tabs just for it is annoying, making the Electron app mandatory to use. 

If you were stuck like me in this situation, I have exactly what you need: **a way to activate Slack's workspace switcher in your web browser**!


![Slack's Workspaces switcher in the browser](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/10pojwrbtzcsx4eq7sv8.jpg)

All you need to make this work is to change your favourite browser's user agent to make Slack think that you are using a chromebook, as detailed in [this stack exchange thread](https://webapps.stackexchange.com/questions/144258/slacks-web-version-shows-workspace-switching-sidebar-but-only-on-chromebooks).

You can use the great Tampermonkey extension, or similar, to easily change your user agent on the Slack website. If you do not know about this extension, it allows you to run a user-defined script on a particular website, and more things outside this article's scope.

- [Tampermonkey for Chrome](https://chrome.google.com/webstore/detail/tampermonkey/dhdgffkkebhmkfjojejmpbldmpobfkfo?hl=en)
- [Tampermonkey for Firefox](https://addons.mozilla.org/en-US/firefox/addon/tampermonkey/)

Once installed, you need to create the following script that will change your user agent, and make the Slack website think that you are running the latest Google Chrome version on a Chrome OS laptop:

```javascript
// ==UserScript==
// @name        Enable Slack workspaces in the browser
// @namespace   slack.com
// @version     https://dev.to/nicolasbeauvais
// @description Enable Slack workspaces in the browser
// @match       https://app.slack.com/*
// @match       https://app.slack.com/
// @grant       none
// @run-at      document-start
// ==/UserScript==

(function () {
	'use strict';
    Object.defineProperty(navigator, 'userAgent', {
        value: 'Mozilla/5.0 (X11; CrOS x86_64 10066.0.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.110 Safari/537.36'
    });
})();
```

If you never used Tampermonkey before, you can find many online tutorials that will show you how to add a script. 

> Be careful with the scripts that you add to Tampermonkey, you should never add code that you do not fully understand.

And that's it, you can now open all your Slack workspaces in a single tab, and receive all notifications, just like with the Electron app.
How IT can help your Business?
Tags: beginners, tutorial, career, startup
Published: 2022-01-04 07:24:12

**Rene Dub** _provide the best technical assistance, computer and network repair, and server support in London. We work with laptops and workstations running Windows, Linux, and Mac OS X, and we also provide server support._

_Read more about**[ Rene Dub](https://www.wattpad.com/1169914632-rene-dub-role-of-ai-in-health-tech)**


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9gf1wzo5i793ghk83ryk.jpg)
Report on kubernetes
Published: 2022-01-04 07:22:28

**Report on kubernetes.**

Before getting deep into k8s let us understand what is the problem that k8s is trying to solve!

Suppose when we are talking about things like search (Google search, Bing, Yahoo), YouTube. Architectural solutions that worked before may longer work. Either the scale is so large that things simply break under load. Initially k8s was uniquely designed for Google as project7. To allow the data-centers to run processes at  very high efficiency. However the primary goal of Google is cost saving. And one of the benefits is it increases productivity enormously.

Let us talk about the survey(report)conducted by the DOK(Data on kubernetes) community.
For the purpose of this report, the research 
firm only surveyed individuals whose 
organizations whose organizations are 
currently using, evaluating, or planning 
to use Kubernetes. This included an 
international audience of 502 respondents.

**AS PER THE REPORT:**

 k8s is highly adapted i.e 49% in the IT industry.
Productivity of the organization has increased enormously after adapting k8s.majority are 2x or more productive.
Because of consistency, standardization,and simple management many organizations are okay to run stateful workloads on k8s.
To be fact the adaptation of kubernetes is most in the pandemic i.e 2020-2021 to say during this pandemic there is a digital transformation everywhere hence the more traffic,more adapted to k8s. And the fun fact is COVID takes kubernetes to the next level.

There were some of the challenges for tech-leaders of running data on kubernetes.
One of the challenges is the lack of qualified talents.
So, there are many opportunities for k8s learners.

The state of data on kubernetes says that 90% believe that k8s is ready for stateful workloads whereas 70% of them are already using it on production.

Question: I just wanna know the answer form dok.


1. 
Such a hype is created on kubernetes nowadays. Will it be in the same position in future like let us say 5 years.?

2.
Suppose if your grandmother asks you what kubernetes is? how will you explain her in her way?

[Report link](https://dok.community/dokc-2021-report/)
A11y tips: how to notify of content changes
Tags: a11y, tips, html
Published: 2022-01-04 07:15:07

Unlike browsers where a sighted user can notice the changes when the page does not reload, **screen readers read the DOM and the Accessibility Tree as it was generated when the document was loaded**, so if later changes occur, such as messages, content updates, new blocks, etc... the user will not perceive them and will not be able to access them, losing the information they may offer.

**ARIA is used to fill this gap**. As we said in the [previous post](https://dev.to/carlosespada/a11y-tips-what-is-aria-and-when-to-use-it-2ncd), one of the cases where it makes sense to use ARIA is "_If the feature is available in HTML but it is not implemented, or it is implemented but accessibility support is not._".

In this case we have a functionality (updating the page) that is supported in browsers but is not accessible, so **it is totally appropriate to use an auxiliary technology that helps assistive technologies**.

To define an area of ​​the page in which changes can occur, there are two options, using different ARIA attributes in the container of that area:

- With `aria-live=”polite/assertive”` and `aria-atomic=”true”`
- With `role="alert"`

Both serve to warn the screen reader to be aware of changes that may occur inside and notify the user of them when they occur. Later we will explain the differences between them and in which cases to use each one.

**EDITED:** More on live regions in [this article](https://www.scottohara.me/blog/2022/02/05/are-we-live.html) by the always interesting Scott O'Hara, who highlights this:

> [...] _ensuring an empty live region exists in your DOM, and injecting content into it when necessary, proves to be the most robust way to ensure a live region will be announced._

And a very helpful and well explained [video](https://www.youtube.com/watch?v=W5YAaLLBKhQ) by [Sarah Higley](https://twitter.com/codingchaos) on how to notify the user of content changes.
Game Development Platforms, Services and Global Trends
Published: 2022-01-04 07:09:53

Major driving factors for growth of [Game Development market](https://exactitudeconsultancy.com/post/game-development-market-growth/) are demand for enhanced real time gaming experience through 3D games, supplementary revenue streams, increasing adoption of AR/VR games.

One of the most important and innovative sectors in tech is the Gaming industry. The gaming industry consistently pushes the boundaries of technology and entertainment in their quest to provide an immersive experience. At the center of this quest is the 3D modeling technique where 3D visual effects and 3D animated models provide a real life like immersive experience while gaming.

Growing popularity of AR (Augmented Reality) and VR (Virtual Reality) has made way for innovations like gesture control. They provide a unique gaming experience by giving a sensation that a user is in the game and controlling the things and interacting in the game through his gestures.
How to Get Back Your Hacked Facebook Account?
Published: 2022-01-04 07:06:44

If you've been hacked and you can't get access to your **[hacked Facebook account](https://worldzo.net/facebook-account-hacked-how-to-get-it-back/)**, you can follow some simple steps to regain control of it.

**Solutions to Get Back your Hacked Facebook Account**

First, you should change your password. If you have changed it already, the only option is to re-set it. This will be easy if you have access to your email address or cell phone. You can also check the FAQ section for more information.

Often, a hacker will ask you to provide a valid ID, or to take a photo of you using your webcam. The photo must be clear and show all of your details. After you've sent the photo, Facebook will ask for your most recent password and further instructions. Once the account has been recovered, you should change the password again. Once you've done this, you can continue using the website to access your account. 

Once your password has been changed, you'll need to make sure you're the same person who accessed your account. If the hacker has the same email and mobile number as the one they used to hack your account, this process is easier to complete. If you've recently changed your email address, you'll need to enter a new one before trying to recover your Facebook account. Another way to confirm that it's you is to use two-factor authentication. When this method is used, you will be required to provide a valid email or mobile number.

Lastly, if you've changed your primary email address, you should remove your account from Facebook. This will prevent the hacker from using your old email address to log in to your account. Keeping the account closed will prevent your data from getting into the wrong hands. So, it's important to make sure you don't lose hope. The sooner you act, the better. It might be too late to change your password but it's possible to get it back.


To **[Recover hacked Facebook account](https://worldzo.educatorpages.com/pages/how-to-solve-the-problem-of-hacked-facebook-accounts)** is to change your primary email address. If the hacker has changed your primary email address, you should change it immediately. This will prevent them from sending your account to other people. You also want to check that your primary email address has not been changed. It's a good idea to turn off notifications if your phone has been hacked. If you're unable to do this, you can use a different one.

**Bottom Line**

The most important step is to keep your Facebook account password. You must be careful not to share it with anyone else. If someone is using your account, it's best to change it right away. This way, you can prevent identity theft from happening again. After all, you'll be able to use it again without worrying about who hacked it. But be careful not to share it with everyone!
Consistency
Tags: discuss, improvement, growth
Published: 2022-01-04 06:50:19

---
title: Consistency
published: true
description: Consistency
tags: discuss, improvement, growth
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cfyf4un4f50su8v42a1w.jpg
---

_Originally published on [my blog](https://www.nikola-breznjak.com/blog/daily-thoughts/consistency/)._

> It is way easier to do something 100% of the time than < 100% of the time.

I first came across this concept in the book How will you measure your life by Clayton Christensen where he puts it like this:

> It’s easier to hold to your principles 100 percent of the time than it is to hold to them 98 percent of the time.

The reasoning is that if you slip up only once, it's way easier to slip up again because you already slipped up.

You can check out a few of my other [favorite quotes](https://www.nikola-breznjak.com/blog/books/will-measure-life-clayton-m-christensen/) from that book.

---

This is [why I write](https://www.nikola-breznjak.com/blog/daily-thoughts/why-do-i-write-these-daily-thoughts-posts/) these "daily thoughts" posts.
would like to render the infoPage.js when the user clicks to handleClick function in react. Help Appreciated?
Tags: react, javascript, redux
Published: 2022-01-04 06:36:13

```


infoPage.js

import React from 'react'

export default function infoPage() {
    return (
        <div>
            <h1> this is info components</h1>
        </div>
    )
}


App.js:

<button className="btn btn-primary" onClick={handleClick}>{value.title}</button>



Function:

const handleClick = () => {
   const url = infoPage;
   window.open(url, '_blank');
 } 
```
Random Cropping/Scaling Images to Fit the Required Specs or Dimensions for Any kind of Uploads
Tags: python, ffmpeg, imageprocessing, productivity
Published: 2022-01-04 06:35:22

A simple Python Script with ffmpeg would do wonders.

```
import os

def generate_ffmpeg_command_scale(path, w, h):
    input_path = path.split('/')
    output_path = '/'.join(input_path[:-1]) + '/out-' + input_path[-1];
    ffmpeg_cmd = 'ffmpeg -i {} -vf scale={}:{} {}'.format(path, w, h, output_path);
    return ffmpeg_cmd

def generate_ffmpeg_command_crop(path, w, h):
    input_path = path.split('/')
    output_path = '/'.join(input_path[:-1]) + '/out-' + input_path[-1];
    ffmpeg_cmd = 'ffmpeg -i {} -vf crop={}:{}:0:0 {}'.format(path, w, h, output_path);
    return ffmpeg_cmd

WIDTH = int(input("width = "));
HEIGHT = int(input("height = "))
PATH = input("path = ")

scale_command = generate_ffmpeg_command_scale(PATH, WIDTH, HEIGHT)
crop_command = generate_ffmpeg_command_crop(PATH, WIDTH, HEIGHT)
print(scale_command);
print(crop_command);

os.system(scale_command);
```

Let’s go through the script, _what is does ? How it does ?
_
This script accepts 3 parameters, the expected dims (HxW) and the path to the file in the local system. You can get the path to the file by simply dragging the file into the terminal and copy the path that appears.

The _generate_ffmpeg_command()_ function generates the command for processing the image and specifies the output location of the file to the dame directory but changes the filename as _**out-\<filename\> .**_

The function returns the command requires and the **os** module in python executes the shell command in your terminal and gets you the requires image.

The **scale** parameter of the ffmpeg command scales your input image to the required dimensions.

Try it on [replit.com](https://replit.com/@SidharthaMallic/random-crop-images) :

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

## Advanced Modifications :

1. To crop the image uniformly from the middle, just replace the scale parameter by crop, that would be enough for it.

2. To crop the image from the top-left corner, update line no. 6 to : `ffmpeg_cmd = ffmpeg -i {} -vf crop={}:{}:0:0 {}'.format(path, w, h, output_path);`

mail me at: _[mallicksidhartha7@gmail.com](mailto: mallicksidhartha7@gmail.com)_ , for any kind of customisations, be it Image Processing, Video Processing, Cropping, Compression or so using ffmpeg.

!! Happy Coding !! 😋
Surprise! Something Special For [Under-Grads]
Tags: masterpaperwriter
Published: 2022-01-04 06:33:27

We know you want our assistance, but we must ask you to get essay cheap from us. Take advantage of this opportunity and contact us as soon as possible.

 When you assign us your assignment, we will always submit it within a day or two without affecting your grade. Come to us now, and we will repair your college life immediately.

 Visit [Master Paper Writer](https://www.masterpaperwriter.com/) right now and hand over all of your work to us so we can start working on it right now.