Forem: jun

Stop Shipping Boring AI-Generated UIs

jun — Sun, 17 Aug 2025 12:33:41 +0000

If you’ve been vibing with AI coding tools like bolt.new, altan.ai, or Lovable, this article is for you. It’s about taking your AI-generated UI from decent to damn, that looks good.

I’ve been experimenting with these AI tools for a while now, and honestly the UIs they generate are honestly pretty decent! You get working interactions, clean layouts, and some visual polish. But let’s be real: what AI gives you out of the box still needs a little love. Most of them lean heavily on shadcn/ui as the foundation — which is fine, but kind of obvious.

You don’t have to settle for that “AI starter pack” look, there are plenty of libraries you can use, and I’ll show you some of my favourites below. Just copy-paste a component into your project, tweak the colours to match your brand, and you’ll save hours while making your UI actually stand out!

1.Origin UI

2.skiper/ui

3.Kibo UI

4.SHSF UI

5.Mvpblocks

6. tweakcn

💡 Pro tip for adding some personality:

Motion (prev Framer Motion) - Smooth animations and micro-interactions
React Spring - Physics-based animations that feel natural
Lottie React - Beautiful animated illustrations and icons

You can also mix and match these libraries! Use shadcn/ui as your foundation, then layer on the missing pieces. At the end of the day, AI can give you a solid foundation. But the magic happens when you add your own creative touch 😉

The React Performance Rabbit Hole I Fell Into (And How I Climbed Out)

jun — Tue, 04 Mar 2025 07:19:29 +0000

Recently, while working on a project with React and Next.js, I encountered several performance challenges that taught me valuable lessons I'm excited to share with you. This post details my experiences and the solutions I discovered, hoping it will serve as both inspiration and practical guidance for your own React development journey. 🚀

Better Performance = Better User Experience

Let's be real - nobody has time for slow apps. Not me, not you, and definitely not our users. People want to get things done fast.

Strong performance builds trust in your app and brand. It shows you respect your users' time. And in 2025, with attention spans shorter than ever, performance isn't just nice to have.

The Silent Killer: Unnecessary Re-renders

In my project, I discovered React components were re-rendering 3-4x more often than needed. These silent re-render cycles are particularly insidious because:

They don't crash your app, making them easy to overlook
Performance degradation compounds gradually as features get added
Mobile users pay double with slower processors + re-render penalties

What makes this especially tricky is React's "render everywhere just in case" philosophy. While great for correctness, it means components often update when nothing visually changes.

Here's how I fought back

1. Identifying Performance Bottlenecks

I started by analyzing runtime performance with Chrome DevTools. The Performance panel became my best friend during optimization:

Look for components that render frequently
Identify render cascades (when one component update triggers a waterfall of child updates)
Spot components with abnormally long render times

2. Embracing Memoization Strategically

React gives us powerful tools to avoid unnecessary work:

memo prevented my complex UI components from re-rendering when their props hadn't changed
useMemo helped me cache expensive calculations
useCallback kept function references on every render, particularly important for optimising callbacks passed to child components

Memoization isn't free - I found that applying these tools thoughtfully (rather than everywhere) gave me the best results. The upcoming React Compiler is getting better at handling simple optimizations automatically, complex components still benefit from manual memoization.

3. Function Definitions Matter More Than You Think

Something I didn't realize at first: defining functions inside your render scope creates new functions on every render, triggering re-renders in child components even with memo.
Moving these definitions outside the component or wrapping them with useCallback made a noticeable difference.

4. Leveraging DevTools

Rather than guessing where performance issues might be, I learned to rely on Chrome DevTools' Performance panel to identify actual bottlenecks. Here are some other tools:

Use the Profiler tab in React DevTools
Start a Lighthouse audit in the Chrome DevTools
Track rerenders of specific components with Why did you render?

What's Working For You?

I'm curious - have you hit similar walls with React performance? Have you tried any of these techniques? Let me know in the comments ✨

Discovering lesser-known features of Tailwind CSS

jun — Tue, 25 Jun 2024 03:08:04 +0000

Hey everyone, hope you're all doing great! Today, I want to share some hidden gems in Tailwind CSS that can make your web development smoother and more fun. I've kept it simple and beginner-friendly, so let's jump right in!

