Category: Other

When deploying a web application, ensuring the security of the application is a crucial step that can’t be skipped. In some cases, your application depends on the authenticated users’ roles, permissions, and identity. But a lot of times it only needs to make sure it’s running behind secure controls. Actually, often this is the case. You just want to secure your application and trust that authentication systems do their job. This is where Cloudflare Zero Trust comes into the picture, offering a fresh perspective on web application security. Traditionally, securing servers, and services at the high level brings network-based, firewall-based filtering of traffic into the application. Where VPN access is common. Cloudflare Zero Trust takes a leap further by performing authentication at the DNS proxy layer, speeding up the network communication between your application and the privileged users’ browsers.

The Private Web Applications

Traditionally, VPNs have been the trusted companions for securing remote access to applications. However, the dawn of Cloudflare Zero Trust has shown a bright light on a more efficient path. The core beauty of this service lies in its authentication mechanism that takes place at the DNS proxy layer, significantly speeding up the network, which in turn enhances the user experience through quicker load times.

The setup is a breeze. Everything is managed via a web interface, making the setup process very smooth. You can set up various rules defining the allow/deny rules of access to the application. Your application doesn’t need to handle any authentication protocols, making the setup straightforward and hassle-free.

Securing the Fort: Services and Servers

The magic of Cloudflare Zero Trust extends beyond web applications, waving its wand over other services like SSH, database access, and other TCP or UDP services. By utilizing zero-trust tunnels, it ensures these services remain unexposed to the public, adding an extra layer of security. A simple installation of an agent on the infrastructure and the user’s computer is all it takes to set up a secure passage to these services.

The agents and clients involved in the setup are user-friendly, serving as the bridge to the secure network, ensuring that only authorized personnel can access the services and servers. I really liked how tunnels also removed a bunch of other concerns like having my home server set up to not worry about any public exposure to the web, port forwarding, and firewall rules. Tunnel directly connects and routes internal server traffic to zero trust network.

I found myself not doing any reverse proxy via Nginx or apache I was doing previously for my apps running on different ports. Zero Trust tunnels allow domain/subdomains to be mapped easily to any port using the tunnel.

Cloudflare even offers browser-based SSH and VNC capabilities, making direct SSH/VNC access very portable. I played with this on my iPad on the go and it was interesting. Although I prefer the native tools, it’s still a great option to have.

Authenticate with Your Own Identity Providers

Why reinvent the wheel when you can integrate your existing identity providers (IdP) with Cloudflare Zero Trust? This service is all about making things easier and more secure without adding extra layers of complexity. You don’t need to bang your head against the wall setting up a new authentication method for your employees or users. Cloudflare Zero Trust plays well with your existing IdPs like Google Workspace, Exchange, Okta, and others.

This feature allows for a seamless authentication experience. Your users will find it easy to get on board as they can use their existing credentials. This not only simplifies the authentication process but also cuts down on the time and resources required to manage multiple authentication systems. It’s all about working smart, not hard, and Cloudflare Zero Trust is here to ensure that your web application security is both robust and user-friendly.

By integrating with your existing identity providers, Cloudflare Zero Trust demonstrates its versatility and its ability to fit into your existing infrastructure with ease. It’s not about changing your workflow entirely, but enhancing it to ensure a secure and efficient environment for both your team and your users.

See all authentication providers they support: https://developers.cloudflare.com/cloudflare-one/identity/idp-integration/

Wrapping Up

In conclusion, Cloudflare Zero Trust is like a breath of fresh air in the web security realm. With its free offering for up to 50 users, it’s a perfect fit for teams or hobbyist projects. The ease of setup, coupled with robust security, makes Cloudflare Zero Trust a worthy contender for anyone looking to beef up the security of their digital assets while ensuring a seamless user experience. By hopping on the Cloudflare Zero Trust train, you are not just opting for enhanced security, but also aligning with a modern, efficient, and user-centric approach to securing your web applications and services.

https://developers.cloudflare.com/cloudflare-one/

Security is an oversight for a lot of WordPress site owners

If you have or building a WordPress site, you are in the market for quick wins. When it comes to securing website traffic, there is an endless number of considerations you have to make.

If you are not a novice web security person, the step for securing your site may be an oversight for you. You may miss a lot of obvious things about your WordPress website security.

Good security doesn’t come in a couple of clicks or in a few mins, but…

There is a simple and easy, no-cost action item you can take. Install Wordfence (or a similar security plugin) and enable at least the basic security settings for your WordPress site.

https://wordpress.org/plugins/wordfence/

Wordfence is an all-in-one sort plugin that comes with a lot of security features and it can be configured pretty quickly without much tech or web security knowledge. Their recommended configuration is almost always safe to activate and it activates in a few clicks.

Wordfence also has a high-level overview of your site’s activities in its dashboard:

Things you should do with Wordfence

Enable Multi-factor Authentication (MFA) for your WordPress admin logins

One of the best things you can do for a WordPress site is to secure its admin’s access. And the best way for that is to enable 2 Factor (Multi-Factor) authentication. You can use an authenticator app for this but this setting has to be enabled for every WordPress admin user. Make sure all admin users are 2FA enabled.

WordPress doesn’t come with a 2FA/MFA capability. Wordfence is one of the easiest ways to add 2FA/MFA to your WordPress logins.

Enable rate limiting and automatic blocking

Wordfence will enable rate-limiting in its firewall settings by default. This will also allow Wordfence to block too many failed login attempts which is often an attacker trying to gain access to WordPress admin.

Block countries you don’t have any users from

Especially high-scammer/spammer countries.

Keep your WordPress plugins up to date.

Wordfence will warn you if there are any dangerous/vulnerable plugins that stay outdated.

Wordfence email alerts will be enabled by default, keep it that way

Make sure you at least get a weekly digest to stay on top of your Wordfence activity and alerts.

If you have multiple WordPress sites, use Wordfence Central to manage the Wordfence installations across sites

