teleren/devto huggingface dataset:
Making Progressive Web App
Tags: myphotohub, opensource, react, progressivewebapp
Published: 2022-12-06 16:14:25

Continuing on my story for `My PhotoHub` [Image optimization GitHub Action](https://github.com/humphd/my-photohub/issues/3), my approach was to convert files using JavaScript framework `Sharp` and shell script creates a repo and pushes the files to it. I pushed my script with my questions to ask how we should deploy the app. With this PR, I wanted to make sure my approach was ok and what the next steps would be. 

By the time that I picked `My-PhotoHub` issue, it was the very beginning of the project and there was very minimal that I could rely on. While I was finishing issues on other repositories, the project has been evolved. Now we have React frontend for user to post PAT and repo name to create. Also we have `service-worker` to do GitHub repo creation. So my initial thinking to push the images with shell script is no longer relevant. And I had a feedback that image should be optimized in frontend as we don't want to send the photo with GPS info to our server. 

So the work that I decided to do is to connect UI and GitHub repo creation, and convert the images in browser side, then send it to the repo. GitHub repo creation code is already available. I added the code to `uploadBtnClicked()` with some user messages how process is going. 

```js
async function uploadBtnClicked() {
    setUserMessage('');
    setLoading(true);

    const octokit = new Octokit({ auth: token });
    let username, repoCreated;
    try {
      username = await getUser(octokit);
    } catch (err) {
      console.error('Invalid PAT token');
      setUserMessage('Sorry, could not find a user with the token');
      setRepoCreated(false);
      setLoading(false);
      return;
    }

    setUserMessage('MyPhotoHub is creating a GitHub repository...');
    repoCreated = await createRepo(octokit, username, repository);

if (repoCreated) {
      console.info('Repo is created');
      setUserMessage('GitHub repository has been created...');
      setRepoCreated(true);
    } else {
      console.error('Error occurred while creating a repo');
      setUserMessage('Sorry, something went wrong while creating a repository');
      setRepoCreated(false);
      setLoading(false);
    }

    setUserMessage('Creating optimized images...');
    const convertedFiles = await createOptimizedImages(images);

...
    setUserMessage('Adding images to repository...');

    setUserMessage(
      `Process complete. You can check out https://github.com/${username}/${repository}`
    );
    setLoading(false);
}
```


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


We can add a progress bar to show the progress better. But I think this is good for now. Now I need more work to complete my image conversion process and send it to the repo.
Getting started with React
Tags: javascript, react, node
Published: 2022-12-06 16:11:15

React is a popular JavaScript library for building user interfaces. To get started with React, you will need to have a basic understanding of JavaScript and some knowledge of HTML and CSS.

Here are the steps to get started with React:

- Install Node.js on your computer. Node.js is a JavaScript runtime environment that allows you to run JavaScript on your computer outside of a web browser.

- Install a code editor. A code editor is a program that allows you to write and edit code. Some popular options include Visual Studio Code, Atom, and Sublime Text.

- Install the create-react-app package. The create-react-app package is a tool that creates a new React project for you. To install it, open a terminal window and run the following command:

```
npm install -g create-react-app

```

- Create a new React project. To create a new React project, open a terminal window, navigate to the directory where you want to create the project, and run the following command:

```
create-react-app my-app

```

- Start the development server. The development server is a program that runs on your computer and serves your app to a web browser. To start the development server, open a terminal window, navigate to the directory where you created your project, and run the following command:

```
cd my-app
npm start

