DEV Community: Ion Prodan

I asked Gemini for a prototype… and Snipsco happened!

Ion Prodan — Mon, 02 Mar 2026 08:17:37 +0000

It doesn't matter, until it does - this is how I feel about this article and the Snipsco canvas tool.

You might know me, or not, but likely have seen some of my posts (code snippets on X, some of them have reached a hundred thousand impressions), so you might know I'm passionate about sharing code examples - about nice tricks, solutions, code that made me laugh, and sad.

I've been a front-end developer for quite a long time (not an indie hacker, or at least I didn't use to be); back then (when I started), things worked differently, so I'm basically a senior developer trying to keep a foot in the fast-changing world of AI coding.

So for all these coding snippets I share on X, I used to use Snappify, which is the one I'm most familiar with, allowing me to add many elements, such as text, arrows, and so on!

The problem with Snappify is that it's more focused on slides than just code snippets, and has limits on elements to use, ex, you can't use many arrows on a code snippet if you are on the free tier, but paying for pro just for some more arrows doesn't make any sense.

Then I tried the free classics - Ray.so and Carbon.now.sh.

They are beautiful, super fast, and I still respect them a lot. But they only give you one fixed code window. Nothing more. No arrows, no written explanations, no shapes around important parts, no moving blocks freely. They are perfect for simple shares, but not enough when you want to teach, explain, or make your code look really professional and clear.

So I was looking for something more than that!

There was no plan for me to build something like Snipsco. But one day, on a whim, I asked Gemini Pro on Google Studio to create a prototype using Angular, and surprisingly, it did a good job.

That was the time when my (it might be quite challenging) had broken! In a matter of a second, I understood I can make it, and make it so much better that everyone will want to use it, simply everyone!

From that moment, everything went fast. I took the Gemini prototype, migrated it to a real Angular application, rewrote many parts, fixed bugs, made the canvas smooth with snapping, added gradients, Prism highlighting, Prettier formatting, layers, rotate, resize - everything I needed.

Got the idea for the domain using Vercel domains (a very nice tool) and bought it on Cloudflare.

That's how fast Snipsco was born.

I MUST mention here that AI made me code faster than EVER, I need to mention it again: FASTER THAN EVER! No joke!

Where Snipsco is right now

Right now, Snipsco is a working preview. You paste your code, it gets formatted, you open the sidebar and add shapes, arrows, text, and images. You drag, change themes, gradients, and colors. Export PNG or to the clipboard.

It is still free for everyone, and the workspace will remain free forever, with no limits. Use it to share beautiful code, teach others - this is the most important part for me.

But of course, this is just the beginning.

Where Snipsco is heading

Snipsco's route is a long, long path, and of course, it includes AI!

First, Snapshots - like frames in history. With every important change, you can save as a snapshot. If you want to go back or compare versions, click.

Super useful when you experiment with different designs.

Then, maybe - perhaps - when you have multiple snapshots, you can animate between them and turn the whole thing into a short video. I want to use advanced AI video models for smooth transitions. It could be a real breakthrough for tutorials and presentations (or maybe not). What do you think?

I also want a much better workflow that never bothers you:

The Settings window becomes floating - you can move it anywhere or close it.
The left sidebar can be collapsed, leaving you with only the clear workspace and full focus.

Next, mobile support - not just responsive design. I want people to be able to create and edit on a phone or tablet as much as possible.

And then small Copilot actions: auto-detect the language you pasted, suggest quick improvements, small smart helps - nothing big yet.

And finally - the BIG COPILOT.

The big Copilot will be like a senior designer and teacher who lives inside your canvas. You can type or even speak:

'Add arrows to explain this React hook.'
'Turn this algorithm into a clear 5-step visual.'
'Make it perfect for Twitter.'
'Learn my company brand style from this screenshot and apply it.'
'Take my blurry phone photo of code on paper and turn it into an editable canvas.'

It will give you suggestions as a preview. You always decide: apply, edit, or delete. You stay in full control.

All these AI features (and the video export) will be available only for Pro users. But the workspace itself stays completely free and unlimited.

I don't want to put limits on free users. I remember how it felt when I hit limits in other tools. I don't want anyone to feel that with Snipsco.

One thing worth mentioning is that the workflow data is stored in your browser (localStorage, soon to be IndexedDB), which limits you to using only one device (per project). Pro users will have the synchronisation and be able to see their work on any device.

My mind is full of ideas - big and small. The list grows faster than I can write it.

That's the Snipsco small story - now I want to hear from you.

This is where Snipsco comes from, where it is right now, and where I see it going. I hope you like the direction.

If you read until here, thank you from the bottom of my heart!

Please try the preview, play with the canvas, break it, tell me what you love and what is missing. Your feedback will help me decide what to build next.

Follow me on X or leave a comment below.

Let's teach others to code with beautiful code snippets!

AI Story Generator in 24 Hours: Here's How I've Done It

Ion Prodan — Thu, 04 Apr 2024 06:50:24 +0000

How often did you see tools like AI story generators or any AI-related tools and think, how hard is that tool to build?

Well, not so hard!

