Share Instagram posts from a React app — Step by step guide

Facebook finally exposes the API for creating Instagram posts with photos and videos. The Instagram Content Publishing API was in closed beta with Instagram Partners for a long time, but it has changed in January 2021 and now you can use the API too.


Request new permissions and features for your live Facebook app

Problem

You’re already using your Facebook app in production with Live Mode on, but now you want to request Facebook for additional permissions and features. The problem is that Facebook reviewers have to be able to manually test the requested permissions in your app by going through your intended user flow, which is not possible in Live Mode.

If you switch your app to Live Mode before it has undergone App Review for a given Permission, app users will not be able to grant your app that Permission until it has been approved. …


From creating a boilerplate to publishing a complete extension to Chrome Web Store

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…


How to deploy a React app to GitHub Pages in no time

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.

GitHub Pages

Hosted directly from your GitHub repository. Just edit, push, and your changes are live.

Prerequisites

Before you start, make sure you meet the following requirements:

  1. You have a GitHub account.
  2. You have Git installed on your machine.
  3. You have Node.js installed on your machine.

How to deploy a React app

Step 1 — create a React app

If…


Convert images to PDF on the frontend with no server

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…


Without using JavaScript

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

Implementation

The only requirement for using the native camera is the <input /> element with 3 attributes:

  1. type="file"creates a file input that lets the user choose one or more files from their device storage
  2. accept="image/*" the file input accepts only files with an image/* MIME type
  3. capture="environment" the outward-facing camera should…

Comparing size, performance, Typescript support and more

Moment.js is indeed done

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

Modern alternatives

There are multiple solid date and time libraries for JavaScript you can use instead. We’ll look into Luxon, Day.js


Using a React app example with source code

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


With source code and live demo

Real-time chat app built with React, NodeJS and Socket.io
Real-time chat app built with React, NodeJS and Socket.io

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

1. Overview

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.

WebSocket 101

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)

Why should I care about…Scrum?

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:

  • stay productive and creative = happy team members 😊
  • deliver a product that end users want = happy customers 😊
  • minimize a waste of time and money = happy business owners 😊

Why would anyone create Scrum?

Scrum was a natural answer, to the…

Jakub Kozak

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store