Aspect Ratio Utility

Keeping your images and videos responsive with consistent aspect ratios is easy with Tailwind CSS. Just use classes like aspect-square and aspect-video, and you're good to go on any screen size. You can also use variant modifiers to target different screen sizes and modes. For example, use md:aspect-square to apply the aspect-square utility only at medium screen sizes and above.

<iframe class="w-full aspect-video md:aspect-square" src="https://www.youtube.com/..."></iframe>

Preflight

Another point to take note that Tailwind CSS comes with Preflight, a built-in CSS reset. Just include @tailwind base in your CSS, and it automatically injects these styles.

@tailwind base; /* Preflight will be injected here */

@tailwind components;

@tailwind utilities;

Preflight is a great way to avoid those annoying browser inconsistencies, like default margins on headings and paragraphs.

File input buttons

You can easily style file input buttons using the :file modifier

  <label class="block">
    <span class="sr-only">Choose profile photo</span>
    <input type="file" class="block w-full text-sm text-slate-500
      file:mr-4 file:py-2 file:px-4
      file:rounded-full file:border-0
      file:text-sm file:font-semibold
      file:bg-blue-50 file:text-blue-700
      hover:file:bg-violet-100
    "/>
  </label>

Change radio/checkbox colors

Want to customize the color of checkboxes and radio buttons? Use the accent-* utilities to override the default browser colors. One ofo the feature I used most of the time.

<label>
  <input type="checkbox" checked> Browser default
</label>
<label>
  <input type="checkbox" class="accent-violet-500" checked> Customized color
</label>

Transition Utilities

Adding transitions to UI elements is super easy with Tailwind CSS. Especially when I work on hover/active states, Transitions can really improve the user experience by making your app feel smoother and more responsive.

With transition

<button class=" bg-indigo-100 hover:bg-indigo-200 text-indigo-500 transition delay-150 duration-300 ease-in-out rounded py-2 px-3">Save Changes</button>

Without transition

<button class=" bg-indigo-100 hover:bg-indigo-200 text-indigo-500 rounded py-2 px-3">Save Changes</button>

Truncating multi-line text

Another feature I like to use is the line-clamp-* utilities to truncate a block of text after a specific number of lines without writing CSS. Furthermore, you can also remove the line clamp by using line-clamp-none. For instance, use lg:line-clamp-none to undo the previously applied line clamp on larger screens.

<p class="line-clamp-3">Reaaally long text here to truncate 3 lines above. On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain. These cases are perfectly simple and easy to distinguish.</p>

By exploring these features, you can make your development process easier and your web applications look awesome. Give these a try and see how they can improve your Tailwind CSS projects!

That's it for now. Thanks for reading! 🪄

AWS Certified Cloud Practitioner: My Journey and Tips

jun — Wed, 28 Feb 2024 04:14:12 +0000

In my professional journey, I've always been curious and developing myself to constantly try to expand my skill set. Recently, I passed the AWS Certified Cloud Practitioner exam on my first try. This accomplishment has inspired me to share my journey with you, in the hopes that it will serve as both inspiration and guidance for your own AWS journey. To deepen my knowledge and familiarity with the world of AWS, I decided to join the AWS CloudUp for her program, a fantastic community-based learning pathway for women worldwide with helps from AWS mentors. 👯‍♀️

My preparation

Exam Guide: I downloaded the exam guide provided by AWS, which offered valuable insights into the exam content and areas to focus my studies.
AWS Skill Builder: I completed the free AWS Skill Builder course and used it to practice with Official Practice Question Sets and Exam Prep Courses. I also used Notion for note-taking, especially for the mistakes I made on the questions.
AWS Cloud Practitioner Essentials: I highly recommend this course, which covers AWS Cloud concepts, services, security, architecture, pricing, and support through videos, demonstrations, and knowledge checks.
Labs: With the CloudUp for her program, I participated in workshop labs to get hands-on practices and attended Q&A sessions. I also signed up for a free-tier account to practice on AWS.
Documentation: As a developer, I've always found documentation to be incredibly helpful. I used Compare AWS Support Plans and AWS FAQs to solidify my knowledge from the Skill Builder.
Question Sets: Apart from the official sets, I tried LinkedIn Learning and Tutorial Dojo (both free) and found LinkedIn to be more challenging than the actual exam.

