Comparing Vue & React
My little side project web app, The Pitwall, has been my test bed for better understanding different reactive javascript frameworks and their surrounding ecosystems of plugins. Pitwall started life as a CodePen project a long time ago when I decided it was time to start learning modern JS. I gravitated towards learning Vue first by sticking to the basic functionality of components and props. Once I got that under control, I broke it out of CodePen so it could stand alone and make better use of different toolchain scripts. First came the Vue CLI, Vue Router, and then Vuex for state management. While Pitwall isn’t exactly the most complex web app out there, it has enough complexity where I could understand the benefits of routing and state management. Once I got it hooked up to being hosted on Netlify, I felt like this was also a way to finally get my head around modern JAMstack sites as well.
Needless to say, I learn best by just doing something until it works.
At this point, I felt that I have a pretty solid understanding of Vue. While Vue has a lot of aspects that I really enjoy, like the single file components and the way state and props are handled, it is still second place to the massive marketshare that is React. This framework, originally developed by Facebook, is nearly everywhere on the modern web. It is pretty hard to avoid React in one form or another on both the web as well as native apps.
My next challenge for Pitwall was to port it to React. After going through some of the basic documentation, I was surprised how fast this went. While a lot of ideas are shared between Vue and React, the difference largely comes down to syntax and the types of built in methods available. I chose to go with Mobx for state management, which was also relatively easy after learning Vuex. For this port of Pitwall I decided to go with Parcel for building the project instead of the first party package create-react-app. I’ve been really liking Parcel as well and I could see myself using this for Vue projects as well in the future.
Links
The live version of Pitwall can be viewed on Netlify, which is running the Vue version. The GitHub repo is available for both Vue and React versions of the same app.
How to Support NetNewsWire
NetNewsWire is all about three things:
- The open web
- High-quality open source Mac and iOS apps
- The community that loves both of the above
Supporting all these things takes work.
I can get on board with all three things. Looking forward to seeing this classic app make it’s come back.
Putting the Soul in Console
Playdate, the upcoming indie handheld gaming console from venerable software publisher Panic, is really important. But if you don’t know the history of where the little company behind this little device comes from, it might be hard to understand why this isn’t just another random gadget like you might see on a crowdfunding site.
Anil Dash goes on to describe the tech indie scene to setup where Panic is coming from to launching their first hardware product, the Playdate. This is the type of thing that inspires me in the tech world: the small-ish, independent company that has succeed outside the culture of Silicon Valley.
Panic started as an indie Mac development company making products like Audion, Transmit, and Coda. The later has been my code editor of choice up until recently (mostly on VS Code now, I’ll get back to that in a second). Panic has a culture and perspective on design that I can’t quite put my finger on, but it is immediately recognizable and refreshing. FTP and code editing apps are incredibly useful tools, but their approach brings a great deal of personality to an otherwise utilitarian category of software.
The Playdate is their first hardware product and I am really looking forward to see what they can bring to designing a handheld gaming system. I am also really looking forward to the upcoming overhaul of Coda (or whatever they are going to call it).
Into the Personal-Website-Verse
There is one alternative to social media sites and publishing platforms that has been around since the early, innocent days of the web. It is an alternative that provides immense freedom and control: The personal website. It’s a place to write, create, and share whatever you like, without the need to ask for anyone’s permission.
Source: Into the Personal-Website-Verse · Matthias Ott – User Experience Designer
Using WordPress as a Headless CMS
For the past few years in the web development world, there has been this growing trend of a headless content management system. Traditionally a CMS would provide the database, a content management backend, as well as the templating code. WordPress falls in this category as an all encompassing system. A few versions back, the REST API was added to the core release. This allows a query to be made over HTTP and returned with neatly formatted JSON. Now, developers can use this JSON with any kind of templating system or static site generator that they choose. It makes it really easy to develop a React or Vue driven front-end with your data managed by a familiar system like WordPress.
I have begun rolling out a Headless WordPress setup at Cal Lutheran to replace our aging, homegrown internal database system. This old system was used to drive all sorts of data types like the Homecoming events schedule, program testimonial quotes, and lot of other public facing information that doesn’t live in our main CMS (OUCampus). WordPress was a clear choice in replacing the old system as it was something our institution was already familiar with.
We have WordPress set up as a multi-site network. Each department that will be accessing their data here will have their own site with their own user permissions. In the WP Admin area, each data type is set up as a different custom post type. Advanced Custom Fields is used to create a set of extra fields needed beyond the basic post editor. Custom taxonomies are created for each post type if a category system is needed. The headless theme I developed sets up the Admin area to only show their custom post types. This greatly simplifies the admin area for our users.
On the OUCampus side, there is a PHP script that includes a variety of functions used to call up the WordPress site for that department using the REST API. OUCampus Components (which is a fairly new feature in v10.10) are used to place the PHP function call on the public facing pages. What’s great about this too is that OU Components also you to pass in the parameters you want for the query. This then inserts the HTML needed to display the data.
This solution will work out great as more departments move over to this new system over time. The only piece of this I haven’t decided yet is what to do about Gutenberg. So far, I have decided to stay away from that yet and have enabled the Classic Editor plugin for the foreseeable future.
WordPress Plugins Used
- Advanced Custom Fields – This is such a key piece of this system, and I am also happy that it stores the data in WP’s native custom fields. I don’t feel as locked down to ACF because of this.
- ACF to REST API – This injects the ACF field data into the API response.
- Classic Editor – Staying away from Gutenberg for now.
- Custom Post Type UI – Manages the custom post types and taxonomies. This could all be done in functions.php, but every site is going to be different and making child themes each time would be too much overhead.
- Really Simple CSV Importer – Used for importing data from the old database system. It’s really only needed for the initial setup for a site.
The Apple Watch Turns Four: Some Thoughts
So, I dug out my old Boccia that I haven’t worn much since I got my first Apple Watch. It doesn’t have the same fit and finish as my Apple Watch; its band is not as easily swapped. It does not display the weather. It does not tell me when I should get some exercise. But it feels nice.
Source: The Apple Watch Turns Four: Some Thoughts — Pixel Envy
I am going to write about the Apple Watch at some point in the future, as I have had a lot of mixed thoughts about it. In the mean time, Nick Heer has really got close to a lot of similar feeling’s I’ve had.
Microsoft Provides Sneak Peek of Edge on Mac, 16 Years After Safari Replaced Internet Explorer
Microsoft moving Edge over to Chromium has been such a big story this year in the web development world and now we have a preview of the upcoming Mac version.
In the very early days when I was first learning about web design, I remember when Internet Explorer 5 on the Mac was released with a big splash. It was ahead of it’s Windows cousin in terms of page rendering and offered a theme selection to match your candy colored iMac.
Today, I see this about Edge coming to the Mac and have to wonder who is this for? Other than web developers who are going to test their site while using a Mac, what is the selling point for non-developers?
Making the Move from jQuery to Vue | CSS-Tricks
As someone who has used jQuery for many. years and has recently become a Vue convert, I thought it would be an interesting topic to discuss the migration process of working with one to the other.
Source: Making the Move from jQuery to Vue | CSS-Tricks
When I first starting to work professionally in web development ten or so years ago, jQuery was the all the rage as it was addressing a lot of short comings of native Javascript in that era. As time has gone on, native JS has pretty addressed all of those short comings. Although the main website I work on has carried over with jQuery, I wouldn’t touch it at all in 2019 for any new site I would be building.
That being said… I really like working with Vue and for now it is addressing a new set of shortcomings that hoping will be superseded at some point in the future by Web Components and other new-age native features.
Having worked more than a decade now on the web, it is safe to say that the more things change the more they stay the same.
Cache Busting in OUCampus
The Cal Lutheran website runs on Google’s Pagespeed Apache module to automate certain cache settings, CSS rewriting, image compression, and a host of many other page loading performance related enhancements. Since CSS stylesheets are generally considered to be static assets on a site, they aren’t expected to change often between user visits. This is where PageSpeed’s caching and rewriting helps us with getting that critical above-the-fold CSS delivered to the browser. If a page is not yet cached by PageSpeed, it will load a javascript on the client side to analyze what CSS declarations are likely to be needed to paint the page above the fold. This chunk of CSS code is then injected in a style tag at the top of the page. Every subsequent reload is pulling from that same cache. This greatly helps with page performance as the first visible CSS is loaded immediately.
This works great until you need to push out a new change to a stylesheet. While the cache does have a timeout until the next refresh, there are times when you need to force out an updated stylesheet out to visitors. The first way to do this is to add an additional parameter to the filename, such as styles.css?v=1. The browser will see this as a new file and be force to make a request to the server for a new version. Making additional changes on that version number will continue to force new versions, however this isn’t exactly sustainable to manually update every time.
How can we automate this in OUCampus? In our main XSL file used for template transforms, usually common.xsl or template-matches.xsl, I added a template match to catch all stylesheets requested off our own domain and append that version parameter to the filename. Instead of incrementing a number as I mentioned above, it is using the current timestamp as of publish as the versioning number. e.g. styles.css?v=4-29-19
Formula One 2019 on Behance
In 2019, Formula One called on the team at |drive| to augment the F1 brand and refine the opening title with a more “race day” approach to our original concept. Our team recognized that the most emotive way to inject team-like color into the driver sequen…
Source: Formula One 2019 on Behance
Love seeing the iterations of the graphic style of the new F1 intro. Bringing up the identity of the drivers has been a big thing Liberty, the new owners of Formula 1, have been emphasizing.