#npm stripe

[learntechsolution]

Seneca is a microservices framework for Node.js that allows you to build modular and scalable applications. It follows the microservices architecture by providing a toolkit for creating and managing small, independent services. Here's a basic guide on how to use the Seneca framework

[learn-techsolution]

Seneca is a microservices framework for Node.js that allows you to build modular and scalable applications. It follows the microservices architecture by providing a toolkit for creating and managing small, independent services. Here's a basic guide on how to use the Seneca framework

[learntech-solution]

Seneca is a microservices framework for Node.js that allows you to build modular and scalable applications. It follows the microservices architecture by providing a toolkit for creating and managing small, independent services. Here's a basic guide on how to use the Seneca framework

[learn-tech-solution]

Seneca is a microservices framework for Node.js that allows you to build modular and scalable applications. It follows the microservices architecture by providing a toolkit for creating and managing small, independent services. Here's a basic guide on how to use the Seneca framework

[fahrni]

Saturday Morning Coffee

Good morning from Charlottesville, Virginia! ☕️

I’ve had a pretty fun week. Our dev team is doing really great work for our client, got to hangout with my grandson at his very important preschool graduation, and I had my first physical therapy session yesterday.

Overall a darned good week! 😃

Mike Barnes • The Hollywood Reporter

Joe Don Baker, the broad-shouldered Texas tough guy who portrayed characters on both sides of the law, most notably Sheriff Buford Pusser in the unexpected box-office hit Walking Tall, died May 7, his family announced. He was 89.

I remember watching Walking Tall as a kid and thinking Sheriff Buford Pusser was a real badass. I think I’ll have to watch it again.🪦

Mike Wendling, Rajini Vaidyanathan & Paul Coletti • BBC

Microsoft founder Bill Gates said he intends to give away 99% of his vast fortune over the next 20 years.

This is really nice of him in today’s world of Oligarchs. He’d have been worth so much if he hadn’t started giving his money away. We need more kindness like this in the world.

Thank you, Mr. Gates. ❤️

Jess Weatherbed • The Verge

Apple is trying to dissuade Europeans from using iOS apps that support alternative payment options by making them look scary.

Apple will absolutely not give up on its 15-30% cut of each app sale in the App Store.

What I really dislike about these scare tactics is how they imply that a third party purchasing system is not safe and secure. Web payment systems have been around for years and years and predate the App Store. I’d imagine there are some questionable players out there but I trust companies like Stripe and Shopify. I’m sure there are many other trustworthy companies out there.

If Apple keeps fooling around they’re gonna get some major fines in the EU.

Michael Tsai

When I started writing apps, the availability and quality of developer tools was considered to be an advantage for native development vs. the Web. These days, I still think native APIs usually lead to better apps—though there are some awful Catalyst and SwiftUI apps that would have been better as Electron—but the Web tooling has really improved. I think many would now consider it a strong advantage.

I know this article by Michael is talking about Electron but I’ve spent the last year and a half working on a project to slowly transform native iOS and Android apps into 100% React Native Apps and it’s gone really well. Same idea, different frameworks and platforms.

The start was slow and we spent the first four to six months building our bridging strategy and coding it. Once that was in place, along with React Native code to go with it, we started replacing hunks of functionality, feature by feature.

Recently a new Expo App was created and all that React Native work we started in the hybrid app has been shared via npm packages with the brand new app. It’s completely jumpstarted the new app with many features already built and tested in isolation. I’d say somewhere between 40-50% of the new app now works just by using these packages. Our networking, UI navigation, analytics, and telemetry packages were thoughtfully created to work with the native bridge code and 100% React Native code.

Anyway, I’ve written about it. Check it out if you have a minute. It’s been a really fun project.

Zack Whittaker • TechCrunch

Crypto giant Coinbase has confirmed its systems have been breached and customer data, including government-issued identity documents, were stolen.

Whoops. Will anyone ever be able to create a website and/or service that’s secure enough to not have breaches?

I’d imagine the best way to do it is not create the website or service in the first place. 😃

Emma Roth • The Verge