I built my free AI story generator based on a prompt in two days, a few hours per day, using nothing fancy, only HTML/CSS and Javascript.

AI is generally quite affordable these days; my tool shows you how much it costs me to generate a few stories.

Go generate some stories, and check how much it costs.

You can see it on the right side like this:

The price for around 335 words generated by AI (+20% fees)

If you generate more stories, you'll see how the price increases.

The price also includes a 20% fee that covers the fees for the payment processor and other fees I'm unaware of. This way, I have a buffer for any unexpected costs.

This is why I can keep it free, with no signup required, and consider other monetization models, like ads and/or donations. However, this can be changed when OpenAI sends some "big invoices." 😎

If you are not a developer, you should know you don't have to pay a fortune for AI.

Well, enough talking, let's see how I built it.

This is a brief description of how I built this AI tool. It's not a step-by-step guide, but it should give you a good idea of creating your own.

How I built my AI story generator

I used several tools, such as Astro, SolidJs, OpenAI, and Cloudflare:

I used Astro to create the project and add integrations like Tailwind CSS, SolidJs, and MDX.
I used SolidJs to add some interactivity to the application.
I used OpenAI to generate the stories using the GPT-3 model.
I used Cloudflare to deploy the application and handle the API requests.

I'll add some brief explanations of how I used each tool. If you want to know more about them, please ask me in the comments.

Astro

Astro is a new static site generator that allows you to build your application using any framework you want, like React, Vue, or Svelte. It's an excellent tool for creating static sites with a dynamic feel.

To create a new Astro project, you can use the following command:

pnpm create astro@latest // or npx create astro@latest

After creating the project, you can add some integrations. I added Cloudflare, Tailwind CSS, SolidJs, and MDX to my project.

To add these integrations, run the following commands:

pnpx astro add cloudflare
pnpx astro add tailwind
pnpx astro add solidJs
pnpx astro add mdx

So, In the end, you should have something like this in your astro.config.mjs file:

Astro astro.config.mjs file

mdx is a personal choice to write some stuff in Markdown rather than HTML, but you can live without it if you don't like writing in Markdown.

Oh, I almost forgot: I also installed DaisyUI. It's a plugin for Tailwind CSS that adds some excellent components to your project.

SolidJs

SolidJs is a reactive UI library that allows you to build fast and reactive applications with a small bundle size.

It's a great alternative to React or Vue if you want something lighter.

I used SolidJs to add some interactivity to the application. I created a form to input the "What's the story about" question and sent the request to the API to generate the story.

Here's a short example of what the form logic looks like:

SolidJS logic example

In short, it contains three signal-like functions, and handleSubmit function, which handles the form submission and sends the request to API.

The first signal function (stories) is to store the stories and sync them to localStorage , the second (isLoading) adds some interactivity until the story is generated, and the last (price) calculates the price of all stories.

Since I asked the GPT-3 model to respond in markdown format, I also integrated marked , so the story is formatted in paragraphs and sometimes contains some titles.

Some improvements are needed here because the title has to be generated separately from the story content. The users should be able to regenerate the titles they want until they like them.

But this is another story and maybe another article!

And here's the form HTML:

Solidjs HTML example

Nothing is fancy here; it is just a form with a significant textarea element and some select tags.

The form creation of an AI story

I included optional parameters for Genre, Story Size, Narrative Style, Tone, and Mood in the form to make the story more personalized.

With these parameters, users can customize the generated story to their liking. For example, they can develop a short horror story with a dark tone and a suspenseful mood, a long romance story with a light tone and a happy mood, and so on.

There's a lot of room for creativity and personalization with these parameters.

Users can experiment with combinations to see what kind of stories they can generate.

OpenAI

OpenAI is a research lab that focuses on artificial intelligence. They have developed the GPT-3, a powerful language model that can generate human-like text.

I used OpenAI to generate the stories using the GPT-3 model. Using an Astro page like an API endpoint, I send the form from Solidjs to gpt-3.5-turbo-0125 model.

You can choose your desired model; I've chosen it because it's cheaper, and the output seems fine.

Here's a short example of how the API endpoint looks like:

Solving Captcha and sending a request to GPT-3

I've forgotten to mention Captcha, which is a must. I use Cloudflare's Turnstile. A good captcha will protect your website from robots and other malicious actors.

So, what's happening in here?

First, I get the sent formData and captcha token (which also comes as part of form data). Second, I validate if the Captcha is correct; if not, a 403 status is returned.

Then the magic happens: I create the messages array and send it to gpt-3 model, and wait 🙂.

When I have the response, I return it to Solidjs, including the usage and story body.

This article can be finished here, but we must host it somewhere, right? I've chosen Cloudflare!

Cloudflare

Cloudflare is a web infrastructure and security company that provides content delivery network (CDN) services, DDoS mitigation, and internet security services.

I used Cloudflare to deploy and host the application.

To deploy an Astro project to Cloudflare, I use their in-house tool called Pages. It can deploy your project to the Cloudflare network straight from the Git repository.

Cloudflare Pages

After deploying the project, you should have a URL to access the application.