```

- Open your app in a web browser. The development server will automatically open your app in a web browser at the URL <u>http://localhost:3000</u>. You should see a page with the react logo

At this point, you have a basic React app up and running. You can edit the code in your code editor and see the changes reflected in the web browser. To learn more about React, you can read the documentation at <u>https://reactjs.org/docs/getting-started.html.</u>
Advent of Code 2022 - Day 6
Published: 2022-12-06 16:04:57

---
title: Advent of Code 2022 - Day 6
published: true
description: I'm trying to solve all the Advent of Code puzzles in this video series.
tags:
cover_image: https://i.ytimg.com/vi/HN6umssAozs/maxresdefault.jpg
---

{% youtube HN6umssAozs %}

I'm trying to solve all the Advent of Code puzzles in this video series.
Drawing Trees in LaTex with Tikz
Tags: latex
Published: 2023-01-06 02:55:52

---
title: Drawing Trees in LaTex with Tikz
published: true
date: 2022-12-06 16:01:24 UTC
tags: LaTex
canonical_url: https://brandonrozek.com/blog/drawing-trees-with-tikz-latex/
---

For the longest time I’ve been avoiding Tikz because I imagined it being too difficult to learn. Usually I create a graphic using a program like [Draw.IO](https://draw.io) and import it as an image. Though this time around, I decided that I’m going to learn how to make trees in Tikz. It turns out, it’s not as bad as I anticipated.

I’m only going to provide a few simple examples in this post. To learn more check out the [Tikz documentation on trees](https://tikz.dev/tikz-trees).

Remember to have `\usepackage{tikz}` in the preamble.

To create a Tikz figure, you’ll need to create a `tikzpicture` environment

```
\begin{tikzpicture}
 % Tikz Code Here
\end{tikzpicture}

```

Every tree first begins with a root node.

```
\begin{tikzpicture}
	\node {Root Node};
\end{tikzpicture}

```

The semicolon at the end denotes the end of a `tikz` command.

Now let’s make the root node have one child node.

```
\begin{tikzpicture}
	\node {Root Node}
		child {node {Child Node}};
\end{tikzpicture}

```

![Screenshot of tree with one node on each level](https://brandonrozek.com/files/images/blog/20221206111634.png)

Notice that the text of the nodes are within the `{}` after the node command.

To create another child for a node, place it in the same level as the existing child.

```
\begin{tikzpicture}
	\node {Root Node}
		child {node {Left Child}}
		child {node {Right Child}};
\end{tikzpicture}

```

![Screenshot of tree with the root node having two child nodes](https://brandonrozek.com/files/images/blog/20221206111922.png)

The rendered tree may have text overlap as shown in the last screenshot. This is where `tikz` options come in. We can define the separation distance between siblings. I don’t have many tips for choosing the value other than to play around and see how it looks.

```
\begin{tikzpicture}
[
    level 1/.style={sibling distance=25mm}
]
	\node {Root Node}
		child {node {Left Child}}
		child {node {Right Child}};
\end{tikzpicture}

```

![Improved screenshot of previous tree but with well separated child nodes](https://brandonrozek.com/files/images/blog/20221206112150.png)

To show how the child nesting works, I’ll finish by giving the right child two children nodes.

```
\begin{tikzpicture}
[
    level 1/.style={sibling distance=25mm},
    level 2/.style={sibling distance=15mm},
]
	\node {Root Node}
		child {node {Left Child}}
		child {
		    node {Right Child}
		    child {node {Child A}}
		    child {node {Child B}}
		};
\end{tikzpicture}