Check out Wordfence: https://www.wordfence.com/

Note: This is not a paid or affiliate post. I just like Wordfence and recommend every WordPress site to have it set up if Security is not in y our radar when creating a WordPress site.

Why backups?

If you are running WordPress to host anything serious, you probably are asked, talked about, or want to have a backup solution. Regardless of a serious site or a hobby project, you will be putting some time and effort into building it and continue creating content. In this day and age, it’s unthinkable to not have a backup of your site.

There are much more complex backup solutions out there, but most likely, you are using a somewhat managed hosting solution. Most hosting companies have their own out-of-the-box backup solutions. You can explore these options. But if you want to find a cost-free or low-cost or more flexible option, keep reading 🙂

I’m going to dive into my recommendation of the Updraft plugin first, then talk about a few key points I pay attention to and how updraft is handling these.

Updraft makes it easy

Updraft is a full backup solution for WordPress sites. It has a lot of controls you can configure your backups in different windows, what to backup, where to store, how to notify admins, and more.

Learn more about Updraft

Aside from these generic topics, there are three larger, key topics I want to talk about, that it’s most important to me when I consider backup solutions.

What and when to backup?

The most common topic to think about when designing backup strategies is what you want to back up and with what frequency. Updraft comes with a 2 tier schedule we really like. We set one of them to take full backups every week and retain the last 2 copies of this “full backup” these backups are basically our full “restore” points.

Then we set the second tier schedule to run every day, take database, and /uploads folder backup. On some sites where we don’t have many new uploads happen and if we have a huge historical media library, we skip the uploads and only take database backups daily and we retain daily backups for 14 days. This means we can restore a full backup from the beginning of the week (that includes plugins and all other stuff) and then cherry-pick a specific day in the last 14 days if we want to roll back to a particular date.

Back up, restore, and migrate easily

The reason you are wanting to have backups is at the end of the day, to be able to restore it easily in case you lose your server. Stuff happens right?

When that happens, it matters how easily/quickly restore your backup to a fully functional state. In WordPress site terms, it means everything including your posts, assets (media library), plugins to be installed, and plugin configurations as well. We’re basically looking for a full site restore.

One of the reasons I really like Updraft is because it handles full backup restore with a few clicks.

As part of the “restoration” process, Updraft doesn’t care if you are restoring the backup files to the exact same domain or a new one. This actually makes Updraft a great “migration” or “cloning” tool. We have utilized Updraft in my team to clone production sites to create staging or test copies easily. There are more specialized solutions for this but Updraft already handles these needs, so one plugin does many things for us.

When migrating to a new domain, updraft detects if the target WordPress URL is different than the source where the backup it has taken from, and it asks if you want to update the URL references (there are tons, in WordPress DB) with the new URL. This is also another pain point when moving sites between different domains.

A usual workflow is to work on the dev or staging version of a website then when ready, clone this to the production version. Updraft makes this process really easy for us.

On the server – off-site?

Another key topic is where the backups will be stored. By default, any backup solution will create backup files in the same server. It’s helpful to have backups on the same server, because it’s less configuration, faster…But that’s not why we’re taking backups in the first place. The “worst-case” scenario we’re preparing ourselves for is if we lose access to our server altogether. That’s why it’s very important for a backup strategy to include the backups storage to be off-site (out of the server), or even complete a separate region or even further to keep them in a different cloud provider. What if a whole AWS region goes out? (unlikely but it happens).

Updraft supports many cloud storage providers and protocols. I used AWS 3, Google Drive, Dropbox, (S)FTP targets with Updraft plus, and their configurations are really easy.

Beware most of these integrations will require the paid version “Plus” which is an annual subscription but you pay for plugin updates. In my opinion, it’s very affordable given the amount of manual work it removes from the engineer’s hands. We happily pay for an agency license and use it on all of our WordPress sites.

Bonus: Automatic backups before updates

For a regular, not tech-savvy user, there is a feature of updraft that I really like that shows a pop-up every time the WordPress admin tries to perform an update in the WordPress dashboard.

The pop-up basically reminds us that if the user wants to take a backup before proceeding with updates. One of the most common reasons your WordPress site will break is when you update your plugins. Your plugins may not be careful with backward support and/or they may miss a buggy use case that you are using their plugin with. When the update happens, your site reading behavior may be impacted, or even page rendering that will basically break your pages which is more serious. When this happens, Updraft’s notice that takes a backup before performing updates which will be a reference point for you to restore in case needed.

Of course, this option is configurable and Updraft makes it prominent for WordPress admin to change this behavior:

Learn more about Updraft

Disclaimer: This post contains affiliate links that will help support this site. Even though it looks like a promoted post, I genuinely love, use and recommend Updraft free or paid plugins/services. I would have published exact same post even if I wasn’t using affiliate links.

When creating web applications with popular frameworks like react.js, angular.js, or similar, most likely, you will be utilizing a bundler/packager tool like webpack to bundle your application source code to combined bundle javascript files that can be loaded and executed by browsers. With the ease of package managers handling most dependencies, it’s easy to lose track of what’s included in your final application bundle file. We may be using an easy-to-use library that streamlines our workflow but it may come with a cost.

In this article, we will talk about ways to analyze and understand what goes into your bundle code and increase your awareness when picking libraries to use and their effect on the final js bundle size. You will:

• Realize what’s really inside your bundle
• Find out the modules make up the most of its size
• Find modules that got there by mistake
• Consider alternatives to optimize your bundle size

There are a few popular tools we can use with minimal effort to analyze our bundle, visually.

Webpack Bundle Analyzer

https://www.npmjs.com/package/webpack-bundle-analyzer

Install:

npm install --save-dev webpack-bundle-analyzer

Run your webpack to create stats.json:

webpack --json > stats.json

Start bundle analyzer:

npx webpack-bundle-analyzer stats.json

