DEV Community: Klaudia Jaszczak

My new AI app: childbook.ai - create a personalized children's book

Klaudia Jaszczak — Mon, 26 Dec 2022 20:39:39 +0000

Hi! 😄
Recently, together with Wojciech Jaszczak we took part in the AssemblyAI hackathon, which involved creating an AI-powered app in two days. 🚀 Although we didn't manage to win but we believed our initial MVP was good enough to take it a bit further.😊

Today I present you http://childbook.ai ✨ - A generative AI children's book creator. You can describe your characters and give a title and however long/detailed description you want, the gpt-3 will generate a children's story from it, dall-e will generate images. Images are postprocessed with stable-diffusion custom model (for stylisation) and that's the final result. 📖

Example of generated books:

Watch the video on how to easily and quickly create a personalized book:
https://www.youtube.com/watch?v=QXuzWrOhBPk&t=1s

Inspiration
Our inspiration for creating children's books is the imagination and creativity of children. The best authors of children's books are children themselves, who are able to come up with incredible stories and visions. Books are incredibly important for a child's development, helping to develop imagination and creativity and teaching reading and proper pronunciation. We are proud to create personalized children's books that will be a wonderful adventure for them and help them in their development.

What it does
With our app and the use of artificial intelligence, you can create your own personalized children's book. This book is personalized in terms of content, characters, and illustrations.

Unique
Stories we create are unique and we make sure that they are different from the rest. The stories we create are never copied from anywhere. What we show is one of a kind.
Personalized
They are not just stories but they are the stories that you want to hear. The characters are the ones that you want to see. And adventures they have are the onse you want to experience.
Illustrated
Stories we create are illustrated. The characters and the adventures are illustrated. We make sure that the stories are not just words but that they are also visually appealing.
Accessible
The created stories and illustrations are accessible. We added a feature of text to speech so that the stories can be listened to as well. With a voice over, the stories are more fun.

How we built it
We created the web application with Next.js, tRPC, prisma, postgreSQL, redis, tailwind. The AI part is handled by OpenAI API (GPT3, DALL-E) and stable diffusion.

Challenges we ran into
The biggest challenge is to achieve consistent, similar style illustrations where the characters are repeatable. And also depicting in the illustration exactly what the text contains is one of the harder tasks.

Accomplishments that we're proud of
We are proud that we were able to create a product in two days that can make many children happy. They will be able to create a book with their own adventures or with stories they have invented themselves, with the help of their parents. Additionally, we created the option to listen to the book and descriptions of the illustrations to make the book accessible to blind people. It is a wonderful initiative. 😊

What we learned
We have learned that artificial intelligence is very important and offers many possibilities. Thanks to it, we can create increasingly advanced programs that will help us in our daily lives. Artificial intelligence will be used in many fields such as education, medicine, transportation, and services. With the help of AI, we will be able to solve increasingly complex problems and better understand the world. We are constantly developing our technologies to make the best use of the potential of artificial intelligence.

What's next for Children's Book illustrator

improve the consistency of the illustrations and characters,
add different lectors (e.g. characters from fairy tales) that read a book, so that children can choose who will read the book to them,
create a slideshow video for each generated book,
add the feature of sharing the generated book on social media

The payment model
For now, the payment model is pay what you want. The first book is for free. So feel free 😊 to test it out.🦾

Hopefully, you will like it. Feel free to comment any feedback will be appreciated 😊

www.childbook.ai ❤️

Responsive Web Design

Klaudia Jaszczak — Wed, 06 Apr 2022 17:02:57 +0000

RWD - Responsive Web Design

As a Front-End developer, I want to create websites that look good on all devices (mobile, tablets, large screens...). Some components will be universal for all devices. However, some of them require improvements so that the end-user is equally satisfied with the website on all their devices.

There are two approaches to creating responsive websites (good and ... not-good). 😄