Warner Bros. Discovery is changing the name of its streaming service back to HBO Max. During its Upfront event on Wednesday, the company announced that it will rebrand Max this summer, a change HBO head Casey Bloys said “better represents” its offering.

I’m glad they did this. HBO has always been a place for quality series and originals. It’s a premium brand and with the addition of the Max name says “Hey, it’s the HBO you love with this other stuff we think you might enjoy.” 😆

Chiara Mooney • Microsoft React Native Blog

Let’s first talk about why Office chose to use React Native. Office has hundreds of millions of customers who expect visual consistency across desktop, mobile, and web. Currently, there are over 40 Office experiences which use React Native to build cross-platform features such as Privacy Dialog and Accessibility Assistant.

This is fascinating and weird to me all at once. Microsoft, one of the greatest software shops of all time is using React Native in Office. Yeah, you read that right, React Native in Office.

Did you know Microsoft is the primary contributor to React Native for Windows?

Can you imagine if someone did this for Mac? Oh, Microsoft did? Wait, what! I’m not sure how good this support is, but I’d love to see how it works.

It’s too bad a dyed in the wool Mac shop doesn’t take this on. Having an AppKit expert building this would make for a better framework, in my opinion. Of course Apple wouldn’t do it, but they should. I’d continue to build apps with Apple’s native tooling because I think it makes for better apps, but having something that opens the door to thousands and thousands of developers is good for the platform and might encourage more developers to create desktop apps instead of websites.

Ulrik Egede • The Conversation

While smashing lead atoms into each other at extremely high speeds in an effort to mimic the state of the universe just after the Big Bang, physicists working on the ALICE experiment at the Large Hadron Collider in Switzerland incidentally produced small amounts of gold. Extremely small amounts, in fact: a total of some 29 trillionths of a gram.

I wonder how much it cost to create 29 trillionths of a gram of gold from lead? 😂

It is pretty amazing. I wonder what else they’ve created in there? Hopefully not a world ending virus. 😳

Micah Toll • Electrek

Royal Enfield’s eagerly anticipated electric motorcycles, unveiled late last year under the Flying Flea brand, are now confirmed to hit the market early next year.

This is a nice looking bike. Very modern construction with the look of a bike from days long past. Not a bad option for motorcycle enthusiasts.

Tom Warren • The Verge

Microsoft is redesigning the Start menu in Windows 11 this month with a new, wider design that finally lets you disable the recommended feed of files and apps. While the new Start menu looks different to what exists in Windows 11 today, this design refresh could have looked a lot different as Microsoft has now revealed in concept images.

Finally. 👍🏼

[korshubudemycoursesblog]

Building FullStack E-Commerce App using SpringBoot & React: A Complete Guide

The rise of digital commerce has made e-commerce development a high-demand skill. Whether you're a backend engineer, frontend developer, or aspiring full-stack professional, learning how to build a full-stack e-commerce app using SpringBoot and React can transform your career opportunities.

This comprehensive guide walks you through the key concepts, architecture, and implementation details required to build a modern, scalable, and responsive e-commerce application. Let’s explore how you can leverage SpringBoot for your backend and React for your frontend to deliver a complete shopping experience.

🔍 Why Choose SpringBoot and React for E-Commerce Development?

SpringBoot and ReactJS are two of the most widely used frameworks in modern web development.

SpringBoot simplifies Java backend development by offering a robust and production-ready environment with minimal configuration.

React empowers developers to build dynamic, high-performance frontends with a component-based architecture.

When combined, these technologies enable you to build a responsive, scalable, and secure full-stack e-commerce platform.

🧠 Key Features of a FullStack E-Commerce Application

Before jumping into the implementation, let’s break down the core features that a well-structured e-commerce app should support:

✅ User Authentication and Authorization (JWT, OAuth)

✅ Product Management (CRUD operations)

✅ Shopping Cart and Wishlist functionality

✅ Order Management

✅ Payment Gateway Integration

✅ Admin Dashboard for Inventory and Orders

✅ Responsive Design for Mobile and Desktop

