Author: mfoster

My daughter recently become interested in web development but her school Chromebook was locked down so she couldn’t install an app locally to edit HTML files. She needed a development solution that would allow her to write markup so she could learn all the tags versus a graphical editor (I.e., Wix, Canva, or WordPress page builders). It seemed silly to get a her another laptop just to edit some HTML files so I started looking at cloud-based development options.

There are a couple solutions for working with snippets like CodePen and JSFiddle but I wanted something a bit more like a local dev experience. At the other end of the spectrum are full virtual desktop infrastructure (VDI) solutions like Azure Virtual Desktop, Citrix, Amazon Workspace, and others. Those seemed too heavy weight for just editing some HTML files. I was looking for something in the middle and inexpensive for an hobbyist web builder.

Here are the options I looked at:

• Visual Studio Code for the web – If you can access local files at least, and view local files in a browser this looks like a nice, lightweight option. It’s still in preview but it doesn’t look like there is any cost at this time.
• Replit – Replit provides an in-browser IDE that allows you to write and view your code. They offer a free trial so I gave it a try using their HTML, CSS, JS template. The editor seemed pretty nice and I could easily view my page output in the right-hand preview pane. I also noticed there were quite a few tools in the lower-left pane. I.e., The Replit AI pair programmer. This looks like a good option.
• CodeSandbox.io – CodeSandbox looks very similar to Replit but it just worked. I click the free trial, chose the Vanilla Codesandbox and I could just start editing HTML files and see the output in the right pane. Another good option.
• Gitpod – Gitpod looks interesting but it assumes you are starting your project from a repo. I couldn’t figure out how to simply start a new project and start building some web pages. My daughter is pretty smart for her age but she doesn’t know anything about code repos yet.
• Github Codespaces – Codespaces is nice for building a service and saving it right to your repo but I couldn’t find a way to quickly preview a web page without running a server of some kind. I wanted something quick and easy for kid to write web pages on.
• Google’s IDX – This project looks interesting but I could only sign up for the waitlist so not an option at this time.

We landed on Visual Studio Code for the web. My daughter was able to use it on Chromebook and I could even “install” it and put a shortcut on her taskbar. She is editing the text in the browser but still still loading from and saving to local files. This is nice because if Visual Studio Code for the cloud ever goes away she would still have her files.

I think Replit or CodeSandbox would have been good solutions as well. They are easy to use and beginner friendly and provide templates for more advanced development projects with React, Next,js, Angular, etc. Judging by the templates and tool sets available I would say Replit has a larger feature set while CodeSandbox has a more narrow focus on web development.

Let me know if there are other options you don’t see on my list. Thanks!

I took a hiatus from hackathons for the past few months to focus on my latest passion project: FireflyWP. It is a blog site dedicated to WordPress performance and design using the new full-site editor. Out of the box WordPress is pretty fast and will provide 100% Lighthouse performance score but over time as you add plugins and change themes, the performance can degrade. FireflyWP is focused on helping folks diagnose and fix their WordPress performance issues.

Are you building a new WordPress site or trying to improve the performance of an old one? The articles on FireflyWP.com can save you a lot of time and frustration. -Mark

CSS Flexbox and Grid have changed the game when it comes to web page layout. Unfortunately it is not always so clear how best to use these tools to create the layout we need.

Below is a list of cookbook type resources I have found super helpful (no JavaScript framework required):

• Ten modern layouts in one line of CSS by Una Kravets – This awesome resource includes a video walk through. Una also created a Codepen style playground: https://1linelayouts.glitch.me/
• Common CSS Flexbox Layout Patterns with Example Code by Tobias Ahlin
• CSS Layout by Phuoc-Ng and other contributors – You may have thought you needed a JavaScript framework to implement some of these
• CSS Layout MDN Web Docs
• Getting Started With CSS Layout by Rachel Andrew
• 18 Free Beautiful CSS Layouts for User Interface Designers by Alex Ivanovs

Learn the basics:

• A Complete Guide to Flexbox by Chris Coyier on CSS-Tricks
• A Complete Guide to CSS Grid by Chris House on CSS-Tricks
• What The Flexbox?! by Wes Bos – A free video tutorial series on Flexbox
• CSS Grid by Wes Bos – Another free video tutorial series from Wes Bos

For my latest hackathon project I built a stage lighting system called LD Sync for the 5G Edge Computing Challenge with AWS. I had fun with this project because it involved controlling physical things (stage lighting) over an internet connection.

Here is my demo video:

You can find my full write-up on Devpost here: https://devpost.com/software/ld-sync

I wrote the project entirely in JavaScript and used WebSockets for real-time communication between the system components. If you are looking for example code showing how to interface with websockets both server-side and in-browser, you can find the repo here: https://github.com/MkFoster/ldsync

Check out my latest hackathon project, Company Cookbook, for Microsoft’s US Hack for Wellness: https://devpost.com/software/company-cookbook

