teleren/devto huggingface dataset:
tiny-replace-files
Tags: javascript
Published: 2022-01-05 08:43:48

recommend: https://github.com/Rabbitzzc/tiny-replace-files
```ts
import { replaceStringInFilesSync } from 'tiny-replace-files'

const options = {
  files: 'src/targets/index.js',
  from: 'test-plugin',
  to: 'self-name',
}

# await
const result = replaceStringInFilesSync(options)
console.info(result)
/**
[
  {
    file: './ques2.md',
    changed: true,
    matchCounts: 1,
    replaceCounts: 1
  }
]
*/
```
Leetcode diary: 1261. Find Elements in a Contaminated Binary Tree
Tags: javascript, algorithms, devjournal, motivation
Published: 2022-01-05 08:28:45

This is a new series where I document my struggles of leetcode questions hoping seeing however small of an audience I get gives me the motivation to continue.  

This problem is relatively simple, but a small trick can speed up the performance well. I believe if you know how to do BFS to traverse the tree then you should have no problem adding values to the tree. 

Below is my code: 

```
var FindElements = function(root) {
    root.val = 0;
    const stack = [root];
    let current;
    const record = new Set();
    
    while (stack.length) {
        current = stack.shift();
        record.add(current.val);
        if (current.left)  { 
            current.left.val = getLeft(current.val); 
            stack.push(current.left);
        } 
        if (current.right) { 
            current.right.val = getRight(current.val); 
            stack.push(current.right);
        } 
    }
    
    this.record = record;
    
    function getLeft  (num) { return 2 * num + 1; }
    function getRight (num) { return 2 * num + 2; }
};

FindElements.prototype.find = function(target) {
    return this.record.has(target);
};

```

I did not think of using a set for my answer, this was suggested by a better performance solution. Pretty neat, might come in handy one day for me.

Let me know anything on your mind after reading through this, THANKS!
aelf Metaverse Theme “TOP of OASIS” Hackathon workshop 1
Tags: blockchain, hackathon, csharp, gamedev
Published: 2022-01-05 08:27:11

aelf Hackathon workshop 1 with subtitle is ready! You can find it in both of our Youtube & Bilibli channel:
https://b23.tv/7Y7QTMx
https://youtu.be/4yeN12CkqbI
A11y tips: aria-live and aria-atomic
Tags: a11y, tips, html
Published: 2022-01-05 08:26:04