The bundle analyzer will start as a web application in its default port. Visit http://127.0.0.1:8888 to open the bundle analyzer web UI. You can analyze your bundle and the packages/dependencies you use and determine the costly dependencies and think about strategies to optimize or find lightweight alternatives using the bundle analyzer:

Alternatively, https://github.com/danvk/source-map-explorer works in the same way the webpack bundle analyzer works.

Webpack Visualizer

Webpack visualizer is another tool we can use to create a visual representation of your final bundle. you can use the webpack visualizer in two ways.

1) Using their web tool

The easiest way is to use their web tool to just upload your stats.json file. https://chrisbateman.github.io/webpack-visualizer/

2) Create stats.html using the webpack plugin

Webpack visualizer runs as a webpack plugin that generates a stats.html file containing an interactive visualization of your bundle contents. This method is useful if you want to include the creation of the stats.html as part of your CI/CD. It would be helpful for teams that want to continuously analyze every commit and have stats.html generated by the webpack visualizer to be part of your build artifacts in your CI/CD solution.

https://github.com/chrisbateman/webpack-visualizer

Bundlephobia

Aside from analyzing your bundle, you can also proactively be conscious of every dependency before adding to your bundle. Bundlephobia helps you to search packages and know what you are getting into, and the cost of the packages in your application. Bundlephobia also highlights the user/browser impact of this package when used in your application, like download and render timings. There is also a historical change between versions of the package you are analyzing highlighted in bundlephobia.

https://bundlephobia.com/

Bundlesize

There are different ways to monitor your bundle. One of the simplest ways is to make sure the changes you just made in your code didn’t bloat your bundle. Bundlesize is a simple tool that can be easily added as a step in your CI pipeline that keeps your bundle size in check. Bundlesize will fail if you exceed your maximum bundle size set for your project and also will highlight the delta from the primary branch of your code. This helps developers to see their commit’s impact/change in the bundle size.

https://github.com/siddharthkp/bundlesize

Despite its pain points for developers, it is hard to ignore WordPress’s popularity and flexibility it helps a lot of people for entry and mid-level website building. WordPress is a very powerful website builder tool but has an extremely fragmented plugin marketplace resulting in a lot of site owners with websites being powered by a mashup of a lot of plugins and different styles of coding/implementation and opinions from different developers. When not done carefully, it may result in low-performing websites. So optimizing WordPress-powered websites is a real effort. But regardless of the plugins used in the back-end, there is a very common optimization step that applies to the vast majority of WordPress sites.

Almost all WordPress sites generate static content at the end of the day and most of these sites don’t have proper caching and CDN is not set up behind them. When these two are combined, it can make a day and night difference on the site performance. In recent Google updates, now this directly affects your site’s ranking in search engines as well as social visibility (i.e: Facebook preferring higher performing sites in their news feed algorithm). Let’s expand on these two methods and what they mean.

Caching strategy for your website

Caching is one of the key elements of performing software. There are many ways to apply caching in software. But essentially, what caching means is for your servers to remember what calculations they did before. There may be some expensive calculations that may need to happen for a software function to do its job. But if calculated once, with the right caching strategies, it can store and remember that expensive calculation at a much faster speed.

Caching is especially important for websites that receive a lot of traffic. WordPress is essentially your website rendering engine. And once a page is rendered, there are ways to eliminate the repetitive need to keep re-rendering the same page if you get a lot of visitors to the same page. There are different ways to cache stuff in WordPress, but at the end of the day, we only care for the rendered page to be cached completely, and if possible, the server to serve pre-rendered page without needing to re-render it again. 

Get blazing fast with WP-Rocket

We have experimented with many WordPress optimization plugins. One plugin that stands out far ahead in the competition that is worth taking presence for this article is WP-Rocket. WP-Rocket comes with a simple configuration that combines, compresses, and optimizes your WordPress pages and provides caching that will increase your page load speed. The change will be very visible since WP-Rocket converts your WordPress page output to static, minimized files that are served to your users’ browsers very fast. Without proper caching, your WordPress page will render every time a user reads your content and your traffic will be directly dependent on your server power. WordPress takes the strain off from your server with intelligent caching that majority of your traffic only incurs static file serving that happens very quickly. Another benefit of using WP-Rocket is that optimizes your traffic responses with better cache headers which can be combined with services like Cloudflare that will accelerate your traffic load served from cache, in most cases not even from your server, but servers at edge network, provided by services like Cloudflare. 

You don’t need the paid version of WP-Rocket and the free version comes with a lot of features that will make a visible difference with just a few clicks. Similarly, Cloudflare’s core service is also a free and great start for a brand new WordPress site.

Learn more and get started with WP Rocket

For further optimization, you can set up and configure a CDN on top of WP-Rocket aside from or instead of Cloudflare to take better performance benefits.

Content Delivery Networks

Rocket CDN (by WP-Rocket)

If you’ll go down the road, wp-rocket comes with its CDN offering that is flat-rate priced and provides unlimited bandwidth and edge storage. It will be the easiest integration with wp-rocket to enable this option.

Learn more about Rocket CDN

Cloudflare Auto Optimize

Cloudflare comes with their own WordPress content delivery option even though they will do DNS proxy-based caching to make your traffic served with optimized network caching if you are using Cloudflare’s primary service offering. Beyond that, Cloudflare comes with an affordable, flat-rate service that is pretty much out of the box, with zero configuration for WordPress sites. All thou need to do is to install their WordPress plugin, log in with your Cloudflare account and subscribe to their service.

Learn more: https://www.cloudflare.com/automatic-platform-optimization/wordpress/

Cheap CDN Bunny.net

If you want more control, there are many traditional CDN solutions. I suggest a simple and very affordable bunny.net we used in the past. Bunny has one of the most cost-competitive offerings with a great performance.

They offer an official WordPress plugin for easy integration documented here.

Disclaimer: WP-Rocket links above are affiliate links that help support this blog. But regardless, wp-rocket is a great plugin and service I used many times before paying for their premium plugin and services. I’d write them even if they didn’t have an affiliate program.