✅ API-First Development (RESTful APIs)

⚙️ Setting Up the Development Environment

🖥 Backend (SpringBoot)

Technologies Needed:

Java 17+

SpringBoot 3+

Spring Data JPA

Spring Security

Hibernate

MySQL/PostgreSQL

Maven/Gradle

Setup:

Initialize SpringBoot Project via Spring Initializr

Add dependencies: Web, JPA, Security, DevTools

Configure application.yml/application.properties

Set up entity models for User, Product, Order, etc.

💻 Frontend (React)

Technologies Needed:

Node.js & npm

React.js (CRA or Vite)

Redux Toolkit

Axios

React Router

Tailwind CSS or Material UI

Setup:

bash

CopyEdit

npx create-react-app ecommerce-frontend

cd ecommerce-frontend

npm install axios react-router-dom redux-toolkit @reduxjs/toolkit react-redux

📦 Designing the Backend with SpringBoot

📁 Entity Structure

java

CopyEdit

@Entity

public class Product {

   @Id @GeneratedValue

   private Long id;

   private String name;

   private String description;

   private BigDecimal price;

   private String imageUrl;

   private int stockQuantity;

}

You’ll also define entities for User, Order, CartItem, etc., along with their repositories and service layers.

🔐 Authentication with JWT

Use Spring Security and JWT (JSON Web Tokens) for secure login and protected routes.

🌐 RESTful APIs

Create REST endpoints using @RestController to handle:

/api/products

/api/users

/api/orders

/api/auth/login

Use @CrossOrigin to allow frontend access during development.

🌐 Creating the Frontend with React

🧩 Folder Structure

css

CopyEdit

src/

├── components/

├── pages/

├── redux/

├── services/

├── App.js

🛍 Product Display Page

Use Axios to fetch product data from SpringBoot APIs.

jsx

CopyEdit

useEffect(() => {

  axios.get('/api/products').then(res => setProducts(res.data));

}, []);

Render the products in a responsive grid using Tailwind or MUI.

🛒 Shopping Cart with Redux

Manage cart state globally using Redux Toolkit:

javascript

CopyEdit

const cartSlice = createSlice({

  name: 'cart',

  initialState: [],

  reducers: {

    addToCart: (state, action) => { ... },

    removeFromCart: (state, action) => { ... },

  }

});

🔑 User Login

Implement a login form that sends credentials to /api/auth/login and stores JWT in localStorage for authenticated routes.

💳 Integrating Payment Gateway

Integrate a payment solution like Stripe or Razorpay on the frontend.

Use React SDK to collect payment details

Send transaction info to backend to create orders

Store order confirmation in the database

Stripe setup example:

jsx

CopyEdit

const handlePayment = async () => {

  const response = await axios.post('/api/payment', { cart });

  window.location.href = response.data.checkoutUrl;

};

🧾 Building the Admin Panel

Use role-based authentication to restrict access.

Admin Features:

View/Add/Edit/Delete products

Manage orders

Track customer data

Create a separate React route /admin with a dashboard UI using Material UI’s components or Bootstrap.

🛠 Best Practices for FullStack E-Commerce Development

Use DTOs to reduce payload size and protect internal structure.

Enable CORS in SpringBoot to allow frontend access.

Implement Lazy Loading in React for route-based code splitting.

Use React Query or SWR for advanced data fetching if needed.

Apply form validation using Formik + Yup or React Hook Form.

Cache static content (e.g., product images) using a CDN.

Use HTTPS and secure cookies for production environments.

🚀 Deployment Strategy

🧳 Backend:

Use Docker for containerization.

Host on AWS EC2, Heroku, or DigitalOcean.

Use NGINX as reverse proxy.

🧳 Frontend:

Build static files using npm run build.

Host on Netlify, Vercel, or GitHub Pages.

Use environment variables for API URLs.

📊 SEO Optimization for E-Commerce Site

Even for a full-stack developer, basic SEO is crucial. Here’s what to apply:

Use React Helmet to add meta titles and descriptions.

Apply structured data (JSON-LD) for product listings.

