Trail Stories

All
Content Marketing
Growth

Rename Master Branch To Main In Git & GitLab

Git and the tech community as a whole has recently been transitioning to using the term “main” to describe the new default branch. Other code hosting platforms like GitHub have made the change; and GitLab as another one of the public git hosting platforms has also made the change as of version 14.0 for self-hosted versions that shipped on June 22, 2021. GitLab has previously made the Phase 1 change to GitLab.com users. Going from master to main doesn’t have to be daunting, in fact changing our git repositories master branch name from master to main can be quite a quick and easy process to follow. You don’t even need to create a new git repository. Default Branch If you are still using “master” as the default Git branch name then you may be thinking about renaming your branch on existing projects. But how do you do this? Here we talk about using GitLab to rename master branch to main. Git repositories are one of the most popular source tracking tools in use today and renaming master to main has become more of a spotlight recently due to the master slave type notion that it implies. Many want to follow best practices and trends and change their git repo master to main. The master slave terminology can sometimes make people feel isolated in the same sense that master slave is sometimes similarly associated with blacklist whitelist. By renaming our git branch to a new main branch, we can result in ‘main’ as our new branch. We can also update our tracking connection. Renaming Your Local “Master” Branch To “Main” To rename your local “master” branch on your machine, you’ll just need to run a simple one liner command. This will update your local master branch but not the remote branch. Later on we also need to look at renaming the remote master branch and changing the default branch name in the git repository. $ git branch -m master main Now we can run anther one liner that will tell us if we were successful $ git status On branch main Your branch is up to date with 'origin/master'. nothing to commit, working tree clean Excellent, now that we can see that we have been successful in renaming our local branch we can do the same on our remote repository too as everything we have done so far has not left our computer. At this stage we have just updated the current local head branch but we haven’t updated our remote repository. Our existing tracking connection is still pointing to master. This hasn’t resulted in a remote renamed branch. Renaming The Remote Master Branch Renaming a branch isn’t that simple. Unfortunately for us we need to create a brand new branch remotely and then update references to it in places like the default branch, protected branches and perhaps even our GitLab CI file too. This allows us to update our existing projects with a new default branch and change the default branch name. As long as we are on our “main” branch still as we were before, we can push this new branch to the remote repository. $ git push -u origin main At this stage we should be able to see that now our local repository is up to date with the remote branch name. $ git status On branch main Your branch is up to date with 'origin/main'. nothing to commit, working tree clean Now that we have a new branch remotely, we need to make sure that we change the default branch in the project settings. You’ll need to make sure that you have at least Maintainer level access to be able to do this in GitLab. This will allow us to avoid a remote rejected type error message when deleting our old master branch in our git repository. Head on over to your repository on GitLab.com or self-hosted GitLab instance and go to Settings -> Repository. At the top of the settings page is the Default branch Once we’ve changed this to main and saved, we can scroll down a little further and make changes to our Protected branches by protecting our new main branch. By default, Maintainers are allowed to push and merge to a protected branch, so you may wish to either select these default settings or specify your own if you use custom settings for your current master branch. Now that’s done, we can go and unprotect our master branch which is going to allow us to delete it. Just click the yellow Unprotect button to the right. This will unprotect what was once our default branch, known previously as the master branch. If we don’t perform this step we’ll see a remote rejected error when we attempt to delete this git branch. From our local machine we can issue a delete command to the remote GitLab server to delete the old default branch, which was the master branch. $ git push origin --delete master What we should see now is success that we’ve been able to delete the old initial branch called master and finish the process to change over to our main branch. $ git push origin --delete master To gitlab.hatchet.com.au:bud/seo.git - [deleted] master And that’s it! We’ve now been able to update our local branch, change our remote master branch and rename master to main, plus update our local branch and local git repository. Git Repository There are many types of different git repositories in use today. For ones that are used by a team of collaborators you may have other files affected that you need to think of, areas in your code where perhaps an error message or new default needs to be specified. The main branch might need to be explicitly defined as a git branch in your GitLab CI file or other CI/CD pipeline. This will all depend on your exact setup and are things that this blog post doesn’t aim to solve for your unique circumstance. A pull request may be necessary in some…

February 1, 2023