https://rclone.org/ is a command-line file/folder sync tool that connects with many cloud storage providers like AWS s3, FTP, google drive, dropbox…

It’s easily configured once then with simple commands, allowing two-way syncing between different cloud providers or local file systems.

This makes it the perfect and simplest backup solution on your personal server to take backups and sync them to multiple cloud providers.

I do have the following cron runs once a day along with a few other scripts that prepare the backups.

rclone sync -v /data/backups mfyz-gdrive:mfyz-server-backups-rclone

This command syncs my backups folder (contents) to a folder in my google drive. 

Backups

The way you take your backups will be up to you. You could even directly sync your application folders like apache httpdocs folder but that’s too many files that may update too frequently. Instead, you can tar, gzip your folders or take database backups before running rclone for your backup solution.

I have the following, simple backup script on my server takes my wordpress site’s snapshot daily, then rclone syncs it up to my google drive.

cd /data/backups
now=$(date +"%Y%m%d")
echo "--> backing up mfyz.com"
echo "files backup..."
tar cpf backup-mfyz-$now-files.tar --exclude=Files --exclude=wp-content/uploads --exclude=wp-content/cache --exclude=tr/wp-content/uploads --exclude=tr/wp-content/cache --exclude=.git ../www/mfyz
echo "database backup..."
sudo mysqldump mfyz_wp | gzip > backup-mfyz-$now-db.sql.gz
echo "done"

Monitoring

In my daily cron tasks, after running rclone, I also have a health check to make sure my backups are taken correctly. So a ping service monitors my daily tasks run successfully. I’ve written about open-source health check/ping service you can use or self-host yourself here: https://mfyz.com/monitoring-your-microservice-stack-with-simple-ping-health-checks-using-helathchecks-io-for-free/

Web accessibility is one of the keys and often missed parts of web development. If you are building a website for a larger, general audience, you have to make sure your page complies with web accessibility standards (most known WCAG). 

Making sure your website is accessible is no small task. There are obvious steps you have to take but the real accessibility issues are not easy to understand and pinpoint before a real user with a disability visits your site using tools like screen readers or other accessibility aiding tools. To do it right, most companies work with audit companies that are experienced in testing your site using variations of these tools to cover as many real accessibility scenarios as they can. But getting your site audited for accessibility is also going to cost you.

Web accessibility compliance also becomes a mandate for websites serving to certain industries (like government, insurance, banking…) that you are obliged to make your site accessible at all times. But most consumer sites this is not a requirement but a work to make your site/brand more inclusive of all users. 

I want to talk about a browser extension (and a react library) that helps you to detect the obvious, programmatically, and easy to detect issues that you can address quickly to cover the majority of the basic accessibility issues on your pages as a quick win.

Axe

Axe is a software and service that both have professional solutions as well as free browser extensions (Chrome, Firefox, and MS Edge) that are very easy to install, activate and start seeing your page’s accessibility compatibility and issues. 

Visit https://www.deque.com/axe/ to learn more and install the browser extension. The extension is pretty straightforward to use that runs on a page you open and shows issues, explanations of what the issue is, how to solve it to make your page more accessible.

React-axe

There is also react npm package that you can activate in your development environments that helps you to audit the final rendered DOM tree similarly to the chrome extension.

https://www.npmjs.com/package/@axe-core/react

When bootstrapping a new product, regardless of platform and solution is used in the back-end and front-end, the times come very quickly that you will need to integrate with 3rd party platforms to create continuity of the product’s user experience between different solutions.

As a good example of this, let’s say you bootstrapped a small SaaS product that helps users to calculate their taxes. Your product is not going to be only the software solution you created but the whole experience from customer support to documentation or educational materials, perhaps some marketing experience when acquiring and onboarding your new users. So right off the bat, we will need a customer support solution, marketing tool. Perhaps a CRM-ish tool to use as our “customer master” database. And will want to channel everything there as much as we can.

But when someone signs up, your back-end only creates their user account, and their customer support record, CRM record, or marketing tracking is not connected. Most likely, these will be separate services like Intercom, Zendesk, Mailchimp, etc. And obviously, your own backend/database where your user’s initial records are created and their engagement with your core product happens.

I have planned and done these integrations many times over in different products and worked with many 3rd party services to integrate. Some niche solutions that I had to integrate don’t have proper APIs or capabilities. Setting some of these exceptions aside, most tools have integrations with well-known platforms like Salesforce, Facebook Ads, IFTTT, Slack. And as a common and growing theme, most tools also have integration with Zapier which is the main event I want to come to.

Eventually, I find myself evaluating Zapier Integrations between these platforms to cover most of the use cases we often spend days doing single integration. Where if the triggers and actions are covering what we are trying to do, I started to suggest my clients and the rest of my team create Zapier focused integrations.

There is an easier way. A big majority of people working in the process/product/team management space uses sheets on a daily basis. Either Excel or Google Sheet covers that big majority of the use cases. I evangelize Google Sheets just because of its real-time collaboration and ease-of-access capabilities. It’s free and a large majority of people having google accounts making it very universal.

I have done direct google sheet integrations in the past many times. But recently I like the concept of using google sheet as a source that can be commonly used by other services for integration purposes. Since it’s a living document, it’s very easy to make changes on a document or listen to changes happening on documents (by humans or APIs). This makes it an amazing candidate for using it with Zapier to use it as a “source” of data. It makes Zapier the magic glue here to serve as a universal adapter to anything else we want to connect to. Having thousands of services available in Zapier makes it a meeting ground for moving the data we provide through google sheet to anywhere else.

I need to say this will be limited based on each service’s capability and the available actions/triggers in the Zapier platform. But most SaaS solutions invest enough effort and time to make their Zapier integrations rich enough to serve the most common use cases. It won’t cover 100% of needs but it will certainly eliminate a lot of basic integrations like slack, email notifications, marketing tools triggers (i.e: follow-up campaigns).

This is not a code-less solution