Ensure mobile responsiveness and fast load times.

Optimize images and lazy-load them.

Create a sitemap.xml for crawlers.

🎯 Who Should Take a FullStack E-Commerce Approach?

This tech stack is perfect for:

Java developers transitioning to full-stack roles

Frontend devs learning backend architecture

Students building real-world portfolio projects

Freelancers creating scalable client apps

Teams building startup MVPs

🎓 Learn This Stack with a Real Course

Looking for structured learning instead of cobbling it together? Explore a complete Udemy course on building a FullStack E-Commerce App using SpringBoot & React, available on Korshub with a 100% free coupon (limited seats only!).

✅ Conclusion

Building a full-stack e-commerce app with SpringBoot and React is not just about coding—it’s about creating a scalable, secure, and user-centric application. From designing RESTful APIs to integrating Stripe and managing complex state with Redux, you gain a robust skill set that employers and clients seek.

Start building today and take the first step toward becoming a complete full-stack developer.

[cssscriptcom]

10+ Stunning Border Styles For UI/UX Design - Bordex.js

Bordex is a JavaScript library that adds customizable border styles to HTML elements. This library minimizes the need to write custom CSS for border styling. Users can apply complex border effects by calling specific functions with customizable parameters. Border Styles Included: Blur Corner Disjointed Fancy Gradient Inset Overlap Stripe Thin Generic How to use it: 1. Install & download. npm…

[expertappdevs]

Google Pay with React Native

Google pay introduction -

In this tutorial, I am going to explain to you “What is google pay”, I think you must be aware about google pay.

It’s a very good way to pay, and in today’s era we all prefer digital transactions in place of cash pay, so here we see how we use google pay in react native app.

Google pay popularity -

In recent years we see that google pay has gained a lot of popularity and it gives the new standard to payment through mobile apps. It also provides very fast and simple checkout and easy access to rewards and offers too.

It also makes payment safer and easier for anyone. You can book anything using google pay and pay it faster.

Users are attracted to google pay more just because it has a very simple process of paying and it gains the user trust a lot.

Google pay in native-

Paying using android pay is simple because the kotlin and java document for android pay is very documented and understandable, native developers do not face much issue to implementing the android pay in native.

But in react native it has some issues because it doesn't have many javascript libraries and well documented processes.

So we have some third party libraries by using which you will be able to implement the google pay in react native following are the libraries.

React-native-gpay

React-native-google-pay

Above are the libraries by using which you can implement the android pay in react native app.

So let’s start the process of implementing these libraries

React-native-gpay -

I am preferring to use react native g-pay because it has very clear documentation and it provides a git repo and that repo is awesome. Anyone can easily understand each step and implement those steps in a very simple way.

In the git page you find the exact steps of how we install the npm package and implement that and it also provides the way how you can add them in ios and android too.

And here you get all the differences between android and iOS, so that you cannot face any trouble regarding figuring out the difference.

And if you want to accept the payment through the credit card it has also built in support for multiple payment gateway accepting like - stripe and braintree etc.

How to integrate Google Pay in React Native using react-native-gpay -

Continue Reading: set up google pay in react native app

[magento-quickies]

This started out as a snarky post but then I realized how often I need a lookup table like this. What have I become? Product What it Does Laravel Passport A composer package to give your Laravel based API OAuth2 features and capabilities. Laravel Cashier A composer package to simplify Stripe and Braintree’s subscription services in your Laravel application. Laravel Dusk A composer package for interacting with a handful of browser automation tools (such as Selenium). Laravel Echo A composer package, npm package, and set of best practices for working with web sockets in your Laravel application. Laravel Horizon A […]

[jacob-cs]

firebase functions

original source : https://medium.com/@GaryHarrower/working-with-stripe-webhooks-firebase-cloud-functions-5366c206c6c

firebase functions 와 stripe webhook연결

Now lets head over to our terminal and create a new directory for our project.

$ mkdir stripe-webhooks $ cd stripe-webhooks

We then need to install the firebase-tools package globally using NPM.

