DEV Community: James Lau

Proprietary Rights to Your Digital Content

James Lau — Sat, 27 Jan 2024 14:22:55 +0000

PAY TO USE, NOT TO OWN

The social web of today is highly integral to our daily lives. How we share these secondary extensions of ourselves is through digital social platforms. The vast majority of these proprietary platforms harness our activities through threads, forums, and instantaneous feeds. Utilizing our data, to make business and marketing decisions and suggestive social connections. It’s an expansive landscape that we take for granted.

First, I will start with examples of some obvious platforms.

The sharing of information throughout the web such as Ghost, Medium, Substack, and Write.as for writing. Then there are platforms for images like Instagram, Flickr, 500px, and SmugMug. And what about video, there is TikTok, Snapchat, Vimeo, and YouTube. You are offloading your data to an external platform that controls the exposure for you.

All these serve as a base for users to easily add, share, and sell content. But from a recent podcast episode, Press This WordPress Community Podcast with guest speaker Seth Goldstein, they discussed the dilemma of exporting your data from them. How can you manage your data on a paid or closed-source platform? How do you pull your content when you need to leave, or if the platform suddenly ceases to exist? Do you spend day and night downloading your one-thousand-plus photos from Instagram or years of articles from Medium?

I’ve watched two of my favorite history channels on YouTube move away to their own .tv website. They create great content about history, but they find it unsustainable due to increased monetization regulations from YouTube algorithms. This reduces the chance of being seen. By moving to other video streaming sites, they ultimately own their videos. This provides a haven for like-minded people to join and subscribe.

PAY TO USE, AND TO OWN

The second option for publishing content is through self-hosting sites. The majority of these choices require several technological know-how to achieve. You need to obtain a domain name, choose a hosting provider, and pick a content management system that allows you to write, upload, and share your data.

You also need to maintain the condition of your website from malicious hackers. Normally a dedicated IT team would manage these on proprietary platforms, but this doesn’t mean a data breach is preventable. Large organizations have been hit before and identities have been stolen.

But back to self-publishing. The beauty of this is that when you feel ready to leave the ecosystem, you are free to take your data to another platform. Assuming the new platform allows the import of your old database.

Your content, images, audio files, and videos go along with you. They might be downloaded through a separate zip folder. Having access to all the assets you’ve accumulated over the years is a good feeling.

If the content management system doesn’t provide a way to export your assets, you still have access to the server through your hosting provider. This is something that proprietary systems do not allow. If they do, they make it tedious and time-consuming to extract.

WORDPRESS DATA LIBERATION

WordPress is an open-source content management system that allows users to self-publish content freely. It continues to evolve year after year by adding new features that greatly enhance its usability for designers, developers, and end-users alike. The most recent development in the support space was acknowledged during the State of the Word 2023 address where Matt Mullenweg mentioned Data Liberation.

What is this you ask? It’s what I had mentioned before about self-hosted sites. Your database isn’t locked into any proprietary system. You have the freedom to download your articles, media assets, user logins, statistical data of the site, site structure, and overall design to another platform.

Check out the data liberation guide for more information.

DECENTRALIZATION

Now, say you want to disconnect from a single hosting provider due to security reasons or censorship of content. The next level of abstraction is to utilize a decentralized server ecosystem.

Decentralization or decentralisation is the process by which the activities of an organization, particularly those regarding planning and decision-making, are distributed or delegated away from a central, authoritative location or group and given to smaller factions within it.
Wikipedia: Decentralization

Prime examples of this technology are IPFS and Web3 hosting. The data and content you share are no longer stored at a central hub. The data is in essence, in a blockchain format. If your information was suddenly hacked, you can still recover it from other external encrypted redundancies of data. The classic, “single point of failure,” becomes a myth.

This becomes more of an application tool for software development use. It’s not ideal for the average content creator who just needs a blog post published about their latest travel, to say, Iceland, with photos and videos. But as large social media platforms start to clamp down censorship, controlling your private data, the web must adapt to this change.

FEDIVERSE

We’ve circled back to social media networks and ownership of personal data. There’s a term that’s been swimming around called, “fediverse?” What is this exactly? How does this differ from a traditional social media network?

The fediverse (a portmanteau of “federation” and “universe”) is an ensemble of social networks which can communicate with each other, while remaining independent platforms. Users on different social networks and websites can send and receive updates from others across the network.
Wikipedia: Fediverse

Think of what we covered earlier, about the decentralization of your data from a server perspective. Fediverse is exactly that but for social network feeds. Facebook, X/Twitter, Quora, etc. are examples of centralized social media platforms. Your private data is managed by one single entity.

What if you could spread out your social feed through a blockchain of redundant outlets? A few platform examples of this technological concept are Mastodon, Lemmy, and PeerTube. Based on the decentralized model, but with social media applications sitting on top of it. Everyone can socially connect with anyone across the web and what you share can be seen by anyone. Your content is yours to keep and it can never be taken down by a single organization.

CONCLUSION

Whatever platform you choose to share your personal or business content, there should always be a way to retrieve your data. It was published by you and it should rightfully be yours to keep.

BONUS MATERIAL

If you’ve stuck around to read this far, thank you!