When going down this route, the biggest work and challenge will be integrating Google Sheet APIs to connect your account (through oAuth process), and store your credentials in your server and create the server → gsheet integration to send your back-end changes to a google sheet document. It’s not the easiest API to integrate with but it’s well documented, very mature, and has endless examples in the community (github). And best of all, this one integration opens up so many without needing to do further integration. Even in the most basic products, we find ourselves doing slack, email deliveries in MVP versions. Investing the same effort in google sheet will easily justify itself later.

Trade offs

One big trade-off is to have your user’s PII data to be transported, stored in a google sheet (which will be private), and then sent to Zapier. If you are super paranoid or have to comply with certain privacy regulations, managing this traffic may need to be done more sensitively or completely unfeasible for your product. But the majority of products I built do not need that rigorous audit and compliance. So this solution has worked for me many times.

Example

I want to show a sample integration to set up a google sheet as a trigger and put a Slack notification as an action. Hopefully, this showcases some imagination and helps you understand where this can go.

Set up Google Sheet changes as “trigger”

Create a new zap or edit the existing one to change the “trigger” service. Select Google Sheets.
In the first step, you will be asked to select the google account linked to your zapier account. If you haven’t done it yet, or want to connect to another account then you currently have, you can do it in this step.

After selecting the account, Zapier will ask you to select what event you want to set this zap to listen to. Generally, we will inject a new row into a sheet in one of the documents. So we select “New Spreadsheet Row” as the event to listen to, but as you can see, you can select other events like updating a spreadsheet row or new worksheet creation in a document.

Now you will need to select which document and which worksheet to listen to. Zapier will show document and sheet selection dropdowns here.

As the final step, you will be able (and kinda have to) to test your trigger that will pull a sample row from your sheet. Make sure you enter values into your columns in order to use this sample data to set up your further actions in zapier. Zapier will show these sample values when you create actions using these values.

Set up Slack as “action” to send a message to a channel

Now, we’ll use this trigger in any service we want. We can also create multiple actions where you can send an email and slack notification and create a new Intercom customer record at the same time in one zap.

For this example, in the “action” section we will select Slack service when asked.

First, we will select the type of “action” we want to perform. We will select “Send Channel Message”. You can select other actions like send a direct message or others.

Then, similar to Google sheet initial steps, we will first select the slack account we want to use.

And finally, with seeing a lot of options, we will set up the sender name, avatar, and other details, but most importantly, the channel we want the message to be sent to and the message content itself:

Zapier is pretty intuitive and simple to construct smart content areas like this one. You will be able to both type a static message as well as insert the actual data (variables) from your source. In this example, our source is the google sheet document. So you will see a dropdown with search capabilities to search and find the actual column value you want to insert when you want to construct a message with dynamic parts.

Once everything is done, you will be able to finish this step and will be forced to test the action you just set up. And all done! Don’t forget to turn the zap “on”.

This is just the most simple example I can use. There are many use cases you can allow this integration to push changes/data into thousands of services available in Zapier.

Happy Zaps!

You guys know how much I love thinking, talking, and geeking about ways to smartly preserve our knowledge in form of written communication. I talked a lot about written communication and making our digital documents smarter before.

Although Notion is not my primary knowledge base, note-taking tool, I really love certain aspects of how Notion functions. Probably the best feature of it among other tools is how you can publish any document publicly. The output it creates is very minimal and clean. The second best thing about Notion is to support almost any type of web-embed code. With this, you can practically embed any interactive widgets or content pieces to your documents. Very much like a web page, Notion makes the documents you publish online as — pretty much a fully-fledged web page. 

This made Notion an attraction point for a lot of people to create microsites, sub-sites, and a lot of plain content to be written in notion and used in existing websites.

Today, I want to talk about a Notion enthusiast Stephen’s guide, and a mini-project that allows us to set up a custom domain/subdomain for our notion documents.

Stephen’s code runs on serverless “Cloudflare Workers”. This allows a few customizations like dark/light mode toggle/switch on your page as well as nice URLs (slugs) when you set up your notion document with the worker code. It’s a pretty simple, almost no-code solution. In fact, you don’t have to worry about the code, Stephen created a mini UI to allow you to customize your configuration while setting it up. It takes about 5-10 minutes to set it up but it’s worth it.

Give it a try

Check out the step by step tutorial on the project site: https://fruitionsite.com/

You can also jump right in the video tutorial:

I love this method allows you to spin up a super-fast website that you can continuously edit/update from Notion and cost nothing.

Use an existing google sheet document or create a new google sheet and once you are done with your content;

“Click Share” button on top right corner:

By default, the “link sharing” is not enabled by default.

In the “Get Link” section, click “Change to anyone with the link”

 Copy the link and click Done to close this pop-up.

Now, as second step on the google sheet side, we have to publish the document to web. To do that, click “File > Publish to the web” option from the menu.

 And publish your document in the publish pop-up:

We’re done on the google sheet side. Now we’ll get the document id from the url we copied and reformat it for the JSON output.

https://docs.google.com/spreadsheets/d/1yxaigtzh48EV8sJioJIZJz_HovKQ6OJH6BLq1alA4GI/edit?usp=sharing

Get the document id from the link. For the example sheet I created (the link above), the document id is:

1yxaigtzh48EV8sJioJIZJz_HovKQ6OJH6BLq1alA4GI

Now, let’s construct our JSON url using the document id:

https://spreadsheets.google.com/feeds/cells/_YOUR_SHEET_ID_/_SHEET_NUMBER_/public/full?alt=json

As you see, aside of the document id, you need to define the sheet index. It’s the sheet tab you want to get as JSON object needs to be entered as number in the url template above.

My sample document had just one tab so the tab index will be “1”. The final url for this example will be:

https://spreadsheets.google.com/feeds/cells/1yxaigtzh48EV8sJioJIZJz_HovKQ6OJH6BLq1alA4GI/1/public/full?alt=json