(아래는 firebase-tool설치)

$ npm install -g firebase-tools

Now we have firebase-tools installed, we should login to our firebase account and initiate a new project in our project directory. You will get a choice of which services you would like to use — you only need to select ‘Functions’ here for now.

(아래는 firebase 사용전 초기 작업)

$ firebase login $ firebase init

Let’s move into the functions folder (created with firebase init) and make sure we have the latest version of firebase-functions and firebase-admin installed. firebase-functions is used for running the actual cloud functions and firebase-admin is used to access the Realtime Database.

$ cd functions/ $ npm install firebase-functions@latest firebase-admin@latest --save

Let’s create a new function called events to handle our endpoint. We’ll start off simple with a basic function that returns a string to let us generate the URL we need to supply our Stripe account with.

const functions = require('firebase-functions');exports.events = functions.https.onRequest((request, response) => {  response.send("Endpoint for Stripe Webhooks!"); });

We can then deploy our function and get our endpoint (Function URL in output in screenshot).

firebase deploy --only functions

(아래는 stripe에 webhook 만드는 과정)

Now we have our Cloud Function URL, we can head over to the webhooks section of the Stripe dashboard. We then want to + Add Endpoint, and enter our URL into the URL field. You can select the types of events to be sent, but for now we will just stick to all event types.

Once you create the endpoint, take note of your ‘Signing secret’ — we’ll need that to verify the request send to our function.

While we’re in our Stripe Dashboard, let’s head over to the API Keys section to generate and take not of the API key we’re going to use.

You should create a restricted API key and only assign permissions you’re going to need in your firebase project. For example, if you’re only going to read customer objects, you can specify only Customers when creating the key.

Now we have our signing secret and our API key, let’s add them to our Firebase project as environment variables so we don’t need to check them in to any source control.

$ firebase functions:config:set \    keys.webhooks="your_restricted_key" \    keys.signing="your_signing_key"

That’s our setup complete — We’re now ready to write some code! I’m going to be using examples from Firebase and Stripe, so if there’s anything you would like to dive deeper into, you can use the following links:

https://firebase.google.com/docs/functions/write-firebase-functions

https://stripe.com/docs/webhooks/signatures

To start with, we’re going to need the Stripe NPM package, so let’s go ahead and install that:

(stripe 라이브러리 설치)

$ npm install --save stripe

We added our API keys to our Firebase config, so we can access them using functions.config() (For example: functions.config().keys.webhooks will return our keys.webhooks string we added).

We will then require the Stripe package in our functions index.js. We will also bring in our Signing key to our application (endpointSecret).

const functions = require(‘firebase-functions’); const stripe = require(‘stripe’)(functions.config().keys.webhooks); const endpointSecret = functions.config().keys.signing;exports.events = functions.https.onRequest((request, response) => {  response.send(“Endpoint for Stripe Webhooks!”); });

Note: Stripe marks a webhook as successful only when your function returns a success (2xx) response. If it receives anything else, such as a 400 or 500, then it marks it as failed, and will try again.

We can use our signing key to verify that a request has actually come from Stripe, and not an unauthorized attacker. The stripe package has a method (stripe.webhooks.constructEvent) which we can use to verify the request. We can also use a Try Catch to return an error if the request fails verification.

// Get the signature from the request header let sig = request.headers["stripe-signature"];// Verify the request against our endpointSecret let event = stripe.webhooks.constructEvent(request.rawBody, sig, endpointSecret);

Note: We need to use the original request body otherwise the verification will fail, so we must use Firebase Function’s request.rawBody, instead of the usual request.body.

As mentioned, we can wrap this in a Try Catch to catch any failed requests.

let sig = request.headers["stripe-signature"];try {  let event = stripe.webhooks.constructEvent(request.rawBody, sig, endpointSecret); } catch (err) {  return response.status(400).end(); }

Now we have our valid events, let’s save them to our Firebase Realtime Database.

We can do this by using the firebase-admin database methods. We’re going to be using the .push() method to create a new entry in our database.