My Exam Experience

Scheduling the online exam was a breeze, with plenty of date and time slots available, including weekends. I scheduled my exam only a day before I felt I was ready to take the exam.

One thing I learned the hard way was the importance of checking in at least 30 minutes before the exam. After taking the pictures of my room and identity, I queued at least 10 minutes with other candidates for the proctor to check my exam room and identity. I only have my laptop on my desk, and no watch on my hands. Throughout the exam, I could flag questions for review or jot down comments, but toilet breaks or stand up weren't allowed, so I stayed seated the whole time. After the review stage, you’re given a survey for your exam experience.

Finally, with a mixture of nerves and excitement, I clicked "submit" and was overjoyed to see a "PASS" result. The next day, I received my exam score and a badge in my Credly account.

While AWS keeps exam content confidential, they do provide insights into areas where you can improve. So, if you're considering pursuing your Cloud Practitioner Certification, my advice is simple: go for it! Remember, even the smallest achievements can lead to something truly remarkable💪

Angular v17 Hydration Explained! 💻💦

jun — Fri, 24 Nov 2023 03:52:39 +0000

Ever wished your Angular app could load faster, ace SEO, and dodge UI glitches? 🚀🪄 That's where Angular Hydration swoops in! Picture it like sending your app for a spa day – all that server-side goodness now chilling on the client's turf, saving you from redoing DOM nodes.

What is Hydration?

Restores server-rendered apps on the client.
Reusing the DOM, preserving state, and transferring data from the server.

Why is it Important?

Boosts Performance: Reusing DOM nodes speeds up loading.
Enhances Core Web Vitals: Improves FID, LCP, and CLS.
Improves SEO: Ensures search engines get fully rendered content.
Prevents UI Issues: Avoids flicker and layout shift.

Enabling Hydration

Server-Side Rendering (SSR): Requires an SSR application.
Use provideClientHydration: In the main app component/module.
Bootstrapping: Include in both client and server providers.

Constraints

DOM Structure of server and client must match.
No Direct DOM Manipulation to keep things smooth.
Mismatches in DOM structure can cause errors.

Handling Errors

Use ngSkipHydration: Temporarily bypass issues caused by DOM differences or direct manipulation.
Skipping Hydration for Components

Skipping Hydration for Components

Use ngSkipHydration for components incompatible with hydration.
Useful for components with DOM manipulation issues.

Considerations

Internationalization (i18n): No support yet.
Third-Party Libraries: Some may need ngSkipHydration for compatibility.

And there you have it – a quick rundown of the essential facts to consider about Angular Hydration. Have you played around with Hydration yet? 😊

For more details, check out the Angular Documentation.

🚀 My ChatGPT Prompting Tips (with Frontend examples)

jun — Fri, 13 Oct 2023 03:46:50 +0000

No doubt, AI tools like ChatGPT and GitHub Copilot have revolutionized the way we approach coding. They're not just about saving time; they actually enhancing the whole developer experience(DX) more nicer. To make the most of this powerful tool, it's essential to know how to write effective prompts. In this tutorial, we'll delve into the best practices for frontend prompting with ChatGPT, with some specific examples. Let's get started! 😊

1. Be Clear and Specific

❌ "How do I center something?"
✅ "What's the best way to center a div element horizontally and vertically on a webpage?"

When crafting your prompt, be as clear and specific as possible. This helps ChatGPT understand your requirement and provide relevant information or code examples.

2. Specify Language and Context

❌ "Explain reduce"
✅ "Explain JavaScript's reduce() method, and include two simple code examples."

Try to provide context by specifying the programming language or technology you're working with. Also, consider your expertise level and project status to tailor the response effectively.

3. Break into Smaller Steps

✅ "Explain JavaScript's reduce() method to me as if I am a beginning developer just learning how to code. Provide an example of how I can use reduce() to calculate the total price of several items in a shopping cart."

Extension to the tip number two, break down a complex questions into smaller, actionable steps. This makes it easier for ChatGPT to provide a comprehensive answer.

4. Include Example Requests

❌ "How do I create a form?"
✅ "Your task is to create a form in JavaScript with one input that accepts a string and prints that string to the webpage in reverse on submit."

Including example requests helps ChatGPT understand precisely what you want to achieve and generates more accurate responses.

