Recently I decided to extend the functionality of GitHub with my own Chrome extension. Instead of jumping straight into coding, I hit a wall a few times when setting up the project. And then I thought, “Why isn’t there something like Create React App for Chrome extensions - run one command and get everything up and running?”
So, I created a boilerplate that supports React, TypeScript and Webpack. You can make a build with just one command, and load it straight to Google Chrome or publish to Chrome Web Store.
Before diving into details about the configuration and Chrome extensions in general, I’d recommend you have a quick look at the latest documentation: https://github.com/pixochi/create-react-chrome-extension-ts …
You’ve built a React app and now it’s time to deploy it, so that the world can see your project. You may consider cloud platforms like AWS, Azure, Google Cloud, Heroku, etc. However, the easiest and quickest way is to deploy your React app to GitHub Pages, and this article describes steps how to do it.
Hosted directly from your GitHub repository. Just edit, push, and your changes are live.
Before you start, make sure you meet the following requirements:
If you don’t have an app ready yet, create one with Create React…
You may need to provide users of your web application with a PDF document for various reasons, such as financial statements, account information, or just any important information that has to be shared in a single file.
In this article, I describe why you should consider PDF generation on the client-side and how you can add this functionality to your web, or more specifically, React app.
Because I like to have a good overview of what’s going on from the beginning, you can see the live demo of the app and its source code before moving on:
Live demo: https://pixochi.github.io/pdf-from-images-react-app/
Source code…
You don’t need any JavaScript library or any complicated solutions to open the native camera and take pictures in mobile browsers. It can be accomplished with a combination of attributes for the <input />
element.
You can try out my solution on your mobile device: https://pixochi.github.io/native-camera-in-mobile-browsers
The only requirement for using the native camera is the <input />
element with 3 attributes:
type="file"
— creates a file input that lets the user choose one or more files from their device storageaccept="image/*"
— the file input accepts only files with an image/* MIME typecapture="environment"
— the outward-facing camera should be…It has been a popular library for parsing, validating, manipulating, and formatting dates for a decade. However, Moment.js has too many drawbacks compared to modern date and time libraries. Its API is not immutable, it is large and it doesn’t support tree shaking. Even the Moment team discourages to use their library in new projects.
“We now generally consider Moment to be a legacy project in maintenance mode. It is not dead, but it is indeed done.” — The Moment team
There are multiple solid date and time libraries for JavaScript you can use instead. We’ll look into Luxon, Day.js, …
Let’s start with an overview of the app we’re going to build. We’ll use React and the Facebook’s Graph API to create a web app for publishing content on a Facebook page.
Source code: https://github.com/pixochi/fb-page-posts-integration
If you’d like to jump straight to the point or just want to get an overview of what we’re going to build, you can check out the app in action.
Live demo: https://socket-io-react-hooks-chat.herokuapp.com/
Source code: https://github.com/pixochi/socket.io-react-hooks-chat
We’re going to create a web app for sending messages between multiple users in real time. Client(browser) uses React for user interface and Server runs on NodeJS. To achieve real-time communication, we’ll establish a WebSocket connection between Client and Server with Socket.io.
The app uses WebSocket for an instant exchange of messages sent by users. …
Scrum is like a box of chocolates…chocolate is always worth a try! (unless you’re a dog)
Scrum offers the most popular, battle-tested recipe for building a successful product as a team. The product can be anything from a simple software to a Mars spaceship. You don’t need to reinvent the wheel - Scrum tells you what most (hyper)productive teams do to:
Scrum was a natural answer, to the problem in software development, that came in 1993. The problem was the waterfall model — a development process that could last years before customers got any value out of the final product. The waterfall model can be broken down into 6 steps, where each step can be started only after the previous step has been…
You know how annoying it is to open a web app and all you get is a white screen. You wait and wait and wait…and then you close the page because you can find a much faster alternative. But this time it’s even worse…the slow app is yours 😥 Let’s make it faster with a few QUICK improvements! 💪
Do you really know what is fetched when the app is opened for the first time? You may be using a module bundler like Webpack, a framework asset compilation pipeline or other built tools like Gulp, that make files ready for production release. …
You may know a few common use cases for storing data in Local Storage, Session Storage or Cookies. For instance, users log in to your web app and you want to save a token until they log out. You could also store user settings, such as a preferred language or color theme(Light/Dark).
A progressive web application in iOS Safari can be added to homescreen and then be opened in standalone/fullscreen mode with the look of native app. However, there’s a catch in using the storage in iOS. It’s NOT shared between the browser and standalone instance.