const admin = require('firebase-admin'); admin.initializeApp();...return admin.database().ref('/events').push(event)  .then((snapshot) => {    return response.json({ received: true, ref: snapshot.ref.toString() });  })  .catch((err) => {    console.error(err);    return response.status(500).end();  });

Let’s break this code down a bit.

Ref is the path in the database we would like to save our new entry to. This can be whatever you like — i’ve chosen so save my events in the /events ref.

Push(event)- event is the variable we’re saving the response from the constructEvent method we called. This is an object with all of our event info

Response.json — We respond with a valid json object — this tells Stripe that the webhook event was received and we’re happy we’ve processed it, so mark it as complete.

Catch — In case something goes wrong while we’re saving the event to the database, we return an error 500 to tell Stripe that something went wrong. Stripe will then retry sending the event. There are ways you could incorporate this into the Try Catch we have, although I like having the differentiation of errors.

Now we should deploy our function again, then we can test it out.

$ firebase deploy --only functions

Let’s head back over to the Stripe Dashboard Webhooks area, select our endpoint where we can now ‘Send test webhook’.

Select an event type and hit ‘Send test webhook’ — all going well, we get a successful response, and our event is now saved in our database!

That’s it in terms of saving. Now you have endless possibilities of cool things to do with your data. For further reading, you could explore the different triggers Cloud Functions can use. You can run another function whenever anything is added to your database. The example below would run any time a new event is saved to our database. We could now check the event type, and if it’s a successful charge, update our Realtime database to increase our daily revenue on our live dashboard…

You can read more about database events here: https://firebase.google.com/docs/functions/database-events

I hope this was useful. Please leave any feedback or questions - I’m always learning and really appreciate any comments you may have.

You can find the completed code over on Github — https://github.com/GaryH21/Stripe-Webhooks-Tutorial

Happy building!

[learntechsolution]

Deploying a Node.js application to Docker involves creating a Docker image for your application and then running containers based on that image. Here's a step-by-step guide to help you deploy a simple Node.js application to Docker

[learn-techsolution]

Deploying a Node.js application to Docker involves creating a Docker image for your application and then running containers based on that image. Here's a step-by-step guide to help you deploy a simple Node.js application to Docker

[learntech-solution]

Deploying a Node.js application to Docker involves creating a Docker image for your application and then running containers based on that image. Here's a step-by-step guide to help you deploy a simple Node.js application to Docker

[learn-tech-solution]

Deploying a Node.js application to Docker involves creating a Docker image for your application and then running containers based on that image. Here's a step-by-step guide to help you deploy a simple Node.js application to Docker

[npmjs]

npm private modules outage on December 12th

For a period of about 100 minutes on 12 Dec 2017, all read and write access to private packages was interrupted. For some days after that, our customer data was not in perfect sync with the source of truth—Stripe, our payments provider—and some customers renewed their subscriptions when they did not need to.

We believe we have now fully reconciled our customer database with Stripe’s data, and have refunded all renewals that were made during the incident. If we are in error about your account, please contact our Support team who will sort it out for you.

The underlying cause of this outage was a software bug that deleted all records from our customer database. Read on for more details about the root cause and a timeline of the incident.

Root cause

The root cause was a bug in the query builder software we use to interface with postgres, ormnomnom. Due to a bug in ormnomnom’s “delete” method, it omitted the WHERE clause for the query built by the list of filters. This would result in removing all records from the database table where a single record was intended to be deleted. The fix was a one-liner.

In this case, one endpoint in the microservice fronting our payments database used a DELETE query. This endpoint is exercised only by an internal tool that our support team uses to resolve customer payments problems and requests to terminate service. After the bug was deployed to production, it was triggered the first time the tool was used in this way. A DELETE with no WHERE clause was executed and all records were deleted from the targeted table.

Code audits revealed that this one API endpoint was the only place in our system where we use a straightforward DELETE, and the internal support tool is the only consumer of that endpoint. In all of our other databases, we do not ever delete rows from tables. Instead, we use “tombstoning”: setting a deleted column to a timestamp that indicates when a record was marked as deleted. In this one case, removing the data entirely is more appropriate because it is reflecting a ground truth stored in an external database. The support tool use was the only thing that could have triggered this bug, and only for that one category of data.