The Utility Of Tailwind CSS: When Style Matters

Should Tailwind Be Your First Choice CSS? When I first examined Tailwind CSS I was rather grossed out by the number of classes that were being written…. <button class="rounded-lg px-4 md:px-5 xl:px-4 py-3 md:py-4 xl:py-3 bg-teal-500 hover:bg-teal-600 md:text-lg xl:text-base text-white font-semibold leading-tight shadow-md">Click Here</button> But after one of our developers spun up a single page application using the framework during our Friday “code and learn afternoons” there was no turning back! So what is Tailwind CSS? The official documentation describes the framework as “a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.“ Back in early October 2017 Adam Wathan, a full-stack web developer in the U.S.A with the support of Jonathan Reinink, David Hemphill and Steve Schoger started to explore the current problems they were facing with CSS. Adam outlined his early concerns in a blog article CSS Utility Classes and Separations of Concerns. It paints a clear picture on why a solution such as the Tailwind CSS framework became a necessity (a must read If you are a web developer). When Style Matters. From our own personal experience, web developers tend to run into a lot of problems with either naming things or breaking things because of overlapping complex CSS styles. As developers we tend to overcomplicate things by creating extensive naming conventions to the point where it becomes far too difficult to track the impact that styling may have on a website/application. The Tailwind CSS framework addresses these problems by creating small, composable utilities with a fixed set of options that allow developers to apply existing classes directly into the HTML Markup. Not Just Another CSS Framework… Sure, there are UI Kits such as Bootstrap, Foundation and Material UI that can give developers a baseline to work with but these kits influence design by pre-determining the structure and design of a component or utility. When you are trying to create a beautifully designed website, there are sections within the website that libraries cannot accommodate for and you inevitably need to write a vast amount of custom CSS. There are methodologies such as BEM that help to define how developers should organise custom CSS. But, we are still subject to the “opinon” of the original developer and their preferred language/style to some degree. The codebase; folders, file names and naming conventions, inevitably differ from project to project no matter how much you we try. Is It Really Utility First? Yes – the goal is to leverage as much of the framework as possible and they do provide the flexibility to extend your CSS very easily. In support of this too they have documentation to leverage Preprocessors alongside PostCSS to reduce your page weight: https://tailwindcss.com/docs/using-with-preprocessors https://tailwindcss.com/docs/adding-new-utilities https://tailwindcss.com/docs/controlling-file-size/#removing-unused-css @tailwind base; @tailwind components; @tailwind utilities; //Add your Custom CSS here WordPress + Tailwind CSS + Timber Most of the websites we build are developed in WordPress for our clients. With a 34% market share (and growing year on year) it provides both clients and developers familiarity, maintainability, can be heavily customised as well as having an extensive amount of resources/plugins at its disposal. To utilise Tailwind CSS in WordPress we needed a solution to reduce the amount of redundant code that we typically see when developing WordPress PHP templates. WordPress template files, and .php files as a whole, are not the greatest when it comes to structuring your code into repeatable components and passing variables around. Yet, by using a WordPress framework like Timber we can clean up our templates and quite easily incorporate Tailwind CSS. Timber uses Twig templates, a templating system that sits on top of PHP. Essentially, it cleans up the PHP templates drastically, allowing us to create structured, clean and maintainable code. You could also overcome this problem by using a Javascript framework such as VueJS, ReactJS or a more modern solution such as static site builders; GatsbyJS or NuxtJS. Simple WordPress Components A great example to check out on our website that uses both Twig templates and Tailwind CSS are our accordions. They consist of a parent component called accordions.twig that loops through the partial accordion.twig. The only additional class that we needed to apply was .accordion to perform the necessary JS targeting for opening and closing each accordion. <h2 class="text-center text-white mb-8">{{ fields.title }}</h2> {% for accordion in fields.accordions %} {% include 'partial/accordion.twig' %} {% endfor %} Parent template accordions.twig <div animate-down class="accordion flex justify-center {{ class ? class : '' }}"> <div class="w-full max-w-3xl mb-8 flex flex-col p-8 rounded shadow bg-gradient-to-top-medium-blue-to-dusk-blue {{ loop ? 'sm:mx-8' : '' }}"> <div class="group flex justify-between accordion-title cursor-pointer items-center relative"> <h3 class="transition group-hover:text-squash text-white font-semibold mb-0 pr-8 text-base"> {{ accordion.title }} </h3> <i class="absolute right-0 icon-add group-hover:text-squash transition"></i> <i class="absolute right-0 icon-minus group-hover:text-squash transition"></i> </div> <div class="accordion-content text-powder-blue"> {{ accordion.content }} </div> </div> </div> Child template accordion.twig Creating Gutenberg Blocks On top of that – by leveraging Advanced Custom Fields to build out our Gutenberg blocks our developers can now spin up blocks for our clients to use that are extremely accessible in no time. Custom ACF Accordion Gutenberg Block Efficient Web Development To ask any one of our web developers to jump in and change the CSS; to change the font sizing, padding, margins, icons, transitions or anything else, we are 100% confident that it’s not going to break anything else making it a quick task. Even though Tailwind CSS is super flexible, and still allows developers to inject custom CSS, it has eliminated the need for custom classes to be created in 97% of the codebase. For us this is really important, it heavily reduces any of these risks and headaches for any developer fresh on the project. As an agency – it’s a huge benefit, as we are seeing a massive improvement in the time it takes for our developers to produce work. It’s surprising how much thinking of names can break the momentum and flow of a web developer. In some projects our developers don’t have to write a…

