Blog

My weekly thoughts


Do you ever wake up in the morning feeling tired, sluggish, and unmotivated? Have you forgotten what it's like to truly feel great and energized? Well, let me tell you, you have no idea how much better you can feel!

## Embrace a Healthy Lifestyle

When we take care of our bodies and minds, amazing things can happen. A healthy lifestyle is not just about eating right and exercising regularly; it's also about finding balance, managing stress, and nurturing our mental well-being. Prioritize self-care and make conscious choices that promote a better you.

> "Investing in yourself is the best investment you will ever make." - Anonymous

## Discover the Power of Positive Habits

Small changes in our daily routines can have a tremendous impact on our overall well-being. Start incorporating positive habits into your life, such as practicing mindfulness, setting achievable goals, and fostering meaningful relationships. Remember, it's the little things that add up to make a big difference.

## Unlock Your Full Potential

When you prioritize self-improvement, you unleash your true potential. Push past your comfort zone and explore new opportunities. Take up a hobby, pursue a passion project, or learn a new skill. Embrace personal growth and never stop striving to become the best version of yourself.

> "The only person you should try to be better than is the person you were yesterday." - Matty Mullins

So, don't settle for a mediocre existence. You deserve to live a life filled with vitality, purpose, and joy. Start today, and you'll be amazed at just how much better you can feel!

Remember, you have the power to shape your life and create a brighter future. Embrace the possibilities and embark on a journey towards a better you. The journey may not always be easy, but the rewards are truly worth it.

Do you ever wake up in the morning feeling tired, sluggish, and unmotivated

You have no idea how much better you can feel!


*Sustainable communities are essential for the well-being of both people and the planet. They are designed to minimize environmental impact, promote social equity, and enhance the overall quality of life. In creating such communities, architecture plays a crucial role.*


Architecture is not solely about creating aesthetically pleasing structures; it also has the power to shape our environment in a sustainable manner. From the design phase to construction and beyond, architects have the opportunity to incorporate sustainable principles that can significantly impact the community.


> "Good product come from good people, and all problems are solved by good design. Keep doing good design." 
> <cite>— Stephen Gardiner</cite>

Architects can employ various strategies to foster sustainability. First and foremost, they can prioritize energy efficiency by designing buildings that minimize energy consumption and incorporate renewable energy sources. This includes utilizing natural lighting, employing energy-efficient materials, and implementing efficient insulation systems.

Furthermore, sustainable architecture promotes the use of eco-friendly materials, such as recycled and locally sourced materials, which reduces the carbon footprint associated with construction. By considering the life cycle of materials and designing for disassembly, architects can enable easier recycling and reuse in the future.

## Navbar active State

```javascript
useEffect(() => {
  const activeLink = navRef.current.querySelector(".active");
  if (activeLink) {
    activeLinkRef.current = activeLink;
    setIndicatorPosition({
      left: activeLink.offsetLeft,
      width: activeLink.offsetWidth,
    });
  }
}, [mainMenu]);
```

Additionally, architects can design spaces that encourage community engagement and social interaction. By incorporating public gathering areas, green spaces, and pedestrian-friendly infrastructure, they create opportunities for residents to connect, fostering a sense of community.

In conclusion, sustainable communities are not merely a product of chance; they are a result of thoughtful and intentional architectural design. Architects have the power to shape our built environment in a way that promotes sustainability, energy efficiency, and community well-being. By embracing sustainable principles and incorporating them into their designs, architects contribute significantly to the creation of sustainable communities.

# Markdown syntax guide

## Headers

# This is a Heading h1
## This is a Heading h2 
###### This is a Heading h6

## Emphasis

*This text will be italic*  
_This will also be italic_

**This text will be bold**  
__This will also be bold__

_You **can** combine them_

## Lists

### Unordered

* Item 1
* Item 2
* Item 2a
* Item 2b

### Ordered

1. Item 1
1. Item 2
1. Item 3
  1. Item 3a
  1. Item 3b

## Images

![This is an alt text.](/images/blog/05.jpg "This is a sample image.")

## Links