Domain names after successful deploy

I attached a custom domain: aistory.tools in this case, but Cloudflare also creates a pages.dev subdomain. You don't need a custom domain to see your application.

That's it!

That's how I built my AI story generator. I hope this brief explanation helps you understand how to create your own.

Conclusion

Building an AI story generator is not as complicated as it seems. Simple tools are often the suitable response to achieving complex tasks.

Don't be afraid to experiment and try new things. You never know what you might discover along the way.

I hope this article has inspired you to finally ship that project you've been considering for so long.

If you have any questions or need help building your AI story generator, please ask me in the comments. I'll be happy to help you get started.

Ultimately, I wanted to ask you what I should do next with this project.

Should I keep or open-source it and let others use it, too? Or should I turn it into a product and sell it to others?

Let me know your thoughts in the comments. I'm curious to hear what you think.

What you decide will be the next step for this project.

Happy coding! 🚀

Required Inputs in Angular: A Comprehensive Guide

Ion Prodan — Mon, 07 Aug 2023 08:07:51 +0000

Angular, has introduced a new feature in version 16 that allows developers to define required inputs for components and directives.

This feature ensures that all necessary data is present before the component or directive logic is executed, resulting in better code quality, fewer errors, and an overall more efficient development process.

What are the Required Inputs?

Required inputs in Angular are a new feature that allows developers to specify that specific inputs are mandatory for a component or directive to function properly.

This ensures that the required properties are passed, and if missing, a compilation error is thrown.

This feature is a significant improvement over the previous versions where there was no simple way to ensure that the name property is passed from the parent, which was not ideal.

The code would work without any errors, but the rendered template would be missing a name.

Importance of Required Inputs

Error Reduction : By defining required inputs, developers can reduce the number of errors in the code. This is because Angular will throw a compilation error if a required input is not provided , preventing the code from running with missing data.
Code Quality : Ensures that all necessary data is present, improving the overall code quality. This leads to more robust and reliable applications.
Efficient Development : This makes the development process more streamlined and efficient. Developers can catch and fix errors at compile time, reducing the time spent debugging at runtime.

What was the problem?

Before the required inputs were available, there wasn't a real solution to tell Angular that some specific inputs are required.

For instance, let's say we have a component with an Input userId:

@Component({
 selector: 'app-foo',
 template: `
  <p>User ID: {{userId}}</p>
 `
})
export component FooComponent {
 @Input() userId: number;
}

If we include FooComponent in another component, and do not provide userId:

<app-foo></app-foo>

Angular won't throw any errors because the Angular compiler always sees the Inputs as optional. This is perfectly fine until we want to tell that this Input must be provided.

Let's see how we can write the code with the usage of the required inputs.

Implementing Required Input

We'll get the same code from the previous example and add the support of the new feature:

@Component({
 selector: 'app-foo',
 template: `
  <p>User ID: {{userId}}</p>
 `
})
export component FooComponent {
 @Input({required: true}) userId!: number;
}

In the above code, userId is a required input.

Error Handling and Message

If a required input is not passed, a new error will be thrown.

This helps in identifying missing inputs at compile time rather than runtime. This is a significant improvement as it allows developers to catch and fix errors earlier in the development process.

If the consumer doesn't initialize this input, the Angular compiler will throw an error message:

This ensures that the necessary data is always defined for the component.

However, there is a pitfall in using the required inputs, note ! in the example, yes, it's there for a reason.

Here's a short answer:

See what Monsterlessons Academy has to say about this in his video.

Alias Inputs

Alias inputs allow developers to have a different name for the DOM property than the name of the component's property that is bound to it.

For instance, you might want a more descriptive name in your component but a shorter, more convenient name in your template.

An alias can be used with the required input as shown below:

@Component({
  selector: 'app-foo',
   template: `
    <p>User ID: {{id}}</p>
  `
})
export class FooComponent {
  @Input({required: true, alias: 'userId'}) id!: number;
}

In this code, id is the alias for the required input userId :

<app-foo [userId]="132"></app-foo>

This can be particularly useful when you want to have a different name for the DOM property than the name of the component's property that is bound to it.

Optional Inputs

Not all inputs need to be required. As I mentioned before, the Angular compiler always sees the Inputs as optional.

Basically, all old Inputs are optional.

Optional inputs are not mandatory and can be left undefined without causing any errors.

This can be useful when certain properties are only needed under specific conditions. By marking these properties as optional, you can ensure that your component remains flexible and easy to use.

Here's how to define an optional input:

@Component({
  selector: 'app-foo',
  template: `
   <p *ngIf="userId">User ID: {{userId}}</p>
  `
})
export class FooComponent {
  @Input() userId?: string;
}

In this code, userId is an optional input. It can be left undefined without causing any errors.

Make sure you add ngIf or use another conditional function to display an optional Input.

Conclusion

Required inputs in Angular provide a robust way to ensure that all necessary data is present in components and directives. It's a valuable feature that enhances code quality, reduces errors, and makes the development process more efficient.

With examples and clear guidelines, implementing required inputs becomes a straightforward task for developers.

