DEV Community: Zack Webster

How TurboQuant Works for LLMs and Why It Uses Much Less RAM

Zack Webster — Tue, 31 Mar 2026 20:27:15 +0000

Most conversations about scaling large language models focus on obvious factors like model size, training data, and GPU power. While those matter, they stop being the main constraint surprisingly quickly. Once you start dealing with long conversations and many users, memory becomes the limiting factor. Not just how much memory you have, but how efficiently you use it.

This is especially true during inference, when the model is actively generating responses. At that point, the system is not just running computations, it is also constantly reading and writing large amounts of intermediate data. That data, more than anything else, starts to define both cost and speed.

How LLMs actually store words like “cat”

When you type a word like “cat,” the model does not store it as text. It converts it into a vector of numbers, often thousands of values long. These numbers represent a position in a high-dimensional space where similar words are located near each other.

For example, in a simplified form:

cat → [0.21, -1.3, 0.7, 2.1, …]
dog → [0.25, -1.1, 0.6, 2.0, …]
car → [-2.0, 0.5, 1.2, -0.3, …]

Words like “cat” and “dog” end up close together, while “car” is far away. This is how meaning is encoded, not through definitions, but through relationships.

In real models, these vectors are much larger. A common size is around 4096 numbers per token. Each number is typically stored using 16 or 32 bits.

Why one word expands into thousands of numbers

What is less obvious is that the embedding vector is only the starting point. As the token moves through the model, it gets transformed at every layer. At each layer, the model produces two new vectors per token, called keys and values. These are stored in what is known as the KV cache so the model can refer back to earlier tokens.

If you actually calculate how many numbers are stored per token in a typical model, it looks like this:

32 layers × 2 (K + V) × 4096 ≈ 262,000 numbers per token

So a single word like “cat” ends up associated with hundreds of thousands of numbers as it moves through the model.

Why the KV cache consumes so much RAM

Once you understand how many numbers are involved, the memory usage becomes easier to grasp. Consider a conversation with around 2000 tokens. That leads to:

2000 × 262,000 ≈ 524,000,000 numbers

Even if each number is stored in 16 bits (2 bytes), that is roughly:

≈ 1 GB of memory for a single conversation

And this is just for the KV cache. In a real system serving many users simultaneously, this memory usage scales quickly into tens or hundreds of gigabytes.

An additional complication is that moving this data is expensive. In many cases, transferring data from memory is slower than performing the actual mathematical operations. This means memory bandwidth becomes a performance bottleneck.

Why reducing precision alone is not enough

A natural solution is to reduce how many bits are used per number. Instead of 16 or 32 bits, you could use 8 bits. This is a standard technique known as quantization.

It works to some extent, but pushing it too far causes problems. The model relies on subtle numerical relationships, especially in attention calculations. If the numbers become too coarse, those relationships break down and accuracy drops.

The key idea behind TurboQuant: scale plus codes

Instead of storing each number directly, TurboQuant and similar approaches store numbers in a structured way using a scale and a small integer code.

For example, instead of storing:

1.44

you might store:

scale = 0.5
code = 3

and reconstruct:

value ≈ scale × code = 1.5

This allows a small set of integers, represented with very few bits, to approximate a wide range of real values.

Here is a small illustrative example:

Original: [0.2, -0.9, 1.4, 0.6]
scale = 0.47
codes = [0, -2, 3, 1]
Reconstructed ≈ [0, -0.94, 1.41, 0.47]

The numbers are not exact, but they are close enough to preserve the overall structure.

How TurboQuant preserves attention accuracy

The main challenge with aggressive compression is that it can distort dot products, which are central to attention. Attention works by comparing vectors and deciding which previous tokens are most relevant.

TurboQuant addresses this by adding a lightweight correction step that reduces systematic errors introduced during compression. The goal is not to perfectly reconstruct every number, but to preserve the relative ordering of attention scores.

For example, suppose the model computes:

Token A → 5.36
Token B → 3.18

After compression, this might become:

Token A → 5.10
Token B → 3.28

The exact values change, but the ordering stays the same. Token A is still more important than Token B, so the model behaves the same way.

How much RAM TurboQuant actually saves