The first approach is desktop-first the "not-good" one. By writing "not-good", I mean not recommended. But why❔
In this approach, we build a website starting with large screens and then add code to handle increasingly smaller resolutions.
When building websites for the desktop, we have more possibilities. We create websites full of content with beautiful animations, enriched with additional functionalities using modern technologies. Then we want to translate it all 1: 1 into smaller devices and then it turns out that it cannot be scaled this way. In such a case, the functionalities have to be cut down to the basic ones or we need to start looking for alternative solutions only to use them on the mobile version.
The second, "good" approach is mobile-first. This is the recommended approach for creating an RWD page. In this case, we first create a website for mobile devices and then move on to higher resolutions.
Starting with creating a mobile website taking into account the available technologies, functionalities, and website readability for smaller resolutions - we do not have to give up anything in the next stages. Moving on - when adjusting the website for higher resolutions, all that remains is to expand the design. We can add something, thus making the website look or work even better. Thanks to this approach, we can be sure that the end-user using the mobile website will be as satisfied as the one using the website on the computer. 😊
But to not make it sound too good to be true, it is worth adding a disadvantage of this approach. I believe it is more difficult to start creating the pages for mobile devices first and after that expand the website with additional functionalities. It is always easier to cut something off and give up something, but is it better? Probably not. 😏

I also post a short video of how I created a responsive website for the client.

Add loading of components definitions inside Strapi plugin - pull request

Klaudia Jaszczak — Mon, 28 Mar 2022 17:33:45 +0000

Hi 👋,
for people interested in creating their own plugins for @strapijs - I created the Pull Request on GitHub. 🎇
The PR is about allowing plugin creator to declare his own custom content type components inside plugin. This will open new doors for plugin creators.

In short:

What does it do?
I have added loading of components definitions from Strapi plugins. It allows loading components from plugin/server/components folder.
It allows components to be overwritten by local components, when editing in content-type manager.
It will prefix components categories defined inside the plugin with either plugin name or componentsPrefix (if defined in plugin package.json).

How to test it?
I have modified the examples/getstarted to make use of the components defined in plugin as well as added a content-type that makes full use of newly defined components.

I and @jaszczw will be actively supporting the PR. 🤞
We need the PR merged to complete one of our projects. 💡

Find out more here: https://github.com/strapi/strapi/pull/12965

React Hook: useEffect simplified flow

Klaudia Jaszczak — Wed, 16 Mar 2022 16:47:07 +0000

For people who like diagrams😊- I have prepared my own diagram showing useEffect flow:

Step by step: React Timer Component Using Hooks

Klaudia Jaszczak — Wed, 16 Mar 2022 14:12:03 +0000

Today I would like to show you my example of creating a timer.⏱️

This is what the component looks like (in storybook) :

Programming language: JavaScript / TypeScript
Library: React
Usage: timer as a functional component using react-hooks,
Expectations: displays the elapsed time while taking the quiz and displays the total time in the last step that is the result of the quiz

I create an arrow function called Timer and pass 3 arguments to it: isActive, seconds, setSeconds.

isActive is a boolean variable that provides information as to whether the Timer is on (if isActive is true, the clock is running)
seconds is a variable of the type number that represents the value of the clock counter. The value that initializes this variable is 0 because this timer will begin counting from 0
setSeconds is a function that modifies state which is contained in another component, it expects that passed function to behave like the function returned by hook useState

The body of the Timer function contains:

useEffect in which:
- if isActive is true, i.e. the clock is on, the JavaScript function setInterval will run, which increases the variable seconds by one every 1000 milliseconds - that is every 1 second
- setSeconds(prevSeconds => prevSeconds + 1) means that the previous value is increased by one (0 + 1 = 1, 1 + 1 = 2, 2 + 1 = 3, 3 +1 = 4 ... etc)

I'll pause here to explain why we're using the useEffect Hook.
When looking for information about useEffect, you can often encounter the following content: "The Effect Hook lets you perform side effects in function components.". Personally, that doesn't tell me much. So I will share how I understand it.

Hook useEffect is like a combination of componentDidMount, componentDidUpdate, and componentWillUnmount. It is related to the component lifecycle because it starts only when the component is mounted and exits when the component has been unmounted on the page.