With this in mind, the required inputs are a game changer in the Angular world, and I hope it'll get better and better in time.

You should definitely use it, and as always, Happy Coding!

JavaScript Generators: Unleashing the Power of Iterables

Ion Prodan — Tue, 18 Jul 2023 09:54:48 +0000

JavaScript Generators might not be the most popular feature of JavaScript, but they sure pack a punch!

These special functions, which can pause and resume their execution, are like hidden gems in the JavaScript landscape.

They might not be in every developer's toolbox, but once you understand their power, you'll wonder how you ever coded without them.

Generators can make your code cleaner and easier to understand, especially when you're dealing with complex tasks or asynchronous operations. But despite their benefits, they're often overlooked and underused in the JavaScript community.

So, why not give generators a chance?

Anjana Vakil talked about the awesome power of JS Generators in her JSConf presentation. This article is all about the examples she shared.

If you don't feel like reading, I highly recommend watching her presentation instead. But if you do want to read, don't forget to check out her presentation too.

Understanding JavaScript Generators

JavaScript Generators are special functions that can pause execution and resume at any time, creating a powerful way to manage synchronous and asynchronous tasks in a more readable and maintainable way.

They were introduced in ECMAScript 2015 and have since become a fundamental part of the language.

A generator function is defined with a function keyword followed by an asterisk.

When called, it does not execute its code immediately. Instead, it returns a special type of iterator, called a generator.

Here's a simple example of a generator function:

function* simpleGenerator() {
    yield 'first yield';
    yield 'second yield';
    yield 'third yield';
}

In this example, the simpleGenerator function is a generator function, as indicated by the asterisk (*) after the function keyword.

The yield keyword is used to pause and resume the generator function. Each yield keyword represents a stage of the generator's execution.

Using Generators

To use a generator, you first have to initialize it. This is done by calling the generator function, which returns a generator object:

let gen = simpleGenerator();

The returned generator object has a next() method, which resumes the generator function until the next yield statement is reached.

The next() method returns an object with two properties: value and done.

console.log(gen.next()); // { value: 'first yield', done: false }
console.log(gen.next()); // { value: 'second yield', done: false }
console.log(gen.next()); // { value: 'third yield', done: false }
console.log(gen.next()); // { value: undefined, done: true }

The value property contains the value yielded by the yield statement, and done is a boolean indicating whether the generator function has been fully completed.

Leveraging Generators as Iterables

Generators can be used to create complex iterable objects.

For instance, consider a scenario where you need an object representing a deck of cards.

Instead of manually enumerating all 52 card values, you can create a generator function that computes all permutations of the different suits and numbers, yielding each one by one.

function* deckGenerator() {
  const suits = ['♠', '♣', '♥', '♦'];
  const ranks = ['2', '3', '4', '5', '6', '7', '8', '9', '10', 'J', 'Q', 'K', 'A'];

  for (let s = 0; s < suits.length; s++) {
    for (let r = 0; r < ranks.length; r++) {
      yield ranks[r] + suits[s];
    }
  }
}

const deck = deckGenerator();
console.log(deck.next().value); // "2♠"
console.log(deck.next().value); // "3♠"

In this example, we're creating a generator function deckGenerator that represents a deck of cards.

The generator function uses two yield statements to produce all possible combinations of suits and ranks in a deck of cards.

When we call deck.next().value, the generator function resumes, returning the next card in the deck.

This makes it easy to iterate over the deck of cards without having to generate all possible combinations upfront.

What about if we want to show all 52 cards? ♠️

console.log([...deckGenerator()]) // Generate all possible variants

// Result: (52) ["2♠", "3♠", "4♠", "5♠", "6♠", "7♠",...]

This is one of the best examples of how using js generators simplifies devs' life!

Generators and Asynchronous Operations

With ES7, we got async versions of generators and iterators.

This allows us to handle asynchronous operations with generators. For instance, you can create an async generator function to load paginated data from an API.

async function* asyncGenerator() {
  let i = 0;

  while (i < 3) {
    await new Promise(resolve => setTimeout(resolve, 1000));
    yield i++;
  }
}

const asyncGen = asyncGenerator();
console.log(await asyncGen.next()); // { value: 0, done: false }
console.log(await asyncGen.next()); // { value: 1, done: false }

Here, we're using an async generator function asyncGenerator to simulate loading paginated data from an API.

The yield statement is used in conjunction with await to pause the generator function until the Promise resolves.

This allows us to handle asynchronous operations in a synchronous manner, making the code easier to read and understand.

When we call asyncGen.next(), it returns a Promise that resolves to the next piece of data.

Generators as State Machines

Generators can also function as state machines due to their ability to remember their state.

For example, you can create a generator function that represents a bank account.

function* bankAccount() {
  let balance = 0;

  while (true) {
    const deposit = yield;
    balance += deposit;
  }
}

const account = bankAccount();
account.next(); // initialize the generator
account.next(100); // deposit 100
account.next(50); // deposit 50

In this example, we're using a generator function bankAccount to represent a bank account.

The generator function uses a yield statement inside a while (true) loop, allowing it to run indefinitely.