It is a simple Microsoft Teams Tab application that allows employees to post links to their favorite nutritional recipes as part of a wellness program. Employees can build their own company cookbook of curated recipes. The app uses the link-preview-js module to get the recipe title, description, cover image, from the recipe page and adds a preview card to the grid layout on the Teams tab. MS Teams blocks external links by default so I still need to figure out a way to allow employees to easily hot-link into the source recipe page. It is a hackathon project so certainly not production-ready but there are some tidbits that might be useful in the code: https://github.com/MkFoster/companycookbook

I hosted the project on Microsoft’s Azure App Service which is similar to Lambda or Azure functions where you don’t need to worry about managing servers or container config files.  The difference from functions is that you can control your endpoints, routing, etc. in your app code.  You don’t need to configure API Gateway and you don’t need to do things differently for the platform.  I developed and tested this project locally like a normal Node.js w/ Express.js. 

The difference is that when I was done, I just clicked a button in the Microsoft VSS Azure App Service plugin to deploy my app.  It automatically packed everything up and uploaded it behind the scenes.  App Service knows that index.js and app.js are common entry points and automatically called my index.js to fire up the app.  It then provided a default URL (https://companycookbook.azurewebsites.net/) with TLS and forward requests to my app listening for HTTP on port 80.  Standing up an app with HTTPS is therefore effortless.

A negative: Very long cold start times on the free tier (like over a minute).  I would need to pay for at least the first non-free hosting tier which offers “Always on” if I hosted anything serious.

Update 11/19/2021

Photo Upper was announced a winner of the MuleSoft Hackathon “Communications, Media and Technology Special Mention” on Devpost.com. Woohoo! Here is the demo video:

Original story

I recently built a little web app called Photo Upper as my entry for the 2021 Mulesoft Hackathon. Photo Upper is a virtual event photo booth built on Mulesoft Anypoint flows invoking AWS Lambda functions.

Event attendees (I.e., a wedding or party) are given a URL or QR code they can scan with their phone to quickly launch the Photo Upper web page. They can then upload photos from their mobile devices using their camera directly or from their existing photos. Their photos are then viewable in the event gallery where all the event attendees can see them. Photos are shown in chronological order with the latest on top so you can see a full timeline of photos from the event. Users’ can do all of this without installing an app.

In the past, I have used Amazon’s API Gateway service to provide API endpoints and invoke AWS Lambda functions. For this project, I used AnyPoint Studio to build the API endpoints and hosted them in Mulesoft’s CloudHub. Anypoint studio provides AWS Lambda function connectors that I used to invoke the Lambda functions in this project. The Lambda functions handle getting a signed URL for upload to AWS S3, processing the images, and getting an image list for the gallery view.

Check out my submission and demo video on Devpost.com: https://devpost.com/software/photo-upper

My code can be found here out on GitHub: https://github.com/MkFoster/photoupper

For my second entry to the Graviton Hackathon, I created an image-first content management system (CMS) for creators called NightlightCMS. It provides a very simple interface to add new images and display them in a Masonry-style layout on the home screen. I think of it as more of an Instagram alternative rather than a WordPress alternative.

The bad press around Instagram got me thinking: Do social networks really make the world a better place? In at least one case, certainly not. Is there a better way for creators to share their work online and really own it? I think social networks have their place for less tech-savvy folks but perhaps we have some better alternatives as the typical web content creator becomes more sophisticated.

Instagram makes it easy to get your images online by providing an easy-to-use mobile app. What if we could do the same but allow creators to publish to their own web properties so they have full control over how their content is displayed and what is displayed next to it? This is where I am heading with NightlightCMS. Providing an easy-to-use app is not too difficult. The piece I still need to work out is an easy, cheap (nearly free) way for less technical users to host their own site.

The other important function that Instagram and other social networks provide is aggregation. You can follow people and get a summary view of updates from everyone you follow. Is there an alternative we can offer that doesn’t involve posts from troll farms mixed into our feed? I think it is high time to re-visit our old friend the RSS feed. I know, I know, it is clunky, difficult for not technical folks to use, etc. That’s all the more reason to give it some love. After I finish implementing the basics, I think RSS support will be the next feature for NightlightCMS.

RSS gives us just about everything we need. It is just missing a few friction-reducing features:

• A “follow” button. Don’t make the user copy and past a feed URL. I think Google has already caught on to this one: https://www.theverge.com/2021/10/8/22716813/google-chrome-follow-button-rss-reader
• Better and more consistent support for cover images
• Modernized feed reader apps
• User awareness – I think RSS feeds would be more popular if people knew they existed and how they worked. Unfortunately there are no million dollar ad campaigns pushing RSS feeds. 🙁

I recently had to set up SAML2 Single-SignOn (SSO) with CKAN. It was a bit of a challenge so I am posting some of the error messages I encountered with fixes below. Hopefully, someone else will find this helpful. 🤞 You can find the excellent ckanext-saml2auth plugin here: https://github.com/keitaroinc/ckanext-saml2auth

Issue 1: Config in the wrong section of CKAN .ini file

CKAN failed to start with ckanext-saml2auth plugin enabled. When I loaded CKAN in my browser I got an Internal Server error. I used tail -500 /etc/ckan/default/uwsgi.ERR to check the error log after restarting the service and found the following error:

RuntimeError: ckanext.saml2auth.user_email is not configured. Please amend your .ini file.

I verified I had the saml2auth config line in my ckan.ini (in addition to others):

ckanext.saml2auth.user_email = NameID

I moved my saml2auth config items under the [app:main] section of the ckan.ini file and that fixed it.

Issue 2: validUntil date expired in metadata XML from IdP

Now that saml2auth could see its config, I got a new error in my CKAN uwsgi.ERR file:

saml2.client_base.IdpUnspecified: No IdP to send to given the premises

After some searching and debugging I figured out that the “validUntil” field in the metadata XML file I was given by my identity provider was in the past. I edited the file and set a date in the future, restarted and that got me further but ultimately I ended up requesting a new metadata XML file with an updated “validUntil” date.

Issue 3: User not authorized to log into the app in the IdP

I got a little further at this point but hit another error when I attempt to log into CKAN:

Bad login request: unsuccesssful operation: ...
... User is not authoirized to perfrom Federation SSO ...

To fix this issue the identify provider (Oracle) had to be configured to allow users to log into the app. I don’t have visibility into the IdP side so can’t provide more detail than that.

Issue 4: saml2auth can’t verify the signature

We got a bit further along in the process but encountered this error.

Bad login request: Failed to verify signature

To fix it, I obtained a new metadata XML file from the IdP with a future “validUntil” date on it.

Finally, success!

Until masonry is implemented as part of the Level 3 CSS Grid Layout spec, you still need to use JavaScript to achieve the Pinterest-style Masonry layout. CSS Grid will get you part of the way there but it can’t handle bumping up tiles to fill gaps left by short tiles. I have been looking for a JavaScript library to handle this. Here are some of the candidates I’ve found:

• Masonry
• Macy.js
• MiniMasonry.js
• FlexMasonry
• gridify.js
• driveway

Here is a good CSS-Tricks article on the subject: https://css-tricks.com/piecing-together-approaches-for-a-css-masonry-layout/

I am finishing up my first submission to the AWS Graviton Hackathon: Flip this WordPress

I migrated this WordPress blog from my old cPanel host to a new Graviton instance in AWS. What’s special about Graviton you might ask? AWS is using the same chip architecture that cell phones use to minimize power consumption by their data centers. It turns out that chips using the Arm64 architecture uses less power than an x86 chip for the same workload. This makes sense because Arm64 is used in mobile applications where battery life is precious.

Do all the WordPress dependencies run OK on an Arm64 platform? Let’s run through the checklist:

• Linux? Check – Ubuntu 20 LTS runs great on Graviton
• Apache? Check – Apache runs great on Graviton
• PHP? Check – AWS worked with the PHP dev team to make sure PHP 7.4 runs great on Arm64
• MySQL? Check
• Miscellaneous things I forgot about? Check because it works (so far). 😀

To my surprise, everything just worked the same way as an x86 instance. It amazes me that so many different open source projects have implemented support for Arm64. Maybe it is all those Raspberry Pi’s folks have been playing with.

How can you even tell you are running on an Arm64 box? Look for “aarch64”. In WordPress login to the dashboard, click “Site Health”, “Info”, and then look under the “Server” drop-down and you will see the “Server architecture” listed. At the Ubuntu command prompt just run “uname -m”.

Server architecture	Linux 5.4.0-1045-aws aarch64

We now have Apple’s M1 Macs, iPad Pros, all those mobile devices, Raspberry Pis, some Chromebooks, and now servers. Arm64 consumes less power consumption for the same amount of compute and the binaries are there or getting there (including Windows). I think we are going to see a lot more Arm64 systems in the future.

If you are looking to learn new skills or you are a college student looking to build out your resume, Devpost is a great resource. Devpost provides an online portal that organizes and runs “hackathons”.

Hackathons are typically sponsored software or hardware build events with prizes for the winning team or individual. There are usually at least a couple dozen online hackathons running at any one time. The sponsors often include big names such as Microsoft, Amazon, Facebook, Square, Atlassian, etc. The sponsor usually provides a challenge to build a project using their services.

There are online and in-person hackathons. In-person hackathons are typically just a couple of days to a week while online hackathons usually run at least a month or two. You can either team up or go it alone. I typically go it alone because I don’t always know how much time I can commit to a project.

One reason I like hackathons is they have deadlines. It helps motivate you to finish your project. Once your project is submitted, and the deadline has passed, you are done. If you want to keep going on the project you can but you are not committing to the ongoing care and feeding of a production system.

Your hackathon submission will usually be a GitHub repo, a working app, and a video demo on Youtube or elsewhere. Here’s my portfolio on Devpost: https://devpost.com/MkFoster

If you are into hardware also check out hackster.io. I have a couple of projects there: https://www.hackster.io/MkFoster

Happy hacking!