Now you can access to the content of the sheet in a flattened object. 

{
  "version": "1.0",
  "encoding": "UTF-8",
  "feed": {
    "xmlns": "http://www.w3.org/2005/Atom",
    "xmlns$openSearch": "http://a9.com/-/spec/opensearchrss/1.0/",
    "xmlns$batch": "http://schemas.google.com/gdata/batch",
    "xmlns$gs": "http://schemas.google.com/spreadsheets/2006",
    "id": {
      "$t": "https://spreadsheets.google.com/feeds/cells/1yxaigtzh48EV8sJioJIZJz_HovKQ6OJH6BLq1alA4GI/1/public/full"
    },
    "updated": {
      "$t": "2021-04-28T16:11:58.672Z"
    },
    "category": [
      {
        "scheme": "http://schemas.google.com/spreadsheets/2006",
        "term": "http://schemas.google.com/spreadsheets/2006#cell"
      }
    ],
    "title": {
      "type": "text",
      "$t": "Sheet1"
    },
    "link": [
      {
        "rel": "alternate",
        "type": "application/atom+xml",
        "href": "https://docs.google.com/spreadsheets/d/1yxaigtzh48EV8sJioJIZJz_HovKQ6OJH6BLq1alA4GI/pubhtml"
      },
      {
        "rel": "http://schemas.google.com/g/2005#feed",
        "type": "application/atom+xml",
        "href": "https://spreadsheets.google.com/feeds/cells/1yxaigtzh48EV8sJioJIZJz_HovKQ6OJH6BLq1alA4GI/1/public/full"
      },
      {
        "rel": "http://schemas.google.com/g/2005#post",
        "type": "application/atom+xml",
        "href": "https://spreadsheets.google.com/feeds/cells/1yxaigtzh48EV8sJioJIZJz_HovKQ6OJH6BLq1alA4GI/1/public/full"
      },
      {
        "rel": "http://schemas.google.com/g/2005#batch",
        "type": "application/atom+xml",
        "href": "https://spreadsheets.google.com/feeds/cells/1yxaigtzh48EV8sJioJIZJz_HovKQ6OJH6BLq1alA4GI/1/public/full/batch"
      },
      {
        "rel": "self",
        "type": "application/atom+xml",
        "href": "https://spreadsheets.google.com/feeds/cells/1yxaigtzh48EV8sJioJIZJz_HovKQ6OJH6BLq1alA4GI/1/public/full?alt=json"
      }
    ],
    "author": [
      {
        "name": {
          "$t": "..."
        },
        "email": {
          "$t": "..."
        }
      }
    ],
    "openSearch$totalResults": {
      "$t": "4"
    },
    "openSearch$startIndex": {
      "$t": "1"
    },
    "gs$rowCount": {
      "$t": "1000"
    },
    "gs$colCount": {
      "$t": "26"
    },
    "entry": [
      {
        "id": {
          "$t": "https://spreadsheets.google.com/feeds/cells/1yxaigtzh48EV8sJioJIZJz_HovKQ6OJH6BLq1alA4GI/1/public/full/R1C1"
        },
        "updated": {
          "$t": "2021-04-28T16:11:58.672Z"
        },
        "category": [
          {
            "scheme": "http://schemas.google.com/spreadsheets/2006",
            "term": "http://schemas.google.com/spreadsheets/2006#cell"
          }
        ],
        "title": {
          "type": "text",
          "$t": "A1"
        },
        "content": {
          "type": "text",
          "$t": "A1-Test"
        },
        "link": [
          {
            "rel": "self",
            "type": "application/atom+xml",
            "href": "https://spreadsheets.google.com/feeds/cells/1yxaigtzh48EV8sJioJIZJz_HovKQ6OJH6BLq1alA4GI/1/public/full/R1C1"
          }
        ],
        "gs$cell": {
          "row": "1",
          "col": "1",
          "inputValue": "A1-Test",
          "$t": "A1-Test"
        }
      },
      {
        "id": {
          "$t": "https://spreadsheets.google.com/feeds/cells/1yxaigtzh48EV8sJioJIZJz_HovKQ6OJH6BLq1alA4GI/1/public/full/R1C2"
        },
        "updated": {
          "$t": "2021-04-28T16:11:58.672Z"
        },
        "category": [
          {
            "scheme": "http://schemas.google.com/spreadsheets/2006",
            "term": "http://schemas.google.com/spreadsheets/2006#cell"
          }
        ],
        "title": {
          "type": "text",
          "$t": "B1"
        },
        "content": {
          "type": "text",
          "$t": "B1-Test"
        },
        "link": [
          {
            "rel": "self",
            "type": "application/atom+xml",
            "href": "https://spreadsheets.google.com/feeds/cells/1yxaigtzh48EV8sJioJIZJz_HovKQ6OJH6BLq1alA4GI/1/public/full/R1C2"
          }
        ],
        "gs$cell": {
          "row": "1",
          "col": "2",
          "inputValue": "B1-Test",
          "$t": "B1-Test"
        }
      },
      {
        "id": {
          "$t": "https://spreadsheets.google.com/feeds/cells/1yxaigtzh48EV8sJioJIZJz_HovKQ6OJH6BLq1alA4GI/1/public/full/R2C1"
        },
        "updated": {
          "$t": "2021-04-28T16:11:58.672Z"
        },
        "category": [
          {
            "scheme": "http://schemas.google.com/spreadsheets/2006",
            "term": "http://schemas.google.com/spreadsheets/2006#cell"
          }
        ],
        "title": {
          "type": "text",
          "$t": "A2"
        },
        "content": {
          "type": "text",
          "$t": "A2-Test"
        },
        "link": [
          {
            "rel": "self",
            "type": "application/atom+xml",
            "href": "https://spreadsheets.google.com/feeds/cells/1yxaigtzh48EV8sJioJIZJz_HovKQ6OJH6BLq1alA4GI/1/public/full/R2C1"
          }
        ],
        "gs$cell": {
          "row": "2",
          "col": "1",
          "inputValue": "A2-Test",
          "$t": "A2-Test"
        }
      },
      {
        "id": {
          "$t": "https://spreadsheets.google.com/feeds/cells/1yxaigtzh48EV8sJioJIZJz_HovKQ6OJH6BLq1alA4GI/1/public/full/R2C2"
        },
        "updated": {
          "$t": "2021-04-28T16:11:58.672Z"
        },
        "category": [
          {
            "scheme": "http://schemas.google.com/spreadsheets/2006",
            "term": "http://schemas.google.com/spreadsheets/2006#cell"
          }
        ],
        "title": {
          "type": "text",
          "$t": "B2"
        },
        "content": {
          "type": "text",
          "$t": "B2-Test"
        },
        "link": [
          {
            "rel": "self",
            "type": "application/atom+xml",
            "href": "https://spreadsheets.google.com/feeds/cells/1yxaigtzh48EV8sJioJIZJz_HovKQ6OJH6BLq1alA4GI/1/public/full/R2C2"
          }
        ],
        "gs$cell": {
          "row": "2",
          "col": "2",
          "inputValue": "B2-Test",
          "$t": "B2-Test"
        }
      }
    ]
  }
}