Each time we call account.next(deposit), we're depositing money into the account.

The generator function remembers its state (the account balance), making it an effective way to represent a state machine.

Advanced Generator Usage

Generators can also be used to handle asynchronous tasks in a synchronous manner.

This is done by combining generators with Promises.

This combination allows us to write asynchronous code as if it were synchronous, making it much easier to understand and maintain.

function* asyncGenerator() {
    let data = yield new Promise(resolve => setTimeout(() => resolve('async data'), 1000));
    console.log(data);
}

let gen = asyncGenerator();
let promise = gen.next().value;
promise.then(data => gen.next(data));

In this example, the asyncGenerator function yields a Promise that resolves after 1 second.

The next() method is then called on the generator, which returns the Promise.

Once the Promise resolves, the next() method is called again with the resolved value, which is then logged to the console.

Conclusion

Generators are a powerful feature of JavaScript that can help us manage asynchronous operations, implement custom iterable objects, and handle complex control flows.

They can yield control and regain control, functioning as co-routines, passing information back and forth, and doing co-op multitasking.

Watch Anjana Vakil's JSConf presentation for an in-depth understanding of the Power of JS Generators. Her presentation provides comprehensive insights and explanations that will greatly enhance your knowledge in this area.

Remember, practice is the key to mastering generators, like any programming concept.

So, don't hesitate to experiment with generators in your own code and explore the many possibilities they offer.

Native Internationalization (Intl) in Angular

Ion Prodan — Tue, 17 Jan 2023 09:05:06 +0000

The Internationalization (Intl) is a built-in JavaScript library that provides a number of useful internationalisation (i18n) and localisation (l10n) features for web applications.

Some of the features provided by the Intl API include support for formatting and parsing numbers, dates, and currencies according to the conventions of different locales, as well as support for collation and case-insensitive sorting of strings.

The Intl is supported by all modern web browsers, and it is widely used in web applications to ensure that they can be easily localised and adapted to different languages and cultures.

Initially, I did not pay much attention to the Intl API as browser support was not as strong, but now (in my opinion) we should take advantage of it as the support has improved.

As I work only in Angular, I decided to build a small library, that wraps some Intl APIs to Angular Pipes.

There's nothing magic in there, simple pipes with custom configurations:

async transform(value: Iterable<string>, locale?: string | string[]): Promise<string> {
    try {
      return new Intl.ListFormat(locale || this.locale, this.defaultOptions).format(Array.from(value));
    } catch (e) {
      return Array.from(value).join(', ');
    }
}

That's not a library to replace the standard Angular currency, date, number pipes, is just a way to play around with the new Intl features within Angular applications.

It can be used in production as well, if lazy loading poly fills will be implemented.

Here's the link to GitHub repo:

wanoo21 / ngx-intl-helper

This is a collection of pipes for Angular applications that use the Intl API.

Angular Intl API Pipes

This is a simple guide how to run the project. For documentation on how to use the library, please visit the library's README.

Start the project

This project was generated with nx. To start the project, run npm start

Build the library

To build the library, run npm run build helpers

Contributing

If you want to contribute to this project, please read the contributing guidelines.

View on GitHub

Feel free to contribute or ask questions.

ChatGPT and Tech articles

Ion Prodan — Mon, 02 Jan 2023 11:11:26 +0000

It seems ChatGPT is getting started to be a trend in writing, editing, and suggesting good articles. I saw many videos on youtube already about how to write a blog post with the help of ChatGPT, and it's not bad, in my opinion, to have such a good tool, but let's be honest, are we ready to let him write the whole body of the article and have the confidence the post is relevant and informative?

Unfortunately (or fortunately) NO!

And this is good, is a thing it must be, otherwise why would you still be writing on your blog, whereas copy and paste or programmatically tell ChatGPT to do it?

What would be the reason for doing this? Don't you write the articles for yourself first, for your mind, and your body?

This seems to be strange, but ChatGPT mustn't replace you and your mind while you're writing, this is not what it's meant to be, don't do it!

Well, this doesn't mean you shouldn't make use of it, it's still a powerful machine that can help with many other small tasks, like generating short descriptions, telling the difference between this and that (even though it's not relevant in many cases), helping with some random data, suggesting you how to solve some tech bugs or even can give you a full function solution if you need, you name it - but no more than that!

It's a machine that should assist not replace you, it's a GitHub Copilot but not for coding.

If you leave GitHub Copilot to write your code, you'll end up with a mess, and that's totally fine - it's meant to assist you, not replace you.

Let's try it anyway

To prove my words, let's try to write a technical article about @ngrx/component-store library ngrxPush, ngrxLet and built-in Angular async pipe.

We assume we don't have deep knowledge in ngrxPush, ngrxLet but we understand more or less how Angular built-in async pipe works.

Question: Hello, why should I use ngrxPush and ngrxLet against the Angular async pipe?

ChatGPT response:

I won't get into more descriptive details about what's wrong and not here, but I'll try to leave some notes here:

ngrxPush and ngrxLet are two operators from the @ngrx/component-store library that can be used in Angular applications to manage state and data flow in a reactive way. [...]

