# Boilerplate Published articles for Boilerplate. This is one page of public article previews, not the complete archive. Follow Next page to continue. Summaries are not the original full articles. ## Consuming SKIE Flows in SwiftUI - Gustavo Fão Valvassori DevFeed: [Consuming SKIE Flows in SwiftUI - Gustavo Fão Valvassori]() Original publisher: [Read original article]() Published: 2026-08-29T00:00:00Z Content type: tutorial Language: en Sources: [Touchlab | Enterprise Mobile Innovation & Development]() Topics: [SwiftUI](), [Kotlin](), [Swift](), [Extension]() Tags: [boilerplate](), [community](), [extensions](), [interop](), [kmp](), [kotlin](), [kotlin-multiplatform](), [libraries](), [open-source](), [skie](), [swiftui]() ### AI overview This tutorial explains how to consume Kotlin Flows in SwiftUI using SKIE. It covers enabling SKIE extensions in Gradle and collecting StateFlow values through an async collect approach, a modifier, or a view wrapper to reduce repetitive UI-layer code. ### Source excerpt SKIE already makes the interop between Kotlin and Swift smooth, but SwiftUI adds a layer of complexity. We've included a series of extensions in SKIE to enable easy KMP usage from SwiftUI ## Build a directory listing website with Next.js, Supabase, and Stripe DevFeed: [Build a directory listing website with Next.js, Supabase, and Stripe]() Original publisher: [Read original article]() Author: iHateReading Published: 2026-07-10T05:43:02Z Content type: tutorial Language: en Sources: [iHateReading]() Topics: [Next.js](), [stripe](), [Supabase]() Tags: [backend](), [blockchain](), [boilerplate](), [build-a-directory-listing-website-that-earns-online](), [building](), [coding](), [development](), [directory](), [frontend](), [ihatereading](), [javascript](), [nextjs](), [node-js](), [product](), [programming](), [react](), [starterkit](), [stripe](), [tools](), [tools-directory-boilerplate-starterkit](), [typescript](), [web-development]() ### AI overview A starter kit for building a directory listing website with Next.js, Supabase, and Stripe. ### Source excerpt A starter kit to quickly make your own directory listing website using Nextjs, Supabase and Stripe ## How AI-Assisted Development Uses Reviewed Design Documents and Extensive Testing DevFeed: [How AI-Assisted Development Uses Reviewed Design Documents and Extensive Testing]() Original publisher: [Read original article]() Author: Brian Jenney Published: 2026-05-30T17:42:50Z Content type: article Language: en Sources: [Brian Jenney]() Topics: [Artificial Intelligence](), [Code](), [Testing](), [Documentation](), [Kubernetes](), [Terraform](), [Mocking](), [Boilerplate](), [GitHub API](), [Figma]() Tags: [ai](), [api](), [boilerplate](), [code](), [documentation](), [figma](), [github](), [kubernetes](), [mocking](), [terraform](), [testing]() ### AI overview The author describes an AI-assisted development workflow in which reviewed, versioned design documents provide context for coding agents. Agents handle implementation and testing boilerplate, while developers decide expected behavior and test coverage. The author connects this process with frequent deployments and confidence in changes. ### Source excerpt AI writes basically all of my code now. ## I Built a SaaS Starter Kit, So You Don't Have to Waste 4 Weeks on Setup DevFeed: [I Built a SaaS Starter Kit, So You Don't Have to Waste 4 Weeks on Setup]() Original publisher: [Read original article]() Author: iHateReading Published: 2026-04-13T16:30:38Z Content type: article Language: en Sources: [iHateReading]() Topics: [Software as a service](), [implementation]() Tags: [auth](), [backend](), [blockchain](), [boilerplate](), [buildsaas](), [buildsaas-starterkit-boilerplate-saas](), [coding](), [development](), [frontend](), [i-built-a-saas-starter-kit](), [ihatereading](), [javascript](), [node-js](), [payments](), [product](), [programming](), [react](), [saas](), [setup](), [so-you-dont-have-to-waste-4-weeks-on-setup](), [starterkit](), [typescript](), [web-development]() ### AI overview The article presents BuildSAAS as a SaaS starter kit covering setup areas such as authentication, payments, and email. ### Source excerpt Every SaaS founder wastes the first month on auth, payments, and emails. BuildSAAS skips all of that. ## Angular Signal Forms: Creating Forms, Binding Fields, and Validation DevFeed: [Angular Signal Forms: Creating Forms, Binding Fields, and Validation]() Original publisher: [Read original article]() Author: Duncan Faulkner Published: 2026-01-19T12:39:14Z Content type: tutorial Language: en Sources: [Daniel Glejzner]() Topics: [Angular](), [Forms](), [angular material](), [Framework]() Tags: [angular](), [angular-material](), [boilerplate](), [experimental](), [forms](), [reactive-forms](), [validation]() ### AI overview This tutorial introduces Angular Signal Forms, an experimental API intended for non-production applications. It explains how to create forms from a model, bind fields to inputs, simplify custom controls, and apply validation, while noting that the API may change. ### Source excerpt Experimental - This is intended for use in non-production applications, as the API can change (without notice) as it did with 21.0.0-next.8 where Control was renamed to Field. Signal Forms is one of the most talked-about features to be added to the Angular framework, and ## Mix Compose Multiplatform with native iOS UI using Compose Swift Bridge - Gabriel Souza DevFeed: [Mix Compose Multiplatform with native iOS UI using Compose Swift Bridge - Gabriel Souza]() Original publisher: [Read original article]() Published: 2024-11-06T00:00:00Z Content type: release Language: en Sources: [Touchlab | Enterprise Mobile Innovation & Development]() Topics: [compose-multiplatform](), [iOS](), [Kotlin Multiplatform](), [Code generation](), [interoperability](), [Mobile]() Tags: [boilerplate](), [code-generation](), [compose-multiplatform](), [experimental](), [interop](), [ios](), [kotlin-multiplatform](), [multiplatform](), [swift]() ### AI overview Compose Swift Bridge is an experimental tool for Compose Multiplatform that automates integration between Compose UI and native iOS SwiftUI views. It generates Kotlin and Swift code from expected composable functions and supports state management through SKIE's Sub Plugin API. ### Source excerpt Compose Multiplatform has a critical unique feature. On iOS, you can mix Compose UI with native iOS UI. This is all enabled by the direct interop of Kotlin Multiplatform. That capability is amazing for mobile development. However, the actual process of wiring these two requires a fair bit of boilerplate. We've launch Compose Swift Bridge to automate that. ## Kotlin 1.9.20: Streamlining Source Sets in Multiplatform Project - Jigar Brahmbhatt DevFeed: [Kotlin 1.9.20: Streamlining Source Sets in Multiplatform Project - Jigar Brahmbhatt]() Original publisher: [Read original article]() Published: 2024-02-01T00:00:00Z Content type: article Language: en Sources: [Touchlab | Enterprise Mobile Innovation & Development]() Topics: [Kotlin](), [Kotlin Multiplatform](), [multiplatform](), [gradle-plugin](), [code-completion](), [Code](), [Development]() Tags: [boilerplate](), [code-completion](), [development](), [gradle](), [gradle-plugin](), [kotlin](), [kotlin-multiplatform](), [multiplatform](), [new-features]() ### AI overview This article explains how Kotlin 1.9.20 improves Kotlin Multiplatform source set configuration. It covers the default source set hierarchy template, simplified iOS target setup, custom source sets, manual template application, and enhanced IDE code completion. ### Source excerpt Explore how Kotlin 1.9.20's new features significantly enhance the experience of setting up target source sets ## MLIR -- Using Tablegen for Passes DevFeed: [MLIR -- Using Tablegen for Passes]() Original publisher: [Read original article]() Published: 2023-08-10T14:41:45Z Content type: tutorial Language: en Sources: [Jeremy Kun]() Topics: [Code generation](), [Code](), [Compiler](), [C++]() Tags: [boilerplate](), [c-plus-plus](), [code-generation](), [compiler](), [compilers](), [define](), [endif](), [fhe](), [ifdef](), [include](), [llvm](), [mathematics](), [mlir](), [programming](), [tablegen](), [undef]() ### AI overview This article explains how MLIR developers can use TableGen to define passes and generate boilerplate code, headers, documentation, and registration hooks. It also discusses the need to understand the generated C++ code and the tool's limited diagnostic information. ### Source excerpt Table of Contents In the last article in this series, we defined some custom lowering passes that modified an MLIR program. Notably, we accomplished that by implementing the required interfaces of the MLIR API directly. This is not the way that most MLIR developers work. Instead, they use a code generation tool called tablegen to generate boilerplate for them, and then only add the implementation methods that are custom to their work. ## Consuming flows safely in Jetpack Compose DevFeed: [Consuming flows safely in Jetpack Compose]() Original publisher: [Read original article]() Author: Manuel Vivo Published: 2022-08-10T00:00:00Z Content type: tutorial Language: en Sources: [Manuel Vivo .dev]() Topics: [Jetpack Compose](), [API](), [Android](), [ui](), [function](), [implementation](), [Boilerplate](), [now-in-android]() Tags: [api](), [architecture](), [boilerplate](), [compose](), [flow](), [implementation](), [jetpack](), [jetpack-compose](), [lifecycle](), [now-in-android](), [stateflow](), [ui](), [viewmodel]() ### AI overview This tutorial explains how to use collectAsStateWithLifecycle in Jetpack Compose to collect Flow and StateFlow values from UI code in a lifecycle-aware way. It describes how collection follows the app lifecycle, stops by default when the app is in the background, and helps avoid unnecessary resource usage. The API is identified as alpha and requires opting in to its annotation. ### Source excerpt Use the collectAsStateWithLifecycle API to collect flows in a lifecycle-aware manner from your UI. ## Keen: a minimal npm package boilerplate using TypeScript and esbuild DevFeed: [Keen: a minimal npm package boilerplate using TypeScript and esbuild]() Original publisher: [Read original article]() Author: Stanko Published: 2022-06-20T00:00:00Z Content type: tutorial Language: en Sources: [Stanko Tadić]() Topics: [Boilerplate](), [npm packages](), [TypeScript](), [CommonJS]() Tags: [boilerplate](), [commonjs](), [npm-packages](), [typescript]() ### AI overview Keen is a minimal, opinionated npm package boilerplate that uses esbuild and TypeScript to provide local development, a demo page, ESM and CommonJS builds, and type definitions with two dependencies. ### Source excerpt As someone who maintains a couple of npm packages, I got frustrated by all of the notifications about security issues in my dev dependencies. In 99.99% I wasn't even using the vulnerable code, and usually it would be buried deep in the dependency tree. Therefore, I decided to revisit and simplify my workflow. These were the main things I wanted to have: Use TypeScript and generate type definitions Generate both ESM and CJS modules Reduce the number of dev dependencies Have an easy way to develop and deploy a demo page Less dependencies makes maintenance easier and code is less prone to the security issues. Keen # So without further ado I present you keen, my npm package boilerplate. It does all of the things mentioned above with only two dependencies, esbuild and typescript. These are all of the keen dependencies. esbuild handles local development and builds a demo page. TypeScript takes care of building ESM and CJS modules as well as type definitions. Disclaimer # Keen is minimal and opinionated on purpose, and it might not fit your workflow. If you want something more robust and don't mind having more dependencies, check tools like tsup or unbuild. ESM and CJS modules # It helps your users to have both types of modules available. The main blocker is that you can't use ESM packages in CJS. That's why I have two builds which are using different TypeScript configurations. Both config files extend tsconfig-base.json and they just define the appropriate module type and transpile target: { "extends": "./tsconfig-base.json", "compilerOptions": { "module": "ES2020", "outDir": "dist/esm", "target": "ES2015" } } Show tsconfig-esm.jsonHide tsconfig-esm.json { "extends": "./tsconfig-base.json", "compilerOptions": { "module": "commonjs", "outDir": "dist/cjs", "target": "ES2015" } } Show tsconfig-cjs.jsonHide tsconfig-cjs.json I won't go into more details, but there are a couple of other things I had to setup. The code I ended up using is heavily based on these two articles. If ## Fun with Compose: Bad UI in a Great Framework - Touchlab DevFeed: [Fun with Compose: Bad UI in a Great Framework - Touchlab]() Original publisher: [Read original article]() Published: 2021-08-04T03:23:44Z Content type: article Language: en Sources: [Touchlab | Enterprise Mobile Innovation & Development]() Topics: [Compose](), [Jetpack Compose](), [ui](), [Kotlin](), [Boilerplate]() Tags: [android](), [animations](), [boilerplate](), [compose](), [jetpack-compose](), [kotlin](), [livedata](), [recomposition](), [state](), [ui]() ### AI overview An exploration of Jetpack Compose that builds deliberately poor volume-control interfaces and reflects on the framework's development experience. The article highlights concise UI code, custom animations, reduced boilerplate, and lessons about state, mutation, and recomposition. ### Source excerpt To celebrate Jetpack Compose finally hitting 1.0, I decided to bring back an old reddit trend of creating the absolute worst volume control UI possible. ## Starting a TypeScript Project in 2021 DevFeed: [Starting a TypeScript Project in 2021]() Original publisher: [Read original article]() Author: Chris Hager Published: 2021-04-15T00:00:00Z Content type: tutorial Language: en Sources: [Chris Hager]() Topics: [TypeScript](), [Testing](), [Jest](), [CI/CD](), [npm](), [Documentation](), [GitHub Actions](), [GitLab]() Tags: [api-documentation](), [boilerplate](), [browser](), [es6](), [esbuild](), [github-actions](), [gitlab](), [javascript](), [jest](), [node-js](), [npm](), [project](), [setup](), [template](), [testing](), [typescript]() ### AI overview A practical guide to starting a TypeScript 4 project with modern tooling, covering project setup, esbuild bundling, linting, Jest testing, npm publishing, continuous integration, and automatic API documentation. ### Source excerpt This is a guide for starting a TypeScript project in 2021 with modern tooling. TypeScript 4 Optionally esbuild to bundle for browsers (and Node.js) Linting with typescript-eslint (tslint is deprecated) Testing with Jest (and ts-jest) Publishing a package to npm Continuous integration (GitHub Actions / GitLab CI) Automatic API documentation with TypeDoc ## Starting a TypeScript Project in 2021 DevFeed: [Starting a TypeScript Project in 2021]() Original publisher: [Read original article]() Author: Chris Hager Published: 2021-03-24T00:00:00Z Content type: tutorial Language: en Sources: [Chris Hager]() Topics: [TypeScript](), [Node.js](), [Jest](), [CI/CD](), [npm](), [Compiler](), [JavaScript]() Tags: [boilerplate](), [browser](), [deprecated](), [es6](), [esbuild](), [eslint](), [github](), [gitlab-ci](), [javascript](), [jest](), [node-js](), [npm](), [project](), [setup](), [template](), [typescript]() ### AI overview A practical guide to starting a TypeScript project with modern tooling, covering project setup, linting, Jest testing, esbuild bundling, npm publishing, continuous integration, and automatic API documentation. ### Source excerpt Moved to /2021/04/starting-a-typescript-project-in-2021/ ## Deprecating Marvin DevFeed: [Deprecating Marvin]() Original publisher: [Read original article]() Author: Stanko Published: 2020-09-16T00:00:00Z Content type: opinion Language: en Sources: [Stanko Tadić]() Topics: [Boilerplate](), [React](), [repo](), [maintenance]() Tags: [boilerplate](), [maintenance](), [react](), [repo](), [software]() ### AI overview The author announces the deprecation of Marvin, a React project boilerplate created for personal needs that later became an internal project and was used by thousands of people. The repository will remain available, but further improvements and maintenance will stop because the evolving React ecosystem made maintaining a single boilerplate unproductive. ### Source excerpt It is funny, I would never say I would be sad to deprecate a software project. Especially a project boilerplate. But I just merged the deprecation notice, and I do feel down a little. I created Marvin about four years ago for my own needs. Since then it grew, became internal project at Work&CoFun fact, our website is made on top of Marvin. and was used by thousands of people. Why? # When Marvin was created React landscape was looking a lot different than today. The ecosystem continues to relentlessly evolve and maintaining a single boilerplate to capture all these possibilities has become unproductive. The repo will stay available, but we are stopping further improvements and maintenance. Thank you! # A big thank you to everyone who used and supported Marvin! ## 10 Reasons Why I Recommend Svelte To Every New Web Developer DevFeed: [10 Reasons Why I Recommend Svelte To Every New Web Developer]() Original publisher: [Read original article]() Published: 2020-08-31T00:00:00Z Content type: opinion Language: en Sources: [Markus Hatvan]() Topics: [Svelte](), [JavaScript](), [Front end](), [Frameworks]() Tags: [boilerplate](), [frameworks](), [front-end](), [javascript](), [svelte]() ### AI overview An opinionated introduction to Svelte that recommends it to new web developers. The article contrasts Svelte with Angular, React, and Vue.js, emphasizing its compilation to framework-less vanilla JavaScript, reduced boilerplate, and reported advantages in bundle size, performance, lines of code, and developer satisfaction. ### Source excerpt Although the initial release of Svelte was back in November 2016, it's still more of an underdog amongst the JavaScript front end frameworks and just recently started to get its well deserved attention by the community. ## EDR Bypass Methods: Blending In, Unhooking, and Direct Syscalls DevFeed: [EDR Bypass Methods: Blending In, Unhooking, and Direct Syscalls]() Original publisher: [Read original article]() Author: CCob Published: 2020-06-14T10:47:09Z Content type: tutorial Language: en Sources: [Ethical Chaos]() Topics: [Endpoint Security & XDR](), [Code](), [API](), [Processes]() Tags: [antivirus](), [api](), [av](), [boilerplate](), [bypass](), [cobalt-strike](), [code](), [edr](), [hooking](), [process](), [sharpblock](), [trampoline]() ### AI overview This tutorial examines methods for bypassing an active-protection EDR, including avoiding suspicious RWX memory changes, unhooking API calls, and using direct syscall instructions. It also introduces SharpBlock and accompanying code. ### Source excerpt A 2 part series on creating a basic EDR detection system and then a bypass implementation. In part 2 I introduce SharpBlock, a method of bypassing EDR's. The post Lets Create An EDR... And Bypass It! Part 2 appeared first on Ethical Chaos. ## Decreasing Applitools Android Boilerplate with Kotlin and JUnit DevFeed: [Decreasing Applitools Android Boilerplate with Kotlin and JUnit]() Original publisher: [Read original article]() Author: Ben Boral Published: 2019-11-15T17:46:53Z Content type: tutorial Language: en Sources: [RetailMeNot]() Topics: [Testing](), [Boilerplate](), [Kotlin](), [SDKs](), [App]() Tags: [android](), [applitools](), [boilerplate](), [code](), [espresso](), [junit](), [kotlin](), [testing]() ### AI overview This tutorial shows how to reduce boilerplate in Applitools visual regression tests for Android by using Kotlin and JUnit. It describes encapsulating repeated setup and cleanup in a helper and JUnit rule so the test code is more concise and easier to maintain. ### Source excerpt Background At RetailMeNot, we are excited by the promise of automating visual regression tests with Applitools. In this post, I'll show how to make writing Applitools tests for Android a cinch. We'll start with the official integration guide recommendations and then use JUnit and Kotlin features to make our tests concise and maintainable. This post assumes the reader is familiar with Applitools visual testing. Our Starting Point: lots of boilerplate code Applitools's official integration guide for Espresso recommends a test that looks approximately like the below code block. I'll explain each line of this snippet later in the article. But for now, notice the excessive setup code and cleanup code that's getting in the way of our actual test code. This boilerplate would need to be copied for every test. https://medium.com/media/c042e70c7b2c423afde35fc101bc6e31/hrefThe Solution: a much simpler test We can reduce the boilerplate to achieve the following test. By stripping away the setup and cleanup as much as possible, we are left with the kernel of the test. In doing so, the purpose of the test is much easier to comprehend. ApplitoolsHelper, on line 2, has encapsulated the setup and cleanup. This will make long-term maintenance easier, because when the Applitools APIs change, we'll only need to update them in the one location. https://medium.com/media/de1efe74c1f65542057b061fd3b4ad35/hrefThe Required Steps to Run an Applitools Test Before diving into the helper code that enables our concise test, let's review the steps involved in an Applitools visual test: val eyes = Eyes() eyes.apiKey = "YOUR_API_KEY" eyes.appName = "YOUR_APP_NAME" We must initialize the Applitools SDK and set our API key and app name. This is going to be the same for every test in our suite. We will extract this code into a JUnit test rule. eyes.open("TEST_NAME"); This starts the Applitools test session. This must be called with a unique test name for each test. We will use a lambda expression, expl ## Dynamic mobile client development. Problem and concept. DevFeed: [Dynamic mobile client development. Problem and concept.]() Original publisher: [Read original article]() Published: 2018-07-21T00:00:00Z Content type: tutorial Language: en Sources: [Vasya Drobushkov]() Topics: [Mobile](), [interface](), [Development](), [client](), [servers](), [Maintainability]() Tags: [boilerplate](), [development](), [interfaces](), [maintainability](), [mobile](), [mobile-development](), [server]() ### AI overview This article examines a mobile client development problem: server data and interfaces can change faster than published mobile applications, creating compatibility challenges across application and server versions. It focuses on making interfaces between the presentation layer and views more flexible and extensible, using a profile screen and view model as an example. ### Source excerpt Data and interfaces -- are two of the most important things in development. Data usually comes from/to server and tells application what should be used (and therefore shown to the user on UI) One of the main challenges in mobile development is to be in sync with server. Server is updated immediately (often along with web). Publishing to Play Store takes some time (even not talking about AppStore and their app review). Also users might try to use older versions of app with newer versions of web/server (not updating application when newer version was published). Even more difficult to handle compatibility issues when there might be multiple servers with different versions on them, and application has to be flexible to work with all of them. ## Marvin v1.0 DevFeed: [Marvin v1.0]() Original publisher: [Read original article]() Author: Stanko Published: 2018-01-05T00:00:00Z Content type: release Language: en Sources: [Stanko Tadić]() Topics: [Boilerplate](), [React](), [Redux](), [PostCSS](), [async](), [data]() Tags: [async](), [boilerplate](), [postcss](), [react](), [redux](), [v1]() ### AI overview Marvin 1.0 is a universal React boilerplate release. The update replaces redux-thunk with redux-saga, adds server-side asynchronous data fetching with results stored in Redux for client reuse, and replaces Sass with PostCSS. The author describes the setup as opinionated and intended as a modifiable starting point. ### Source excerpt Marvin just got better! Few days ago I've released version 1.0 of my universal React boilerplate.Also known as Marvin There are some big changes, and I'm pretty happy with it's current state. At least 20 applications were shipped using Marvin. It has about seven hundred stars on GitHub with quite a few community contributions. Big updates # Switch from redux-thunk to redux-saga. Sagas are bit more complicated but they make managing asynchronous actions easier. They are really powerful and something I usually go for. Thunks are good for smaller apps, but they tend to get messy as application grows. Straight from redux-saga docs: Contrary to redux thunk, you don't end up in callback hell, you can test your asynchronous flows easily and your actions stay pure. Universal async data fetching using sagas. This was one of the most requested features. Marvin now supports getting the async data on the server. Data is then saved to the redux store for client to reuse. Example is included, but I plan to write more detailed documentation on it. Switch from SASS to postcss. It is time to move on. SASS is awesome, but PostCSS caught up, and it is future proof. Plus, if you are using Autoprefixer you are already using it anyway. I could write whole article about it, but people already did it and you can read them here. It is opinionated # These changes and overall setup are very opinionated and crafted by our experience and needs. It is made to be starting point for us, and it might not be the best choice for you. Although, I personally think it is pretty easy to modify it to fit custom needs. If you use Marvin please leave a comment here or on the repo. Thanks! ## logzero - Simplified logging for Python 2 and 3 DevFeed: [logzero - Simplified logging for Python 2 and 3]() Original publisher: [Read original article]() Author: Chris Hager Published: 2017-06-29T00:00:00Z Content type: release Language: en Sources: [Chris Hager]() Topics: [Logging](), [Python](), [Boilerplate](), [Documentation]() Tags: [boilerplate](), [file](), [logger](), [logging](), [python](), [python-dependencies]() ### AI overview The article announces logzero, a small Python package for simplified logging in Python 2 and 3. It describes console and file logging, formatting, encoding handling, multiple loggers, rotating log files, installation, and documentation. ### Source excerpt I've just published logzero, a small Python package which simplifies logging with Python 2 and 3. It is easy to use and robust, and heavily inspired by the Tornado web framework. I've recently released python-boilerplate.com which included this module as a file, and people have been asking for it to be published as a standalone package. Finally I've found some time to do it, and here it is! https://logzero.readthedocs.io https://github.com/metachris/logzero logzero is a simple and effective logging module for Python 2 and 3: ## How to test Vue.js plugins and extensions DevFeed: [How to test Vue.js plugins and extensions]() Original publisher: [Read original article]() Author: Chris Hager Published: 2017-05-31T00:00:00Z Content type: tutorial Language: en Sources: [Chris Hager]() Topics: [Vue.js](), [Testing](), [Extension](), [Jest](), [JavaScript](), [Babel]() Tags: [babel](), [boilerplate](), [extensions](), [how-to](), [javascript](), [jest](), [plugins](), [python](), [syntax-highlighting](), [test](), [testing](), [tests]() ### AI overview A tutorial on testing Vue.js plugins and extensions with real Vue.js instances, state changes, transformation checks, and expected-error validation. It uses Jest examples and discusses linting and transpiling ES6 code to ES5 for compatibility. ### Source excerpt This post shows how to write tests for Vue.js plugins and extensions by creating Vue.js instances, changing state and validating transformation and expected errors, to continuously verify that everything still works after updates, refactorings and merging contributions. While building python-boilerplate.com, I recently created a Vue.js plugin for syntax highlighting (vue-highlightjs), and wanted to add tests. For this I spent some time researching and testing how to properly test Vue.js plugins and extensions, and I wanted to summarize and share what I've learnt. ## Introducing Marvin DevFeed: [Introducing Marvin]() Original publisher: [Read original article]() Author: Stanko Published: 2017-05-25T00:00:00Z Content type: release Language: en Sources: [Stanko Tadić]() Topics: [Boilerplate](), [React](), [Redux](), [Open Source](), [Development]() Tags: [announce](), [boilerplate](), [contributions](), [development](), [open-source](), [react](), [redux]() ### AI overview The article announces Marvin, an open-source boilerplate for starting React/Redux applications. It originated as Work & Co's internal project and is intended to support React project development, with external contributions welcome. ### Source excerpt I'm happy to announce Marvin, boilerplate for kicking off React/Redux applications. Basically my boilerplate became Work & Co's internal project. It is meant to be a starting point for our React projects. This way faster development is assured along with higher quality code. It is open source, and external contributions are welcome. Name comes from a fictional character Marvin, android from the The Hitchhiker's Guide to the Galaxy book as a homage to it's author Douglas Adams. ## React and Redux, Webpack 2 boilerplate DevFeed: [React and Redux, Webpack 2 boilerplate]() Original publisher: [Read original article]() Author: Stanko Published: 2016-11-24T00:00:00Z Content type: article Language: en Sources: [Stanko Tadić]() Topics: [Boilerplate](), [React](), [Webpack](), [Redux](), [Babel](), [React Router](), [Sass](), [file](), [npm]() Tags: [babel](), [boilerplate](), [dev-tools](), [development](), [npm](), [react](), [react-router](), [redux](), [sass](), [webpack]() ### AI overview The article introduces a minimal React application boilerplate built with Redux and Webpack 2. It explains that the author extracted the boilerplate from a pet project after finding Webpack 1.x difficult to configure, and lists implemented, planned, and possible future features. ### Source excerpt Currently, I'm working on a relatively small pet project. While setting it up, I decided to extract a webpack boilerplate from it. As whole JS community is moving really fast, I found very hard to set everything up using Webpack 1.x. One package would ask to update the other, that would break the third one, then that one... and so on. Luckily, I was able to set everything up using Webpack 2. It is still in beta, but I had no problems so far. You can find the boilerplate on GitHub. Implemented Features # React React router Redux Redux Thunk Immutable reducer data Webpack 2 (development and production config) Hot Module Replacement Babel - static props, decorators SASS with autoprefixing Webpack dashboard Linting Included es6-promise and isomorphic-fetch File imports relative to the app root Planned features # Redux Dev Tools Generating icon font from SVGs Preview production build Git hooks - lint before commit (or push) Future features # Universal may be added at some point. Universal rendering Server async data About # This boilerplate is a complete, but minimal React application. It includes reducers (redux), actions (sync and async), routing, SASS... My goal was to be ready immediately after cloning the repo (and running npm i). My plan is to reuse this as much as possible. It will updated so make sure you follow the documentation on GitHub. ## Setting Up a Bare-Bones JavaScript Web App with React, Webpack, and Scaffolding Tools DevFeed: [Setting Up a Bare-Bones JavaScript Web App with React, Webpack, and Scaffolding Tools]() Original publisher: [Read original article]() Author: Andrew Khmylov Published: 2015-02-17T00:00:00Z Content type: tutorial Language: en Sources: [Despite the odds]() Topics: [Web Development](), [React](), [Webpack](), [JavaScript](), [Dependency management](), [Boilerplate]() Tags: [boilerplate](), [dependency-management](), [guide](), [how-to](), [javascript](), [react]() ### AI overview A practical guide to setting up a bare-bones JavaScript web app on Windows. It discusses using React for interactive interfaces, module systems and dependency management, webpack for bundling code and assets, and scaffolding tools such as Yeoman. ### Source excerpt Long story short, I had to create a modern web app. Actually, it was an HTML page prototype for our new feature. Basic layout and a fairly complex JavaScript to check our design and interaction ideas. I've been doing a lot of web development during the last 2 years, but it was mostly about extending the existing long-running project. The opportunity to learn how to set up a completely new solution sounded too tempting too miss it. Side note: I was going to write a rant-like blogpost initially. However, the final text turned out to be more like a guide than a bunch of complaints. So you actually may think about it as a from-zero-to-infinity guide to setting up a bare-bones JavaScript web app and its accompanying infrastructure on Windows. Baby steps I start with a simple index.html. Since it's going to be mostly about interactive interfaces, and I don't want to spend that much time thinking about boilerplate markup and event handling, I'm going to build it with React.js. Even though the codebase is not going to be that huge, I probably also want a proper module system. OK, we've been using Require.js for quite a long time now, so it looks like a reasonable choice. Just put a