You can construct a matrix on your integration using following javascript address in the large JSON response:

feed.entry[].gs$cell

this sub-object will contain the row, cell and the text value of the cell. If you have formulas, you can get the raw entry in the cell in this object as well.

Note: When you hit your constructed JSON url, if you get the error below, make sure you published your document publicly.

When planning, designing and implementing the infrastructure of a product, the most common pattern we follow from the back-end perspective is to build the back-end in the distributed model using microservices. But there is a cost that comes with this model which is monitoring, alerting, and maintaining. Each microservice can be living on its own container with its own dependencies. We often build too many moving parts with the microservices approach. A very simple app can have always running services, scheduled jobs, and workers distributed in many different infrastructure elements. And the rise of containerized applications or tasks allowed us to build our products with even more micro-scale code pieces running on serverless infrastructures.

There are many solutions to monitoring and alerting if a service is properly running but it’s often difficult to centralize the monitoring.

There is a very simple yet effective approach I like and seed the very minimal integration to most of my microservice components from servers, pings, a script doing a cleanup, or backup. It’s very similar to ping checks but a little bit more simplified and universal. Ping checks generally require your “parts” of your code to either publicly available and/or serve a status on HTTP/TCP/UDP traffic which may not be available based on your “component” runs.

In this post, I’d like to focus on open-source software that you can easily set up and run your own instance for free. They also provide a SaaS version of the software that you can get started for a free or low cost.

The principle of this service is very simple. Essentially, you create a “check” and, the software expects a ping from your component in regular intervals. You can set up what these intervals can be, group/organize them, and set up alerts in case a check fails to report (ping) within the grace period you can adjust.

The service can integrate with many mainstream ops-support/escalation services like pager duty, opsgenie… or simpler services like slack, email, or SMS using Twilio for the basic notifications.

Check out the service, their open-source software page, and their documentation here: helathchecks.io

At Nomad Interactive, we are relatively new to contributing to npm with our own packages. Our initial designs of how we packaged certain things that are common throughout our projects, like eslint configurations, or some generators we created for ourselves… We initially packaged them as private repositories without thinking too much about its versioning, supporting multiple versions of (let’s say eslint, or react.js). Then it became clear that we had to version our packages properly. So we started our research to see how we can easily spin a private registry of our own and distribute our packages privately to authenticated users which are not. 

We found verdaccio as an open source and lightweight npm registry. We were able to spin an instance very easily on our docker swarm in minutes and start pushing private packages with our initial versions.

https://verdaccio.org/

If you need private registry for your team/company verdaccio is definitely a great quick and easy solution to get started.

Although we switched our mindset from, “why private packages anyway?” to let’s share everything we do with the world. So we questioned do we even need a private package at all? And the answer was no. Nothing we do is government secret or any secret at all. So we converted them to public packages and start pushing them to npm directly. The issue is, we definitely don’t have any real open source software management thought put behind any of those packages at all. So if we receive a pull request, we’ll most likely to neglect it (even though I’ll be very appreciative about it).

One thing I gotta say is, a private npm registry occasionally became painful to get it working properly on our CI/CD pipelines due to authentication. And Verdaccio doesn’t have support for registry tokens, or tokenized access separate from the users. So you have to create a user for your registry and that will probably need to be a git user. And if you are in a licensed environment like gitlab.com or GitHub, you may be forced to pay for a user that only CI/CD will use. Not a big deal but a side note that we had to deal with…

I always love services allowing developers to quicken the time from zero code to a live URL for a web application. Large majority or web applications I write – mostly for hobby topics – are very simple, not too complicated or crowded applications. So by my experimental nature, I create a lot of small apps. Most from scratch or using plain boilerplate codes I created in the past for myself for these experimental ideas.

Generally, when my code is ready to show to someone, I waste a lot of time on doing boring steps to prepare the app to make it visible somewhere. Thanks to services like heroku, this is way much less of a headache now. Readers follow me, knows I showed my love to heroku with multiple articles previously 🙂

I want to another service that brings me joy when I see I’m cutting a lot of annoying time that I want to teleport myself using these services when I bootstrap an idea and make it live and ready to prime time. Now.sh is a delightful service I discovered when I needed a static hosting for a react.js web app I wrote that I wanted to put up very quickly. There are some apps that I don’t even want to create a heroku git repository or want even faster turnaround on my steps to write and publish an app.

Now.sh allows single command line to be live on my web apps. Now.sh is actually name of the CLI tool for the parent service “Vercel”. To install their comamdn line tool, simply install “now” package globally from npm:

npm i -g vercel

Then first create your account on vercel and run 

vercel login

to login to your account. Now you are good to go.

One command deployments for non-git projects – or automatic deployments for every commit

In your project folder. Simply run