Sorry, ChatGPT, ngrxPush and ngrxLet can't be operators, first is a Pipe and second is a Directive.

Both ngrxPush and ngrxLet can be used in combination with the async pipe to manage async data in an Angular application. [...]

Hmmm, aren't they meant to replace Angular built-in async Pipe in case of ngrxPush and Angular built-in ngIf directive (maybe not in all circumstances) in case of ngrxLet ?

ngrxPush is an operator that allows you to push a new value into a store path. [...]

Okay ... let's stop here!

If you want to learn more about these topics to better understand what is wrong with these sentences, here's a good article I found, just go over it.

You'll see, nothing here ChatGPT can teach you (at least about these topics) moreover, it gives more misunderstanding and confusion.

Surprisingly, I was pretty sure ChatGPT will mention Zone.js, which is (mostly) the main reason why would you switch to ngrxPush and ngrxLet, but this is not the case.

In the nutshell, I'm very much hoping this article will convince somebody to not give up on keep writing articles based on his knowledge, experience, ideas, and (why not) emotions he has - this is what makes us humans.

Please, don't!

We'll end this article with some good suggestions from ChatGPT which I totally agree with:

Generate and Download files using JavaScript

Ion Prodan — Mon, 20 Apr 2020 13:12:22 +0000

When you're used to be working only on JavaScript and sometimes needed to keep some data on your computer, you might have to implement some server-side code or some tricky HTML which weren't working all times. Thanks to Blob API, nowadays we can achieve that more efficiently and painlessly ;)

What's a Blob?

MDN says:

The Blob object represents a blob, which is a file-like object of immutable, raw data; they can be read as text or binary data or converted into a ReadableStream so its methods can be used for processing the data.

Blobs can represent data that isn't necessarily in a JavaScript-native format. The Fileinterface is based on Blob, inheriting blob functionality and expanding it to support files on the user's system.

Generate and Download data using JavaScript

As we already know what's a Blob, let's have a look at how to download any type of data just using JavaScript Blob API.

Consider we have a JSON format object which contains some application configurations:

const configuration = [{ active: true, showButton: false }];

Firstly we have to convert out configuration object into a Blob:

const blobConfig = new Blob(
    [JSON.stringify(configuration)], 
    { type: 'text/json;charset=utf-8' }
)

After we need to create a blob://... link using URL.createObjectUrl method and sending blobConfig as parameter, it's dynamic and always different:

const blobUrl = URL.createObjectUrl(blobConfig);

As we have a blob://... URL, we just simply create an a element with corresponding href attribute:

const anchor = document.createElement('a');
anchor.href = blobUrl;
anchor.download = "my-configurations.json";

// Auto click on a element, trigger the file download
anchor.click();

// This is required
URL.revokeObjectURL(blobUrl);

Keep in mind, always do URL.revokeObjectURL(blobUrl) when you don't need that URL anymore. This is very important for performance.

That's it! Here's the full code:

// Configurations object
const configuration = [{ active: true, showButton: false }];

// Convert object to Blob
const blobConfig = new Blob(
    [JSON.stringify(configuration)], 
    { type: 'text/json;charset=utf-8' }
)

// Convert Blob to URL
const blobUrl = URL.createObjectUrl(blobConfig);

// Create an a element with blobl URL
const anchor = document.createElement('a');
anchor.href = blobUrl;
anchor.download = "my-configurations.json";

// Auto click on a element, trigger the file download
anchor.click();

// Don't forget ;)
URL.revokeObjectURL(blobUrl);

Conclusion

Always use this trick when you need to download a file with some data from your application. Don't complicate yourself with any server-side code, or third-party libraries anymore.

Need help? Leave a comment!

Angular HTTP best practices (AsyncPipe)

Ion Prodan — Fri, 21 Feb 2020 09:14:39 +0000

In this article, we'll cover some best practices to create HTTP requests just using the Angular AsyncPipe. If you ever thought about making HTTP requests without calling .subscribe(), then you're on the right page.

Why AsyncPipe?

According to Angular AsyncPipe documentation:

The async pipe subscribes to an Observable or Promise and returns the latest value it has emitted. When a new value is emitted, the async pipe marks the component to be checked for changes. When the component gets destroyed, the async pipe unsubscribes automatically to avoid potential memory leaks.

The most important part here is "when the component gets destroyed, the
async pipe unsubscribes automatically to avoid potential memory leaks." These being said, we don't have to worry about unsubscribing the Observables, the AsyncPipe will take care for of it us - good practice (and the most important).

The Observables

Let's create some observables and get started:

private onDestroy$ = new Subject<boolean>();
user$ = new BehaviorSubject<{ id: number, name?: string }>(null);

Create new Subject and source BehaviorSubject.

As you can see, I defined two Observables, onDestroy$ and user$. It's a good practice to have an observable which will be called when the component gets destroyed, but I'll talk later more about it.