5. Request Relevant Details

❌ "Show me an example React component"
✅ "Create an example of React component that takes in at least one prop and demonstrates how to use hooks like useState and useEffect. The example should not be a typical 'Hello World' example like a counter or a greeting. Assume that I have already set up a React project."

Request specific details and your project status will help you receive a response tailored to your needs. Be explicit about your requirements to avoid generic answers.

6. Control Response Length

✅ Ask for steps: "Provide a brief 2-step explanation of creating a custom JavaScript event"

✅ Table: "Highlight the differences between React and Vue in a tabular format"

✅ Summarize with bullet points: "Please summarize in 3 bullet points why innerHTML should be avoided"

✅ Summarize as flow chart: "Use a flowchart to explain how to make a pull request on Github"

✅ Summarize as pseudo code: "Create pseudo code in the form of code comments describing how I can write a React component that displays the time in a user's local timezone."

We can control the length and formatting of responses by specifying your preferences. You can request concise answers, detailed explanations, or code snippets, depending on your requirements.

7. Role-Based Prompting

✅ "Act as a product owner to help me define crucial features for my app and write user stories."

✅ "Act as a software architect and help me determine which technologies to use for my web app."

✅ "Act as a senior engineer and advise me on best practices."

ChatGPT can acting different roles to assist you effectively, whether with project planning, technology decisions, or coding guidance.

8. Give Examples

✅ "Please write a function to total an array of numbers and return the value as a dollar amount:

Example input: [5, 40.5, 9, 45, 23, 50]
Example output: "$172.50"

Provide specific examples of th input and output results will helps ChatGPT provide precise code solutions to your request.

That's all! Remember that creating effective prompts is a skill that improves with practice. By following these best practices, we can unlock the full potential of ChatGPT and make your web development journey smoother and more productive. Feel free to comment on which one is most useful for you and happy coding! 🚀

Angular 15: Transitioning deprecated CanDeactivate() to Functional Guards

jun — Thu, 07 Sep 2023 22:25:42 +0000

As developers, we often find ourselves adapting to changes in the tools and frameworks we use. Recently, while working on my Angular project, I stumbled upon a significant shift in Angular 15: the deprecation of class-based route guards like CanDeactivate(). In their place, Angular has introduced functional guards, providing a more modern and flexible approach to managing route deactivation. In this article, I'll guide you through this transition and share how you can smoothly update your codebase. ✨

Understanding the Change

In previous Angular versions, we used the CanDeactivate() guard to handle route deactivation, implementing custom logic to determine whether a user could leave a particular route. However, Angular 15 introduces functional guards as the new way forward. This change aligns with Angular's mission to simplify and enhance the development experience.

Transitioning to Functional Guards

1) Create a Functional Guard: Start by creating a TypeScript function as your functional guard. This function should return true to allow deactivation or false to prevent it.

export const hasUnsavedChangesGuard: CanDeactivateFn<ComponentCanDeactivate> = (component: ComponentCanDeactivate): Observable<boolean> => {
   if (component.canDeactivate && component.canDeactivate()) {
      return true;
    }
   if (!component.confirm()) {
      return confirm('Are you sure you want to leave this page? If you do, any unsaved changes will be lost.');
    }
}

2) Implement the Functional Guard: In your routing configuration, specify the functional guard for a route.

const routes: Routes = [
  {
    path: 'my-component',
    component: MyComponent,
    canDeactivate: [hasUnsavedChangesGuard],
  },
];

Alternatively, you can use an injectable class as a functional guard by leveraging the inject function. This approach keeps your guard logic separate from your routing configuration, especially for the case you have your custom component such as Dialog component.

const routes: Routes = [
  {
    path: 'my-component',
    component: MyComponent,
    canDeactivate: [() => inject(hasUnsavedChangesGuard).canDeactivate()]
  },
];

Conclusion

By embracing this change in Angular 15, you'll find your route guard implementation becomes more streamlined and adaptable. For detailed examples and additional information, refer to the official Angular documentation.

Change in the development world is inevitable, and adapting to it is key to staying at the forefront of technology. As I worked through this transition in Angular 15, I found it not only improved the development experience but also reinforced the idea that growth and improvement are constants in the world of software development. Embrace these changes, and you'll continue to build better, more maintainable applications 😄🚀

