mapcn Brings Shadcn-Style Copy-Own Philosophy to React Map Components

·1 views

A new open-source tool called mapcn offers production-ready, customizable map components for React, built on MapLibre GL and styled with Tailwind CSS. Following the same 'copy, don't install' approach popularized by shadcn/ui, developers copy the component source directly into their projects rather than adding a black-box dependency. The library ships with free CARTO basemap tiles by default, requiring no API key, and supports automatic light and dark theme switching. Developers can swap in tiles from providers like OpenStreetMap or MapTiler and retain full access to the underlying MapLibre instance for advanced control. mapcn integrates with existing shadcn/ui projects via a single command and includes full TypeScript support.

Read the full story at DEV Community

This is an AI-generated summary. ShortSingh links to the original source for the complete article.

Discussion (0)

Docker advanced guide: multi-stage builds cut image size and boost CI/CD security

A technical guide published on DEV Community concludes a Docker series by addressing the gap between local development and production-ready containers. The article explains how multi-stage builds allow Dockerfiles to use multiple FROM blocks, so only compiled output and runtime dependencies reach the final image — reducing size from over 1 GB to under 150 MB in typical cases. For compiled languages like Go, the final image can be built on a scratch base, containing only a static binary with no shell or utilities, significantly shrinking the attack surface. The guide also highlights the security risk of containers running as root by default, advocating for explicit non-root user configuration in Dockerfiles. These practices are presented as foundational steps before integrating Docker images into a CI/CD pipeline.

0 comments Read more at DEV Community

ProgrammingDEV Community ·

Step-by-Step Guide to Building a Playwright BDD Test Framework from Scratch

A structured guide outlines how to set up a hybrid BDD test automation framework using Playwright, Cucumber, and JavaScript. The setup involves installing dependencies and creating a core folder hierarchy covering feature files, step definitions, page objects, utilities, and reports. Key configuration files include package.json, playwright.config.js, and cucumber.config.js, alongside page models and hook scripts. Test data is primarily managed through JSON files, with optional Excel support for tabular inputs, and environment variables are stored in a local .env file. Separate npm commands allow developers to run API, UI, or full test suites independently.

0 comments Read more at DEV Community

ProgrammingDEV Community ·

Practical Strategies to Reduce Flaky Tests in CI/CD Pipelines

Flaky tests undermine confidence in CI/CD pipelines, slow down releases, and drain engineering resources. Experts recommend keeping auto-retries to a maximum of one or two attempts and using them only for transient network issues, while ensuring every test is stateless and cleans up shared resources. Stable selectors such as data-test-id attributes are preferred over fragile CSS or XPath locators, and parallelism should start conservatively to prevent resource exhaustion on runner nodes. Teams are advised to define flakiness thresholds over a rolling seven-day window, escalating to release blocks when intermittent failure rates exceed five percent. Tracking retry counts and flaky test flags through dashboards and reporting tools like Allure helps teams catch degrading tests before they impact deployments.

0 comments Read more at DEV Community

ProgrammingDEV Community ·

How to Structure a Playwright BDD Framework for Web, API, and Salesforce Testing

A well-organized folder structure is essential for scaling test automation across multiple platforms and teams. A recommended Playwright BDD framework separates concerns into distinct directories for features, step definitions, page objects, utilities, and test data. The layout supports Web UI, API, and Salesforce test automation while keeping components decoupled and easy to maintain. Configuration is managed through dedicated files such as playwright.config.js and cucumber.config.js, alongside a central package.json. Developers are advised to exclude node_modules, generated reports, logs, and dynamically created Excel files from version control via a .gitignore file.

0 comments Read more at DEV Community