February 1, 2023

QUIC.cloud CDN Review: Shaking Up The WordPress Cache Race

Is QUIC.cloud a Contender for Best WordPress Cache Plugin in 2023? LiteSpeed is our go to WordPress Cache Plugin: With LiteSpeed Technologies recently launching their latest product QUIC.cloud Content Delivery Network (currently in BETA) that has the ability to cache dynamic WordPress pages, use the latest HTTP/3 and QUIC protocol as well as having the ability to generate Low Quality Image Placeholders (LQIP), on top of their vast range of other features. It has never been easier to speed up your WordPress website on a global scale. What’s a Cloud CDN? A cloud content delivery network (CDN) is a group of servers scattered throughout the globe that will serve your website files to visitors locally. When a visitor decides to drop in and view your website their computer doesn’t need to run to the other side of the world to fetch the files, instead they are served by the closest server. Load balancing is dramatically improved by distributing content from Google’s network and you’ll see a dramatic reduction in server costs. Removing the need to fetch the files from a single server down under. What is HTTP/3? HTTP/3 is the new web protocol that will inevitably supersede HTTP/2. This new QUIC transport layer network protocol, which is served over UDP, was developed in 2012 by Google. It’s primary benefit is to increase performance by using multiplex connections and eliminate the head-of-line-blocking delays (packets being help up) that HTTP/2 currently experiences. QUIC was initially designed by Jim Roskind, a software engineer at Google. It was originally an acronym for Quick UDP Internet Connections however QUIC is now simply the name of the protocol and not an acronym. Cloudflare have been recording a 12.4% increase in Time to first byte (TTFB) when bench marking it’s performance. Whilst HTTP/3 is still in RFC draft it’s really great to see LiteSpeed looking to leverage the latest web technologies. QUIC also aims to reduce connection and transport latency in each direction to avoid congestion. What is LQIP? A Low Quality Image Placeholder is a temporary image that is loaded in place of the high quality image that allows a user to see the visual structure of your website whilst your high quality images are loaded. The temporary image that is generated samples the original image to extract a baseline color and shape of the original asset. source: https://quic.cloud/quic-cloud-services-and-features/low-quality-image-placeholder-service/ It’s taking that one extra step to not only make that initial page load quicker but to give your users a far better UX experience giving them an indication that your page is coming together. QUIC.cloud Benefits Pushing Images, CSS Files, JS Files and Cached WordPress pages out to one of LiteSpeed’s 42x QUIC Servers across the globe (https://api.quic.cloud/ips). Automatically purging and syncing data to QUIC when pages or post content is saved within WordPress. Providing users in every continent access to your site in less than 100ms via QUIC. (Optional) Anti DDos protection and Brute Force Protection with the provision of one reCAPTCHA blocker upon activation that will challenge non-Trusted visitors, and denies access to attackers via QUIC. Up to 20 GB worth of included monthly bandwidth quota (additional credits can be purchased). Optimisation of up to 20,000 images per month. Critical CSS Service (CCSS). Access to HTTP/3 internet protocol using QUIC: https://http3check.net from visitor to network plus network to origin server (when you enable QUIC) The use of UDP internet connections reducing TCP header overhead through the use of QUIC developed by the QUIC working group Low Quality Image Placeholders (LQIP) for a better user experience Beta support provided by the QUIC team when you need it Reduction of web traffic to your origin server by routing it via QUIC Setting up QUIC.cloud We recommend that your hosting provider is running a LiteSpeed Web Server and you must have the LiteSpeed Cache plugin installed. Use of QUIC is also highly recommended. Generate your LiteSpeed Domain Key that connects to your personal QUIC.cloud dashboard (LiteSpeed WP Plugin > General > Generate Domain Key) Once your key is generated you will need to set up your account. This will provide you with a CNAME that you will need to add to your DNS records at your nameserver (this can sometimes be in the same control panel as your hosting provider or may be with your domain registrar). Contact your hosting provider for support in adding this record Turn on the QUIC content delivery network settings (LiteSpeed WP Plugin > CDN > set QUIC.cloud CDN to “On”) If you wish to use LSCache, inside your QUIC account under your newly set up domain, turn Dynamic Cache to ON under ‘Cache Settings’ If your hosting provider is using HTTP3 and QUIC under LiteSpeed, you can optionally ‘Enable QUIC Backend’ by setting this to ON under ‘Connection Details’. This can significantly improve the connection performance of web pages between QUIC.cloud which is now your content delivery network and your origin server with your hosting provider. This uses UDP internet connections and reduces the overhead of TCP headers. You can contact your hosting provider for support in this matter We recommend that you utilise full end to end encryption by setting the ‘Connection Type to Origin’ to ‘MATCH’ under ‘Connection Details’ which will force the transport protocol to match. Using a .htaccess rule or a WordPress Plugin on your origin server will enable you to force visitors to use HTTPS Now, with a bit of waiting for your QUIC SSL certificate to deploy (via QUIC.cloud) your website should now be using QUIC on the QUIC CDN and the latest in TLS 1.3, plus your wordpress speed should have significantly improved Please remember that for the interim QUIC.cloud is marketed as not ready for production and using this in a production environment is at your own risk. QUIC.cloud do offer support however it is beta For more information or support on any of these steps with QUIC please refer to the QUIC.cloud documentation. QUIC.cloud Server Locations QUIC.cloud servers using the QUIC protocol are diversified across multiple regions and vendors including AWS, Digital Ocean, UnReal, HyperHosting, Planet…