```

![Screenshot of a tree similar to the previous tree, but with the right child having two child nodes one with the label A and the other with the label B.](https://brandonrozek.com/files/images/blog/20221206112444.png)
Festive Tech Calendar 2022
Tags: conferences, development, alexa, festivetechcalendar
Published: 2023-02-01 14:58:25

---
title: Festive Tech Calendar 2022
published: true
date: 2022-12-06 15:52:31 UTC
tags: Conferences,Development,Alexa,FestiveTechCalendar
canonical_url: https://barretblake.dev/2022/12/festive-tech-calendar-2022/?utm_source=rss&utm_medium=rss&utm_campaign=festive-tech-calendar-2022
---

By the way, I contributed to this year’s [Festive Tech Calendar](https://festivetechcalendar.com/) with a video on how to use low-code automation solutions like Power Automate and IFTTT to automate your holiday season. Check out the video here:

<iframe title="Have a Merry Low-Code Holiday" width="700" height="394" src="https://www.youtube.com/embed/oKpNqmhDJq4?start=212&amp;feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

There’s a lot of great submissions. Go check them out!

The post [Festive Tech Calendar 2022](https://barretblake.dev/2022/12/festive-tech-calendar-2022/) first appeared on [Barret Codes](https://barretblake.dev).
Vastu Tips: Show the way out of your House to Evil forces like this
Tags: jyotishwithakshayg, vastuwithakshayg, numerologywithakshayg
Published: 2022-12-06 15:48:25


In Vastu Shastra, if you want to keep the doors of negative energy closed in your house forever, then some special measures have to be taken. Know the remedies of Vastu

Vastu Tips: Show the way out of your house to evil forces like this

We are under constant tension due to the presence of evil eyes or negative energy around us. According to Vastu, there are some things through which you can free your home from negative energy. In Vastu Shastra, if you want to keep the doors of negative energy closed in your house forever, then some special measures have to be taken.

Vastu remedies
The bamboo plant, a symbol of auspiciousness, is one of the most popular plants known to bring good luck, prosperity, and positive energy to the home. For this reason, it is the most popular indoor plant in India. It is not only a Vastu plant but also a Feng Shui plant. If you plant a bamboo plant in the east corner of your house, it will help in maintaining mental and physical health. If you place it in the South-East it will help in bringing financial stability and prosperity to the family.

Sea ​​salt
It is believed that sprinkling salt in the corners of the room and on the carpets also removes negative energy from the house. Clean it after two hours. Salt crystals are believed to have a natural ability to absorb negative energy. Also, keeping some sea salt near the entrance and covering it with a cloth or doormat keeps negative energy away.
[READ MORE](https://www.jyotishwithakshayg.com/2022/12/vastu-tips-show-the-way-out-of-your-house-to-evil-forces-like-this.html)
Rust, Tauri, and React: Our Technology choices for a desktop app in 2022
Tags: webdev, rust, react, architecture
Published: 2022-12-06 15:47:58

We built HighFlux, a transformative git client this year. Given the desired functionality (synchronize code to the cloud while a developer is writing it), we needed to build an app that runs on the developer’s machine. We come from a background in mobile apps (mainly Android) and web apps, so this was an exciting journey. In this post, I want to share our decisions and what we learned.

Read the [full post on our blog!](https://www.highflux.io/blog/rust-tauri-react-developing-desktop-app-2022)
The reason and importance of placing the flag and urn on the top of the temple
Tags: jyotishwithakshayg, vastuwithakshayg, numerologywithakshayg
Published: 2022-12-06 15:41:41


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7x8g4dd27koaoemju4gc.JPG)
Temple:-
Temple is such a place where special divine energy is generated in the earth by positive life by chanting. It is believed in the scriptures that energy is generated at any place from the wealth of words, which is called Prana. The entire area is filled with divine energy by the worship done in front of the deity only after giving it a real form. This is called consecrating the idol and after that common people feel the energy from the idol. This is called a temple. It is believed that the spiritual practice and virtuous behavior of the people in the temple generate energy.

According to mythological beliefs: -
Also read :Know Real Story of Panchmukhi Hanuman ji
According to mythological beliefs, every day people go to the temple and worship God, but due to some reason they are not able to go to the temple, then in the scriptures, a solution has been told for them that even without going to the temple, they get the virtue of going to the temple. It is believed that if you are not able to go inside the temple, then you can bow down to the peak of the temple from the outside. It is believed that the darshan of Shikhar gives as much virtue as one gets from seeing the idol in the temple. It has been written in many places in the scriptures that Shikhar Darshanam Paap Masham. It means that all sins are destroyed by seeing the peak.

The reason for making the temple high: -
The reason for making the temple high and putting a peak on it is that people can easily see the peak of the temple. It is believed that whenever you pass outside the temple, you must salute the flag and the urn. While gazing at the peak, one must remember one's favorite deity by closing one's eyes. By doing this one gets as much virtue as going to the temple.
[Read More](https://www.jyotishwithakshayg.com/2022/12/the-reason-and-importance-of-placing-the-flag-and-urn-on-the-top-of-the-temple.html)
Working with throbbers
Tags: ruby, automation, selenium, testing
Published: 2022-12-06 15:40:35

The [throbber](https://en.wikipedia.org/wiki/Throbber). The spinny thing. The loading bar. It's the thing that lets the user know that "something is happening". People will fixate their eyes on it, while they wait on that loading indicator after submitting their food order, or purchase on Ticketmaster, or just waiting for some data to load on a page.

Your automated tests should really be doing the same. Fixating on that throbber. Waiting for it to finally go away so you can continue on your way. Another "speed bump" to implement so your tests run as reliably as possible.

Tests can fail if the throbber is not accounted for:

```
  scenario "Order is submitted successfully" do
    ...
    click_button 'Submit Order'
    page.should have_text 'Thank you for your order!'
  end