Based on user$ BehaviorSubject, we'll create a new Observable getUserInfo$ which sends a server request - each time the user$ gets emitted:

  getUserInfo$: Observable<IUser> = this.user$.pipe(
    exhaustMap(user => user && this.http.get(user.id).pipe(
      map(...),
      tap(...)
    ) || of(null)),
    takeUntil(this.onDestroy$),
  );

Create a new Observable from BehaviorSubject.

If you don't understand what's going on in this code and the .pipe function is unclear for you, maybe you should first take a look at this article and then continue reading!

There are two Operators to pay attention, exhaustMap and takeUntil. Of course, you can add more operators, but these two are the most important.

Using an exhaustMap operator we can be sure that getUserInfo$ will always wait for the server response, even if the user$ emits a new value, it's the opposite of the switchMap operator. See the picture below:

RxJs exhaustMap operator. Credits Angular University.

You can read more about RxJs Mapping here, to have a better idea of why we used exhaustMap and not other mapping operators.

takeUntil subscribes and begins mirroring the user$ Observable. It also monitors a second Observable, this.onDestroy$ that we provided. If the this.onDestroy$ emits a value, the getUserInfo$ Observable stops mirroring the user$ Observable and complete. For more info about takeUntil, see the official documentation.

Subscribing via Angular AsyncPipe

Now as we created the getUserInfo$ Observable, let's see how to subscribe to it using AsyncPipe :

<ng-container *ngIf="getUserInfo$ | async as user">
    {{ user | json }}
</ng-container>

Use Angular AsyncPipe to subscribe to the getUserInfo$.

And then just emit a new value for user$ in order to trigger the server request:

<button mat-icon-button (click)="user$.next({ id: 2, name: 'John Doe' })">
    Get user with id 2
</button>

Emit new user info, to trigger a server request.

Now, if we click the button, even if we double-click, the getUserInfo$ will send a server request and emit new user info which will be handled by Angular AsyncPipe and in turn, will insert new user info into the page.

As we use takeUntil operator, we have to emit some value for this.onDestroy as well as complete it, takeUntil is optional here, as we subscribed to getUserInfo$ via Angular AsyncPipe which takes care of unsubscribing when element gets destroyed, but anyway, it's a good practice and it's good to know about it.

  ngOnDestroy() {
    this.onDestroy$.next(true);
    this.onDestroy$.complete();
  }

Make sure we unsubscribe from Observable when component gets destroyed.

Conclusion

Now we don't have to worry about memory leaking, as we did the best practices for subscribing and unsubscribing from Observables. We can be sure that our code will work faster as AsyncPipe allows us to change the changeDetection of our component to ChangeDetectionStrategy.Push, which (after me) is the best way to optimize a component and as well a good practice.

Haven't you tried yet? Try it and let me know how it works for you 💻.

WebSocket, RxJS and other bad things

Ion Prodan — Tue, 10 Dec 2019 20:11:07 +0000

There are so many tutorials over the internet about different JS frameworks, API's and technologies, each day I come across to different JS articles, but almost none of them are about RxJS, even more about WebSockets with RxJS!

WebSocket, for more of Javascript developers, is something inexperienced and strange thing, even if they understand how it works, they almost never used it, and it's clear why - not all of them needs to create web-chats! But, if we would look more deeply into this technology, we can understand that WebSocket is not only for "Online Chats" but much more, for example sending binary data to the server or making cool things like this!

These being said, RxJS has the same story, we are used to having it only on Angular projects (for developers who write in Angular - for those who not, I am pretty sure they could never use it) and that's it, I haven't seen any other popular libraries to be implemented it - is it so bad? it weighs so much? it is not reactive enough? I would like to know the answers to these questions 😒.

What would be the reasons of un-exploring these two things, we are going today to see an example of integrating both of them and see that it is not so bad, even more - I see it more efficient and optimised way to work with WebSockets - of course, we don't talk about simple projects, otherwise is much better to use the WebSocket API.

RxJS WebSocket Package

Listening for messages from the server:

Pushing messages to the server:

All these examples have been taken from RxJS official documentation WebSocket page, so it is available for everyone. If you are a JS developer and haven't tried RxJS yet, it is time to try it, just give it a try - you will see, it'll worth your time.

Begin with surfing this cool website, write some tests, think as Observable, (start writing in TypeScript, get more sleep, go to JS conferences, read JS books and do not stop here) in that way we will build better websites, web-applications, web-servers, mobile-applications and everything which JavaScript allows us to build.

Make the internet a safer and better place.

Detect chrome dev tools (working trick)

Ion Prodan — Thu, 27 Jun 2019 19:53:35 +0000

Have you ever thought about how to detect if the chrome dev tools is opened or not, even more, listen when it's opening? I have, and today I'm going to show a simple trick.