vercel

command that will automatically deploy your code (the files in the current folder) to vercel with an automatically generated subdomain under “.now.sh”. If you want, you can attach your application to a custom domain of your own for free: https://vercel.com/docs/custom-domains

Instant API

Vercel/Now.sh also provides AWS-Lambda style “serverless” architecture. What I love about this model is that Vercel allows you to write an API endpoint in javascript in very very very simple way. You just create a javascript module file, exporting a function with 2 arguments req, res, very similar mimicking express req and res objects. So it’s familiar and even simpler than creating an express application and link it to a router. You simply create “api” folder and create “hello.js” which gives you …deployment-url…/api/hello endpoint.

Here is an “echo” endpoint that returns what’s sent to it:

module.exports = (req, res) => {
  res.json({
    body: req.body,
    query: req.query,
    cookies: req.cookies
  })
}

save this as echo.js under api folder in your project and you have yourself an endpoint 🙂

As simple as it looks, there are more advanced topics on this in vercel’s documentation: https://vercel.com/docs/serverless-functions/introduction

Github integration

Another great feature I really like is direct and seamless integration to github repositories. I experimented with very portable development environments such as coding on iPad and such in the past. I find zero configuration and zero dependency development models/environments very attractive. There was an occasion in recent months that I had to live on my iPad for 10 days and needed some quick way to deploy and code up some web based application with few back-end capabilities. Nothing complex. It was very hard and time consuming to construct a remote development environment and continuously work on ssh-based remote platforms instead of native platform I was using.

Thankfully I used now.sh’s github integration that removed the “deployment” and build steps off of my local environment. I still had to do very frequent pushes to a remote git repository (github) in order to make sure I am continuously not breaking my working app and moving along on the feature I was working on. But still, it had zero dependency on my local environment that I was using my favorite editor and was able to push code to github and rest was taken care by now.sh. I really enjoyed it’s github bot that was very responsively posting updates to commit and PR logs as comments. I was also getting deployment changes on my slack channels. So it was pretty instantaneous to make changes and make it live somewhere that I can share with my team. More on their github integration here: https://vercel.com/github

Final note

Vercel (formerly Now.sh or Zeit) is a great service for both bootstrapping and making your app scale. They are also very transparent and open on their tooling that makes moving out easy. So there is no fear of “locking in” to a degree.

There are also half dozen other beautiful features that I’m not talking on this article, worth checking out: https://vercel.com/

At Nomad Interactive, we done big design toolkit migration twice in the past. From old Adobe Photoshop/Illustrator era to Sketch, both utilizing other tools on our collaborative process like Invision, Zeplin. About a year ago, we made similar transition/migration to Figma.

Figma is a browser-based real-time collaborative design tool. Being vector-based makes it very efficient in the total document sizes. Vector objects are much more descriptive for the elements we create in the artboards which allows further extendability via plugins. Also, a browser-based engine makes it web technologies friendly, like javascript-based API that is most common with Sketch already.

One tool to rule them all

We used sketch to create our digital designs for years. Plus used invision for presentation purposes. We had a particular process to export our designs, place them in dropbox, then upload to invision with same/similar project list and configuration. On the other hand, for Designer to Developer handover, we started to use the beautiful startup Zeplin. But, Invision knocked them off pretty quickly, so we put some of our focus to adapt Invision’s “Inspect” feature. Not long after, we moved to Figma which replaced 3 of these tools without any adaptation or question in our minds. When we gave Figma a try in a single project, it was clear very quickly that we don’t have to jump between tools for different purposes. Then we switched over.

Collaborate – Seriously

The best of what makes Figma different than other design tools is the real time collaboration features. Being able to see all viewers and editors cursors, seeing the design changes real-time. This is a similar paradigm shift happens between a static file focused “Word” versus online, real-time collaborative alternative, google docs or quip. It makes the “creation” process much more like a white board session if utilized well. We started to do collaborative design sessions on the same project with multiple designers, product managers/owners, project managers. Not everybody designs, but they can actively collaborate on the design process, providing direction to the designers on the large artboards. It’s very much like the whiteboard session.

Not all good

This process change, resulted us to see the low-fi UX thinking process to be much more visible. This let non-designers to be more active participants of the earlier parts of the design process. Also results getting wireframes to be done very closely to the actual designs (we’re mostly talking about digital product designs – like mobile application UIs or e-commerce sites). The danger is mixing these two phases of the design process that is generally better to keep them separate for the sake of putting the mind in the right concerns at the right time.

We generally dedicate wireframing period to bake the digital product’s functionality focused discussions and iterations. And the UI/Creative design period to be more concerned about look and feel, colors, typography, animations, creating emotions after we know how the product is wanted to be working. Figma’s collaborative design feature brings these two worlds together closer. There is a danger to mix it up so all the sudden you will be hearing button color instead of what the button should say or do when interacted.

A weird need on designing on mobile platforms (namely iPad Pro)

I have a weird need to make super-portable devices like iPad to be my go-to device to carry around (I already make my “thinking” oriented tasks on iPad – like writing this article). But I have a burning desire to see the iPad to be able to handle more complex tasks like writing code (not just writing, but compiling or having the runtimes for scripting languages – not yet). Or doing more complex design work – at least on the sketch/Figma level. I’m not asking to be able to do render-heavy design tasks like photoshop does. That is also not what I need or do in 99% of the time.

I gotta say, Figma is being the closest in that game if this is a practical or real future need. We know Sketch developers said they will not going to port their macOS app to the mobile platform. And Adobe is taking a different (probably nicer – native) path but a long one to get their suite of applications in the mobile platforms – but we’re already over with Adobe products. On the other hand, Figma practically runs without any issue on the mobile-safari. But with a huge lack of touch and mobile interaction support. There are some attempts to get it better (i.e: Figurative app). But still a short road to see Figma is fully iPadOS compatible. I’m sure Figma team is already working on this and hope that day comes sooner.

http://figma.com/