September 23, 2020

Bud Wins 2020 Good Design Australia Award

The winners of Australia’s peak international design awards – the highest honour for design and innovation in the country were announced today during the 2020 Good Design Week. Bud received the prestigious Good Design Award Winner Accolade in the Digital Design Web Design and Development category in recognition for outstanding design and innovation. About Good Design Australia and Australia’s Good Design Awards The annual Good Design Awards is Australia’s oldest and most prestigious international Awards for design and innovation with a proud history dating back to 1958. The Awards celebrate the best new products and services on the Australian market, excellence in architectural design, engineering, fashion, digital and communication design, design strategy, social impact design and young designers. More than 55 Good Design Awards Jurors evaluated each entry according to a strict set of design criteria which covers ‘good design’, ‘design innovation’ and ‘design impact’. Projects recognised with a Good Design Award must demonstrate excellence in good design and convince the Jury they are worthy of recognition at this level. What The Judges Thought The story of a small business owner’s ‘hero’s journey’ unfolds across the site, highlighted by the beautiful hero illustrations & subtle supporting animation. The Good Design Awards Jury praised the design, commenting: “Such beautiful illustrations that really set this website apart from its competitors. Graceful parallax, warm textured illustration, and a variety of micro animations and interactions keeps everything inviting, intriguing, calm and quietly purposeful. Neat flow from need to offering to tactics through the copy flowing down each page. Well done. ” Dr. Brandon Gien, CEO of Good Design Australia said: “Receiving a Good Design Award is a significant achievement given the very high calibre and record number of entries received in 2020.” “There’s no doubt it has been a really tough year for everyone so it’s nice to be able to share some good news for a change. The projects represented in this year’s Good Design Awards shine a positive light on our creative and innovative capacity as human beings. These inspirational winning projects give me hope and optimism that our design community will continue to innovate, no matter how challenging the world around us is,” said Dr. Gien. “Australia’s Good Design Award is more than a symbol of design excellence – it represents the hard work and dedication towards an innovative outcome that will ultimately make our lives better. These projects showcase the shear brilliance of design and the potential it has to improve our world,” said Dr. Gien. The 2020 Good Design Awards attracted a record number of submissions with an astonishing 835 design projects evaluated in this year’s international design awards. See all the 2020 award winners at: www.good-design.org…