5 quick ways to center a div with CSS

jun — Sat, 29 Oct 2022 04:35:41 +0000

Hello DEV community 👋 Centering div is one of the common problems encountered in front-end layout. Avoid long-windedness, here are five simple and common centering methods:

Using Flexbox
Using Grid
Using Position
Using Flex and Margin
Using Grid and Margin

That's it! 5 easy and quick ways to solve one of my most googled css problems in every situation. Welcome to comment if you know of any other way to center a div, cheers! 🦹‍♂️

Nevertheless, jun Coded in 2022

jun — Wed, 09 Mar 2022 03:27:45 +0000

Happy International Women's Day!✨💖👯

My biggest technical achievements are…

In a pandemic year, I'm celebrating my one-year anniversary of working fully remotely. I also started getting involved in designing and creating applications, using technologies I had never heard of before at every layer of the stack, which challenged me to think about projects from the start and make sure they were robust and testable.

Advocating for myself looks like…

Self-love first - From time to time I'd be feeling burnout from the work and social media. What I do is spending time and energy on things that truly matter to me and take a break from the screens.

I pledge to support women, non-binary folks, and other minorities in tech by…

Always the same as my previous #shecoded posts. Always be kind and support them in every possible way 🌻 You can be everything you are meant to be. All of you are super amazing!

I’m excited about…

To about to start my first ever - digital nomad journey. I'm excited about the challenge to travel and working in foreign countries. Also, an opportunity to start a van life and adapt the new lifestyle.

Thanks to DEV and GitHub has generously offered donations for #SheCoded posts! Lets us continue creating opportunities and supporting for women and girls in technology.

Some handy HTML tags can do to make things easier

jun — Sat, 11 Sep 2021 10:29:56 +0000

HTML (Hypertext Markup Language) is a standard markup language used to create web pages. Tags are like blocks to give special semantics meaning to the content and help browser rendering. Thus, they play a very important role in SEO(search engine optimization).

Although HTML tags is widely known and widely used, some of them have been long forgotten. In this article I’ll share some HTML tags that have helped me a lot when developing websites over the years 🎉

`<summary>` & `<details>`

The <summary> tag defines a visible heading for the <details> element. The heading can be clicked to view/hide the details.

The <details> tag is often used to create an accordion that the user can open and close.

`<dialog>`

The <dialog> tag defines a dialog box or other interactive components like alert, inspector, or subwindow.

`<time>`

The <time> tag defines a specific time/date. It does not render anything special on webpage but it's extremely helpful for better search engine results or custom features such as reminders.

`<datalist>`

The <datalist> tag is used to define the list of valid dropdown list for your various element and provide an "autocomplete" feature.

`<progress>`

The <progress> tag represents the completion progress of a task on a bar indicator.

`<small>`

The <small> tag defines smaller text like copyright or legal text. Although it may be perceived to violate the principle of separation between structure and presentation, but it's valid in HTML5. Therefore, please determining whether to use <small> or CSS your content accordingly.

I hope you find this helpful and don't forget to check on the cross-browser compatibility before adding more semantics to your HTML. Your webpages will become more user friendly and more machine-readable. Thank you 😊

Nevertheless, jun coded in 2021!

jun — Mon, 08 Mar 2021 07:23:52 +0000

Happy International Women's Day!✨💖👯

My most recent achievement was…

My dream goal. One of the reasons I work in tech is because it allows us to work remotely easily. Last year, I got my first full remote position - which is my third and current job.

I very appreciate the company value non-technical expertise and people skills just as highly as technical expertise. The job was challenging from the beginning but I've learned so much there. If I hadn't been given the opportunity, I wouldn't have all that valuable experience behind me.

Advocating for myself looks like…

The first would be allowing myself to take a break and rest. Next would be knowing I have a lot to learn and take it one step at a time. I've also learned to make sure I am comfortable with being uncomfortable.

My biggest goal is…

I am keen to help inspire women from non-tech backgrounds to get into tech. It was really encouraging for me to see women from all kinds of backgrounds who didn’t have a Computer Science degree like me to work in the tech industry. And I always believe there were transferable skills between each other.

My advice for allies to support underrepresented folks who code is...