By reducing the number of bits per value to around 3 bits, TurboQuant can significantly shrink the KV cache. In practice, reported results suggest around a 6× reduction in memory usage.

That means a KV cache that previously required about 1 GB could be reduced to roughly:

≈ 150–200 MB

This has several practical benefits:

longer context windows become feasible
more users can be served per GPU
latency improves due to reduced memory movement

A useful way to think about TurboQuant

One way to understand this is to compare a full transcript with a set of notes. Without compression, the model stores a very detailed numerical record of everything it has seen. With TurboQuant, it stores a compressed version that keeps what matters for future decisions.

The details are not perfectly preserved, but the relationships are. And for the model, that is what matters most.

Why this matters for the future of LLMs

As models continue to grow and context lengths increase, memory and memory bandwidth are becoming central challenges. Techniques like TurboQuant suggest that significant efficiency gains are still possible without changing model architecture or training methods.

At a deeper level, this highlights how LLMs actually work. They operate on vectors and relationships in high-dimensional space. Once you accept that, it becomes clear that exact precision is often unnecessary. What matters is preserving the structure of that space well enough for the model to make correct decisions.

TurboQuant is essentially an answer to that question: how much can we compress these representations while keeping the model’s behavior intact? The answer, at least so far, is that we can compress them far more than most people would expect.

Keep Forms Simple, Silly

Zack Webster — Sun, 15 Mar 2026 02:17:21 +0000

Online forms are one of the most common points of interaction between a business and its users. They appear in sign ups, checkout pages, contact pages, surveys, and support requests. Despite their importance, many forms are unnecessarily complicated. When forms become long, confusing, or intrusive, users abandon them.

Keeping forms simple is not just a design preference. It directly affects conversion rates, user satisfaction, and overall website performance.

This principle can be summarized in a simple idea: keep forms simple.

Why Simplicity Matters in Forms

Users rarely enjoy filling out forms. Most people approach them with one goal, complete the task quickly and move on. Every additional field, unclear label, or unnecessary question adds friction.

When friction increases, completion rates decrease.

Research across multiple UX studies consistently shows that shorter, clearer forms produce higher conversions. When users understand exactly what is required and can complete the process quickly, they are far more likely to submit the form.

Simple forms benefit both users and businesses.

Key advantages include:

Higher completion rates
Lower abandonment rates
Faster user interactions
Cleaner, more accurate data

In many cases, reducing a form by just a few fields can significantly improve conversions.

Only Ask for What You Truly Need

One of the most common mistakes in form design is asking for too much information.

Businesses often add fields because the data might be useful someday. While that intention makes sense internally, users see it differently. They see extra effort and potential privacy concerns.

A good rule is to only ask for information that is necessary to complete the task.

For example:

Contact Form (Simple)

Name
Email
Message

Contact Form (Overcomplicated)

Name
Email
Phone number
Company name
Budget range
Project timeline
Country
How did you hear about us

If those additional questions are not required, they should not appear in the form.

Use Clear and Familiar Labels

Users should immediately understand what each field requires. Ambiguous labels create hesitation and mistakes.

Good labels are direct and familiar.

Examples:

Clear labels

First Name
Email Address
Password

Confusing labels

Identity
Contact Handle
Secure Access Key

Even small wording changes can improve clarity. Simplicity reduces cognitive load, which makes forms easier to complete.

Reduce the Number of Fields

The length of a form strongly influences whether users complete it.

When a form looks long, users often abandon it before even starting. This is known as form intimidation.

There are several ways to reduce perceived length:

Combine fields when possible
Remove optional questions
Use dropdowns carefully
Ask for additional information later

For example, during account creation you may only need:

Email
Password

Additional details like phone numbers, preferences, or profile information can be collected later.

Use Smart Defaults and Autofill

Modern browsers and devices support autofill features that speed up form completion. Good form design should work with these features rather than against them.

Helpful techniques include:

Preselecting common options
Automatically formatting phone numbers
Allowing browser autofill for address fields

The less typing required, the better the user experience.

Show Progress in Longer Forms

Sometimes longer forms are unavoidable, such as loan applications or detailed registrations. In these situations, breaking the form into steps can reduce frustration.

Multi step forms provide two important benefits:

They feel shorter
Users can see their progress

Progress indicators reassure users that they are moving toward completion.

Instead of presenting twenty fields at once, divide them into logical sections.

Example:

Step 1: Personal information
Step 2: Address details
Step 3: Payment information

This structure makes the process feel more manageable.

Provide Helpful Error Messages

Errors are inevitable when users fill out forms. What matters is how those errors are handled.

Poor error handling creates frustration.

Examples of bad error messages:

Invalid input
Something went wrong

Better error messages explain exactly what needs to be fixed.

Examples:

Please enter a valid email address
Password must contain at least 8 characters

Clear feedback helps users correct mistakes quickly and continue the process.

Optimize Forms for Mobile Users

A large portion of form submissions now happens on mobile devices. Small screens make complex forms even more difficult to complete.

Mobile friendly forms should:

Use large input fields
Minimize typing
Use appropriate keyboards for each field
Avoid long dropdown lists

For example, numeric fields should trigger numeric keyboards, and email fields should trigger email optimized keyboards.

Small improvements like these make a significant difference on mobile devices.

Build Trust Through Minimalism

Users are more likely to complete forms when they trust the website asking for their information.

Overly complex forms can feel suspicious or intrusive. Simple forms communicate clarity and transparency.

To reinforce trust:

Explain why information is needed
Avoid unnecessary personal questions
Display privacy assurances when appropriate

When users feel comfortable sharing information, completion rates improve.

Test and Improve Your Forms

Even well designed forms can benefit from testing.

A/B testing different versions of a form can reveal which design performs better. Sometimes removing a single field can dramatically improve conversions.

Useful metrics to monitor include:

Form completion rate
Abandonment rate
Time to complete
Error frequency

Continuous optimization helps ensure that forms remain efficient and user friendly.

Final Thoughts

Forms play a critical role in digital experiences. They are the gateway to leads, customers, and meaningful interactions.

Yet they are often treated as an afterthought.

By focusing on simplicity, reducing unnecessary fields, and prioritizing clarity, businesses can dramatically improve form performance.

The guiding principle remains simple.

Keep forms simple.

Why Value-Based Pricing Works Better Than Anxiety-Based Pricing

Zack Webster — Sun, 15 Mar 2026 02:13:21 +0000

Pricing is rarely just a financial decision. It is also psychological. Many businesses believe they set prices based on strategy, but in practice they often price based on fear. Fear of losing customers, fear of competitors charging less, or fear that buyers will say no. This pattern leads to what can be called anxiety-based pricing.

Value-based pricing, on the other hand, approaches pricing from the customer’s perspective and the outcomes they receive. When businesses shift from fear-driven pricing to value-driven pricing, they typically see stronger margins, clearer positioning, and healthier customer relationships.

Understanding Anxiety-Based Pricing

Anxiety-based pricing happens when companies set prices primarily to avoid discomfort or perceived risk. Instead of asking what their product is worth, they ask what price is least likely to scare customers away.

Common signals of anxiety-based pricing include:

Constantly lowering prices to match competitors
Offering unnecessary discounts before customers even ask
Underpricing new products out of fear of rejection
Avoiding price increases despite rising costs or improved offerings

While these choices may feel safe in the short term, they often create long-term problems. Margins shrink, perceived quality declines, and the business begins attracting customers who care mostly about price rather than results.

In many cases, companies become trapped in a race to the bottom where differentiation disappears.

What Value-Based Pricing Means

Value-based pricing starts with a different question: What outcome does the customer gain, and what is that outcome worth?

Instead of focusing on internal costs or competitors, businesses focus on the value delivered. This could include:

Time saved
Revenue generated
Risk reduced
Convenience improved
Expertise provided

For example, if a software tool saves a company 10 hours of work per week, the value is not the cost of building the software. The value is the time and productivity it returns to the customer.

When pricing reflects real outcomes, customers often accept higher prices because the value is clear and meaningful.

Why Value-Based Pricing Works Better

1. It Aligns Price With Customer Outcomes

Customers rarely buy products simply because they are cheap. They buy because something improves in their life or business.

When pricing reflects the benefits customers receive, the price begins to feel justified. Instead of asking “Why is this so expensive?”, customers start asking “How much is this improvement worth to me?”