May 21, 2020

Bud Grabs Honours in 24th Annual Webby Awards

Bud has been named an honouree in this year’s 24th annual Webby Awards. Hailed as the “Internet’s highest honour” by The New York Times, The Webby Awards, presented by the International Academy of Digital Arts and Sciences (IADAS), is the leading international awards organization honouring excellence on the Internet. IADAS, which nominates and selects The Webby Award Winners, is comprised of Internet industry experts including Instagram Co-founder Kevin Systrom, Mozilla Chairwoman Mitchell Baker, 23andMe Co-Founder and CEO Anne Wojcicki, PBS CEO Paula Kerger, Headspace Founder Andy Puddicombe. “Honourees are setting the standard for innovation and creativity on the Internet,” said Claire Graves, Executive Director of The Webby Awards. “It is an incredible achievement to be selected among the best from the 13,000 entries we received this year.” Small But Mighty Bud received recognition for its work in the best visual design aesthetic category, rubbing shoulders with projects from industry heavyweights Apple, Google, Squarespace and the Washington Post. “When we started this project we knew we needed to create something visually disruptive and unique to tell our story and engage people to look deeper; to receive this level of recognition for such a young company blew us away” said Bud director, Tom Smolarek. “It’s inspiring that work can get recognised and be disruptive, even at this level, no matter who you are.” You can watch the 24th ceremony and all the winners at https://webbysfromhome.com hosted by Patton Oswalt.

January 29, 2020

Blueprint For An Identity: The Bud Logo Refresh

What’s The Value In A Logo? It’s a key question most business owners or brand managers have to approach in building a business. Often, it’s the first interaction point with a brand or co-occurs with the first interaction. It gives the potential customer a first insight into the mission and personality of a brand. There’s a level of mental fit that coincides with a logo interaction, because on first glance, most products are fairly fungible; meaning the value of a good or service is fairly interchangeable with its competitors. Afterall, how many of us can genuinely tell the difference between a Pepsi and Coke on taste? This, along with the long established emotional aspect to most purchasing decisions makes it vitally important to differentiate and establish a connection in the logo interaction. So how do we build perceived value in a connection and communicate that there’s real value in exploring the actual product? At Bud we’re a growth marketing agency in a market where few have heard of the concept and fewer still can effectively communicate any rational difference with traditional marketing. It’s the type of problem where strong mission, values and quality are needed to cut through. Alternate Bud logo representations. Aligning With The Visual Storytelling So we found ourselves in a position with our site launch fast approaching with a brand, product and mission that had rapidly evolved since launch. We had a story to tell and an amazing service, but with a logo that no longer aligned with our direction. That’s where we brought in DrawHistory. Their designs built alignment with the Bud brand story. We believe every business owner is on their unique growth journey, with unique challenges. Digital is often a strong growth pathway for many businesses, our message is to let them know with an experienced digital partner that sees the bigger picture they can reach their summit. A great story is about more than the words though, there’s a bigger storytelling flow with motifs of ‘growth,’ ‘the journey’ and symbols of flags, pathways, greenery, gentle gradient transitions and bright colours throughout the story. Bud after-all is a happy brand, the challenge we facilitate solutions to can be daunting and complex one to the customer, but it should also be an aspirational journey to build a business from humble beginnings into something great. Our new primary logo. A New Identity For Our Growth Journey Ahead What we move forward with now is a visual identity and a supporting mission to ‘grow business better.’ It’s a motto that guides all the decisions we make and defines our purpose, and it starts and ends with a logo. Bright, aspirational and reaching for the sky. Much like our team.

