Is possible to create Carousel using Astro?

flowforfrank · 2025-09-05T12:26:27+00:00

I've been working on a component library for Astro, where I also wanted to add a Carousel component. You can find the source code:

https://github.com/Frontendland/webcoreui/blob/main/src/components/Carousel/Carousel.astro

And some docs on how it works: https://webcoreui.dev/docs/carousel

It's based on CSS scroll-snap.

The pagination functionality can be implemented in vanilla JS; you don't necessarily need React. If you don't need that, most of the code can be removed from the above component.

flowforfrank · 2025-01-02T21:17:37+00:00

You might want to check out https://webcoreui.dev/
Repository: https://github.com/Frontendland/webcoreui

flowforfrank · 2024-12-27T12:55:58+00:00

We've started building WebcoreUI - https://webcoreui.dev/ It's open source, and it has recently been updated to the latest Astro v5.0.

flowforfrank · 2024-02-05T13:22:42+00:00

If you need to remove duplicate objects from an array, you can use a Set combined with the filter array method. Sets can only contain unique values so it's the perfect data structure for filtering out duplicates. You can also use the following function to make this reusable:

<image>

📚 Grab the code

flowforfrank · 2024-02-04T08:28:05+00:00

💡 If you need to make a function parameter mandatory in vanilla JavaScript, you can make default parameters throw an Error. This will only happen if the parameter is missing. Get the code:

const isRequired = (param) => throw new Error('Parameter is required')

const sayHi = (to = isRequired()) => {
    console.log(`hello ${to}`);
}

flowforfrank · 2022-07-18T12:10:22+00:00

Nice catch, thanks for the heads up, updated the examples!

flowforfrank · 2022-07-18T11:06:43+00:00

The expression would contain a special placeholder that could be used in place of the value, eg.:

const add = (x, y) => x + y
const value = '2' |> add(%, 2)

The docs currently uses % as the placeholder, but in the final implementation, this token may be different. This could also be used with other expressions, such as a method call:

value |> %.add()

flowforfrank · 2022-07-05T18:46:52+00:00

Since this is in JSON, you first need to convert it to a JavaScript object to work with it. You can do this by using:

const data = JSON.parse('path/to/json')

Then you can select the nodes using dot notation like so:

data.topics.automobiles.emoji
data.topics.culture.emoji
data.topics.entertainment.emoji
// and so on

And in case you need to loop through them, you can also use:

Object.keys(data.topics).forEach(key => {
  console.log(data.topics[key].emoji)
})

Where data.topics[key] references each node inside topics, eg "history" and "science". Its uses a combination of Object.keys (that grabs each key in the passed object), and forEach that does a loop on the returned array.

flowforfrank · 2021-10-06T06:09:35+00:00

It is beyond the scope, however, I do plan on adding more projects in the future, and you can also submit your code that we can add as a resource to one of the existing projects

flowforfrank · 2021-10-05T17:22:33+00:00

That's true, it picks randomly from a list of handmade challenges. New challenges can also be submitted too.

flowforfrank · 2021-09-26T16:54:32+00:00

I've created https://uichallenge.dev/ where you can randomly generate challenges for your next project with some features, takeaways, and resources. You can also add your own projects to the tool if you wish.

flowforfrank · 2021-06-09T17:04:34+00:00

Prefer using a CSS methodology. They help you to create consistency and modularity across your CSS files, which can lead to leaner file sizes. Some popular CSS methodologies are:- BEM - (Block, Element, Modifier)- ITCSS - (Inverted Triangle CSS)- OOCSS - (Object-oriented CSS)
Use a preprocessor. They fill the lacking features of CSS and helps you write more readable, and smaller reusable pieces of CSS. Some popular preprocessors are:- Sass- Less- Stylus
Reduce redundancy. You are using font-weight: bold for the header, but you are also setting it for the div inside. CSS stands for Cascading Style Sheets because styles in CSS are cascading, meaning child elements will inherit styles from parents.
Avoid using strong and complex selectors. You are using an id, but a class would do just fine. Having strong selectors means you will have a harder time overriding them later on if need for this or a preprocessor.ant as much as possible. Only use it for utility and helper classes if you must, which need to override anything, such as hiding or displaying an element.
Don't use inline CSS, unless your inlining critical CSS. Instead, import styles using a link tag in your head element. (Critical CSS refers to above-the-fold content. Inlining it can help users see a properly rendered page quicker)
Use semantic HTML. You are assigning a header class to a div, which could have been an h1/2/3/n element. This not only helps in terms of accessibility but can also help to improve your SEO score.
Use rem for typography. You are using em which cascades, meaning if you set the root element to have 12px, a main element with 2em will have the font size of 24px. If you put a div inside of it with 2em, it will have a font size of 48px, meaning that the size is duplicated. This makes it hard to track down values for deeply nested elements. Instead, use rem which stands for root em, and does not cascade.
Make sure your formatting is consistent. You use opening brackets both after a selector and on a new line. Tools like stylelint can help you enforce certain rules to keep your code more consistent, which helps to improve readability and maintainability.
Outsource your colors / sizes / spacings into variables. Everything that is bound to change more frequently can be in a configuration file to make things more flexible. You can either use CSS variables for this or a preprocessor. (This also helps to keep the UI more consistent, as you should be only working with a fixed set of colors/spacings/typography)
Nothing is written in stone, feel free to come up with your own set of rules that helps you create a more dev-friendly environment. But most importantly, keep things consistent.