To further reinforce the idea of owning your data, I want to bring up my recent tech purchase and why I chose it.

Recently, I have been concerned about my state of health and wanted to set a healthier path for 2024. It was during the post-Christmas and New Year’s sales and I was debating on purchasing either a FitBit Charge 6 or a Garmin Instinct One.

Both devices are packed with features and do an excellent job of tracking one’s health. Functions such as sleep tracking, heart rate monitoring, step counts, GPS data, stress level, calories, etc. FitBit is now part of Google’s UI and software ecosystem, which makes it trustworthy of my money. Garmin on the other hand has been a leader in GPS technology way before cellphones became the smart device we know today.

These two products have different user interfaces on the watch, but the one important thing I wanted to see the most was, you guessed it, my data. Both brands have app counterparts that run on your cell phone that you sync via Bluetooth and you can check your daily score from a high-level perspective, or you can take a deep dive into the data and see exactly how you performed, say your sleep habit. How much deep sleep did I get? What was the REM sleep over being awake (tossing and turning)?

These details define my purchase decision. Although the user interface design of FitBit and the app was sleek, seeing your data came at a price. You see, FitBit has a premium subscription plan paired with its fitness devices. If you want to see the data in finer detail, you have to pay a monthly subscription.

Why should I be paying for the data that my body generates?! Garmin gives you access to the data at no charge. My thought behind all this between the two brands is this, the reason why FitBit can keep their product prices low is because they paired it with a subscription-based service approach. Garmin on the other hand, their devices are far more expensive but they offset that with the data they collect and they allow you to see it all.

What about leaving the ecosystem? You want to walk away with the data. If for some reason you want to export the data that has been tracked, both brands allow you to do that. Here are links to FitBit export data services versus Garmin’s export data service. This is great on the one hand, but not being able to see all my data at once until I export the information (looking at you FitBit) is absurd.

ADDITIONAL RESEARCH MATERIAL:

This was initially published on my site at jameslau.com. Please come by and check out more of my writing and other works!

Thanks for reading!

Trending Tech: HTMX

James Lau — Thu, 21 Sep 2023 01:16:14 +0000

DEFINITION

htmx gives you access to AJAX, CSS Transitions, WebSockets and Server Sent Events directly in HTML, using attributes, so you can build modern user interfaces with the simplicity and power of hypertext - htmx.org

I first heard of this technology from Siegfried, deploy! podcast, episode #41. Didn’t think too much about it until another recent article came up in my feed today from Infoworld. This got me thinking about the uniqueness of HTML attributes again. Adding those extra bits of HTML markup really helps define the boundaries of what the front-end has to offer.

I do recall, lines and lines of thick HTML code that were laced into an open-source project. In the past attributes have been used for a variety of things for the front-end. From, data attributes that tie in nicely with JavaScript for special functionalities, to ARIA attributes for accessibility purposes.

Then there is the massive additional HTML attributes library. It almost feels like, attributes is an ongoing extension of HTML, minus the bloated JavaScript libraries that we all know and love today.

LESS OVERHEAD, PERHAPS?

Going back to server-side rendered, with just a simple call through HTML markup? Didn’t the web community spend over half a decade perfecting front-end loaded frameworks such as React.js, Vue.js, etc. in order to offload functional components on the client side?

Aren’t we going backward here? An avid Drupal friend of mine said, “what else is new hmm. isn’t that just isomorphic.” He mentioned that this was already somewhat of a thing baked into Drupal 8.3.

Out with the old…in with the…old? It is possible but with a twist!

AJAX requests are a popular method for pinging the server, whenever needed. A great example is the use of Google Maps. You don’t need the whole map unless you move the cursor to a new spot. This then grabs the data from the server again. Here’s where the HTMX hx-trigger attribute comes into play.

There’s something called Standard Event Filter, which is like a call to a JavaScript library, then you can add an additional boolean bracket to the attribute called Standard Event Modifier to enhance its behavior after the event.

This is just one interesting aspect of the technology that made sense to me. It is still new to me, but intriguing nonetheless because it modifies HTML.

KEEP ME APPRISED

I’ll be sure to keep HTMX on my tech radar. There are already so many new things happening within the front-end space, that it is hard to keep up. I can go down a reference rabbit hole with new CSS nesting, but let’s save that for another post!

This was initially published on my site at jameslau.com. Please come by and check out more of my writing and other works!

Thanks for reading!

Understanding What Point Release Means Within A Development Cycle

James Lau — Sat, 02 Sep 2023 02:13:36 +0000

DEFINITION

A point release (also a dot release, or hotfix) is a patch release of a software project, especially one intended to fix bugs or do small cleanups rather than add significant features. Often, there are too many bugs to be fixed in a single major or minor release, creating a need for a point release.

https://en.wikipedia.org/wiki/Point_release

The first time I've ever heard of this terminology was during a WordPress Meetup event. Developers were discussing the upcoming changes with WordPress 6.3, five days before the initial release. New tools, new user interfaces, and security enhancements that may or may not make it into the production release. I, however, was Googling "point release."

Turns out I knew what point release meant, I didn't know there was a technical term for this phase of the software product cycle.

HABITS AND ROUTINES