This shift changes the entire buying conversation.

2. It Protects Margins

Anxiety-based pricing typically pushes prices downward. Over time this erodes profitability and makes it harder to invest in better products, customer support, or innovation.

Value-based pricing protects margins because it anchors price to results, not to the lowest competitor.

Companies that price on value often reinvest their stronger margins into improving the product, which further increases perceived value.

3. It Strengthens Brand Positioning

Low prices communicate a message, whether intentional or not. In many markets, low pricing signals lower quality or limited differentiation.

Value-based pricing positions a product as a solution rather than a commodity. The focus moves from “cheap” to “effective.”

This clarity helps attract customers who prioritize results instead of just looking for the lowest price.

4. It Attracts Better Customers

When businesses underprice, they often attract the most price-sensitive customers. These customers tend to demand more support, negotiate aggressively, and switch providers quickly if a cheaper option appears.

Value-based pricing filters for customers who care about outcomes. These buyers are more likely to appreciate the product, stay longer, and contribute to healthier long-term relationships.

5. It Encourages Better Products

Pricing based on value forces businesses to deeply understand their customers.

Questions naturally arise:

What problem are we solving?
How much does this solution matter?
How can we increase the impact of what we deliver?

This mindset pushes companies to improve the real value they create instead of simply competing on price.

The Hidden Cost of Pricing From Fear

Anxiety-based pricing feels safe because it avoids short-term discomfort. But over time it creates several hidden costs:

Lower profitability
Weak brand perception
Limited investment in improvement
A customer base focused only on price

Ironically, the attempt to avoid losing customers can eventually make the business less sustainable.

Value-based pricing requires more confidence and research, but it often leads to stronger long-term growth.

Moving Toward Value-Based Pricing

Businesses do not need to transform their pricing overnight. The transition can begin with a few practical steps:

Identify the most meaningful outcomes customers receive.
Quantify the economic or emotional value of those outcomes.
Communicate that value clearly in marketing and sales.
Gradually align pricing with the results delivered.

Over time, the conversation shifts from price comparison to value recognition.

Conclusion

Pricing reflects how a company sees its own value. When businesses price from anxiety, they unintentionally tell the market that their offering is interchangeable and negotiable.

Value-based pricing tells a different story. It says the product solves a meaningful problem and delivers measurable outcomes.

Companies that embrace this mindset often discover that customers are not simply looking for the lowest price. They are looking for the greatest value.

JWT explained as Formulas

Zack Webster — Mon, 27 Dec 2021 18:28:05 +0000

Okay, so this is a rather different way of learning about JWTs. But I think, if done right it can teach more effectively than a long blog post filled with thousands of words. So, let's begin.

What are JWTs?

JWT or JSON Web Token is structured token format of encoding JSON data in a way that can be cryptographically verified.

JWT Structure

Example JWT:
eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c

