Hello and welcome to "Frontend beer"! 👋
🧑💻 My name is Dmitrii and I'm passionate about Frontend development
🚀 It might sound cliché, but I've finally taken the plunge and created my own channel 😉
📝 A few words about me
- I have over 8 years of experience in web development.
- I've worked and continue to work in various fields: FinTech, SaaS, EdTech, eCommerce, IoT, Entertainment, and more.
- For the last 4 years, I've been diving into Design Systems.
- My primary focus:
📘 TypeScript
⚛️ React
💛 JavaScript
🟢 Node.js
⚫ Next.js
Why this channel, you might ask?
I'll do my best to break down everyday frontend (and not only) tasks using simple and understandable language. I'll also share the tools that help me tackle them.
Why should you subscribe to "just another" channel?
Perhaps some practical insights will solve your problem, so subscribe – it will be interesting 🧐
P.S.
On Fridays, I'll try to share a photo of some craft beer 🍺
#FrontendBeer #intro #en (c) Frontend Beer
🧑💻 My name is Dmitrii and I'm passionate about Frontend development
🚀 It might sound cliché, but I've finally taken the plunge and created my own channel 😉
📝 A few words about me
- I have over 8 years of experience in web development.
- I've worked and continue to work in various fields: FinTech, SaaS, EdTech, eCommerce, IoT, Entertainment, and more.
- For the last 4 years, I've been diving into Design Systems.
- My primary focus:
📘 TypeScript
⚛️ React
💛 JavaScript
🟢 Node.js
⚫ Next.js
Why this channel, you might ask?
I'll do my best to break down everyday frontend (and not only) tasks using simple and understandable language. I'll also share the tools that help me tackle them.
Why should you subscribe to "just another" channel?
Perhaps some practical insights will solve your problem, so subscribe – it will be interesting 🧐
P.S.
On Fridays, I'll try to share a photo of some craft beer 🍺
#FrontendBeer #intro #en (c) Frontend Beer
👍1
A few weeks ago, I was in search of a simple tool for creating email templates with no fuss for one of my pet projects
I needed a solution that would enable me to easily craft templates directly in the browser and export them in HTML format for use with an API that sends out emails.
My design requirements for these templates are quite humble: basic text emails and a logo - that's all I need 🙌
I found a couple of such tools on GitHub:
- react-email-editor
— See more on: https://youtu.be/MIWhX-NF3j8
- easy-email
The first tool offered a straightforward demo page without requiring registration, and that's the one I went with. It suits my needs perfectly. 🙂
The only thing you'll need to do after exporting to HTML is replace the provided image URLs with your own
#FrontendBeer #instruments #emailtemplates #email (c) Frontend Beer
I needed a solution that would enable me to easily craft templates directly in the browser and export them in HTML format for use with an API that sends out emails.
My design requirements for these templates are quite humble: basic text emails and a logo - that's all I need 🙌
I found a couple of such tools on GitHub:
- react-email-editor
— See more on: https://youtu.be/MIWhX-NF3j8
- easy-email
The first tool offered a straightforward demo page without requiring registration, and that's the one I went with. It suits my needs perfectly. 🙂
The only thing you'll need to do after exporting to HTML is replace the provided image URLs with your own
#FrontendBeer #instruments #emailtemplates #email (c) Frontend Beer
👍2
Next.js 14 is out 🚀
I started working with this framework back in 2017 and I remember setting up projects as early as version 3. Since then, Next.js has come a long way and it's inspiring to see its progress.
I recall the excitement when the development team secured investments and it is move the tool forward in great strides. I also remember the collaborations with React developers and Google Chrome's team.
It's always invigorating to witness the technologies you work with evolving and improving!
Next.js 14 brings us the following:
⚪️ 53% faster local server startup and 94% faster code updates with Fast Refresh
⚪️ Stable Server Actions
⚪️ Preview version of Partial Prerendering – a mechanism that delivers dynamically generated content more swiftly
⚪️ A new learning course covering the App router, Authentication, Postgres, and more.
#FrontendBeer #instruments #nextjs (c) Frontend Beer
I started working with this framework back in 2017 and I remember setting up projects as early as version 3. Since then, Next.js has come a long way and it's inspiring to see its progress.
I recall the excitement when the development team secured investments and it is move the tool forward in great strides. I also remember the collaborations with React developers and Google Chrome's team.
It's always invigorating to witness the technologies you work with evolving and improving!
Next.js 14 brings us the following:
⚪️ 53% faster local server startup and 94% faster code updates with Fast Refresh
⚪️ Stable Server Actions
⚪️ Preview version of Partial Prerendering – a mechanism that delivers dynamically generated content more swiftly
⚪️ A new learning course covering the App router, Authentication, Postgres, and more.
#FrontendBeer #instruments #nextjs (c) Frontend Beer
👍1
Today is Friday and I promised to share a photo of some craft beer :)
I want to introduce you a Cherry CHOUFFE 🍒
It's a fruity Belgian beer a real cherry paradise for cherry beer lovers!
In its taste and aroma you can find rich notes of cherry, strawberry, almonds, spices, with a sweet and sour touch. This beverage has a brown-red shade and a generous creamy foam in the glass
This beer is crafted at the Brasserie d’Achouffe brewery following Belgian quality standards
The creation story tells that Cherry CHOUFFE was born by accident when cherries fell into a beer barrel and the brewers decided to preserve this experimental masterpiece
On platforms like Untappd this beer receives quite high ratings. In 2019, it was awarded a bronze medal at the World Beer Awards in the category of "World’s Best Flavored Fruit & Vegetable". That speaks for itself.
And that's not all! Cherry CHOUFFE pairs excellently with a variety of dishes. See more on official site!
Cheers!
#FrontendBeer #beerfriday (c) Frontend Beer
I want to introduce you a Cherry CHOUFFE 🍒
It's a fruity Belgian beer a real cherry paradise for cherry beer lovers!
In its taste and aroma you can find rich notes of cherry, strawberry, almonds, spices, with a sweet and sour touch. This beverage has a brown-red shade and a generous creamy foam in the glass
This beer is crafted at the Brasserie d’Achouffe brewery following Belgian quality standards
The creation story tells that Cherry CHOUFFE was born by accident when cherries fell into a beer barrel and the brewers decided to preserve this experimental masterpiece
On platforms like Untappd this beer receives quite high ratings. In 2019, it was awarded a bronze medal at the World Beer Awards in the category of "World’s Best Flavored Fruit & Vegetable". That speaks for itself.
And that's not all! Cherry CHOUFFE pairs excellently with a variety of dishes. See more on official site!
Cheers!
#FrontendBeer #beerfriday (c) Frontend Beer
👍1
npm
npm: openapi-typescript
Convert OpenAPI 3.0 & 3.1 schemas to TypeScript. Latest version: 7.9.1, last published: 6 days ago. Start using openapi-typescript in your project by running `npm i openapi-typescript`. There are 219 other projects in the npm registry using openapi-typescript.
Today I want to share information about the Schema First approach which is a part of the API First strategy. This approach plays a crucial role in frontend application development, especially when the API is being developed in parallel with the interface
In simple terms, the Schema First approach involves creating a contract (schema) between frontend and backend developers. This contract defines the data structure and endpoints that will be available on the server
From my experience, in 90% of cases, this contract remains stable and doesn't require significant changes in the future. This allows frontend developers to work on the interface, even if the API is not fully implemented yet
If you are using TypeScript in your project, tools like openapi-typescript can help you generate types automatically based on the provided contract. This ensures not only type safety but also quick detection of changes in the schema if the contract ever changes. TypeScript will guide you on where to adjust your code when checking types
Following the Schema First approach is possible if you strictly version your API or aim to avoid breaking changes. This method simplifies communication between teams and contributes to a more efficient and faster development of frontend applications
#FrontendBeer #openapitypescript #schemafirst #apifirst (c) Frontend Beer
In simple terms, the Schema First approach involves creating a contract (schema) between frontend and backend developers. This contract defines the data structure and endpoints that will be available on the server
From my experience, in 90% of cases, this contract remains stable and doesn't require significant changes in the future. This allows frontend developers to work on the interface, even if the API is not fully implemented yet
If you are using TypeScript in your project, tools like openapi-typescript can help you generate types automatically based on the provided contract. This ensures not only type safety but also quick detection of changes in the schema if the contract ever changes. TypeScript will guide you on where to adjust your code when checking types
Following the Schema First approach is possible if you strictly version your API or aim to avoid breaking changes. This method simplifies communication between teams and contributes to a more efficient and faster development of frontend applications
#FrontendBeer #openapitypescript #schemafirst #apifirst (c) Frontend Beer
👍1
This week, I wanted to write a few more posts. However, it didn't work out.
I've started a new job and I'm actively going through the onboarding process.
My former colleagues gave me a very valuable gift, which you can see in the photo - craft beer that you can find in Cyprus at RabbitHop 😎🙌
Cheers!
#FrontendBeer #beerfriday (c) Frontend Beer
I've started a new job and I'm actively going through the onboarding process.
My former colleagues gave me a very valuable gift, which you can see in the photo - craft beer that you can find in Cyprus at RabbitHop 😎🙌
Cheers!
#FrontendBeer #beerfriday (c) Frontend Beer
👍1
Styling generated content in applications - Part 1
Today, I want to talk about styling generated content in applications
It often happens that content with HTML markup comes from the server, such as translation texts or the content of articles. Sometimes we have functions that generate text depending on various conditions, for example, text with prices and discounts in the shopping cart
And in our work, there are situations where we need to style certain parts of this content. How can we do that?
Let's consider an example when we need to change the text color of numbers. To do this with minimal code changes, we can add wrappers with data attributes to the generated strings:
Read the second part
#FrontendBeer #xss #dompurify #react(c) Frontend Beer
Today, I want to talk about styling generated content in applications
It often happens that content with HTML markup comes from the server, such as translation texts or the content of articles. Sometimes we have functions that generate text depending on various conditions, for example, text with prices and discounts in the shopping cart
And in our work, there are situations where we need to style certain parts of this content. How can we do that?
Let's consider an example when we need to change the text color of numbers. To do this with minimal code changes, we can add wrappers with data attributes to the generated strings:
const lHours = `<span data-color="fiery-orange">${hours}</span>`
Read the second part
#FrontendBeer #xss #dompurify #react(c) Frontend Beer
👍1