When I used to work at Red Hat, I spent every three to four weeks sitting in "release cycle" meetings with the product team to discuss sweeping user interface changes to the open-source products. These were major milestone changes to the software after the latest GitHub pushes to staging. But never did they mention "point release." Could it just be because we're on the product side? We don't use those terms because we're not the end users. Or perhaps these technical terms were only used amongst the user interface and user experience designers.

Being part of Red Hat's Research and Development Group meant that you had to work outside of the product space and improve product extensions. One such extension was PatternFly. "Bug fixing" and "continuous release improvements" were terms being used often to describe post-production release cycles.

Brand-agnostic components were designed and built during PatternFly's release cycles. All product teams were notified of new user interface changes and told to download and apply them to existing software interfaces.

Product developers would install new components based on updated product versions but it would also include bug fixes.

END-USER FEEDBACK

Like every new product out there, whether it is a new Android and Apple phone, cars, clothing, food, software, furniture, etc. there are always improvements to the products after launch. There will always be "early adopters" who will poke and prod the product. For some products, such as clothing, food, and furniture, changes are slipped in probably in the later production model runs.

The worst-case scenario is when the trouble starts after a company issues a product recall. Bad PR arise and panic ensues from poorly manufactured steering wheels to exploding cellphones.

OPEN-SOURCE FEEDBACK

Now, back to the WordPress Meetup on software updates. Developers are usually notified. Possible changes that end users and developers may have found. A ticket is generated and tagged with a specific priority. Code is either kept through GitHub, GitLab, or another repo system. In the open-source community, everyone has an opportunity to contribute to the cause.

I'm actively looking to start contributing to the WordPress open-source community very soon. Perhaps this is the best way to understand a point release cycle.

This was initially published on my site at jameslau.com. Please come by and check out more of my writing and other works!

Thanks for reading!

The Constant Gardener

James Lau — Wed, 09 Aug 2023 17:46:04 +0000

SUPPORT
The last known statistic about WordPress is that it runs 44% of the web. That's a lot of websites out there! Even with the growth of SAAS platforms like Squarespace, Wix, Webflow, etc. WordPress takes the cake. One major proponent of this is that it has a large open-source community that keeps the core code maintained. There's also a healthy presence of third-party software out there that adds substantial extensions to the overall ecosystem. Everything from contact forms, image galleries, e-commerce features, data table displays, security settings, organization settings, etc. The plugin space for WordPress is HUGE!

AFTER THE HONEYMOON

After the launch of a new site, more often than not, we abandon the site to its owners. We don't have continuous contracts with our clients or perhaps they have moved on with another vendor to maintain or to redesign the site all over again.

Obviously, the cost of time and manpower is needed to maintain these sites. But what if the company doesn't have the luxury of paying someone to work on the site? Well, the way I see it from a developer standpoint, you either help the open-source community and improve the overall system of WordPress or you volunteer your time to help maintain these sites. Most often, it is the non-profits out there who are in need of some assistance.

I know there are those who may frown upon the idea of working on an unpaid website project, but that's no different than offering your time to maintain open-source code. You're not getting paid to work on the project. In the end, your work is shared amongst developers and other companies abroad, showcasing your work. You're adding value and reassurance to the owner of the site that WordPress isn't just a one-off tool that should be replaced after a year or two. Someone has suggested the software in the past, but they did not continue to help maintain it. However, YOU can jump in at any time and offer assistance.

For me, I think being the constant gardener and helping out companies such as non-profits who need assistance is just as vital. Your open-source code may benefit other technologies down the road, but in my view, helping an established non-profit's business objectives by maintaining its site has a greater impact on society.

PART-TIME

I have never contributed to open-source code except for when I worked at a large software firm in the past. There's probably a lot of good value in contributing and helping out technology. There are also lessons to be learned with moving parts within a larger system and working with multiple developers towards a common goal or release version. What I don't know is how much a typical developer provides his or her time to the technology on a weekly basis. There probably is a strict timeline.

Helping out non-profits is a completely different timeline altogether. Ever since I started juggling these projects, I have had to keep tabs on my own. I utilize Toggl to keep track of my hours. Even though these projects are unpaid, I like to keep a tally of how much time I am investing. Because there are other organizations out there that could use my assistance.

ALL HUMAN

Remember, we're all human. No matter which path you take. Either open source or helping in assisting non-profits. There's a great deal of finesse one has to consider when mitigating each project. In open-source technology, you would have to work with like-minded developers to bring together a new feature. With non-profits, not everyone is tech savvy and they will rely more on your expertise to do the job correctly.

My most recent project involves moving a website from a UK hosting server to a US-based hosting provider. The site was often down, more than 24 hours at a time, and this prevented the owner from accepting donations and promoting their campaigns. I got together with the owner and two others who are more IT-centric and brainstormed on a more viable web hosting platform. Since I am not familiar with the realms of deep IT nuances, I rely on their judgment call. My role comes later when I need to secure all site assets, secure the current copy of the database, update WordPress core, and update Elementor, which is their theme builder of choice.

The owner entrusts all to do their part in getting the site up and running again. By the way, each and every one of us are volunteers. We can only devote so much time, but we are also ensuring that if one of us leaves, there is a good safety net set in place for the owner to debug on their own if they need to.

CONCLUSION