In addition, we use useEffect for components whose functionality does not depend on the direct user interaction of the interface. Our sample clock will update itself while active with the passage of time, it does not depend on the interaction of the user using the website, it is not possible to click on it and change it.

Another feature of using useEffect is that in addition to starting a timer, it will also handle a timer clean up, which should always happen before the component is unmounted.

The operation of useEffect and its updating can be made dependent on some other data using the dependency table. In this case, in the dependency array, I have put: isActive and setSeconds. The dependency on isActive is that when isActive changes to false, the clock should stop counting. The change will run again useEffect which on the second execution will start with the clearInterval cleaning function, then in the function body the if(isActive) condition will be checked again and the function will exit.

The second dependency setSeconds is making sure, that useEffect will always use the current version of this function.

For people who like diagrams😊- I have prepared my own diagram showing useEffect flow:

Finally, Timer returns the Typography component (from the MUI library), which displays the elapsed time.

I display the elapsed time in hh:mm:ss format and use the formatSeconds function to get seconds into that format.

Finally, you can display a working Timer wherever you want on the page💁

Year after I left my job to become software developer

Klaudia Jaszczak — Tue, 08 Mar 2022 16:15:11 +0000

On International Women's Day, I would like to share with you what positive changes I have made in my life in the last year. 😊

Back in 2020, I was working as a financial controller. Some of my responsibilities were creating many financial reports, conducting optimization meetings, and implementing KPIs. While creating yet another similar report, I was constantly thinking about automating my work.🤖 The words "optimization" and "automation" were constantly on my mind. I wanted to improve and speed up everything. So I went to VBA training in Excel to be able to do some things faster and more automated way.

And then I started to think about programming more and more. I found it extremely interesting and magical. Probably for many beginners - programming is magic. I am writing something line by line and suddenly... WOW so much has happened! 🔥😎 When you can see the results of your work, it gives a lot of satisfaction.

A great inspiration for me is my wonderful husband who is an experienced programmer. Seeing my enthusiasm for the field of programming, he offered to teach me JavaScript. And that's how I started learning. Soon after I left my job and entered this beautiful and magical world of software development. 🪄

I am very satisfied with this decision for many reasons.

First of all, I am fulfilling myself. Programming is a very developing activity. It requires concentration, logical thinking, and constant training, which translates into maintaining a good condition of the brain.
Programming gives a lot of satisfaction - when the code works, of course, and teaches a great deal of patience - when the code does not work. 😄
Thanks to working as a software developer, I can also work remotely, from anywhere in the world. During last year, I saw many beautiful places that I had only heard about before. 💚 When I want to visit my family, I don't have to take a break. I can take my laptop and work from my family home, spending the afternoons with my loved ones. This freedom of life and development stimulates creativity and gives me a lot of joy personally.
Moreover, I believe programming is the future. Thanks to programming, we can change the world for the better.

I would still call myself a novice programmer, but today on International Women's Day I wish myself that in the future I will create beautiful things with code. 💚 🍀

I am also very curious about your stories (not only of women)? What professions did you give up to change your life? And are you satisfied with these changes? 😊

And finally, all the best, my dear women, fulfill yourselves and do not be afraid of changes, because only changes can improve something in our lives! Kisses!💋

How to open react-select menu on click of a button?

Klaudia Jaszczak — Wed, 02 Mar 2022 13:46:55 +0000

My answer to the question "How to open react-select menu on click of a button?" on stackoverflow:
https://stackoverflow.com/questions/60257724/how-to-open-react-select-menu-pragmatically

You can try and use storing a ref to the component, calling a .focus() on it. And pass to the React Select prop openMenuOnFocus.

Short essence:

Sample on codesandbox: https://codesandbox.io/s/react-select-hooks-forked-qol5m

Giving power back to the Client!

Klaudia Jaszczak — Mon, 28 Feb 2022 08:39:54 +0000

While working on web application (especially those whose content is dynamic), we will often want to add or change some content on the website, so in our best interest is to ensure that those changes would not mean any additional developer work. To achieve that, we can use CMS system, my favorite one so far is Strapi CMS.

