open-wc VS eleventy 🕚⚡️

npm init @open-wc@latest Need to install the following packages: @open-wc/[email protected] Ok to proceed? (y) y _.,,,,,,,,,._ .d'' ``b. Open Web Components Recommendations .p' Open `q. .d' Web Components `b. Start or upgrade your web component project with .d' `b. ease. All our recommendations at your fingertips. :: ................. :: `p. .q' `p. open-wc.org .q' `b. @openWc .d' `q.. ..,' See more details at https://open-wc.org/init/ '',,,,,,,,,,'' Note: you can exit any time with Ctrl+C or Esc ✔ What would you like to do today? › Scaffold a new project ✔ What would you like to scaffold? › Web Component ✔ What would you like to add? › Testing (web-test-runner) ✔ Would you like to use typescript? › Yes ✔ What is the tag name of your web component? … testing-components ./ ├── testing-components/ │ ├── .vscode/ │ │ └── extensions.json │ ├── demo/ │ │ └── index.html │ ├── src/ │ │ ├── index.ts │ │ ├── testing-components.ts │ │ └── TestingComponents.ts │ ├── test/ │ │ └── testing-components.test.ts │ ├── .editorconfig │ ├── .gitignore │ ├── LICENSE │ ├── package.json │ ├── README.md │ ├── tsconfig.json │ ├── web-dev-server.config.mjs │ └── web-test-runner.config.mjs ✔ Do you want to write this file structure to disk? › Yes Writing..... done ✔ Do you want to install dependencies? › Yes, with npm

Very much still a thing, https://open-wc.org/ is a good resource for examples and best practices.

I have this design system project for a company, I need to make web components and instead of using open-wc.org pre-built, I chose to go Vite.

Nice. We have data with meaning. Now let's create the presentation layer (aka the UI!) and then let's add interactivity to the UI, so we can have feedback when actually simulating an exam (aka the Frontend!). Since in ING we are advocates of Web Components, I always wanted to give this stack a try for side projects. I jumped right into open-wc.org and used the npm generator. Everything worked precisely as expected. It was a breeze since my Chapter is using lit every. single. day. So I could finally get some mileage myself, in writing lit. At work, as a Chapter Lead, I prefer to spend my time more effectively for the team, rather than coding new features by myself; my chapter does it better anyway (#proud).

I suggest following these best practices for creating a custom web element: https://open-wc.org/

Open Web Components is a great tool for accessing open-source web components and is very easy to set up with their quickstart guide and easy to understand documentation.

This application is one of many applications out there that are dipping their toes in the land of web components. Web components are still very new and ever-growing. While I have been developing on HAX-the-Web, I am also the Project Manager for HAXCamp 2022. < hax-camp > is an unconference dedicated to all things Web Components!This year's event is being student-run and we anticipate there being discussions about openwc, lit, performance, element composition, css, hax.psu, pedagogy, and design systems. If this work flow is something that you are interested in, I would encourage signing up for this event. It is much more than this, larger than you know and a way to connect with students, faculty, staff, and professional in the industry.

This post outlines the steps for migrating an existing BlogCFC blog to a JamStack, with a focus on using Eleventy.

I suggest you to try out eleventhy (https://www.11ty.dev/)

Quite simple to start, and a nice system to add some scripting and styles without the requirement of bringing in a framework.

A production flag enables you to run activities in dev or production such as minifying assets, showing draft posts, etc. There isn't a built-in flag or function that comes with eleventy (11ty) specifically for this. However we have this info at our fingertips.

I can't recommend Eleventy enough!

https://www.11ty.dev

I converted my WordPress blog to Eleventy 4 years ago and never looked back, it's been delightful!

https://www.joshcanhelp.com/taking-wordpress-to-eleventy/

It’s 2024, and you are about to start a new project. Do you reach for React, a framework you know and love or do you look at one of the other hot new frameworks like Astro, Enhance, 11ty, SvelteKit or gasp, plain vanilla Web Components?

The "dev" script is running the eleventy server in dev mode. The details of the script are not important for this discussion, but to round out the background here is an abbreviated version of my package.json:

Eleventy is a fast and powerful SSG that really shines when it comes to pure static site generation because it does not require the loading of a client-side JavaScript bundle in order to serve content.

The irony is using a JavaScript-based static site generator to make the site: https://www.11ty.dev

https://doublejosh.com/post/186193119278/metalsmithjs-is-sti...

Then two years ago I needed a more robust SSR system based on React, so I went with GatsbyJS. It's insanely mature and intuitive, but as we all know that community and business is now drying up too. But the framework is still great.

Now everyone sings the praises of NextJS, which can be used for SSR but is intended for applications and active server endpoints. But more complexity doesn't mean better.

I'm keen to try other simple frameworks when the result is a static site. I may give https://www.11ty.dev a shot.

11ty is a lightweight static site generator. I chopped up my HTML and used the 11ty starter template called eleventy-base-blog as the structural foundation for the site.