In the end, I recommend everyone to devote some time to help out others whether it is paid or unpaid. Giving back to the community is important. If you're a WordPress user and would like to help out the open-source community, you can check out Make WordPress. And if you want to help out a non-profit organization with their website (even if it is not WordPress-based), you can check out VolunteerMatch.

Let's all go out there and make a difference!

This was initially published on my site at jameslau.com (https://jameslau.com/the-constant-gardener/). Please come by and check out more of my writing and other works!

Thanks for reading!

Comparing Simple Theme Builder Options With CMS Platforms

James Lau — Mon, 31 Jul 2023 19:39:29 +0000

TL:DR;

For those of you out there who are TL:DR; folks, I will start off by telling you what I prefer, and that is the CMS (open source) platforms route. If you’re curious to know about my argument, please read ahead! 🙂 But please know that this is strictly my opinion and based on a decade of experience experimenting with various platforms from both big and small companies. I will also add later a reason why a company shouldn’t use either of them when scaling up. What other options are available out there that are beneficial for larger scale operations and my thoughts on where the web development space is moving towards.

HISTORY

Let’s start by comparing the biggest division in website development. The advent of this division started as early back as I can remember was around 2008 which was my first experience with anything related to software as a service (SAAS). At the time, open source platforms such as WordPress and Drupal dominated the field of website development. This was really the only quick means to organize your content, images, administration controls, etc. Before that, developers simply FTP to a server with simple HTML, CSS, and JavaScript files. The one role to manage anything on the web was a web master. Classic title! Course, over the next two years (2010-ish) I started noticing ads all over the subway and buses for something called Squarespace. Huge marketing budget clearly and their ads focused on the ease of making a website. This made me nervous, but at the same time, I knew that open source CMS platforms were still very powerful tools that garnished a huge support from outside developers.

Squarespace is a closed and proprietary system. You can still use regular old HTML, CSS, and JavaScript to build a site, but the you’re tied to their user interface and hosting support. There was a limit on how you gain access to your site and there was no way to share your website with another developer when on a freelance basis or within a company. I later worked at a small design firm that utilized Squarespace and Concrete5. Two early entries to this SAAS theme builder platform. Later on I got the chance to work with Wix and eventually Webflow.

PAYING FOR OPTIONS

After using Squarespace in the past, I knew it wasn’t an option for web development. It had payment tier, how many hosted sites you can setup, tedious and clunky interfaces just to make simple code snippet changes challenging to manage. There weren’t any development, staging, or production environments setup for you to make sure you aren’t stepping on anyones toes while building the site. Pasting in CSS code and writing HTML were located in different windows which often meant that when pushing code, you may inadvertently push out others drafted changes instantaneously! Last major thing is that this is all cloud based. You don’t get the option to test and build the site offline on your machine. Say if you loose power or the cloud is down, there is no way to continue your work.

In 2022, I worked at a remote company that utilized Webflow as their primary website publishing platform. There were talks within the company to move over to a more reliable platform that is scalable and open source. The company only paid for the lowest tier plan. The caveat to development that I could best remember was the global CSS space. You could off load your styles to this interface, but it was far away from the theme builder interface. Kept in an obscured location within the administration panel. What’s worst, get this, 20,000 line CSS limit, for your whole site within the global styling section. Granted, you could add separate CSS styles per content page, but this made it impossible if you wanted to have things more organized. There was also a limit with the JavaScript file. Which was also segmented into two locations.

The user experience with Webflow was also difficult when it came to publishing pages. You’re either a “designer,” or “editor.” When one person is editing the site, it prevents others from editing, even if you are on another page. If they publish anything, and if your page is still in the works and NOT set to “draft mode,” your changes gets dragged along with it. This was a major issue when it came to separation of tasks with project managers and marketing folks. This also meant no development, staging, or production environment options.

OPEN SOURCE COMMUNITY

As I mentioned earlier, the theme builder platforms are not entirely open source. You can not download a static version of the site if you hosted your code on GitHub and share it with another developer on your team and allow them to work on it locally on their machine. In Webflow, you can download a static copy, but there is no way to obtain the database. That is strictly locked away.

The power of open source is due to the flexibility of development. You can tinker with everything from front-end styling and user interface functionalities, down to the way your site communicates with your server (PHP). And as always, a lot of people download the either WordPress or Drupal for free and people can hack away and make improvements to the platform and request improvements to the organizations core platform code.

Third party plugins and modules can be added to enhance the sites capabilities. Some of these options are free, but there are also premium options that you have to only pay once. This is far beyond what comes out of the box initially. WordPress comes with only a couple while Drupal starts you off with a plethora of important modules that spans in 18 options the last I checked. Not only are you supporting a third party company, but also sharing it with the outside community to collaborate and develop new changes in order to enhance the CMS experience as a whole.

You can not do this with services like Squarespace, Wix, Webflow. They are closed and you have to rely on their internal teams to make improvements gradually. If there was a feature you needed that wasn’t available, say a HIPAA compliant form, you would have to use something like Typeform in order to achieve your contact form goals. You can embedded the form onto your site, but it’s not part of the SAAS platforms official ecosystem. With WordPress or Drupal, there are third party forms that you can download as en extension to your site and make sign up form a single seamless experience.

HOSTING

Where and how your site lives on the web is critical. While the classic option is to sign up with a hosting provider who has actual servers such as Bluehost, Media Temple, SiteGround, HostGator, GoDaddy, etc. they don’t always provide the platform support that you need. If you have a WordPress or Drupal site, often times you need to install and manage that platform by yourself. This would include plugins, databases, asset management. These management tasks usually falls to the developer to maintain.

Fast forward to around 2015, we see the evolution of SAAS such as WPEngine, Pantheon.io, Kinsta. They are primarily CMS focused and can provide a plugin or module to support your CMS with extra security and backup options. As a WordPress user myself, I generally sway towards WPEngine with the support benefits such as database backup options. In around the same year, I noticed new players such as Wix and Webflow come into the picture. More website builder platforms, that provide hosting. But as I had mentioned earlier, it is closed source. You can pull a local copy down to work on it and still have dynamic components to work with.

It is now 2023 and I am starting to see another evolutionary change with SAAS website building platforms. You have popular theme builders such as Elementor, which once was a plugin for WordPress, is now providing their own web hosting solution. Another alternative to Elementor is Brizy which provides a WordPress plugin theme builder solution, but they also offer a cloud based platform. This basically enters the realm of Wix and Webflow.

CONSLUSION

There are several factors to consider when choosing a website development platform. There isn’t a one-size-fits-all solution. A company needs to look at all the angles before making a solid solution.

The first thing to consider depends on the size of the business. This would dictate the type of platform that best suit the company’s needs. How many dedicate people does the company have for website development and maintenance. Next thing to consider is budget. If there isn’t enough money that means there isn’t enough people to be paid to do the work of managing the site. Eventually, paying a small subscription fee for a SAAS platform to host and manage the health of the company site is a quicker solution. Last major thing is time. How much time is a company willing to update their site. Paying an exuberant amount of money for a small mom and pop bakery shop that just needs a gallery and a contact form hardly needs such overhead. However, if the company expands, and say the mom and pop shop now hosts a ecommerce section selling baking goods, cookware, and gift items, this would require a heavier payment tier with the theme builders.

Theme builders can only do so much. The company would need to scale up to a larger platform like WordPress with plugin options such as Shopify or Magento to manage e-business solutions. The latter tier for large scale operations wouldn’t even be CMS platforms. I’ve experienced in the past that WordPress and Drupal platforms moves to strictly marketing department purposes while the company either builds their site from the ground up using PHP or some sort of front-end framework such as React, Angular, or Vue to facilitate for API consumable changes. Course this is getting into the realm of web applications which is beyond a simple website.

In the end, as a experienced web developer, I’ll stick with the flexibility by joining a larger ecosystems, which is the open source community. Granted there are avenues that will require a bit more time and money, but it is money well spent in supporting technology that benefits everyone.

This was initially published on my site at jameslau.com (https://jameslau.com/comparing-simple-theme-builder-options-with-cms-platforms/). Please come by and check out more of my writing and other works!

Thanks for reading!

What and Why, Git LFS?

James Lau — Mon, 12 Jun 2023 16:20:46 +0000

ORIGIN

For a very long time now, I have been dabbling with various platforms for blogging and came to the conclusion recently that I should just stick with WordPress due to my comfort level in use and the understandings of its inner workings. But there’s been a scratch in my brain ever since I had a commenter mention about my explanations on the web, and that it doesn’t show any imagery of my thoughts. This does bring me back to some of the ease of use when I use to post via Netlify. It was easier to write in a text file and then push my article through the terminal, or with VSCode’s built in terminal. Course then I have to figure out the front-end user interface component which I had used Gatsby at the time.

So now I am once again asking myself, do I need to search for images to represent my thoughts? Do I listen to my audience? What’s the technical debt that will incur on my end-users if I serve them images, gifs, and videos? I ended up looking for answers. Blogging techniques, blogging inspirations, blogging methods. Oh by the way, seems like it has “go the way of the dodo” that tech bloggers now are labeling “blog” as “journal.” Therapy has come full circle here. But I digress, back to skulking.

RESEARCH

While sleuthing around, I came across an old podcast episode from ShopTalk Show about blogging and later tips on utilizing Git LFS as an option to sync and managed timestamp changes to large image files, videos, audio, and design files such as Photoshop files. According to the official Git LFS documentation, you can continue to commit changes as usual on your end and what Git LFS does it creates little pointer files that keeps track of all the large incoming and outgoing assets that you may have within your project. This means the files you are working on are never stored on GitHub.

As an example, ShopTalk Show’s guest Jim Neilson mentions, he first commits his changes and is pushed and managed by Netlify. The compressed pointer files are then sync up to his Dropbox account which is where his true assets are offloaded. Doing this way saves time on the client side when you need to handle and monitor large changes. Netlify compiles a commit change, generates URL link that points to the hosted location of the asset(s) and then builds the site.

BENEFICIAL APPLICATIONS

Although WordPress.org does not have a file limitation to how much you can store assets with the Media Library, you are certainly limited to the size of the file that you can upload. Usually it is noted at the bottom drag and drop window. However, you can override this setting within your function.php file or go into “Settings” and then adjust the “Max upload file size” input field.

With the way things are built these days, seems like a lot of companies out there are experimenting with “headless cms” as an alternative option. Preventing the traffic jam for marketing and content creator folks while still adjusting the sites front-end user interface. This is where the Git LFS option comes in handy.

Perhaps this is worth checking out and utilizing when I have the time to attempt another JAMstack project. Possibly Eleventy?

This was initially published on my site at jameslau.com (https://jameslau.com/what-and-why-git-lfs/). Please come by and check out more of my writing and other works!

Thanks for reading!

CITING SOURCES:
ShopTalk Show podcast link: https://shoptalkshow.com/504/#t=38:52
Github LFS tutorial: https://github.com/git-lfs/git-lfs/wiki/Tutorial
GitKraken YouTube tutorial on Git LFS: https://www.youtube.com/watch?v=jXsvFfksvd0
Atlassian Git LFS explanation: https://www.atlassian.com/git/tutorials/git-lfs
Git LFS homepage: https://git-lfs.com/

Design Tokens

James Lau — Thu, 01 Jun 2023 15:41:20 +0000

WHERE I STARTED
Okay, so here we go down memory lane. Back in my days as a design student in college we were always told to have consistency in our design compositions. Everything from color, typography, imagery, weights of lines, balance use of similar shapes. But then in the later senior years, the professors allows us to break out of the mold. Be bold, experiment, “don’t conform and settle for the usual.” Design school was a meat grinder for my mind. It was bootcamp with strict drill sergeant mentalities.

This all changed when I went out to the real world. Every design conference I visited and every prominent designer studio I ever visited, things were not consistent, things work wild. Use of only 3 typographical fonts per print piece and only 3-4 shades of color, or the use of 1-2 primary images were not the rules. Clients and end-users alike dictated the rules. From their branding, to their business philosophy and identity.

So where are we at now? How has the design, UX, UI landscape changed? What is import, what is consistency, what is a “design token?” Well, I recently came across this article from Google’s Material Design System on design tokens. The ideal is that you can apply a wide variety of consistent rules in your designs (Figma, Sketch, Adobe XD, etc.) or in your code base with CSS frameworks methodology like BEM (make sure to add comments and notes in your code).

HOW ARE THEY APPLIED TO WEB DEVELOPMENT
Believe it or not, design tokens has been a thing in web development for well over a decade now. As developers, it has always been a constant race to keep code bases consistent, clean and compartmentalized. The latest iteration of this phenomenon that we’ve been looking at is called web components. Dave Rupert has a good article and talk back in 2021 about web components. It’s a form of consistent code encapsulation.

At larger companies, design systems are the king of repurposing components. During my time at Red Hat back in 2018, we worked on a design system framework called Patternfly. Essentially, it’s a design and brand agnostic framework that can be applied to any website or web application. The focus is on the functionality and usability. Though the design system is developed in React, the original base of the code dates its roots back to Bootstraps model.

PREPARING THE FUTURE
A lot of the “enhancements” that Dave Rupert mentioned in the video with Kevin Powell are brought in with JavaScript code blocks. Keeping the HTML clean from JavaScript functionality and CSS styling. Someone who has a slow bandwidth connection can still view the site, but the design is controlled in web component elements.

The other plus with web components is that if you need to repurpose the code block element(s) for a different client, it can be lightly re-written to target specific behaviors and branding. Most of the time, clients want the same hero animation or look and feel. Some want the same cards for profiles of executives on the about page. Then there are the tricky e-commerce setup of chips and sale items with specific heart or like icons.

The future of design tokens definitions is still be flushed out by Google as of right now, but building out the rules such as reference tokens, system tokens, component tokens is exactly what Dave Rupert has been saying, “it’s all the rage!”

CONCLUSION
I think it is safe to say that the world of design, at least on the digital realm of things, we have come full circle. Designers are not going to have a difficult time explaining to a developer their wants and needs based on client and end-user requests. The communication between these two worlds should never be a toss over the fence type of deal.

A solution for any business is to create some form of a design system, design library, components library. Whether you are a website agency, large or small corporation entity, non-profit, government, school, etc. you must invest some time within your team, design or development department, these methods in order to keep confusion from surfacing within communication lines, design sessions and development phases alike.

This was initially published on my site at jameslau.com (https://jameslau.com/design-tokens/). Please come by and check out more of my writing and other works!

Thanks for reading!

Monthly Site Audits

James Lau — Mon, 08 May 2023 18:24:51 +0000

CONTITIONING
After a successful launch of a website, what do you suppose is the first thing you need to setup on your calendar? Reminders, and lots of them! Billing is definitely one of them. Content creation is another. Written blog articles, social media posts, downloadable content such as pictures, videos, and other various files. All of this needs to be published on a weekly or monthly basis for your business to thrive. Let’s treat your site like a car, let’s not forget, it requires that monthly or quarterly oil change, mechanical check-up, windshield wiper fluid tap up. There’s also the usual tire alignments, balancing, tire rotations, seasonal tires, or simply adding air to the tires. All these things in the end, will effect it’s performance.

VALIDATION TOOLS
Over the years, I have worked at various places that utilized tools to validate site performances, both internally and externally. I will cover the external ones first since they are free and easy to use, but I will also provide a few internal WordPress plugin based tools and paid versions. My go to list are as follows:

FREE TOOLS
Yellow Lab Tools
GTmetrix
Dareboost
Google Lighthouse

PREMIUM TOOLS
WP Rocket
WP Optimize
Smush
ImageOptim
TinyPNG
JPG to SVG Converter by Convertio

The free tools are usually the first thing I try when tasked with a checking a site’s performance. Once you have collected the data from all the sites, I usually do a personal cross check to see what comes up as a common issue.

CLEANING UP
Alright, so you have entered your URL into their site input field and you have been given a score. Most of the time, the site is bogged down from large culprits such as oversized images, and videos. Sometimes your code could be the leading cause. Your CSS or JavaScript might not be minified. Maybe you are running far too may scripts that do little to nothing for your site. Or perhaps there are too many unnecessary calls being made to the server.

Now, what about those images and videos? They do add pizzazz to your site, but they also slow things down if you don’t compress them enough. There are outside sources that can do that compression job for you. Such examples of conversions like PNG to SVG. How about the video files being converted from H.264 to WebM? The alternative for videos is also hosted it through an third-party source such as Vimeo. Course, now you’re relying on their end. If they go down, your site is hosed. If you work with a team of people, typically you should verify the image quality with a designer first. Later, see if they have any image and video compression ideas. See if they are familiar with any applications within their wheel house.

SCHEDULE IT!
Site auditing does seem like a mundane task, but vital to a sites overall performance. If your site relies heavily on images such as a photography site, art gallery site, or e-commerce site, you will want to think about adding the task to your calendar at the end of every month. In the long run you’ll have efficient files and data to work with that can grow with your site if it ever needs expansion whether within WordPress or some other platform.

This was initially published on my site at jameslau.com (https://jameslau.com/monthly-site-audits/). Please come by and check out more of my writing and other works!

Thanks for reading!

The Rise of AI Assistance

James Lau — Thu, 20 Apr 2023 15:51:46 +0000

INITIAL ENCOUNTER

During an all-hands on deck meeting at a former company, the execs shared with us their latest strategy and vision for the upcoming year. One of the major highlights revolved around the usage of artificial intelligence. AI generated artwork and believable articles that covered current events from the news were presented as samples. After the presentation, a discussion was held for the tech team and business team. Questions such as, "how should we integrate this into the app?", "where does the business stand with our end users demands when it comes to assistance?", and "how to validate legal documents with AI course corrections?". These were all valid questions. But how do we trust such a tool at such an early stage?

PLAUSIBLE USAGE

This lead me to have a discussion with an old friend of mine in regards to its validity. I shared code snippet examples with him as I experimented with the ChatGPT on my own for development purposes. What I discovered was that the answers it gave me provided a dopamine of confidence. It didn't ask it top give me a full blown answer to what I was developing, but it did nudge me in the right direction on what I was trying to solve. Just this past week, I decided to take a dive into ChatGPT as an alternative option debugging and solving coding challenges. I knew behind the scenes this was just a machine, but the confidence I felt and lack of nervousness to ask stupid questions

There are plenty of options out there these days for developers to search online for help. Everything from Stackoverflow, Reddit, Discord and Slack channels. But the response from an actual human being may not be instantaneous. No one is ever going to be on-call to help you out immediately. Well, this is where the AI platforms work best.

Back to the initial encounter I had with the former company, how will this transcend to an interaction with a typical end-user? This is a basic interactive question. Let's say this is a medical field and you have on-call nurses and doctors for you to speak with virtually. But what if the questions could be answered by an AI. I know you're probably thinking, "oh no, not one of those automated phone assistance systems!" Those in my opinion are pretty poor and I normally say, "representative" or "agent" almost immediately! There are tools out there that give that little bubble like chatbox on the bottom right corner of most sites nowadays, but how much of those are powered by an intelligent AI at this point?

CONCLUSION

Whether we like it or not, AI is here to stay. It will gradually evolve into something were it will be more widely accepted, dissolving the notion at AI's will grow into a sentient being and take over the world. Humans are still behind it's evolution and depending on how we interactive with it over time. The data it uses in order to answer our questions will expand deeper and deeper over time.

This was initially published on my site at jameslau.com (https://jameslau.com/the-rise-of-ai-assistance/). Please come by and check out more of my writing and other works!

Thanks for reading!

Define Maximum Site Width

James Lau — Tue, 31 Jan 2023 18:52:01 +0000

The most frequent question I often get asked from designers is, “what should the maximum size of the site be?” I will openly admit that this has always been a question that has plagued me for sometime now. Usually I say, “it’s the maximum width of the browser or device.” I know, that’s embarrassing, but it didn’t really dawn on me until a few months back that we should be setting a maximum width on a DIV that adjacent to the closest section element.

To start, I figured I look around and see what other prominent websites out there are doing. And to my surprise, there is a consistent pattern of use. There isn’t a defined one size fits all, definitely a variety of max-width setting is established as a definitive boarder. The following list below are just a few that I’ve researched on that utilizes this technique.

New York Times: Cooking
Beaming Health
NPR
IMDB
The Verge

If you go to any of the sites listed above and zoom out to about 25%, you will see a distinct container that holds main portion of the site. This will sometimes include paid banner ads and side navigations, but the point is, is it contained.

New York Times: Cooking (2020px):

Beaming Health (1240px):

NPR (1300px):

IMDB (1280px):

The Verge (1100px):

Setting the maximum width to these containers ensures scalability. Once set, you can place key media query points for that DIV which will allow it to conform depending on screen sizes. You can utilize css grid or flexbox settings to add additional depth to your designs.

This post was originally written from my personal blog (https://jameslau.com/define-maximum-site-width/). Drop by and say "Hi!" if you have any questions or comments. Would love to connect.

Happy coding!

My Basic Front-end Development Git workflow Routine

James Lau — Mon, 02 Aug 2021 00:11:13 +0000

At the start of every project, most managers generally ask the same basic setup question, "how should we establish the git workflow?" At most large-scale teams and companies, there is a pretty rigorous method set in place in order to prevent stepping over each other's toes. But having only been a front-end developer for the most part of my time, I can only account for the issues that I faced and how my flow works from a day-to-day basis.

There are senior engineers and other backend developers who are tasked with the extra work of wrangling bug issues and branch management. This article won't cover those steps, I will only highlight the brief steps I take when managing my local system and then when I need to deliver them.

Below are the commands I usually type in from start to finish when working by myself. My current site follows this specific method.

Let's begin with the basic git commands.

The following commands are what I usually type in (in this order specifically) when getting a new branch up and running on my local machine.

`git branch`

More often than not, you'll be working on a separate local branch other than master (one should not work on master as a general practice). When you walk away from the computer, you may still be on that working branch. To ensure you don't overwrite the master branch, double-check by typing in git branch. If you find yourself on a working branch, type git checkout master in order to switch back.

`git status`

Check if the current branch you are on has any changes that have not been tracked or committed. Make sure you do so before switching over to the master branch. A good tip if you haven't committed a change is to use git stash. This holds your current progress in place and puts your branch back at to the last commit. If you want to bring it back up, simply type git stash pop.

`git fetch && git pull`

Once you made the switch back over to your master branch. Check and see if there are any new updates from upstream. If you're working with a large team or global team there will usually be work to pull down. git fetch is a safe way to check if there are any changes incoming from master/main before you do a pull.git pull will allow you to grab the latest code from master/main.

`git checkout -b < name of new branch >`

Once you are ready to start your new branch you will need to checkout from master. -b will no only make a new branch for you, but it will switch you over to that branch automatically. (note: do not add the open and close brackets in your code)

Alright, let's say you are ready to commit some changes and deliver them to your team. I usually type the following commands.

`git status`

We'll start by checking the status. See if there are any uncommitted or untracked changes. If there are changes, visit the files in question and fix what needs to be fixed or completed before adding your changes for a commit.

`git add -A` or `git add <name of file>`

Normally I use this command because I know the files I use from my local copy are all going to be pushed up, hence the -A syntax. There are instances where I need to only commit specific changes from my local, say a specific CSS file, a few selected JavaScript files. In the past, for example, working in Drupal I had to make sure I didn't unload unnecessary modules. These files were changes I needed in order to get my local running properly, but I didn't need to push them back upstream, the team already has them.

`git commit -m " < your commit message here > "`

This is where you are ready to commit your changes. Makes sure to keep your commit message concise. They are generally messages or titles that will show up in GitHub, GitLab, Bit Bucket. You want your team members to quickly skim through and see what it is that you worked on. In the past, when I worked at larger companies I was required to track the ticket name/number in my commit messages. Once they are pushed up, the number is actually clickable and it will take you to the origin ticketed issue.

`git checkout master`

Switch to the master branch

`git merge < name of latest committed branch >`

Once you have switched over to the master branch you can now merge your most recent committed branch to master.

`git push origin master`

Once you have merged your changes and other changes from other team members (if you are lead), you may now push the merged changes up to staging servers or up to production.

Well, this is it. I hope this has been helpful for you. Again, these are the steps and commands I have grown accustomed to. But feel free to go in between and add additional commands as needed for your project.

This post was originally written from my personal blog (https://www.jameslau.com/blog/front-end-git-flow-routine). Drop by and say "Hi!" if you have any questions or comments. Would love to connect.

Happy coding!

DEV Community: James Lau

Proprietary Rights to Your Digital Content

Trending Tech: HTMX

Understanding What Point Release Means Within A Development Cycle

The Constant Gardener

Comparing Simple Theme Builder Options With CMS Platforms

What and Why, Git LFS?

Design Tokens

Monthly Site Audits

The Rise of AI Assistance

INITIAL ENCOUNTER

PLAUSIBLE USAGE

CONCLUSION

Define Maximum Site Width

My Basic Front-end Development Git workflow Routine

git branch

git status

git fetch && git pull

git checkout -b < name of new branch >

git status

git add -A or git add <name of file>

git commit -m " < your commit message here > "

git checkout master

git merge < name of latest committed branch >

git push origin master

`git branch`

`git status`

`git fetch && git pull`

`git checkout -b < name of new branch >`

`git status`

`git add -A` or `git add <name of file>`

`git commit -m " < your commit message here > "`

`git checkout master`

`git merge < name of latest committed branch >`

`git push origin master`