Always be kind and support them in every possible way🌻 Be proud of what you achieved and learned in a time even if it is just a small thing.

I have grown so much as a woman and a developer and I am still working on it but despite everything, nevertheless, I coded.

Thanks to Dev.to, for the extra step of having someone reading the #shecoded posts and inspired other women through women's stories.

My Mac setup for work 👩‍💻

jun — Sun, 06 Dec 2020 07:43:18 +0000

This weekend I'm going to set up a new Macbook Pro 13' for work. 💻 Here are my current preferences for setting up a MacBook Pro.

 > System Preferences :

Keyboard
- Input sources - English - set to ABC instead of a specific country.
- Key repeat set to the fastest and delayed until repeat to the shortest.
- Shortcuts - Mission Control - overwrite command + Q to the Do Not Disturb on/off
Desktop & Screen Saver
- Screen Saver - Hot Corner - Set lock screen or sleep
Trackpad
- Point & Click - change the speed to the fastest
Disable Ask Siri
Dock
- Remove everything unnecessary application but leave some important like Finder and Trash
- Show recent applications in Dock
- Turn automatically hiding on
Finder - show path bar
Accessibility
- Pointer Control - Trackpad Options - Enable dragging - three-finger drag
- Double click speed to the fastest
- Scrolling speed to the fastest
Security and Privacy
- Allow apps downloaded from App Store and identified developers
- Turn the Firewall on

Cherry-pick some good stuff here you think will suit you.

Applications :

IDE :

I'm using VSCode with JetBrains Mono and following extensions:

Prettier
GitLens
ESLint
Bracket Pair Colorizer
Code Spell Checker
Emmet
Live Share

Terminal environments :

I'm using iTerm2 + Zsh + Spaceship theme with following setup:

autosuggestions
syntax highlighting
homebrew
git
node.js
SSH

Thanks for reading my mac setup article. I really hope this could help speed up your process or gave you some ideas for the next macOS setup. 🚀

I am always looking for ways to improve my efficiency, so if you use any tool that you find useful, feel free to comment on this post.🙂

Forem: jun

Stop Shipping Boring AI-Generated UIs

1.Origin UI

2.skiper/ui

3.Kibo UI

4.SHSF UI

5.Mvpblocks

6. tweakcn

The React Performance Rabbit Hole I Fell Into (And How I Climbed Out)

Better Performance = Better User Experience

The Silent Killer: Unnecessary Re-renders

Here's how I fought back

1. Identifying Performance Bottlenecks

2. Embracing Memoization Strategically

3. Function Definitions Matter More Than You Think

4. Leveraging DevTools

What's Working For You?

Discovering lesser-known features of Tailwind CSS

Aspect Ratio Utility

Preflight

File input buttons

Change radio/checkbox colors

Transition Utilities

With transition

Without transition

Truncating multi-line text

AWS Certified Cloud Practitioner: My Journey and Tips

My preparation

My Exam Experience

Angular v17 Hydration Explained! 💻💦

What is Hydration?

Why is it Important?

Enabling Hydration

Constraints

Handling Errors

Skipping Hydration for Components

Considerations

🚀 My ChatGPT Prompting Tips (with Frontend examples)

1. Be Clear and Specific

2. Specify Language and Context

3. Break into Smaller Steps

4. Include Example Requests

5. Request Relevant Details

6. Control Response Length

7. Role-Based Prompting

8. Give Examples

Angular 15: Transitioning deprecated CanDeactivate() to Functional Guards

Understanding the Change

Transitioning to Functional Guards

Conclusion

5 quick ways to center a div with CSS

Nevertheless, jun Coded in 2022

My biggest technical achievements are…

Advocating for myself looks like…

I pledge to support women, non-binary folks, and other minorities in tech by…

I’m excited about…

Some handy HTML tags can do to make things easier

<summary> & <details>

<dialog>

<time>

<datalist>

<progress>

<small>

Nevertheless, jun coded in 2021!

My most recent achievement was…

Advocating for myself looks like…

My biggest goal is…

My advice for allies to support underrepresented folks who code is...

My Mac setup for work 👩‍💻

 > System Preferences :

Applications :

IDE :

Terminal environments :

`<summary>` & `<details>`

`<dialog>`

`<time>`

`<datalist>`

`<progress>`

`<small>`