After some Google researches, I found many tricks but unfortunately, many of them aren't working anymore. There's just one solution (after me) which can deal with that. Take a look to this (copy and paste it to your code, it's ready to use solution):

const element = new Image();
Object.defineProperty(element, 'id', {
  get: function () {
    /* Call callback function here */
  }
});
console.log('%c', element);

Detect Chrome Dev Tools Javascript Code

Let's dive into it a bit and understand what's going on there. So, first of all, we create an element (it doesn't require to be new Image(), I think new Audio() would work just as well), we use Object.defineProperty to define the id property of the element and add a function callback on get. Pretty clever, right? Now every time when the element.id is taken, the callback function will run - that's what we need, put there the functions to run when chrome dev tools will be opened.

So the interesting part is the last line, why callback function is not running if the console.log is already called which means element.id as well? Well, it's not true, console.log is called only when chrome dev console tool is opened which tries to log element as well as id property - and what's happening when id property is taken? Right, it triggers the (get) callback function.

Do you know other tricks that nowadays really work? Share them with us, I'll include in this article.

JavaScript Countdown, is it that simple?

Ion Prodan — Tue, 25 Jun 2019 14:19:07 +0000

Sometimes writing a simple countdown timer is not so simple as it looks. You must play with “new Date” almost as an expert, and not every time you will have the preferred result. Fortunately, there are plenty of countdown plugins for JavaScript on the npm registry, and now I want to show you one of them.

I believe the future of javascript is within Web Components so each plugin which is created nowadays should support the standards of Web Components. These being said, I have chosen this cool countdown time plugin, and yes, it’s made by me.

Before showing some great examples, I’m going to explain to you more specifically the installing methods and what properties and methods does he have. So let’s dive into it.

Install Countdown into your project

There are 2 simple ways:

Through script tag in the head section - this is the best and easy way! Please be aware that the current version in 1.2.0, you should include the latest version at this time.

<script src='https://unpkg.com/@wanoo21/countdown-time@1.2.0/dist/countdown-time.js'></script>

Through npm package - This solution is best for actual frameworks, like Vue, Angular or React and not only, you can use it with Vanilla JS as well.

Run npm install @wanoo21/countdown-time
Import it import “@wanoo21/countdown-time”

Then include <countdown-time></countdown-time> element anywhere in your template, JSX, HTML, etc to show a countdown timer. Of course, you must add some properties in order to start it, about them we are talking in the next section.

P.S. It supports TypeScript , Thanks StencilJS for such a good opportunity!

Countdown Properties [Attributes]

It has five custom properties, let’s see what they are and what they represent:

[autostart] - Whether start or not when the countdown is ready, if not, you must start it manually, default is false.
[datetime] - DateTime to countdown, must be a valid date represented by string or number , ex: Date.now(), default is Date.now().
[add] - Add more time to current DateTime separated by spaces, ex: add="1h 30m" - this will add 1 hour and 30 minutes to datetime time, by default this attribute is empty.

[format] - Use this attribute to change the showing format, ex: “{m}min. and {s}sec.”, default is “{h}:{m}:{s}”. These placeholders are available:
1. {w} - number of weeks.
2. {d} - number of days.
3. {h} - number of hours.
4. {m} - number of minutes.
5. {s} - number of seconds.

[utc] - Using this attribute you will convert the datetime time to UTC format, default is false.

Countdown Methods

getCountDownTime() => Promise<ITimeObject> - Get a Promise of ITimeObject which has { weeks: string; days: string; hours: string; minutes: string; seconds: string; } properties.
restart() => Promise<void> - Restart countdown.
setAsExpired() => Promise<void> - Set as expired, this action will stop and call expire custom event.
start() => Promise<void> - Start countdown, autostart attribute is doing the same action.
stop() => Promise<void> - Stop countdown, this action will stop countdown, but won’t call expired custom event.

Countdown Events [CustomEvents]

There are two custom events, expire and ready:

expire - Is emitted when the countdown expires.
ready - Is emitted when the countdown is ready to start. Both of them return CustomEvent<void>. See some examples:

Available 'Slots'

There is an option to hide or show some content based on the current countdown’s state. Add any content inside <countdown-time></countdown-time> and add the following attributes:

[show-on-expired] - Show this element only when the countdown expired.
[hide-on-expired] - Show this element only when the countdown is running and hide it when it is expired.

Conclusion

Not bad, huh? With some simple steps, you can have a plain and powerful countdown timer in your site. Try to play with it and tell me what you think, is it compatible with your ideas?

Difference between encodeURI and encodeURIComponent

Ion Prodan — Fri, 15 Mar 2019 12:08:57 +0000

I was pretty sure I'm using encodeURI and encodeURIComponent rightly till I faced a big problem! LOL 😂. When I solved my issue, I finally understood what's the difference between them. So let's find out!

What are they

As you may know, in javascript encodeURI and encodeURIComponent are used to encode Uniform Resource Identifier (URI) by replacing each instance of certain characters by one, two, three, or four escape sequences representing the UTF-8 encoding of the character. (MDN)

The difference

There aren't big differences, the unique difference is that encodeURI() function encodes special characters, except: , / ? : @ & = + $ # whereas encodeURIComponent() function encodes special characters and in additional the characters which encodeURI doesn't encode!

When and what to use

If you're encoding a string to put in a URL component (a query string parameter), you should use encodeURIComponent, and if you're encoding an existing URL, use encodeURI. It's simple! 😎

Some references:

MDN encodeURIComponent.

MDN encodeURI.

Have you had any bad experiences with them by now?