You may be visiting [a Next.JS theme](https://themeforest.net/user/platol).

## Blockquotes

> Markdown is a lightweight markup language with plain-text-formatting syntax, created in 2004 by John Gruber with Aaron Swartz.

## Tables

| Left columns  | Right columns |
| ------------- | -------------:|
| left foo      | right foo     |
| left bar      | right bar     |
| left baz      | right baz     |

## Blocks of code

```javascript
let message = 'Hello world';
alert(message);
```

## Inline code

This web site is using `markedjs/marked`.


[![NextJS Font](https://img.youtube.com/vi/L8_98i_bMMA/maxresdefault.jpg)](https://www.youtube.com/watch?v=L8_98i_bMMA)

Using Fonts in Next.js (Google Fonts, Local Fonts, Tailwind CSS)

Sustainable communities are essential for the well-being of both people and the planet

The Role of a Developer in Creating Communities


Creating a user-friendly and accessible website is crucial for ensuring that visitors can easily navigate and engage with your content. By optimizing usability and accessibility, you can enhance the overall user experience and reach a wider audience. Here are some effective strategies to improve your website's usability and accessibility:

1. **Clear Navigation:** Implement a well-organized and intuitive navigation menu that helps users easily find the information they need. Use descriptive labels and hierarchical structures to guide visitors through your site.

2. **Responsive Design:** Ensure your website is mobile-friendly and responsive across various devices and screen sizes. This will enable users to access your content seamlessly, regardless of the device they're using.

3. **Readable Fonts and Contrast:** Choose legible fonts and maintain a sufficient contrast between the text and background colors. This makes the content easier to read, especially for users with visual impairments.

4. **Alternative Text (Alt Tags):** Add descriptive alt tags to all images, providing text alternatives for visually impaired users or when images cannot be loaded. Alt tags also improve search engine optimization (SEO) by making your content more accessible to search engines.

> "Accessibility is the ability to access and benefit from a system, regardless of disability or impairment." - [W3C Web Accessibility Initiative](https://www.w3.org/WAI/fundamentals/accessibility-intro/)

5. **Captioned Media:** Include captions or transcripts for videos and audio content to ensure that users with hearing impairments can comprehend the information being conveyed.

6. **Consistent Layout and Design:** Maintain a consistent design across your website, including headers, footers, and navigation elements. Consistency helps users navigate and understand your site's structure more easily.

7. **Forms and Interactive Elements:** Design forms and interactive elements with clear instructions and error messages. Ensure they are keyboard accessible, allowing users to navigate without relying solely on a mouse.

By implementing these strategies, you can significantly improve the usability and accessibility of your website, making it more inclusive and user-friendly. Remember, an accessible website benefits all users, regardless of their abilities, and contributes to a positive online experience for everyone.

Creating a user-friendly and accessible website is crucial for ensuring that visitors can easily navigate and engage with your content

Ways to improve usability and accessibility

Full-Stack Developer specialized in Shopify development.
<br>
Years of experience working with Shopify merchants like you.


As Featured By

In this phase we will define how your organization wishes to be perceived by consumers. What do you want people to think about your product or service?


Strategy

Based on the research, strategic designs solutions will be explored. Multiple route will be presented and the selected will be further developed.


Execution

This is the phase were the launch communication plan will be developed. The key messages will be defined and tailored to the audience of the brand intact.


Launch

The approach

Process Delivers Value

Recent Works


## Overview
To emphasize the Black Friday sale, we created an alternative homepage banner designed to immediately capture the visitor's attention. The copy is minimal, focusing on the key selling point, the discount, and the limited timeframe for placing orders.

![Southpole 04.](/images/project/bfcm-hero_desk-after.png)

<hr>

## Before & After
### Desktop 🖥️
<div class="image columns-1 sm:columns-2 gap-8">

![Southpole 05.](/images/project/bfcm-hero_desk-before.png)
![Southpole 03.](/images/project/bfcm-hero_desk-after.png)
</div>

### Mobile 📱
<div class="image columns-1 sm:columns-2 gap-8">

![Southpole 05.](/images/project/bfcm-hero_mob-before.png)
![Southpole 03.](/images/project/bfcm-hero_mob-after.png)
</div>

Services

Black Friday homepage banner


## Challenge

This store provides quantity discounts to motivate purchasing multiple pairs of socks, but this information isn’t displayed on the product page, potentially leaving many customers unaware.

For those who know about the discounts, taking advantage of them isn’t intuitive. As the product page is lacking a quantity selector, customers must repeatedly go through the add-to-cart process.

<div class="image gap-8">

![Southpole 05.](/images/project/bulk-discount-bundle_desk-before.png)
</div>

## Solution

There are now four buttons, each for a different bundle. Each button informs the user about the original price, and the discounted bundle price. Also, the best-seller bundle is highlighted with a "BEST DEAL" badge.

Based on the selected quantity, the same number of variant selectors will appear. In each selector, you can choose a product variant and it's quantity.

In the example below, the 3 pairs bundle is selected. 1 yellow sock and 2 neon pink socks.
Once the user clicks the “Add to Basket” button, those variants will be added to the cart at once.

</div>

<div class="image gap-8">

![Southpole 03.](/images/project/bulk-discount-bundle_desk-after.png)
</div>

<hr>

## Before & After
### Desktop 🖥️
<div class="image gap-8">

![Southpole 05.](/images/project/bulk-discount-bundle_desk-before.png)
</div>

<div class="image gap-8">

![Southpole 03.](/images/project/bulk-discount-bundle_desk-after.png)
</div>

### Mobile 📱
<div class="image columns-1 sm:columns-2 gap-8">

![Southpole 02.](/images/project/bulk-discount-bundle_mob-before.png)
![Southpole 04.](/images/project/bulk-discount-bundle_mob-after.png)
</div>

Bulk discount bundle


## Overview
The initial collection page is a basic product grid listing the products with a minimum price caption.

<div class="image gap-8">

![Southpole 05.](/images/project/collections-add-to-cart_desk-before.png)
</div>

<hr>
Now, customers can add products directly from the collection page, making the shopping experience faster and more convenient, potentially increasing add-to-cart activity.

The elements feature key information for each product helping customers make informed decisions without opening the product pages. This includes the product rating, category and effect badges, as well as savings displayed in both percentage and per gram, highlighting the saving of purchasing larger amounts.

The product's total price updates when a different variant/amount is selected.

<div class="image gap-8">

![Southpole 05.](/images/project/collections-add-to-cart_desk-after.png)
</div>

<hr>

## Before & After
### Desktop 🖥️
<div class="image gap-8">

![Southpole 05.](/images/project/collections-add-to-cart_desk-before.png)
</div>

<div class="image gap-8">

![Southpole 03.](/images/project/collections-add-to-cart_desk-after.png)
</div>

### Mobile 📱
<div class="image columns-1 sm:columns-2 gap-8">

![Southpole 02.](/images/project/collections-add-to-cart_mob-before.png)
![Southpole 04.](/images/project/collections-add-to-cart_mob-after.png)
</div>

Collections add-to-cart


## Overview
Giving users the ability to search & immediately see the bestsellers matching their search term.

Displayed are their price, rating, and the bestseller is highlighted by showing it's featured image. Clicking on a search result will open the corresponding product page.

<div class="image gap-8">

![Southpole 05.](/images/project/predictive-search-bar_desk-after.png)
</div>

<hr>

## Before & After
### Desktop 🖥️
<div class="image gap-8">

![Southpole 05.](/images/project/predictive-search-bar_desk-before.png)
</div>

<div class="image gap-8">

![Southpole 03.](/images/project/predictive-search-bar_desk-after.png)
</div>

### Mobile 📱
Mobile users can now search for products immediately without opening a separate menu.
<div class="image columns-1 sm:columns-2 gap-8">

![Southpole 02.](/images/project/predictive-search-bar_mob-before.png)
![Southpole 04.](/images/project/predictive-search-bar_mob-after.png)
</div>

Predictive search bar


## Challenge

This store’s product must be customized for each car model to fit, making it essential for the merchant to collect the correct model on purchase.

Previously, getting the model was handled through a simple text field where the customer types in their model manually.

With this approach customers can input incorrect or incomplete information, preventing the merchant from knowing the customer's car model, and fulfilling the order.

<div class="image gap-8">

![Southpole 05.](/images/project/car-model-selector_desk-before.png)
</div>

## Solution

To guarantee customers send the correct car model, the text field is replaced by dropdowns that only give real car options to pick from.

After purchasing the product, the selected car model is then displayed for each order inside the Shopify Admin.

The car model data gets fetched from <a href="https://carapi.app/" target="_blank" rel="noreferrer noopener">CarAPI</a>.

Like most API's, <a href="https://carapi.app/" target="_blank" rel="noreferrer noopener">CarAPI</a> forbids other websites to fetch data through their front-end (For developers - trying it will cause a CORS error). Usually, this data would be requested from your site's back-end.

Unfortunately, Shopify doesn't allow adding backend code into a store (unless you setup & host a custom Shopify application, which probably is overkill just for data fetching).

To navigate around this issue, we're taking advantage of <a href="https://www.cloudflare.com" target="_blank" rel="noreferrer noopener">Cloudflare's</a> Workers feature to act as a light-weight backend.

Our <a href="https://www.cloudflare.com" target="_blank" rel="noreferrer noopener">Cloudflare</a> Worker is able to fetch data from <a href="https://carapi.app/" target="_blank" rel="noreferrer noopener">CarAPI</a>, and because we're able to set up our <a href="https://www.cloudflare.com" target="_blank" rel="noreferrer noopener">Cloudflare</a> Worker to accept requests from our store's front-end (without triggering a CORS error), we can request the <a href="https://carapi.app/" target="_blank" rel="noreferrer noopener">CarAPI</a> data for our store through our Worker.

This approach offers additional benefits. Our <a href="https://carapi.app/" target="_blank" rel="noreferrer noopener">CarAPI</a> credentials are not being leaked on the front-end & the fetched data can be cached. Like so, data only get's fetched once in a while for a potential refresh, instead of needing to fetch data for every single visitor. This makes model options show up almost instantly & a smaller <a href="https://carapi.app/" target="_blank" rel="noreferrer noopener">CarAPI</a> plan is needed, as we may not reach the request limit of a smaller plan.

<div class="image gap-8">

![Southpole 03.](/images/project/car-model-selector_desk-after.png)
</div>

<hr>

## Before & After
### Desktop 🖥️
<div class="image columns-1 sm:columns-2 gap-8">

![Southpole 05.](/images/project/car-model-selector_desk-before.png)
![Southpole 03.](/images/project/car-model-selector_desk-after.png)
</div>

### Mobile 📱
<div class="image columns-1 sm:columns-2 gap-8">

![Southpole 05.](/images/project/car-model-selector_mob-before.png)
![Southpole 03.](/images/project/car-model-selector_mob-after.png)
</div>


Till Taeubrich

Recent Works

Black Friday homepage banner

Bulk discount bundle

Collections add-to-cart

Predictive search bar

Car model selector