The client usually does not want to be dependent on a software developer. He would like to independently control the content of his application, for example in a blog, add new posts, change pictures, etc. In turn, the developer does not want to correct typos in the client's text or change the picture on the post again.

By determining together with the client, the developer or client can define all the fields in the strapi that are needed by the client to manage the content. For example, when building a post section - they can define fields: title, description, picture /video, etc. after which content of those fields can be fully managed by client.

Independence will bring benefits to each of the parties (developer and client) and this is how it should work.

Below short video of strapi CMS, where the client manages the content himself and the view how it is then displayed on the website.

Mature optimization is not that evil

Klaudia Jaszczak — Fri, 25 Feb 2022 19:47:30 +0000

You probably know saying "Premature optimization is the root of all evil", but is all optimization premature and evil?
Sometimes 1% differences can have a significant impact.
In a world where everybody is using their phone for browsing the internet, small optimizations can mean additional minutes of browsing time on a single charge.

Today I wanted to write about a little feature in React that will help you on your journey of 1% improvements.
useMemo() is a hook that returns the memoized value. We can use this hook when we want to avoid calculations every time we render the component. The first argument of the useMemo() hook is a function we create, and the second is an array of dependencies. By passing a function to useMemo() hook, it will be called in the first render, and the stored value will be returned on each subsequent re-render, so you can avoid additional calculations each time the component is rendered. However, if one of the values passed in the array of dependencies changes, the function will be called again to obtain and store the new value.

It's important to first write code that works and then add performance optimization to it using useMemo(). Properly used useMemo() does not change anything in the behavior of the application, it only affects performance.

The examples of useMemo() based on a counter are everywhere, so I'm adding my simple example below.

I'm creating a quiz in which content will be defined by the user, the quiz will have multiple stages/steps. Depending on the stages of the quiz, as well as the selected language, I want to display a different label on the button. For example, when displaying questions, the footer with "prev" / "next" buttons will be displayed, but when it is the last question, instead of "next" I will display "submit" on the button, etc.

This way the label won't be recalculated until we move to another 'stage' of the quiz. Otherwise, a re-render is not needed. It may be a small change, but it things like that add up.

I think it's always a good idea to review your code and consider if there's any room for improvement.

Benefits of using Strapi with Typescript + Storybook tandem

Klaudia Jaszczak — Wed, 16 Feb 2022 14:31:08 +0000

We are working on react components integrated with strapi and storybook. Both for me - a novice programmer and for Wojtek - a programmer with many years of experience and extensive knowledge, it brings many benefits.

Starting with strapi, we can determine the content type, decide what fields our components will need, e.g. whether a given component will contain a title, description, photo and whether, for example, it must meet a condition to be displayed. In strapi, we can manage the content that we want to include in a given component. We can also easily change it - so that a non-programmer can edit the content.

All data that we input into strapi can be obtained using GraphQL API or REST API. On top of that with the help of a graphql-codegen tool we can make the graphql response typed in typescript.

Typescript shows us what data and in what form component expects to receive. Typescript is also responsible for maintaining contract between strapi responses and components props.

By passing these props to the components, we can display them by creating a story in the storybook. The storybook shows what a given component will look like and allows you to create different variants of component. We can create stories for different themes, multiple language versions and for example show negative scenarios, for when user forgot to input some data or we have had an backend issue, showcasing display of appropriate error message and gracefully handling those scenarios as well.

This combination of strapi + sb + ts allows a front end developer to work without being strictly dependent on the backend. As long as the initial contract is maintained. But also using Strapi by itself which provides most of the CRUD operations out of the box, limits the amount of custom backend code that needs to be written significantly, which in turn speeds up the development process and amount of bugs that can be introduced.

However, it brings the most benefits for the client, who can :

manage the content of his application in strapi without the help of a developer
check how the components will look like, as well as all their variants in the storybook, while the application is still being worked on
strapi is free and open-source CMS which is constantly being improved and enhanced by the community, making it a choice that in the future may support even more features