teleren/devto huggingface dataset:
Quater-imaginary Business Date
Tags: perl, python, theweeklychallenge
Published: 2022-08-21 11:45:37

## Weekly Challenge 178

[Challenge](https://theweeklychallenge.org/blog/perl-weekly-challenge-178/), [My solutions](https://github.com/manwar/perlweeklychallenge-club/tree/master/challenge-178/sgreen)

## Task 1: Quater-imaginary Base

### Task

Write a script to convert a given number (base 10) to [quater-imaginary base number](https://en.wikipedia.org/wiki/Quater-imaginary_base) and vice-versa.

### My solution

For this task, I chose to only do the first half of the challenge, that is take a base 10 numbers and covert it to a base -4 number. The general principle is take the number and divide it by -4, where the remainder makes up the solution. I had a few challenges when the resulting division was a negative number, but believe I've got that sorted.

### Examples

```
$ ./ch-1.py 4
10300

$ ./ch-1.py 15
10103
```

## Task 2: Business Date

### Task

You are given `$timestamp` (date with time) and `$duration` in hours.

Write a script to find the time that occurs `$duration` business hours after `$timestamp`. For the sake of this task, let us assume the working hours is 9am to 6pm, Monday to Friday. Please ignore timezone too.

### My solution

Time maths is never easy, at least I don't need to worry about timezones, although that wouldn't really be an issue as most (all?) countries change their clocks outside business hours. The excpetion would be Samoa (and later Tokelau) who [skipped a whole day](https://www.bbc.com/news/world-asia-16351377) on Friday 30/12/2011.

There are a couple of ways to tackle this task, and I think the biggest challenge is handling a span that covers a weekend. I may have over complicated my solution, let's see what other Team PWC members come up with.

I start by converting the time input with strptime. For Python, this is part of the [datetime](https://docs.python.org/3/library/datetime.html) module, and the [DateTime](https://metacpan.org/pod/DateTime) module for Perl. I also convert the hours provided into minutes. I also check that the start time is between 9am and 6pm on a weekday.

Next I wind the clock back to 9am Monday. I add the number of working minutes we wound the clock back to the `minutes` variable (days x 540, hours after 9am x 60 and minutes). We now know how many minutes after 9am Monday we need to add. I split this into `days` and `minutes`.

For every five whole days, we need to take 2 extra days for the weekend. Finally I use date math taken the 9am Monday time, and adding the required number of days and minutes to find the end time.

### Examples

```
$ ./ch-2.py "2022-08-01 10:30" 4
2022-08-01 14:30

$ ./ch-2.py "2022-08-01 17:00" 3.5
2022-08-02 11:30
```
My terminal
Tags: terminal, commandline, ohmyzsh, iterm
Published: 2022-08-21 11:22:00

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

Tools I used in my terminal on mac:

## Terminal design

 - iterm2
 - One Dark theme
 - oh my zsh
 - starship prompt
 - FiraCode Nerd Font


## Java terminal tools

 - sdk man (w/ autocomplete)
 - jbang (w/ autocomplete)
 - quarkus CLI (w/ autocomplete)


## Other terminal tools

 - homebrew (w/ autocomplete)
 - Micro text editor
Touchpad Scrolling is too fast in VSCode
Tags: vscode, productivity, help, community
Published: 2022-08-21 11:16:00

<p>
As developers, we must be fast in writing code. And for this purpose we sometimes suggest others to not use their mouse and instead memorize keyboard shortcuts. This usually works and makes us more productive. But a problem with VSCode is when you use your touchpad to scroll, it scrolls too fast. This also happens with Spotify which is another Electron app. So I think this is an issue about it. <b>Or it was...</b> </p>

Today I started looking for a solution and found this at reddit:

1. Open `regedit.exe`
  ![regedit](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/apqe99wg66io72db7cq7.png)

2. Go to Computer\HKEY_CURRENT_USER\Software\Elantech\SmartPad
  ![scroll_control_mode](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3fe9ozykct1q5h0pz63r.png)

3. Double-click on ScrollControl_Mode and change value from 0 to 1
 ![edit-scroll_control_mode](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vkpytar1l2c01z7k0h7l.png)

This has fixed the issue for me hopefully it works for everyone else too. 

[Original article at reddit](https://www.reddit.com/r/techsupport/comments/3lhmhq/win10_elan_touchpad_scrolling_issues/)
How to delete the branch and create the new branch
Tags: webdev, beginners, git, github
Published: 2022-08-21 10:45:00

For example: 
This given command for go to main branch or I can also say that this command is use for changing the branch.
```
git checkout <branch name in which you go back>
```

Delete a branch with 

```
git branch -d <branch name>
```
for creating the new branch in the main or master branch I can use the given command.

```
git branch -b <branch name>
```

Done☺
.

 [IF you want to know more how to contribute on the opensource code on github](https://www.dataschool.io/how-to-contribute-on-github/)
What is Authentication in Network Security
Tags: authentication, network, security, networksecurity
Published: 2022-08-21 10:43:45

Do you know what is authentication in Network Security ? It is the act of identity verification.

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

Read more at:
https://hecodesit.com/what-is-authentication-in-network-security/
How SIM cards work with mobile networks.
Published: 2022-08-21 10:42:24

_This is a side effect of looking into USSD_

![Sim ≈ eSIM](https://pbs.twimg.com/media/FamWg70XoAEvpyl?format=png&name=small)

SIM and eSIM data are equivalent.

Physical SIMs are PVCs with integrated circuits.

eSIMs are just software that store the same information.

Both are identified in the same way.

![Integrated circuit card identifier](https://pbs.twimg.com/media/FamZ0O2WAAAE9yA?format=jpg&name=small)

Each SIM is identified by an ICCID.

These are strings of text made up of 4 parts:

1. a fixed part "89", which identifies the mobile industry
2. an E.164 country code (e.g. UK is 44, Nigeria is 234)
3. an identifier of the mobile network
4. a mobile phone account identifier

![International mobile subscriber identity](https://pbs.twimg.com/media/FamZiKbXkAEt00s?format=jpg&name=small)

SIMs store IMSI numbers which identify mobile phone customers.

They're made up of 3 parts:

1. a completely different country code, known as a mobile country code (E.212)

2. a mobile network identifier, often the same as the issuer ID in the ICCID

3. a subscriber identifier

![MSISDN / phone number](https://pbs.twimg.com/media/Fambi9iWIAASXlL?format=jpg&name=small)

Finally, the MSISDN (aka phone number) routes mobile networks to the IMSI.

These are made up 3 parts:

1. a standard E.164 country code
2. a regionally-administered code (either NDC or NPA)
3. a subscriber (customer) identifier

**Overall**

![How SIMs work with mobile networks](https://pbs.twimg.com/media/FamfZVgWIAAEDgT?format=jpg&name=small)

There are lots of similarities, with some values even overlapping.

ICCID and MSISDN use E.164 country codes.

ICCID and IMSI often share the same number as Issuer ID and MNC.

ICCID and IMSI often share the same number as account ID and MSIN.
Pulumi ffmpeg Automation
Published: 2022-08-21 10:21:00

Repo: https://github.com/bronifty/pulumi-aws-ts-ffmpeg
Youtube: https://youtu.be/CYlaO4kDQQ8

We add a video object event listener to the s3 bucket whose handler kicks off an ffmpeg job...

Commands
pulumi new typescript -y
npm i @pulumi/aws 
npm i @pulumi/awsx 
pulumi config set aws:region us-east-1
pulumi up 
pulumi destroy 
pulumi stack rm
Rat In A Maze - With Multiple Hops
Tags: javascript, leetcode
Published: 2022-08-21 10:18:00

```
let solutionMatrix = [
  [0, 0, 0, 0],
  [0, 0, 0, 0],
  [0, 0, 0, 0],
  [0, 0, 0, 0],
];
let N = 4;

let inputMatrix = [
  [2, 1, 0, 0],
  [3, 0, 0, 1],
  [0, 1, 0, 1],
  [0, 1, 0, 1],
];

const solveMaze = (solutionMatrix) => {
  if (solveMazeRun(0, 0) === false) {
    return false;
  } else {
    return solutionMatrix;
  }
};

const solveMazeRun = (i, j) => {
  if (N - 1 == i && N - 1 == j) {
    solutionMatrix[i][j] = 1;
    return true;
  }

  if (isSafeToMove(i, j)) {
    solutionMatrix[i][j] = 1;
    for (let k = 1; k <= inputMatrix[i][j] && k < N; k++) {
      if (solveMazeRun(i + k, j) === true) {
        return true;
      } else if (solveMazeRun(i, j + k) === true) {
        return true;
      }
    }
    solutionMatrix[i][j] = 0;
    return false;
  }
};

const isSafeToMove = (i, j) => {
  if (i < N && j < N && i >= 0 && j >= 0 && inputMatrix[i][j] !== 0)
    return true;
  else return false;
};

console.log(solveMaze(solutionMatrix));

```
iOS Tutorials on Real Project.
Published: 2022-08-21 10:17:00

Hey there! ☄️

There are a lot of cool tutorials and hacks on dev.to, and I'd like to share my experience with others. I have an idea of iOS app as pet-project and I'm planning to develop it. In parallel I'd like to text about each part of this project: _UI_, _architecture_, _network_ and etc. 

## 👀 How I See It.
It will be _series of articles_ that will answer on questions _what, why and how_ I did each part of project. 
Other peoples will be able to suggest solution to some problem, give advise or ask something related to iOS development.

## 📃 How To See the Code?
Project will be open and placed on GitHub.

## 🤨 Why it might be interesting?
Series of articles will describe how to create project from scratch to release to the AppStore.
Will focus on developing all aspects real life project, not just independent features. 
I assume this will be useful who already have a basic knowledge of development and want to create their own project.

## 🔮 P.S.
If this is interesting, please let me know. Also comment on what you would like to see in the articles.
9 Tips to help you stay focused while programming
Tags: webdev, beginners, programming, tutorial
Published: 2022-08-21 10:13:50

1. Keeping a straight posture. Your body language controls how you feel and vice-versa.

2. Create a reward system. After “x” minutes of focus, you take a “y” minutes break.

3. Living an interesting life. Will-power is hard to muster when you live a mundane life.

4. Remove distractions. You can’t function with multiple things trying to take your attention.

5. The more relaxed you feel the easier it will be to focus. Do things that make you feel less stressed.

6. Create a schedule. It will keep you on track and avoid confusion about what to do.

7. Practice meditation. The more aware you are about your thoughts and feelings the better.

8. Take care of your health. Eat, sleep and exercise right to maximize productivity.

9. Be patient. Don’t get discouraged if you don’t have laser focus after reading these. It will take time

If you want to learn more about Web Development, feel free to [follow me on Youtube!](https://www.youtube.com/channel/UCze04H5oeudQ01G9DDj-frA)
Chrome插件开发 - 使用React开发扩展
Published: 2023-08-13 13:31:46

---
title: Chrome插件开发 - 使用React开发扩展
published: true
date: 2022-08-21 00:00:00 UTC
tags: 
canonical_url: https://manon.icu/blog/translate/build-chrome-extensions/spicing-with-react
---

在上一篇文章[【Add Tailwind】](https://manon.icu/blog/translate/build-chrome-extensions/add-tailwind)学习了集成 tailwind。

这篇文章学习使用 react 创建一个新标签插件，类似如图：

也可以使用其他自己喜欢的框架：vue、angular、svlete 等

<video
  src="https://cdn.jsdelivr.net/gh/manonicu/pics@master/uPic/react-browser_jqqqkk.webm"
  autoPlay
/>

## 安装 React

```bash
npm install react react-dom
touch -p index.js src/{App,Counter}.js
vim new-tab.html
```

**new-tab.html**

```html
<body>
  <div id="app"></div>
  <script type="module" src="index.js"></script>
</body>
```

**index.js**

```js
import ReactDOM from 'react-dom'
import {App} from './src/App'

const app = document.getElementById('app')
ReactDOM.render(<App />, app)
```

**App.js**

```js
import Counter from './Counter'
export function App() {
  return (
    <div className="flex flex-col items-center justify-center w-screen h-screen bg-indigo-400 text-6xl font-bold text-white">
      <p>Welcome 👋</p>
      <Counter />
    </div>
  )
}
```

**Counter.js**

```js
import {useState} from 'react'

export default function Counter() {
  const [counter, setCounter] = useState(0)
  const increase = () => setCounter((count) => count + 1)
  const decrease = () => setCounter((count) => count - 1)
  return (
    <div>
      <button onClick={decrease}>-</button>
      <span className="px-4">{counter}</span>
      <button onClick={increase}>+</button>
    </div>
  )
}
```

跑起来

```bash
npm run build
```

## 测试插件

![FMA6T1](https://cdn.jsdelivr.net/gh/manonicu/pics@master/uPic/FMA6T1.jpg)

可以在这里找到[【Source Code】](https://github.com/rebelchris/new-tab-extension/tree/react)
Product Design and Intro into creating wire frames
Published: 2022-08-21 07:32:03

Product design is the process of creating a product. It can be anything from a website to an app, video game, or even an entire product line. 
Wireframes are a visual representation of your product that show how it will look and function on different devices, so that you can see where you need to make changes before you start building it out in code. They also help you see what parts of your product might work better together than they do separately, which is important when designing for mobile platforms such as smartphones or tablets."

I'm going to be talking about the basics of product design, which is one of the most important steps in the process of developing a new product or website.

The first step is wireframing, which is a step that involves creating a visual representation of your app or website before you build it out. This means that you can see where things will be placed in your app or website and what functionality they will have before getting started on coding. Wireframing will help you to see if there are any holes or opportunities for improvement in your idea.

There are several types of wireframes; going from low-fidelity wireframes,medium-fidelity-wireframes to High-fidelity-wireframes. The best way to determine what kind of wireframe works best for your project is by testing different kinds until you find something that fits perfectly with what you're trying to accomplish with your app or website.

Wireframe is a visual model of your website or app before you start coding. Wireframes are a collection of basic elements that show how the site or app will look and function, minus any content or functionality. Wireframes are usually created in the same style as a physical prototype, but they are not actually real products.

Wireframing can help you make sure your design goals are well-defined and set up before you start building. It also gives you a chance to test out different ideas and see which ones work best before diving into more expensive development work like programming or server setup.
Git with Android Studio
Tags: androidstudio, git, github, ide
Published: 2022-08-21 09:45:45

>**_Introduction_**

In this Articles i am going to tell you how you can easily minimize your work by integrating Version Control System with the Android Studio in few simple steps.

 >**_Setup_**

**GIT Integration with Android Studio**

- Open non-Git project on Android Studio.
- First Test Git Configured
- Settings > Version Control > Git.
- Now press Test Button (It will show you Git Version installed).
**Add Account**

- Settings > Version Control > Github.
- If it’s showing error try this.
- Settings > Version Control > Git.
- File > new > Project from VC > Github > give Token.
- Steps for Creating Repository

**Add**

- VCS > Import into VC > Create Git Repository. (All Files will become brown)
- Select Your Project Folder OR Click On (Android Icon) Project Directory.
- Now Select your Project folder in left Project section.
- VCS > GIT > Add (ctrl + alt + A) (All files will turn green).

**Commit**

- In Tool Bar, Click purple arrow button (commit) (ctrl + k)
- Unselect those files whome u don’t want to commit
- Give commit msg.
- press commit button
.
**Push**

- Now In Tool Bar, Press push button (Green Arrow) (ctrl + shift + k)
- Create repo in Github, copy the URL
- Come to A.S , Press on Define Remote
- Paste in the URL press OK.
- Press Push button.

---

>**_Git In Android Studio_**


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/16mz2md8oum380gonk6a.PNG)


>**_Android Studio Toolbar with Git commands_**


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

>**_Details about Git in Android Studio_**

- Press (Alt + 9)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8wti155c2gbr63nzjiz5.PNG)


>**_Log Screen with plenty of options_**


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

> **_Github Link https://github.com/IamShahabAlam/VCS-with-Android-Studio_**

---

>**_CREDITS_**

[Shahab Alam](https://github.com/IamShahabAlam)

>**_Follow Here_**

[Github](https://github.com/IamShahabAlam)

[Facebook](https://www.facebook.com/iamShahabAlam/)

[Twitter](https://twitter.com/IamShahabAlam)

[DEV](https://dev.to/iamshahabalam)

[BuyMeACoffee](https://www.buymeacoffee.com/IamShahabAlam)

💙 Fluttering
100DaysOfCode: Card UI Design with Weavv CSS
Tags: 100daysofcode, css, html, webcomponents
Published: 2022-08-21 09:36:00

{% codepen https://codepen.io/loouislow81/pen/JjLxQRz %}
{% github https://github.com/louislow81/100DaysOfCode %}
{% github https://github.com/weavv/weavv-css-documentation %}

---

Enjoy!
Data Engineering 101: Introduction to Data Engineering
Published: 2022-08-21 09:26:07

Many Businesses nowadays produce a lot of data. Everything from customer feedback to sales performance etc. But understanding what stories the data tells isn’t always easy or intuitive, which is why many businesses rely on data engineering.

Data engineering is the process of designing and building systems that let people collect and analyze raw data from multiple sources and formats. These systems empower people to find practical applications of the data, which businesses can use to thrive.


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

 Data engineering is a skill that is in increasing demand. Data engineers are the people who design the system that unifies data and can help you navigate it. Data engineers perform many different tasks including:

- Finding all the different data sets around the business
- Finding and cleaning any errors in the data
- Giving all the data a common format
- Interpreting data that could be interpreted in multiple ways
- Removing duplicate copies of data

## Data Engineering Tools and Skills
Data engineers use many different tools to work with data. They use a specialized skill set to create end-to-end data pipelines that move data from source systems to target destinations.

Data engineers work with a variety of tools and technologies, including:

- ETL Tools: ETL (extract, transform, load) tools move data between systems. They access data, then apply rules to “transform” the data through steps that make it more suitable for analysis.
- SQL: Structured Query Language (SQL) is the standard language for querying relational databases.
- Python: Python is a general programming language. Data engineers may choose to use Python for ETL tasks.
- Cloud Data Storage: Including AWS, Microsoft Azure, Google Cloud Storage, etc.
My way and journey into tech 😊
Tags: javascript, programming, discuss, react
Published: 2022-08-21 09:13:46

#Whom Am I ❓
Am Evans, software developer/engineer, web dev instructor and a founder. I have 4.5 years of experience in programming at the time of writing this article. And this is my Journey into tech.

I started college in the fall of 2018 as a Computer Science major at a private university in Kenya. That first quarter ended very poorly for me and had me questioning whether or not I could make it at the school. From what I could see, everyone else was so smart and doing so well! (In reality, I think a ton of us were struggling silently and alone.)

The next two quarters went much better. I loved my programming courses and had to work really hard in my math ones.

They taught us introduction to **C** programming. It was amazing to me. Having power over my computer and telling it exactly what I wanted to do gave me such a feeling of accomplishment.

2019 went on so well, I got the chance to explore several programming languages including Java, Python, and the ultimate Javascript 😊,
Covid came and the world got on hold and that's when I got to practice my programming and problem solving skills.
I meet my first client during the pandemic and I was really impressed  for someone can pay me to write a piece of code. This pushed me to learn between 15 - 20 hours each day. 

2021 and 2022 has been the years of changing code into solutions. I created a small software dev  agency website which generated revenue from clients and then came my second project https://melbite.com which has transformed content sharing over the internet.

[Melbite](https://melbite.com) is a blogging platform for all categories from technology, science, agriculture, etc

Now I work as a web dev instructor at [power learn project](https://powerlearnproject.org) handling Javascript development.

### Why I went for web dev
I Love beautiful things which python and Java could not make me build as a beginner. Web dev is also diverse that gives a wide range of technologies and problems to solve.

### Technologies I use
- Javascript
- Typescript
- ReactJs, NextJs, Redux
- NodeJs

### What have learned.
- Tech is hard but you need to keep pushing.
- Choose one stack and get good at it.
- Spending more time on one thing shortens the learning curve.

### Conclusion 
Tech is hard but easy when you get good in problem solving. Getting into tech was the most expensive and amazing gift in my life for it's high paying and I can get whatever I need.

Share your Journey into tech and let others learn from your experience.

Get more of this articles on [melbite](https://melbite.com)
Laravel creates a profile update page with Inertia and Vue
Tags: php, webdev, laravel, vue
Published: 2022-08-27 12:45:52

---
title: Laravel creates a profile update page with Inertia and Vue
published: true
date: 2022-08-21 09:11:28 UTC
tags: php,webdevelopment,laravel,vuejs
canonical_url: https://blog.devgenius.io/laravel-creates-a-profile-update-page-with-inertia-and-vue-6c6f0d7a01ef
---

[![](https://cdn-images-1.medium.com/max/1356/1*HvKf8hPExcLIA-qNaj4Ugg.png)](https://blog.devgenius.io/laravel-creates-a-profile-update-page-with-inertia-and-vue-6c6f0d7a01ef?source=rss-17217f29618a------2)

Laravel creates a Vue admin panel from scratch — Part 8

[Continue reading on Dev Genius »](https://blog.devgenius.io/laravel-creates-a-profile-update-page-with-inertia-and-vue-6c6f0d7a01ef?source=rss-17217f29618a------2)