```

If your tests are designed to fail or give up after say, 2 seconds, it is possible that this test can repeatedly fail if the app is very busy "doing its thing".

Here's another thing: What if the app response is so fast, that the throbber barely shows up at all? So fast that maybe `Capybara` (or whatever automated tool you're using) isn't quick enough to pick up on that element. You certainly wouldn't want your test to fail in that scenario either!

No framework in existence is going to know when your app is really done loading the DOM. It will also have no knowledge of these throbber elements in your apps.

Here is a helper method that is designed to do a couple of things:

1. If the throbber shows up, let's wait for a set amount of time for it to go away. This puts the test in a position to move forward when it's supposed to.
2. If the throbber doesn't show up, then no big deal, we move on, and the test should assume that the action has completed.
3. If the throbber shows up, but never goes away, let's just log an error without failing the test. It is likely/possible that when the test moved on, it will end up failing for another reason that should be investigated.

```
  def wait_on_loader
    (0..10).each do |i|
      if page.has_css?('#loader', wait: 2)
        sleep 1
      else
        return
      end
    end
    Log.error 'Loading element never finished'
  end
```

Here, we're initially waiting 2 seconds for the throbber to appear. Once it does, we retry every 1 second to see if it's still there (up to a max of 10 seconds).

I hope this was helpful in figuring out how to incorporate throbbers / waiters / spinners into your test execution, and using them wisely as an indicator as to when your test can proceed safely.
The Easiest Way to Clone a PostgreSQL Database
Tags: database, postgres, devops
Published: 2022-12-07 00:02:33

---
title: The Easiest Way to Clone a PostgreSQL Database
published: true
date: 2022-12-06 15:37:42 UTC
tags: #databases #postgresql #devops
canonical_url: https://blog.redactics.com/the-easiest-way-to-clone-a-postgresql-database
---

If you use a managed database service like AWS RDS or Google Cloud SQL, it is super easy to create a snapshot and create a new instance based on this snapshot, but there is an even easier way to clone a database. At [Redactics](https://www.redactics.com) our use case was building automated workflows to test your database migrations against a copy of your production database (and, incidentally, this is free for use in case this is of interest to you), but there are likely dozens of additional use cases. For example, you may want to A/B test against a particular database or query optimization.

This approach leverages PostgreSQL's support for Linux pipes, and the fact that `pg_dump` output can be directed into `pg_restore` as input. This approach means that what would normally be two steps can be combined into one, and you don't need to set aside a bunch of disk space for this task.

```
pg_dump -h [DB_hostname] -U [username] -W -d [source_database] -v -Fc | pg_restore -h [DB_hostname] -U [username] -W -v -d [destination_database]

```

Since you likely need for this to be run without interaction, i.e. entering the database password, you might need to create a [.pgpass file](https://www.postgresql.org/docs/current/libpq-pgpass.html) or leverage [environment variables](https://www.postgresql.org/docs/current/libpq-envars.html) for storing this info. This will allow you to remove the `-h`, `-U`, and `-W` arguments.
Advent of Code Day 6
Tags: adventofcode, elixir
Published: 2022-12-06 14:22:45

### Links

- [Intro](https://dev.to/sethcalebweeks/advent-of-code-2022-in-elixir-34i8)
- [Problem Statement](https://adventofcode.com/2022/day/6)
- [Code](https://github.com/sethcalebweeks/advent-of-code-2022/blob/main/lib/Day06.ex)

### Highlights

- This may have been the simplest problem so far. For a while, I was checking the wrong stopping condition, so it took me longer than it should have.
- Reduce is my go-to construct for processing a list of things. You can cram as many things into the accumulator as you need to. There are probably other enumerable operations that would do a better job, but reduce is the one-size-fits-all tool that I always reach for.

```elixir
defmodule Day06 do
  use AOC

  def first_marker(input, marker_length) do
    input
    |> String.to_charlist
    |> Enum.reduce({0, [], false}, fn char, {count, window, stop} ->
      cond do
        stop -> {count, window, true}
        length(window) < marker_length -> {count + 1, window ++ [char], false}
        length(Enum.uniq(window)) == marker_length -> {count, window, true}
        true -> {count + 1, Enum.slice(window, 1, marker_length - 1) ++ [char], false}
      end
    end)
    |> elem(0)
  end

  def part1, do: input(6) |> first_marker(4)

  def part2, do: input(6) |> first_marker(14)