Notice the dots? If you "split" at dots you get 3 strings that make up the JWT.
So, JWT = headerString.payloadString.signatureString
(or signature, doesn't matter in this case)

What are these strings?

headerString = base64(header)
payloadString = base64(payload)

They are just base64 encodings for header & payload (header is a JSON object with metadata (type of JWT) & payload is another object with user-defined data with some standard keys).

Note: Here base64() implies base64URL(), assume them as functions that encode the object to base64 form, the later encodes it in URL-friendly manner. Similar assumptions ahead.

To keep things less repetitive ahead, let:
headerPayloadString = headerString.payloadString

We can form JWTs in different ways, for educational purpose lets look at a simple one (but not used IRL as much).

The signatureString/signature is discussed in following approach sections (sha256Signature, rsa256Signature).

The SHA256-HMAC Approach

SHA is a hashing algorithm. As mentioned this approach not used IRL as much given it's drawbacks discussed later.

Creating the JWT (signing)

sha256Signature = sha256(headerPayloadString , 'sharedSecret')
sha256JWT = headerPayloadString.sha256Signature

Verifying the JWT

Split headerPayloadString & signatureString (input signature)
Calculate signature as sha256(headerPayloadString , 'sharedSecret')
If both the input signature and calculated signature match, the JWT is valid.

Why do we not use this?

Notice how we need to use the same sharedSecret or "key" for creating/signing & verifying? That means if we use an authentication server we have to share the same key between the server and the consumer/application. This leads to security concerns.

The RSA-SHA approach

RSA is public key encryption algorithm, consisting of 2 keys a private and public key (pair).

Creating the JWT (signing)

sha256XSignature = sha256(headerPayloadString)
We don't use a key here (non-HMAC way)
rsa256Signature = rsa256Encrypt(sha256XSignature, 'privateKey')
rsaJWT = headerPayloadString.rsa256Signature

Verifying the JWT

Take the headerPayloadString, and hash everything with SHA-256
Decrypt (rsa256Decrypt) the JWT using the public key, and obtain the rsa256Signature
Compare the received JWT signature with the calculated one, if they match, the JWT is valid.

That Sums it Up

Voila! You now know the basic mechanics of JWTs. I recommended researching a bit more to supplement this post with. Hope, this helped clear some doubts.

The Most Important Elements of any Landing Page

Zack Webster — Tue, 21 Dec 2021 15:15:55 +0000

A good landing page can boost your campaign sales or signups by up to 10 times. But what are landing pages and how do they differ from general web pages? A landing page is a special type of web page where the focus is on one action such as a signup or sale of a specific product, they are often paired with search and social media advertisements. While general web pages are more about encouraging exploration and offering diverse information.

So, what makes a good landing page? Let's have a look at the top elements you need to have.

Headline

Your headline is the first thing a user is likely to read when going through your landing page. As such you need to make sure you have a compelling one. How does one craft a good headline? You are in luck, there are already some pre-established formulas that are known to work well. Have a look at the list of 5 proven conversion-boosting headline formulas:

Testimonial
Cliffhanger
Value Proposition
Listicle
How-To

The type of headline that works well for you depends on what you are trying to sell. Personal products, for example, can be more receptive to a testimonial headline. Each type of headline has its perks, try out different variations with A/B testing and optimize for conversion.

Make sure to keep your headlines short and simple, easy to comprehend and remember. If need be, businesses can also use a sub-heading to elaborate a bit more about what is being offered.

Clear-cut Visual or Video

"A picture is worth a thousand words", a video even more. The visuals are what will help grab attention and offer more context quickly. This is a major part of your landing page and has to work in sync with your heading. The heading and your primary visual need to go hand in hand to land an impactful first impression.

If you decide to use a video, make sure it's professional - it must have a good resolution & audio. If you don't have the budget to invest in a good video you might be better off with an image. You can be creative and blend with the type of heading. For example, a photo of a person benefiting from your product goes well with a testimonial heading.

Good Content

Provide rich, useful content, so long as it is relevant. Good, confident content inspires trust. Don’t bore the visitor by talking too much about yourself. Tell them what you or your product does for them. Help them picture what makes you or your product something they need to get.

Features & Benefits

Adding to good content, a features & benefits list can be quite powerful. Tell your customers the things they get and their benefits in a sentence each. This also helps direct visualization of all the problems the visitor will overcome should they buy your product or service.

Social Proof

According to a report from Nielsen, 70% of people will trust a review from someone they’ve never even met. Social proof is your best friend when it comes to building credibility. Reviews, testimonials, badges, certificates, customer images, case studies, and company logos are all quite effective tools.

To make sure your social proof is effective, you must keep in mind that all not social proof is equal. It's ideal if the social proof comes from the type of audience that you are marketing to and the source is credible.

Single Call to Action

A confused customer is less likely to take any action. If you present too many choices you might be losing quite a few sales. One of our jobs as a designer is to reduce the cognitive load. The more you "direct", the easier things are and the more likely a user will be to do it. The best bet is to use a single call to action, the one goal of your landing page. You can further optimize your CTA buttons by offering a context-based label.

You can further optimize your CTAs by optimizing your forms. Ask for the bare minimum information you need. The more fields you ask visitors to fill out in your form, the less chance you have of them completing your offer. People dread long tasks.

Page Speed

While not truly an "element", page speed is one of the most important aspects of a landing page. Nothing on the page matters if your customers leave cause your page took too long to load. We recommend utilizing static assets where possible as those generally can be easily cached and served faster. Use lazy-loading and compressed images.

Tools like PageSpeed Insights can help you get an idea of what can be changed for faster load times on your existing pages. You should aim around the 90s.

Policies

Adding links to your policies can help clear additional doubts a user might have. It also helps establish the terms between both parties.

Here are some policy pages you can link to on your landing page:

Terms & Conditions
Privacy Policy
Refund Policy
Warranty Policy
Disclosures

Conclusion

We hope the above has been insightful & will help you create landing pages that convert. If you’d like us to help you build one feel free to reach out.

The Ultimate Website Checklist for 2022

Zack Webster — Sat, 18 Dec 2021 16:17:13 +0000

The web industry is ever-changing. There’s always new stuff just around the corner. If you are getting a new website in 2022 or upgrading an existing one, this checklist will come in handy. We’ll cover some of the fundamentals yet often overlooked aspects as well as some new trends that you can use to add some personality to your website. So without further ado, let’s jump right into it.

Optimize your Logo for Web

Logos are a big part of any business. If you are getting a new one, make sure it is versatile. That is, it will work on large and small screens, over different backgrounds. Sometimes to achieve that you might want to go with different (derived) versions of the logo. If you have an existing logo, you might want to get a variation or two or if feasible get a new one.

Adopt Consistent Branding

Your website should stay and look similar throughout. If things look out of place they can bring down the outlook of something good. But it’s not just about the looks, it’s also about how it feels.
Here are a few tips to help you with branding:

Use appropriate color schemes and fonts.
Don’t use too many fonts – 2-3 is a good number.
Stay consistent with your tone.
Utilize similar images.

Use Professional & Optimized Images

Photos taken off of a phone by just anyone will be nowhere near what a professional photographer will get you. Hiring a good photographer for portraits, some on-field work depending on if it’s useful will go a long way. It’s one of the often skipped aspects that is an investment that pays back for itself quickly and then a lot more.

You can also utilize stock images depending on your use case. Another part of the puzzle is to optimize these images for the web. What does that mean? To put it simply, their size needs to be reduced to ensure fast loading.

Show Valuable Information

People go through a number of websites. The world has never been busier which means you have to deliver essential information quickly. Tell your visitors who you are, what you do, what you offer, and how they can connect. Attention span is something you have to keep in mind when thinking about your paragraphs. You definitely don’t want a block of text that takes ages to get to the next section which might be what the customer was looking for. Too much can be harmful to your sales. But so is too little information. Finding the balance & assigning priorities is a good way to proceed here.

Offer Insightful Content

Content is king. If you want your visitors to keep coming back to your website your content strategy is what helps you achieve that better. It’s also a good way to share your expertise and keep your customers with all that’s happening around your business. Think of what your audience will be excited about and curate some content around. Curate something unique, always respect copyrights. If you are having a hard time writing, you might want to hire a writer.

Responsive across Different Devices

At this point, this should be a no-brainer. But there are still so many websites out there that aren’t responsive. Mobiles phones now account for more than 50% of the traffic. Make sure your websites work just as well on phones and tablets as it does on larger desktops.

In 2022, you should be taking this a step further, think about how you can deliver a quicker experience for those on the go as one insight to keep in mind is visitors on phones spend a lot less time (per visit) on your website than on desktops.

Ensure Fast Loading Times

Earlier, we talked about optimizing images and how that is to optimize load times. Let’s talk about why your website should load fast and how it affects your business. As you might expect people don’t really like waiting. The ideal loading time would be 2-5 seconds, in fact, anything above 2 increases ‘bounce’ rates (no. of visitors that exit your website right away).

You can check your website performance via Google’s PageSpeed Insights.

Good User Experience (UX)

User experience is a highlight and a deserving one in 2022. A larger focus on it is an indicator that even small businesses now understand its importance. If you are wondering what UX is, let us simplify it for you: UX is an approach to designing by focusing on the way your website will be used instead of the way it looks. This ensures your visitors have a pleasant experience on your website and aren’t frustrated with having to click too much, close tons of popups, go through a lot of pages to get to something, etc.

Be Found

Search Engine Optimization (SEO), Social Media & advertising will all help you build more traffic. Depending on your type of business & exposure some priming might be needed in the form of advertising to get traffic to your website and get the ball rolling. Research on how people search you and things around your industry and adopt that into your content and marketing strategy. Make use of tools like Google Analytics to visualize how your visitors access and browse your website. List your website on your business cards, emails, and more.

Delightful Motion

Animations, videos, GIFs, and micro-interactions are all getting more adopted as they help make your website just that much more lively. Check out tools such as LottieFiles with tons of free-to-use animated graphics to spice up your website.

Conclusion

We are glad that in 2022, it’s not just about having a website. UX is now much more prominent as the world is going truly digital and there’s that much more thought and strategy as the industry matures further. Is your business looking for a professional website? We hope the above has been insightful. If you’d like us to help you build one feel free to reach out.

Radio Tabs Component with Alpine.js & Tailwind

Zack Webster — Mon, 05 Jul 2021 09:28:10 +0000

Introduction

Radio buttons are pretty common on the web. It's a tiny bit harder to style them and have your custom radios. But if you do, that adds to making your UI just that much more attractive.
In this article, I'll talk about how I built "radio tabs" with Alpine.js. So what are radio tabs? Consider them as radio buttons that look and feel like tabs.

Source Code & Preview

You can have a look at the source on my GitHub Repo:
https://github.com/zaxwebs/tailwind-alpine/blob/main/radio-tabs.html
To try it out live:
https://tailpine.netlify.app/radio-tabs.html

An Explanation

I recommend going through the code on the repo as you read ahead.

Design

Each radio button resides inside it's label. To hide the "radio button" I use class="hidden" and is then referenced with a for on the label that points to id on the button.
The whole group (outer div) of buttons has .inline-flex among other classes, this is to stack the radios side by side.
There's also a padding on this div except on the right. Why? The radios have a padding-right that's the same.

Functioning

The radio buttons are built off of an array using Alpine.

function radioTabs(name, radios) {
    return {
        name,
        radios,
    }
}

This is then used as x-data for the outer div.

<div x-data="radioTabs('direction', directions)">

x-for then loops over a template to generate the labels consisting of radio buttons.

<input
type="radio"
class="hidden"
:id="radio.id"
:value="radio.value"
:name="name"
x-model="selectedDirection"
/>

In case you were wondering, this is what the directions array looks like:

const directions = [ { id: "radio-tab-direction-e", value: "East", label: "East" }, { id: "radio-tab-direction-w", value: "West", label: "West" }, { id: "radio-tab-direction-n", value: "North", label: "North" }, { id: "radio-tab-direction-s", value: "South", label: "South" }, ]

And that's sort of the general idea of it.

Use Cases

I recently used this for a comparison table, you can use radio tabs for similar such instances to add to the overall appeal.
Here's how it looks:

That's it!

Thank you for taking the time to read and check out this experiment/project. There's more Alpine and Tailwind related things up on my Github repo & live on Netlify.

Thoughts on Designing

Zack Webster — Thu, 15 Apr 2021 09:19:52 +0000

Learning to design can teach you so much more about so many other subjects. You get to learn about psychology (one of my favourite subjects), organization, culture, you name it.

There's so much science to it and yet it's also so subjective. It is a never-ending quest given this nature.

It can be fun and yet frustrating because well, it's not always easy. Like with everything, you have to learn the tools of trade and tricks to bring your vision into reality. But if you keep at it, you will eventually be able to spin some tasty visual treats that you can get paid for as well (Cough.. cough... NFTs seem good).

"Practice makes perf... you better" or so people say. Perfection is an illusion when something is subjective. So go out there, create whatever. The good, the ugly... just create.

How to Google with a Shortcut

Zack Webster — Tue, 06 Apr 2021 19:24:56 +0000

Being a software developer, I have to google quite a few things. And when it comes to doing that, here's what the usual flow looks like for most of us: Ctrl + C, Ctrl + V in the address bar of your browser, and that's if you use shortcuts and a browser that lets you search via the address bar. If you don't have your browser already open then that's one more step to the task. Not to mention the switching if you are on some other application.
What if there was a way to just select a part of any text in any application and have it looked up for you in your default browser with a shortcut combo? That would save so many clicks and make searching more accessible. Apparently, such a future is not built into Windows natively. Let's hope they add it in the near future but for now, I do have something for you.

Here's what you need to do…

Download and install AutoHotKey
Clone or download my script from GitHub.
Extract google-it.ahk file from downloaded ZIP to your desktop.
Double-click on this file and you are all set! You can now press Ctrl + LWin (Left Windows Key) after selecting any text to open it in Google search.

More about the script…

Like any other AutoHotKey script, you can customize mine to your own liking: changing the shortcut keys, browser, search engine, website, etc. With a little bit of tinkering, you can set the script to run on startup.
This was a fun little experiment out of curiosity that turned out to be very productive and something I now use often. Cheers!

Toast Notifications with Alpine.js & Tailwind.css

Zack Webster — Wed, 31 Mar 2021 07:01:15 +0000

Toast notifications are notifications that silently pop up and fade away. They can be used to indicate events and their status such as if a document was saved successfully.

Recently, I implemented a basic "toaster" using Alpine.js and Tailwind.css.
You can try it out live here: Toaster Demo

Features

"Hook" to create toasts from anywhere - uses Spruce for global state access.
Auto-close after a set interval.
Close on click.
Stack toasts if more than one.
Easy to expand.

Implementation

The following code is what powers the toast system:

Spruce.store("toasts", {
    counter: 0,
    list: [],
    createToast(message, type = "info") {
        const index = this.list.length
        let totalVisible = this.list.filter((toast) => {
            return toast.visible
        }).length + 1
        this.list.push({
            id: this.counter++,
            message,
            type,
            visible: true,
        })
        setTimeout(() => {
            this.destroyToast(index)
        }, 2000 * totalVisible)
    },
    destroyToast(index) {
        this.list[index].visible = false
    },
})

Well, this and the HTML that consumes it.
You can have a look at the full source code here: GitHub Repo

What's Next?

One can add a whole ton of functionality quite easily. Here are a few examples:

Close-all button.
History
Headings and more.
Scrolling

That's all for this article. Thanks so much for reading.
I publish one article every week, if you'd like to see more of my content consider subscribing.
Have a great day.

Built a Slack clone with Tailwind & Alpine.js

Zack Webster — Mon, 15 Mar 2021 09:23:19 +0000

After the sidebar last week, I thought let's build something bigger. And so Slackish came into existence - a quick prototype build of Slack. Links to demo and source are included in this article.

Intro

So, here's a quick preview of what it looks like.

Features

Switch between conversations
Channels and direct messages
Indicate active conversation in sidebar.
Display user online status indicator on title bar & sidebar for DMs.
Auto scroll chat on new message.
Custom scroll bars similar to Slack.

Demo & Code

Take this project for a spin here: https://tailpine.netlify.app/slack/
And here's the source code: https://github.com/zaxwebs/tailwind-alpine/tree/main/slack

Develop Further

Feel free to fork and add to it.
Here's a few ideas:

Responsiveness
Dropdown for channels & DMs.

Conclusion

Tailwind and Alpine is a sweet combo to get up and running quick for setting up prototypes and more! The ecosystem is growing and there's so much more to come.

Thanks for reading.

Built a Dashboard Sidebar with Tailwind & Alpine.js

Zack Webster — Mon, 08 Mar 2021 19:45:42 +0000

I came across Alpine.js while on my journey of learning Laravel. And it has been a blessing.
In order to learn more about it, I've been building random things. This week, I tried building a dashboard sidebar. The design and functionality are inspired by that of CoreUI.

Here's how it looks like and works:

I wanted the sidebar to be open by default on Desktops. And the rest of the page accessible to the right.

When closed, I wanted the content to take over the full width of the window.

For mobile, I wanted to do the opposite. It has to be closed by default.

And when toggled open. I wanted it to be fixed. And the content outside it to be partly visible (opacity) but inaccessible. Additionally, clicking outside the sidebar should close it.

Interested in seeing this in action? You can do so here: https://tailpine.netlify.app/sidebar-2.html

And if you'd like to see how this was built you can do so here: https://github.com/zaxwebs/tailwind-alpine/blob/main/sidebar-2.html

Thanks for reading. Signing out.