As we said in the [previous post](https://dev.to/carlosespada/a11y-tips-how-to-notify-of-content-changes-4f3j), **one of the options to notify a screen reader user of changes** in the content of an area is using the `aria-polite` attribute, which can take two values:

- `assertive`: the screen reader announces the change immediately.
- `polite`: the screen reader waits to announce the change in the content until the user finishes interacting.

And an example of using `assertive` could be a warning message when a session is about to expire, which will be announced immediately as the user needs to know right then, not later.

```
<p aria-live="assertive">
  You have 30 seconds left before logging out
</p>
```

And an example of the use of `polite` could be the update of a price in a purchase process, which will be announced when the user finishes interacting with the shopping cart.

```
<p aria-live="polite">
  Total price: 
  <span id="total-price">32.50</span> &euro;
</p>
```

In the example above, **only the content that changes will be announced**, that is, the price, so the screen reader user will only hear a `47.80` without further context. This can be a bit confusing, so **there is an extra attribute that will make all the content of the wrapper be announced**, even if only part of it has changed. That attribute is `aria-atomic="true"`:

```
<p aria-live="polite" aria-atomic="true">
  Total price: 
  <span id="total-price">47.80</span> &euro;
</p>
```

Thus, in our new example, when the price updates, instead of hearing a simple `47.80` the user will hear `total price 47.80 euro`, which offers much clearer information about what is happening.

With this combination of both attributes, `aria-live` and `aria-atomic`, **we achieve an optimal result in communicating changes in the content** to the user of the screen reader.

An important aspect that must be taken into account is that `aria-live` **can only be used with elements initially present in the DOM**, those that are created dynamically and inserted in the DOM are not listened to and therefore are not announced.

How to solve this problem? For that there is the following parameter that we will see: `role="alert"`.
Leetcode diary: 890. Find and Replace Pattern
Tags: javascript, algorithms, devjournal, motivation
Published: 2022-01-05 08:08:48

This is a new series where I document my struggles of leetcode questions hoping seeing however small of an audience I get gives me the motivation to continue.  

This question is like the medium of medium question. It is not difficult, but requires a small degree of logical leap (I thought I did this question already but whatever). 

The realization is that you could simply transform each word into a abstract representation in integers so that you don't match string by string, but by ints. This abstraction then becomes like a common language between all the words and you can just matched whether the transformedWords match the transformedPattern.

Below is my code

```
var findAndReplacePattern = function(words, pattern) {
    const transPattern = transform(pattern);
    const answers = [];
    
    words.forEach(function(word){
        if(transPattern === transform(word)) {
            answers.push(word);
        }
    });
    
    return answers;
};

function transform (word) {
    const letters = word.split('');
    const map = {};
    let count = 1;
    
    letters.forEach(function(letter, index){
        if(!map.hasOwnProperty(letter)) {
            map[letter] = count++;
        } 
          
        letters[index] = map[letter];
    });
    
    return letters.join();
}
```

note that there is a small caveat to this code, which is that we are doing .join(), instead of more intuitive .join(''). The reason is that once the letters are more than 9, there could be a combination of words and patterns that somehow transforms to the same ints when joined by '', such as if t = 11, and a=1, then t could be mismatch to aa.

Let me know anything on your mind after reading through this, THANKS!
[Day 4]  Making another Dapp
Tags: 100daysofcode, blockchain, angular
Published: 2022-01-05 05:12:24

Day 4, whoop whoop! It's another cold day out here in Iowa unfortunately but you know what it could be worse. Today felt a little weird, I didn't feel nearly as creative as I usually do and it was hard to think up what I wanted to do for my next project. All I knew was I didn't want to follow a tutorial and do that again, I want to breakout from tutorial hell and learn on my own. 

All of my code can be found at this [Github Repo]("https://github.com/ChaseStruse/VideoGameMarketplace")

## What did I do? 

- Started an angular project
- Added Truffle and Solidity
- Watched videos regarding CSS tips and tricks
- Tweaked some code with my personal website using the tips and tricks I learned

## What did I learn?

- Learned how to center a div a more efficient way
- Learned how to initialize a truffle project
- Learned how to structure a angular app with truffle

## Any Side Notes? 

- While it was a day full of no motivation it felt good to still get something done thankfully!
How to create a null-filled array without [], comma, or the word “Array”
Tags: javascript
Published: 2022-01-05 07:45:22

```js
const praiseBeToCthulhu = (len) => {
	const obj = { a: '"' }
	obj.b = ''

	const codepoints = JSON.stringify(obj).split('')
		.map(ch => ch.codePointAt())

	const grab = (n) => codepoints.slice(n).shift()

	const x = grab(6)
	const y = grab(9)

	let s = String.fromCharCode(x - 1)

	for (let i = 0; i < len; ++i) {
		s += Object.getPrototypeOf(
			Object.getPrototypeOf(
				Object.getPrototypeOf(
					Object
				)
			)
		)
		s += String.fromCharCode(y)
	}

	if (s.length > 1) {
		const z = s.split('')
		z.pop()

		s = z.join('')
	}
	
	s += String.fromCharCode(x + 1)

	return JSON.parse(s)
}
```

OK, there are definitely more concise ways, but hey, maybe you're getting paid by the number of lines of code you write.

Thank-you for coming to my TED talk. 🙇‍♀️
Steps For Troubleshooting your Code
Tags: programming, beginners, java
Published: 2022-01-05 07:41:22

Hi Everyone you might have faced many troubles while writing code and you got that error many a times while learning!

#### Let's try to find that error!
Follow the steps below, I'm sure you're gonna make it! 💪👩‍💻
## 1. Indent your code
Some programming languages may not require indentation to work properly, but it is always recommended to indent your code properly while finding the errors in the code you can understand better, what's happening with good organisation of code.

You can easily find the missing parentheses, if any causing errors.

## 2. Verify the variable names
Some times we may have declared the same variable name twice or even better we might have missed the scope of the variable we are using. So it's better to have a look at variables.

Also name the variables descriptively, that it's easy to understand what it does and makes our process of finding bugs easy-peasy 🙂

## 3. Test the code with different inputs
It's really important to test our program with different inputs to understand the program flow better and to find out what's that tiny case that's causing the program to break. If you're writing test cases don't forget to write test cases with all the possible inputs to find the case where our program simply doesn't work!

## 4. Log the values of critical variables
By this time you may got some idea by following the previous steps, now log or print the values of variables and check whether the value of variable is as expected or not.

I bet by this step you'll have probably figured out what that tiny little bug is.

## 5. Verify initialisation of variables
This is where most of the programmers fall prey and don't forget to initialise the variables ever. 

This is quite critical and causes **NullPointerException**.

## 6. Focus on Stack Trace
If there is an error thrown, focus on the stack trace of the error where it shows the methods involved in causing the error and then go and squash the error.

## 7. Use Debugger on your IDE
Create break points wherever you doubt and then run the program and check it out to find the bug.

I'm sure by this step you'll successfully resolve your bug or error.

### Last Note:
As the code complexity grows it will become too tough to find mistakes and resolve them, so do it step by step while building code.

# Now let's go 🏃‍♂️ and quash that bug 🐞
Install Strawberry Perl using chocolatey on Windows
Tags: perl, windows, chocolatey
Published: 2022-01-05 07:31:28

Install Strawberry Perl using chocolatey on Windows.

```
choco install strawberryperl
```

If you need 32bit Strawberry Perl, you can do the following.

```
choco install strawberryperl --x86
```

<a href="https://github.com/Thilas/chocolatey-packages/tree/master/strawberryperl">The document of Strawberry Perl on chocolatey</a>
GitHub Repo Finder
Tags: android, github, xamarinforms, xamarin
Published: 2022-01-05 07:30:31

I have developed small android app using Xamarin Forms and C# which provides facility to search and explore the git hub repositories through your mobile apps.
I have mainly used the git hub API to search the repositories and used the response to display in proper format.
Using this app, you can search the repository and it returns all the matched and displays 20 records per page and you can navigate back and forth using the pager.
When you search for the repository, it shows the details of the repo in the search result such as number of forks, number of bugs reported, number user starred this and the language.

When you open the repository, it displays the more details about the repository and from the detail page you can copy the clone and other URLs of that repository.

From the detail page you can open the repository and can explore the more detail about the repository.

This app is good for those who are preparing for the interviews. Many good users have created repository for the interview questions, so you can search with keywords like "Interview" or "java script interview questions" and you will get all those repositories and then can open the repositories and go through all the available questions.

The big advantage of this app is that it is **"FREE"** , **Ad FREE** and does not access any **DATA FROM YOUR MOBILE** . It only requires internet permission to get the details.

Download the app from below link and provide your valuable feedback so that I can improve your experience with this app.

[](https://play.google.com/store/apps/details?id=com.dktech.githubrepofinder&hl=en_US&gl=US)

Here are some screenshots of the app from the play store


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

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

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pu30rb5qjtmgvttn8uhq.png)
Tic-Tac-Toe Game
Tags: android, androidgame, gamedev, mobil
Published: 2022-01-05 07:21:07

I have developed a small game app for playing your favorite game tic tac toe in different style.
You can see animated texts and images when you open the app which really looks nice for kids and they will enjoy these.
Also, this app has audio which instruct what to do next. 
This app is good for the kids having age range 8-10.

I have used Xamarin Forms and C# to create this app and used Android Native functions for text to voice.

Please download it from the below link and provide your feedback

[](https://play.google.com/store/apps/details?id=com.dktech.tictactoe&hl=en_US&gl=US)

Here are few screenshots from the app
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1qz24wil75bl6fbrc4i6.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c9aoe28d1jphojhyb6up.png)
  
#tic-tac-toe #tictactoegame #android #androidgames #free-android-games #free #freegames #freeandroidapps
What Is Web 3.0 Explained
Tags: web3, beginners, programming, blockchain
Published: 2022-01-05 07:18:28

After Meta verse, **web 3.0** is now became a trending a topic in internet. Everybody want to know about **what is web 3.0**. What changes will **web 3.0** make in programming field and technology. 

Well I am here to explain you what is web 3.0 and also **what are web 1.0 and 2.0**. 

## What is Web 3.0

**Web 3.0** is the new era of internet where the whole internet will shift towards the blockchain and decentralized technology. This will make internet more secure than web 3.0. 

## What is Web 1.0 and 2.0

**Web 1.0** is the starting era of internet. You also can say it read only era. In this era people use internet to get only information. Or there was no interaction between user and internet. There you could not take data from user this present days. 

You can consider static websites or personal websites as **web 1.0** website. This era continued from 1996 to 2004. 

After social media's, search Engine, Blogs came, the internet changed fully. Now user can interact with internet. Internet can take your information and use it to make profit from you. This is the **web 2.0**. We are using most of web 2.0. 

The search engine, social media, streaming platform, ecommerce websites, blogs like dev.to are the part of web 2.0. From 2005 to 2016 is considered as web 2.0 era. But we have not shifted in **web 3.0** fully. 

## Web 3.0

After 2016 **web 3.0** is started. Where the blockchain technology and cryptocurrency is now in boom. After the announcement of Metaverse, people are also excited about web 3.0. 

As you know blockchain is a decentralized technology. Recently we heard news about data leaks of many big companies. So they want to safe their data. And decentralized technology is perfect for safe data. This is why companies will use blockchain technology and this will be future. 

Hope, you understand now **what is web 3.0**. If you have any idea or information, that can be valuable to people, you can share in comment box.
Using CSS 'first-letter' for cool drop cap styling.
Published: 2022-01-05 07:08:55

It's as old as print itself but I think the dropcap is still a cool thing to make a blog post layout more interesting. 

To make it work you need to target some psuedo classes with CSS. Specifically the `first-child` and `first-letter` ones, together. Here's a sample I'm using [here](https://getwindsurffit.com/windsurfing-boards/).

```
p:first-child:first-letter {
   float:left;
   font-family:Georgia;
   font-size:80px;
   line-height:0.8;
   padding:2px 8px 0 0;
}
```

Using this snippet at:
[UCG](ucg.com.au/dark-fibre/)
[Print Miami](https://printmiami.com/)
[Wild Posters](https://wildposters.com/wheatpaste-poster-printing/)
[Monster Tees](https://monstertees.com/)
Weekly web development resources #103
Tags: webdev, weekly
Published: 2022-01-05 07:06:49



______

##[CSS Diner](https://flukeout.github.io/)
[![CSS Diner](https://wweb.dev/weekly/content/103/css-dinner.jpg)](https://flukeout.github.io/)
A fun game to help you learn and practice CSS selectors.

______

##[Tech blogs](https://tech-blogs.dev/)
[![Tech blogs](https://wweb.dev/weekly/content/103/tech-blogs.jpg)](https://tech-blogs.dev/)
A big list of Awesome Tech Blogs, where you can also add yourself. 

______

##[Dropdown Arrows](https://codepen.io/ainalem/full/YzraZmP)
[![Dropdown Arrows](https://wweb.dev/weekly/content/103/dropdown-arrows.jpg)](https://codepen.io/ainalem/full/YzraZmP)
A cool demo of dropdown arrow animations by Mikael Ainalem.

______

##[Zotero](https://www.zotero.org/)
[![Zotero](https://wweb.dev/weekly/content/103/zotero.jpg)](https://www.zotero.org/)
A free, easy-to-use tool to help you collect, organize, cite, and share research.

______

##[The Thinner Book: Atomic Habits](https://www.chrisbehan.ca/posts/atomic-habits)
[![The Thinner Book: Atomic Habits](https://wweb.dev/weekly/content/103/habbits.jpg)](https://www.chrisbehan.ca/posts/atomic-habits)
 A nice summary of the book "Atomic Habits" for everyone who wants to form new habits or get rid of bad ones.

______

##[Dura](https://github.com/tkellogg/dura)
[![Dura](https://wweb.dev/weekly/content/103/dura.jpg)](https://github.com/tkellogg/dura)
A background process that watches your Git repositories and commits so you don't lose your work. 

______

##[You Should Keep a Journal](https://www.chris-saylor.com/posts/you-should-keep-a-journal/)
[![You Should Keep a Journal](https://wweb.dev/weekly/content/103/journal.jpg)](https://www.chris-saylor.com/posts/you-should-keep-a-journal/)
An article on reasons to keep a journal by Chris Saylor.

______

##[Stay](https://cordlessdog.com/stay/)
[![Stay](https://wweb.dev/weekly/content/103/stay.jpg)](https://cordlessdog.com/stay/)
A tool to keeps desktop windows in their place. 

______

##[Wrapping text](https://www.jayfreestone.com/writing/wrappping-text-inside-svg-css/)
[![Wrapping text](https://wweb.dev/weekly/content/103/wrapping-text.jpg)](https://www.jayfreestone.com/writing/wrappping-text-inside-svg-css/)
A nice article by Jay Freestone on how to wrap text inside an SVG using CSS.

______

To see all the weeklies check: [wweb.dev/weekly](https://wweb.dev/weekly)
Hosting on GitHub
Tags: github, portfolio, react, tailwindcss
Published: 2022-01-05 06:57:51

## So, would you like to host a website for free? 

In most circumstances, hosting is expensive, but if you're just getting started with *web development,* you can host it for free on *GitHub*. 

Most of the easy port portfolio using HTML and CSS may be deployed immediately using Github's special repo `<USERNAME>.github.io`.


GitHub Pages is another option for hosting react-based static websites. In this article, I'll go over the bits and pieces you'll need to get your site up and running. 

## Include these deployment steps in *package.json scripts *'s section first. 

### Add homepage property
This step will reroute react to the appropriate  endpoint (url).

```
"homepage": "https://mallikarjunht.github.io/Portfolio",
```  

### Add pre-deploy and deploy scripts  
```
"scripts": {
    "pre-deploy": "npm run build", // bulid a deployable package web optimised
    "deploy": "gh-pages -d build", // push build folder to gh-pages
  }
```  

### Deploy your application
This step will be detected by Github, and your changes will be up and running in no time.  
```
npm run deploy
```  

### Confirm your site is published

your code is deploied and you can acciss it in the url as shown below.
```
<USERNAME>.github.io/<PROJECT_NAME>
```

hear is my [portfolio](https://mallikarjunht.github.io/Portfolio/) on github 
```
https://mallikarjunht.github.io/Portfolio/
```
Referances 
[Official Documentation](https://docs.github.com/en/pages/getting-started-with-github-pages/creating-a-github-pages-site)
Positivity
Tags: discuss, growth, improvement
Published: 2022-01-05 06:53:09

---
title: Positivity
published: true
description: Positivity is underrated
tags: discuss, growth, improvement
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/svuoan730btcklu49ycu.jpg
---

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

> Positive thinking is underrated. Give it a go for a month and decide for yourself.

---

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.
Hello World!
Tags: test, helloworld
Published: 2022-01-05 06:48:32

# This is my first post!

Hello **world**!!

<!-- <img src="https://images.unsplash.com/photo-1526470608268-f674ce90ebd4" alt="world"> -->

![intro](https://urbanisierung-blogs.s3.filebase.com/0.jpg)

## Again...

hello! world!