November 12, 2019

Elevating Your Brand With Free Instagram Stories Templates

Instagram Stories are a popular, highly visual storytelling medium and brands that have mastered this 15 second ephemeral content format know that a branded visual approach will boost recognition and add a level of professionalism to your content. So, if you’re looking for a quick, easy and cost-effective way to boost your engagement and your brand’s aesthetic on Instagram, read on for a few handy tips to take your stories templates to the next level. Why You Should Use Instagram Stories Templates You’ve probably already spotted the cohesive Instagram stories used by brands and influencers as part of their social strategy. Not only does it enhance your brand visuals, but it also makes it easier to manage your Instagram account as a team, by maintaining a brand visual consistency. Generally, these templates are pre-made which leads us to our first tip of the day! Instagram Stories Editing Apps & Tools Instagram stories help you showcase your brand’s true colours with an authentic approach. Unless you’re a graphic wizard, there’s no better way than making a pre-made template fully your own. There’s a wide spectrum of Instagram stories editing apps out there, but for us the one that rises above the rest is Canva. Customise Your Instagram Stories with Free Templates from Canva Canva has a massive collection of pre-made templates and stock images so you can craft and customise your Instagram stories all-in-one. Even the free tier is a highly functional graphic design tool that allows you to upload your brand logo, select colours, add icons, images, stickers, text, and ultimately craft consistent and cohesive Instagram Stories. Just download your design and upload straight to your account – and you’re done! Canva is available for both Android and iOS. You can also edit your Instagram stories online or on your desktop. Find their free Instagram Stories editor here. Sequential Storytelling Templates A picture can paint a thousand words. But with Instagram Stories you can go one better, allowing you to capture the feel and movement of a moment with sequenced pages! There are some great free templates out there to help you showcase a variety of content: A restaurant shares a step by step tutorial on how to make the perfect Bolognese.A tourism company shares top locations for travel and experience An interior designer shares top tips on decorating living rooms.A coffee shop shares inspiring mouth-watering stories with this ‘Green and Cream Coffee Instagram Story’ template. Highlight Covers & Icons Instagram Highlights covers are strategically being used by businesses and influencers to elevate their Instagram layouts. They are located just below the bio on your Instagram profile and divide archived stories into different categories. And if your Instagram Highlights include icons, it’s even easier for users to engage with your content. If you prefer Highlights without the icons added, these ‘Modern Business Instagram Highlight Covers’ from Canva are definitely worth checking out! Q&A Sessions Using Instagram’s Q&A feature is a great way to not only increase your engagement rate, but it’s also a great way to gain valuable customer insights. By default, the question sticker will say ‘ask me a question’ but this can be customised according to your liking. If you’re in the retail industry, you may wish to ask your followers more specific questions, like their thoughts on a new product or launch. Or if you’re a sports coach and blogger, you may wish to ask your audience what they prefer to read about in your next blog post. This Or That Templates People love the real human connection.‘This or That’ templates are a great way for the customers to get to know the person behind the perfectly curated feed and get your audience engaged in your story. Each template will be based on a theme such as food, fashion, holidays, lifestyle and the list goes on… The deal is to simply circle the answer on the template that aligns with your preference. To take engagement one step further, consider placing a blank template in your story and encourage your followers to screenshot, fill out their own and mention you in their updated version so you can see their answers. It’s a fun and interactive way of building relationships with your followers! Swipe up If your account is in the 10,000 followers club, you’re eligible to add the Instagram ‘Swipe up’ function to your newly created aesthetic story. This will help you drive traffic to an external link such as your website, blog or Youtube channel. Our Favourite Free Templates Irrespective which industry you’re doing business, putting together an Instagram Stories template can help build a strong and consistent visual aesthetic to frame your brand’s storytelling and really elevate your brand! So get out there and start creating! With the help of a few of our favourites: Pinterest UnfoldKelseyinlondonEasil For more helpful Instagram tips see our blog, trail stories or if you need a professional hand, checkout Bud’s social media services.

Key learnings, insights and stories from the trail...