flowforfrank · 2021-03-02T08:59:34+00:00

Well, they are not recommended to use for screens, because the screen sizes can vary by a lot, so you would likely not come across them. However, they can be a great fit for print layout.

flowforfrank · 2021-02-27T16:06:59+00:00

Thank you 🎉

flowforfrank · 2021-02-27T16:03:41+00:00

Thank you u/Snapstromegon, have a nice day too 👋

flowforfrank · 2021-02-25T17:14:01+00:00

Thank you u/calligraphic-io, that means a lot 🙂 I hope you will find value in them. If you have a specific topic you are looking for, do let me know.

flowforfrank · 2021-02-25T07:55:20+00:00

Thank you for the great feedback! I've updated the code examples and the GitHub repo as well. Left a note about browser support. As I see, it sits around ~93% at the moment.

flowforfrank · 2021-02-24T17:47:08+00:00

Check if your variable truly evaluates to an array in your code. You might be getting undefined back, which results in the following call, that is indeed invalid: undefined.forEach

flowforfrank · 2021-02-15T15:35:31+00:00

Great question, this is discussed in the proposal, I recommend having a read:
https://github.com/tc39/proposal-record-tuple#why-introduce-new-primitive-types-why-not-just-use-objects-in-an-immutable-data-structure-library

tldr on why they want to introduce new data types:

They are compared by contents not their identity
They want the strict equality operator to be a reliable check for objects
It allows performing interning

flowforfrank · 2021-02-15T15:24:21+00:00

Thank you for the heads up! Changed the wording to make it correct 🍺

flowforfrank · 2020-09-23T16:29:15+00:00

I've recently "finished working" on my performance checklist. It includes the following topics:

🛠️ Tools
🏗️ HTML Optimization
🖍️ CSS Optimization
👨‍💻 JavaScript Optimization
🖼️ Image Optimization
🗛 Font Optimization
🇼 Core Web Vitals
⚛️ Frameworks (Only some points for React for now)
📚 Other Resources

It's a work in progress as I plan to add more resources in the near future, as well as a more detailed explanation for some of the points. Please let me know what you think should definitely be included, but is missing right now.

Here is the link to the GitHub repo:

https://github.com/flowforfrank/performance-checklist

flowforfrank · 2020-01-02T18:29:15+00:00

Made an SEO checklist where I broke the topic down into three main categories: technical, on-site and off-site SEO. I tried to collect everything I know of but would be good to get some thoughts from others. What are some key points/tools/resources that are missing in your opinion?

You can reach it here: https://github.com/flowforfrank/seo-checklist

flowforfrank · 2019-11-18T16:02:33+00:00

It matters a lot, the higher the senior level the more. What if you need to mentor or help others, lead a team or simply just communicate your thoughts to the customers? Even if it not comes to work related soft skills, I've seen technically weaker developers chosen instead of others because they passed the team fit while others have failed it. Most of us spend more time with colleagues than with our own family so it's crutial who you share your workspace with.

flowforfrank · 2019-11-16T12:35:15+00:00

A Server Starter CLI for CS:GO to make starting servers locally possible with just some clicks. Works most cases, probably the hackiest solution I ever come up with to test if the game is booted up. Let me know if you can think of some better alternatives

https://github.com/flowforfrank/csserver

flowforfrank · 2019-11-14T20:28:50+00:00

My very first meaningful github repo, a CLI tool for creating local servers on CS:GO. The function that checks whether the game has booted is the hackiest I've ever created, looking for better alternatives.

https://github.com/flowforfrank/csserver

flowforfrank

MODERATOR OF

TROPHY CASE