end
```
Plugins that allow you to automate the Authentication and Authorization Security Testin
Tags: security, webdev
Published: 2022-12-06 15:30:00

Authentication and Authorization security testing is an Important Test Case for any web application penetration testing. Authentication ensures that only authorized users can access the application functionality and its resources, while authorization ensures that users are only granted access to the resources and functions that are appropriate for their level of authorization.

Here are the Plugins that allow you to automate the Authentication and Authorization Security Testing.

Autorize (For Burp Suite): {% embed https://github.com/Quitten/Autorize %}
Access Control Testing add-on (For OWASP ZAP): {% embed https://www.zaproxy.org/docs/desktop/addons/access-control-testing/ %}

{% embed https://blogs.appsecworld.com %}
Tuning Trouble
Tags: adventofcode, algorithms, javascript, programming
Published: 2022-12-06 15:19:00

## [Advent of Code 2022 Day 6](https://adventofcode.com/2022/day/6)

## Part 1
1. Could I use `regex`?
2. Another way: substrings and `Set()`s
3. My algorithm in JavaScript

### Could I use `regex`?
> Identify the first position where the four most recently received characters were all different

- It seems I need one or more look-aheads
- But I need each one to compare the character to three others
- And I recall not being able to use back-references in look-aheads

After playing a bit with [regexr.com](https://regexr.com) and trying a few Google searches that skirted around a direct answer, I came up short.

### Another way: substrings and `Set()`s
For a string like this:
```
mjqjpqmgbljsphdztnvjfqwrcgsmlb
```

I could start from the first character:
```
*
mjqjpqmgbljsphdztnvjfqwrcgsmlb
```

Capture a substring of the current and next three characters:
```
*+++
mjqjpqmgbljsphdztnvjfqwrcgsmlb
```

Split into an array and create a `Set()`:
```
{ 'm', 'j', 'q' }
```

And check whether the size of the `Set()` is equal to 4.

If it is, I found my match!

Otherwise, I'll move to the next character and try again.

### My algorithm in JavaScript
```js
let i = 0
let answer = null
while (answer == null) {
  answer = new Set(
    input.slice(i, i + 4).split('')
  ).size == length ? i + 4 : null
  i++
}
return answer
```

## Part 2
1. Just add 10? Really?
2. My algorithm in JavaScript
3. My combined algorithm in JavaScript

### Just add 10? Really?
Does this hint at an optimization opportunity or performance test?

I'm hopeful my algorithm will still finish quickly.

### My algorithm in JavaScript
```js
let i = 0
let answer = null
while (answer == null) {
  answer = new Set(
    input.slice(i, i + 14).split('')
  ).size == length ? i + 14 : null
  i++
}
return answer
```

That is nearly identical to Part 1's algorithm, with only the character count changed.

I'm compelled to turn it into a reusable function.

### My combined algorithm in JavaScript
```js
(count) => {
  let i = 0
  let answer = null
  while (answer == null) {
    answer = new Set(
      input.slice(i, i + count).split('')
    ).size == length ? i + count : null
    i++
  }
  return answer
}
```

## I did it!!
- I solved both parts!
- I wrote a subroutine that accepts any number of distinct characters!

This puzzle referenced several Assembly-themed puzzles from earlier years.

That gave me goosebumps, because I never really enjoyed those puzzles: too difficult to debug.

Thankfully, that was all just for fun.

This puzzle ended up being relatively easy, even without any `regex`!
KoalaFacade Domain Driven Design for Laravel
Tags: php, laravel, github, opensource
Published: 2022-12-06 15:07:52

Hello coders!!
Me and my friends has been create a package for Laravel, it called as Diamond Console, basically it is a package for Artisan Command to handle Domain Driven Design projects based on Laravel structure, You can check our repository below.

{% embed https://github.com/KoalaFacade/diamond-console %}


And we made a boilerplate of that, so you don't need to string up it from scratch, you can check it on our repo below.
{% embed https://github.com/KoalaFacade/diamond-of-ddd %}