open-wc
nx
Our great sponsors
open-wc | nx | |
---|---|---|
18 | 341 | |
2,194 | 21,679 | |
1.4% | 3.5% | |
8.3 | 10.0 | |
4 days ago | 2 days ago | |
JavaScript | TypeScript | |
MIT License | MIT License |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
open-wc
-
Testing Web Components with @web/test-runner
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
-
How my Frontend skills helped me pass my sailing test
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).
- Ask HN: What's is your go to toolset for simple front end development?
-
Start Using Web Components with open-wc
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.
-
Getting started with web components
We'll be using open-wc in this post. It simplifies the process of developing web components by providing guides, tools, and libraries. Check out the open-wc website to learn more.
-
Monorepos and Workspaces - an introduction
Example 1 - Storybook: https://github.com/storybookjs/storybook Example 2 - OpenWC: https://github.com/open-wc/open-wc Example 3 - Lit: https://github.com/lit/lit.dev
-
If you're writing in Markdown, I recommend Rocket, an SSG that uses WebComponents!
Rocket is an SSG that allows seamless integration of Markdown and WebComponents. There is a project to support the development of web standard technologies called Modern Web, and rocket is a subproject of that project. Other sub-projects are test runner and development server, modern-web for development server, and open-wc for WebComponents development, testing, and linter.
-
Introducing: Custom Elements Manifest
It's unlikely that developers will write their custom-elements.json file by hand. So at Open Web Components, we worked hard on a tool that does it for you!
-
We Use Web Components at GitHub
Check out https://open-wc.org/
Especially their code examples
-
Ask HN: Offering bounty for bugs in an open source project – or?
https://github.com/open-wc/open-wc
nx
-
Things I learned while building projects with NX
Nx
- Episode 24/09: Testing without TestBed, SSR & Hydration
-
Announcing AnalogJS 1.0 🚀
We are looking for companies to partner with on the Analog project to support development of the project. Thanks to Snyder Technologies for being an early adopter and promoter of Analog, Nx for joining us as a sponsor, House of Angular, and many other backers of the project.
-
Storybook 8
Additionally, thank you to all our community launch partners across the frontend ecosystem for helping us bring Storybook 8 to the world! Thanks to Chromatic, Figma, ViteConf, Omlet, DivRiots, story.to.design, StackBlitz, UXpin, Nx, Mock Service Worker, Anima, Zeplin, zeroheight, kickstartDS, and Kendo UI.
-
⏰ It’s time to talk about Import Map, Micro Frontend, and Nx Monorepo
The advent of esbuild, the native support for ES Modules in browsers, the widespread adoption of import map, the emergence of tools like Native Federation, and the Nx ecosystem all combine to forge a flexible and well-maintained Micro Frontend Architecture.
-
👑 Top Open Source Projects of 2023 🚀
Nx is a set of DevTools to make it simpler for software dev teams to work within a monorepo, which is a version-controlled code repository that contains several projects. Think of Nx as a VSCode of build tools.
-
Ask HN: Cleanest way to manage Windows OS?
On Nix, you can declare everything necessary to build a package so you don't need to install packages on your system by yourself. I don't want to put myself into a dependency hell anymore. But I have an idea for this: using docker. Docker separates developing environment from host's system so there would be no pre-installed dependencies. It would be good and I'm considering learning docker. Next thing I'm considering is to use something like [nx](https://nx.dev/). If you have better ideas, please tell me.
This is pretty much everything I need for my next Windows environment. Every small tips or tricks are welcome.
-
Unit Testing Expo Apps With Jest
In my latest blog, I successfully navigated through the steps of setting up an Expo Monorepo with Nx. The next challenge? Testing! This blog dives into:
-
Implicit Dependencies Management with Nx: A Practical Guide through Real-World Case Studies
We can see an implicit dependency between coffee-dealer and coffee-dealer-e2e, created by default by the NestJS generator plugin, and no dependency between coffee-dealer and coffee-dealer-cli. There is no task dependency between the coffee-dealer-e2e:e2e task and the coffee-dealer:serve task, meaning that the end-to-end tests could run before the application is ready. It is the same for the coffee-dealer-cli:run task, which could run before the application's API is available. With Nx, it is currently impossible to declare a task dependency for a long-running task, such as serve, so we must find an alternative solution. See related issues: nx issue #5570 and nx issue #3748.
-
State Management Nx React Native/Expo Apps with TanStack Query and Redux
This workspace is created using @nx/expo (Nx and Expo).
What are some alternatives?
turborepo - Incremental bundler and build system optimized for JavaScript and TypeScript, written in Rust – including Turborepo and Turbopack. [Moved to: https://github.com/vercel/turbo]
single-spa - The router for easy microfrontends
vite - Next generation frontend tooling. It's fast!
lerna - :dragon: Lerna is a fast, modern build system for managing and publishing multiple JavaScript/TypeScript packages from the same repository.
create-react-app - Set up a modern web app by running one command.
pnpm - Fast, disk space efficient package manager
Bazel - a fast, scalable, multi-language and extensible build system
changesets - 🦋 A way to manage your versioning and changelogs with a focus on monorepos
Nest - A progressive Node.js framework for building efficient, scalable, and enterprise-grade server-side applications with TypeScript/JavaScript 🚀
Playwright - Playwright is a framework for Web Testing and Automation. It allows testing Chromium, Firefox and WebKit with a single API.
nx-go - 🍈 Nx plugin to use Go in a Nx Workspace
Bit - A build system for development of composable software.