teleren/devto huggingface dataset:
Draw2Img: A simple web UI for interactive text-guided image to image generation for all ages
Tags: python, ai, opensource, showdev
Published: 2024-01-06 04:24:36

The children in my family love to draw and are beginning to explore digital drawing tools, but they've been somewhat discouraged by the complexity of popular software like GIMP, Photoshop, etc. I was motivated to create a tool that encouraged their artistic creativity and also piqued their technical curiosity.

With the release of SDXL-Turbo in late Nov 2023, it became feasible to perform text-guided image to image generation in real-time on a consumer grade GPU. Inspired by this progress and my little cousins' artwork, I put together a web app that integrates an interactive canvas & paint tool with the capabilities of SDXL-Turbo.

The project is called Draw2Img, and I want to share it here in the hopes that you or your family enjoys it as much as we have. What makes this project unique is the combination of:

1) a simple and accessible web based UI for younger or non-technical users

2) the stunning speed & quality of image generation

3) user friendly & LAN party ready (easy to run, multiple concurrent users supported)

Thanks in advance for your feedback and support, cheers!

[https://github.com/GradientSurfer/Draw2Img](https://github.com/GradientSurfer/Draw2Img)
Resolving Umami Blocked by AdBlock Issue
Tags: umami, adblock
Published: 2024-01-08 04:13:42

---
title: Resolving Umami Blocked by AdBlock Issue
published: true
date: 2024-01-06 03:49:58 UTC
tags: Umami, AdBlock
canonical_url: https://chi.miantiao.me/post/umami-kill-adblock/
---

I recently redesigned my [personal homepage](https://mt.ci/) and used Umami for website analytics. However, there is an ongoing issue: users who have AdBlock installed are causing the analytics to fail.

For more information on how AdBlock works, you can refer to [Resolving Vercel Analytics Blocked by AdBlock Issue](11). The rule that blocks Umami is `||umami.is^$3p`, which blocks the script and data reporting URLs. To overcome this, we can use [Cloudflare Workers](https://workers.cloudflare.com/) to proxy Umami.

![||umami.is^$3p](https://static.miantiao.me/share/2024/CNrM78/ha30pV.png)

## Solution

Create a Cloudflare Worker and paste the following JavaScript code. If you are using the official Umami service, you don't need to modify the code (remember to change UMAMI\_HOST to your service URL). If you are using a self-hosted service, you can define the script and data reporting URLs using the `TRACKER_SCRIPT_NAME` and `COLLECT_API_ENDPOINT` environment variables, without the need for proxying.

```js
const UMAMI_HOST = 'https://eu.umami.is'

export default {
  async fetch(request, env, ctx) {
    const { pathname, search } = new URL(request.url)
    if (pathname.endsWith('.js')) {
      let response = await caches.default.match(request)
      if (!response) {
          response = await fetch(`${UMAMI_HOST}/script.js`, request)
          ctx.waitUntil(caches.default.put(request, response.clone()))
      }
      return response
    }
    const req = new Request(request)
    req.headers.delete("cookie")
    req.headers.append('x-client-ip', req.headers.get('cf-connecting-ip'))
    return fetch(`${UMAMI_HOST}${pathname}${search}`, req)
  },
};

```

Once you have created the Worker, configure the domain and test if the script URL can be accessed correctly. In my case, it is [https://ums.miantiao.me/mt-demo.js](https://ums.miantiao.me/mt-demo.js). You can replace "mt-demo" with any disguised URL, as the script has already been adapted.

Next, inject the script into your website project. You can refer to the official documentation at [https://umami.is/docs/tracker-configuration](https://umami.is/docs/tracker-configuration) or use the following code as a reference:

```html
<script defer src="https://ums.miantiao.me/mt-demo.js" data-host-url="https://ums.miantiao.me" data-website-id="0a10de75-03be-4fec-a521-4c62b91650ac"></script>

```

In the above code, `src` refers to the script URL, `data-host-url` refers to the data reporting URL, and `data-website-id` refers to the website ID. Make sure to provide the correct website ID to ensure data reporting.

You can verify the implementation on [Noodle Lab](https://mt.ci/) or this website.

![stat](https://c.statcounter.com/9823304/0/92a1d06c/1/)
Solving Vercel Analytics Blocked by AdBlock Issue
Tags: vercel, adblock
Published: 2024-01-08 04:14:10

---
title: Solving Vercel Analytics Blocked by AdBlock Issue
published: true
date: 2024-01-06 03:46:43 UTC
tags: Vercel, AdBlock
canonical_url: https://chi.miantiao.me/post/vercel-kill-adblock/
---

[DNS.Surf](https://dns.surf/) runs 100% on Vercel, so Vercel Analytics is used for access statistics. However, many users who have AdBlock installed experience issues with access statistics not being recorded. Today, we will solve the problem of AdBlock blocking access statistics, while still relying on Vercel 100%.

The core principle of AdBlock is to block certain network requests and page elements using rules. Vercel Analytics is blocked by the rule `/_vercel/insights/script.js`, and it may also block `/_vercel/insights/event`. To solve this problem, we just need to make these two URLs less recognizable.

![/_vercel/insights/script.js](https://static.miantiao.me/share/2024/JbSVLo/5aOZdV.png)

## Solution

Vercel comes with a Rewrite feature, so we just need to rewrite the disguised path `/mt-demo` to `/_vercel/insights`. The disguised path can be any unique path that does not conflict with existing paths. If it gets blocked, just use a different one. The vercel.json configuration is as follows:

```js
{
  "rewrites": [
    {
      "source": "/mt-demo/:match*",
      "destination": "https://dns.surf/_vercel/insights/:match*"
    }
  ]
}
```

Note that the destination should be the complete URL, otherwise it will not work.

In the official tutorial, different frameworks use [@vercel/analytics](https://vercel.com/docs/analytics/package) to inject the analytics script into the page, but it does not support custom scripts and data reporting URLs. Therefore, we need to use the HTML method to inject the script.

```html
<script>
  window.va = window.va || function () { (window.vaq = window.vaq || []).push(arguments); };
</script>
<script async src="/mt-demo/script.js" data-endpoint="/mt-demo"></script>
```

`src` is the script URL, and `data-endpoint` is the data reporting URL. Although it is not mentioned in the official documentation, the script does support it. Remember to replace `mt-demo` with your disguised path.

If you are using a different framework, you can look for the method to inject scripts in that framework to adapt it to your own usage.

You can verify the effect using [DNS.Surf](https://dns.surf/).

![stat](https://c.statcounter.com/9823304/0/92a1d06c/1/)
Will "A.I." drastically change Web development?
Tags: webdev, jrdev, ai, chatgpt
Published: 2024-01-06 03:45:28

The buzzwords for 2023 have definitely been "AI" & "ChatGPT". There seems to be a lot of fear circulating within the web development community. The disruption and unknown effects of AI have yet to be fully realized. 

I, at first, was super skeptical and fearful as someone eager to start a career in front-end & web development. When I initially saw that ChatGPT4 created a website from a hand drawn sketch, I was concerned and also amazed. However, I beginning to adopt the mindset that AI should be used as another tool in your tool belt to increase productivity and enhance your workflow. While, AI can generate code at light speed, and debug, it isn't the best at understanding software requirements ( so I have read). After all, we develop software and websites for human use.

I think Language Learning Models are extremely fascinating. I understand how they work at a very basic level. 
   

> Even the openly licensed ones are still the world’s most convoluted black boxes. We continue to have very little idea what they can do, how exactly they work and how best to control them.
I’m used to programming where the computer does exactly what I tell it to do. Prompting an LLM is decidedly not that!
The worst part is the challenge of evaluating them.- Simon Willison

This is a prime example of how much we still have yet to figure out with AI. Simon also points out how gullible LLMs are. How are we going to maintain quality control?

Albeit, I am hopeful and optimistic about a future that needs  new developers of all disciplines. 









Articles Referenced:
https://www.joshwcomeau.com/blog/the-end-of-frontend-development/?utm_source=tldrwebdev

https://simonwillison.net/2023/Dec/31/ai-in-2023/#smart-and-dumb

https://qz.com/what-software-developers-using-chatgpt-can-tell-us-abou-1851116767


Image sourced from: https://ichef.bbci.co.uk/news/976/cpsprodpb/14202/production/_108243428_gettyimages-871148930.jpg.webp
Leetcode with ChatGPT
Tags: chatgpt, openai, leetcode, interview
Published: 2024-01-06 03:36:55

---
title: Leetcode with ChatGPT
published: true
description: 
tags: [chatgpt, openai, leetcode, interview]
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2024-01-05 04:30 +0000
---
I asked ChatGPT to solve leetcode hard DP problems. The results were well, interesting ...

I started with [Frog Jump](https://leetcode.com/problems/frog-jump/) and the results were promising. Frog Jump is a classic DP problem that is solved by memoization and backtracking. ChatGPT produced python code that could easily be ported into leetcode. 


![Frog Jump Python](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/weg9uik0edqxdoukfhnv.png)

The solution had a trivial bug but passed most testcases. Given the signature of the helper recursive function, ```def canCrossHelper(position, jump)``` the initial call should have been `canCrossHelper(0,0)` and not `canCrossHelper(0,1)`. After fixing the bug, the solution was faster than 90+% of Python solutions. Not bad.


I then tried something more convoluted, [Count ways to make array with product](https://leetcode.com/problems/count-ways-to-make-array-with-product/). This is a complex problem that applies prime factorization and combinatorics on top of DP techniques. The results were less than stellar.

![Count ways Java](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h3lkg8k8ixgd51iandpq.png)

It produced a DP solution with recurrence relation 
```dp[i][j] = (dp[i - 1][j] + dp[i - 1][j - 1])``` which only sounds correct, but is infact wrong. Even after prompting to revise the solution, nothing fundamental changed.

These cases told me all I needed to know about interviewing with AI. Errors are to be expected since AI is only as good as the training data. ChatGPT already has the disclaimer in the footnote `ChatGPT can make mistakes. Consider checking important information.` Here is the [link](https://chat.openai.com/share/6ed19f25-3184-4e6c-90f8-10bf3df81860) to the full chat.

A candidate could have some success from asking ChatGPT in a live interview, essentially cheating. Or they could master algorithms with confidence. A resource I recommend to is [Ace the technical interviews courses](https://leanpub.com/c/acethetechnicalinterviewbitsedition2), DP course coming soon. They help you build intuition around algorithmic techniques and reduce time to optimal solution. I'm biased because I wrote them but they free at the moment and feedback is welcome.
🔄 Unraveling the Mysteries of Recursion and the Call Stack in DFS! 🎥
Tags: algorithms, beginners, programming, tutorial
Published: 2024-01-06 02:55:58


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

Hey coding enthusiasts! In my latest video, we delve into the fundamentals of recursion and the function call stack while exploring the intricacies of the Depth First Search (DFS) algorithm. Join me in demystifying the magical interaction between recursion and the call stack as we navigate the depths of DFS.

🎥 Watch the video here: https://youtu.be/xRGhXdZe1QI?si=E0P8l_H9h_lu9D9m
🎥 DFS Using Recursion: https://youtu.be/SuiYUV69XC8?si=zyrkchEKneb9GrE3
🔗 Find the code on GitHub: https://github.com/Vinay352/Leetcode_Complete_Solution/blob/main/CreateBinaryTree_DFS_BFS.java

Feel free to share your questions and insights in the comments. Let's unlock the secrets of recursion together! 💡🌐

Stay connected:
🎥 YouTube: https://www.youtube.com/@VinayJainDev3097
📚 Medium: https://medium.com/@vinay.j3097
📝 Dev.to: https://dev.to/vinay_jain_dev
🔗 GitHub: https://github.com/Vinay352
🐦 Twitter: https://twitter.com/vinayj3097
📸 Instagram: https://www.instagram.com/vinay_jain_dev/
📘 Facebook: https://www.facebook.com/vinayj3097/
Open-source planner for Instagram profile grids
Tags: opensource, instagram, javascript, vue
Published: 2024-01-06 02:13:36

Hey! I'm working on an open-source planner for Instagram.

It's based on Vue.js, Vuetify and TypeScript. I'm managing to make it compatible for more platforms, but I'm just focusing on Instagram for now.

![My open-source planner for Instagram](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5e3l7h9e5ej9z0d7ngf7.png)

It's drag & drop, you can create your profiles without registration and add your media with just a few clicks. It supports images, videos, albums, reels and iframes (who knows, maybe you need iframes, it was useful to me).

Changes are stored in your browser using an Indexed DB, but you can simply clone the repository and populate your profiles using your favorite code editor, changing the configuration and reloading the page.

What else, I could implement a lot of features. The next thing will be to export the profile to save the changes made, and I will have to generate a zip since it is not possible to export files and folders from the browser.

I hope to work on it a bit more, maybe just to improve the codebase.
Plus, it's certainly not free from bugs. Do you have any suggestions?

Leave a comment or reach me somewhere!
[github.com/dxlliv/planner](https://github.com/dxlliv/planner)
The Poetry of Prose: Unforgettable Quotes from Modern Literature
Published: 2024-01-06 02:04:00

Great novels and short stories are filled with poetic passages that stop us in our tracks and linger in our minds long after we’ve finished the book. Though not written in verse, the prose contains a lyrical quality that elevates ordinary words into extraordinary art.

I will share some of my favorite quotes from modern literary fiction and discuss why they have such a profound effect on readers.

**On Love and Relationships**

“I could hear my heart beating. I could hear everyone’s heart. I could hear the human noise we sat there making, not one of us moving, not even when the room went dark.” (from The Passion by Jeanette Winterson)

This vivid passage encapsulates the intimacy of human connections. Though the characters are sitting in silence, there is a pulsating energy about them being together in the darkness.

**On Society and Culture**

“When we look at each other in this way, we feel the ancient danger of strangers, but the longer we look, the more possibilities we see in each other, the more we feel ourselves letting down our guard, and we become part of what we see.” (from The Poisonwood Bible by Barbara Kingsolver)

I find this to be such an insightful commentary on how we view those who are different from us. If we take the time to really see people, empathy and understanding replace fear.

**On Death and Grief**

“Grief, I’ve learned, is really just love. It’s all the love you want to give, but cannot. All that unspent love gathers up in the corners of your eyes, the lump in your throat, and in that hollow part of your chest. Grief is just love with no place to go.” (From My Sister’s Keeper by Jodi Picoult)

Heartbreaking yet beautiful sentiments on the enduring power of love even in death. The body continues to feel all that love even when the person is no longer there.

These kinds of exquisite passages that so eloquently express complicated human emotions are part of what makes literary fiction such a treasure. The poetic prose takes our breath away and transcends the page to deeply move our souls.
Купить детские ролики в Днепре, Харькове, Запорожье, Каменском, в Киеве, в Одессе
Published: 2024-01-06 01:03:07

Рола-Коло представляет собой online и реальный магазин, специализирующийся на продаже и обслуживании роликовых коньков, трюковых самокатов, скейтбордов, а также предоставляющий широкий ассортимент защитной экипировки, запчастей и аксессуаров для активных экстремальных видов спорта и активного отдыха. В нашем ассортименте представлены только качественные и оптимальные модели ролики от известных брендов, таких как Micro, FR Skates, Powerslide, SEBA, Rollerblade, FILA, Explore.

Мы также предлагаем услуги проката роликовых коньков и велосипедов, чтобы наши клиенты могли насладиться активным отдыхом даже без покупки собственного оборудования. У нас имеется собственный крытый, всепогодный скейтпарк в Днепре, который станет прекрасным местом для того, чтобы прокатиться и освоить новые трюки.

Наши профессиональные инструкторы и тренеры готовы предложить обучение катанию на роликах и велосипедах. 
В нашей роллер-школе вы сможете освоить все тонкости и навыки этого увлекательного вида спорта под чутким руководством опытных инструкторов. 
Независимо от вашего уровня подготовки, мы создаем условия для комфортного и эффективного обучения, чтобы каждый мог наслаждаться преимуществами роллер-спорта.
Подробнее про [магазин роликов](https://rola-kolo.dp.ua)
Mini Micro Web-Runner CLI
Tags: miniscript, minimicro, node
Published: 2024-01-06 00:32:38

---
title: Mini Micro Web-Runner CLI
published: true
description: Introducing CLI for Mini Micro Web-Runner
tags: miniscript,minimicro,nodejs
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2024-01-05 17:23 +0000
---

After some days of work I finished re-working the MMWR (Mini Micro Web-Runner, more details about this in another post) so that it is driven by two powerful and handy (Node.js-based) command-line tools ... 

## Serve

The first one is `mmwr-serve` ... which would be used when developing. One just navigates to one's Mini Micro project, issues the aforementioned command, and a local HTTP server is started which "serves" the project to be run on the browser. That's it. If one changes something in the code, just reload and the change should be there.

![Using the serve tool](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ywchhm5koutmlbjdckou.gif)

No additional "index.html", CSS or JavaScript files needed. The server tool takes care of all the details behind the scenes.

## Package

The second one is `mmwr-package` ... which one would use to package a Mini Micro project to deploy somewhere, for example [itch.io](https://sebnozzi.itch.io). Same thing: navigate to the Mini Micro project and issue the command. An Archive.zip file is produced with everything needed. Including a whole "sysdisk". More on this below.

## Config File

Both tools can make use of a `webrunner.config.json` file if present. One can specify the HTML page title, one should specify the main ".ms" file of the project, and optionally additional files / folders.

For example:

```
{
  "pageTitle": "Sliding Puzzle - Mini Micro Web Runner",
  "mainFile": "game.ms",
  "otherEntries": [
    "animation.ms",
    "game-images"
  ],
  ...
}
```

## Sysdisk Entries

One interesting aspect is that one can filter (out) "sysdisk" entries, making the end-product (Archive.zip) slicker than it would be, resulting in faster downloads (from itch.io) and thus quicker start-up times.

Consider this:

```
{
  "pageTitle": "Mini Micro - LetterShooter (Web Runner)",
  "mainFile": "game.ms",
  "sysDisk": {
    "useOnly": [
      
      "/sys/pics/Heart.png",
      "/sys/pics/Fighter.png",

      "/sys/sounds/airburst.wav",
      "/sys/sounds/airburst.wav",
      "/sys/sounds/hit.wav",
      "/sys/sounds/ting.wav",
      "/sys/sounds/bling.wav",
      "/sys/sounds/fanfare.wav"
    ]
  }
}
```

In this case we include only some pics and sounds from the "sysdisk", greatly reducing the final size from 13 Mb to 2.4 Mb.

## Final Words

This is the initial version of these tools. Some things might change. But in general this is the direction I want to take the MMWR. It should be both:

* A handy tool for local development
* A handy tool for sharing one's creations with others

As mentioned, the new CLI tools cover both these areas.
A Comprehensive Guide to Cloud Computing
Tags: webdev, cloudcomputing, atharvgyan
Published: 2024-01-06 00:13:19

1. Definition and Concept of Cloud Computing:

Definition: Cloud computing refers to the delivery of computing services, including storage, processing power, and software, over the internet ("the cloud"). Instead of owning and maintaining physical servers and infrastructure, users can access and utilize these resources on a pay-as-you-go basis, scaling their usage up or down as needed.
On-Demand Self-Service: Users can provision and manage computing resources as needed, without requiring human intervention from the service provider.
Broad Network Access: Services are available over the network and can be accessed through various devices (e.g., laptops, smartphones).
Resource Pooling: Resources are shared among multiple users, with the provider dynamically assigning and reallocating them based on demand.
Rapid Elasticity: Resources can be rapidly and elastically scaled up or down to accommodate changing workloads.
Measured Service: Usage is monitored, controlled, and reported, providing transparency for both the provider and the consumer.
Example: Consider a company that needs to host a website. Instead of investing in physical servers, they can use a cloud service like Amazon Web Services (AWS) to rent virtual servers, storage, and other necessary resources. This allows them to scale their infrastructure based on website traffic without the upfront costs of buying and maintaining hardware.

2. Historical Evolution and Emergence:

Historical Evolution:

1950s-1960s: Mainframe computing - centralized processing for multiple users.
1970s-1980s: Rise of personal computers.
1990s: Client-server architecture becomes popular.
Emergence of Cloud Computing:

Early 2000s: Internet-based services and grid computing.
Mid-2000s: Virtualization technologies enable resource abstraction.
2006: Amazon Web Services (AWS) launches, marking the beginning of mainstream cloud computing.
Subsequent Years: Other major cloud providers (Microsoft Azure, Google Cloud) enter the market.
Example: The emergence of cloud computing can be traced back to the early 2000s when companies recognized the potential of delivering computing resources over the internet. AWS played a pivotal role by offering a suite of cloud services, leading to a shift from traditional on-premises infrastructure to scalable and flexible cloud-based solutions.

 **[Read More...](https://www.atharvgyan.com/2024/01/a-comprehensive-guide-to-cloud-computing.html)**