Timeline

All times given here are in PST, aka GMT–8.

11 Dec 2017 5:00 PM: The microservice that fronts our payments database is deployed with an upgrade to the backing framework, including an upgrade to our SQL query builder.

12 Dec 2017 1:34 PM: All customer records are deleted from our payments database. Uncached access to private modules begins failing.

2:16 PM: Our support team escalates a Twitter complaint & npm engineering is alerted.

2:32 PM: We roll back the deploy to the relevant microservice on the theory that recent changes are the most likely culprit. We observe that this does not restore service.

2:44 PM: We discover that our payments database has far fewer records in it than it should. We activate our serious incident response protocol, which formalizes communication and roles to aid internal coordination during outages.

3:07 PM: We deploy a mitigation to our payments service that treats all customer accounts as being in good standing, without checking the database. We observe that this does not restore access.

3:19 PM: We clear the access cache entirely and access to private packages is restored for all customers.

3:32 PM: We restore the database from a backup and note that all customer events from the time of the backup snapshot on will need to be replayed. We decide to leave the mitigation in place overnight to give us time to do that work in a methodical way. Meanwhile, root cause exploration continues.

3:36 PM: We find the culprit DELETE statement in the database logs. We isolate where in service code this could have been executed and confirm that a support tool invocation was the trigger, given the timestamp.

4:48 PM: The root cause is found and fixed in the query builder code.

13 Dec, through the day: We reconcile data in our behind-reality customer database with data from Stripe, our payments provider. When this is complete, we undo the mitigation that short-circuited payment checks.

27 Dec: Some customers are locked out of their organizations or private modules accounts because the 15-day grace period has expired. This happens to a handful of customers we missed in our original cleanup sweep. We identify those customers and replay the Stripe events to restore their accounts to working order.

Steps we’re taking in response

The root cause bug did not turn up in development because a new feature in ormnomnom was not completely tested. The developer wrote only cursory tests because the test suite for the library is awkward to use.

We kicked off a project to rewrite the tests for this library so that new tests are very easy to write, and will therefore be written. In our opinion, the time invested in making testing easy is time well spent. Software bugs are inevitable and testing is how we catch them early. This is the most important step we can take in response to the incident. We can measure our progress in this work by measuring test coverage of our query builder library.

None of our monitoring alerted us that anything was wrong, because our systems and software were operating correctly. Our access cache did alert briefly on CPU use, but this was not enough to make us aware that something was wrong. We were alerted by a sudden and unusually high volume of support requests and Twitter complaints. This is probably an inappropriate target for monitoring. What we can monitor, however, are unusually high rates of certain status codes being reported by our internal services. In this case, the rate of 402 Payment Required responses was an unusually high percentage of all auth checks (indeed, 100%), and could have triggered an automated alert. We will be adding such an alert to our monitoring system.

Our database logging was set to log slow queries only. Fortunately the delete query in question was quite slow, but it was only luck that we had a log line to pinpoint the time the error occurred. We will be turning on more complete logging for all data-mutating queries on databases like this one.

We were pleased with the behavior of postgres’s logical replication and will be migrating the systems we have that still use repmgr to the newer system.

An apology

We apologize to all of npm’s customers for this outage. This downtime affected all of our paying customers during peak work hours in the United States. We prefer to be an invisible and reliable part of your infrastructure, but on 12 Dec we were a source of frustration instead. We’re sorry.

[cssscriptcom]

Animated Top Progress Bar For Reading Progress - wavescrollbar

Animated Top Progress Bar For Reading Progress – wavescrollbar

wavescrollbar is a standalone JavaScript library that creates an animated, striped top progress bar to indicate the reading time & scroll position in your document.

How to use it:

1. Install & download the package.

# Yarn $ yarn add wavescrollbar # NPM $ npm install wavescrollbar --save

2. Load the wavescrollbar’s JavaScript and Stylesheet in the document.