Andrej Mlinarević

Zeljko Prsa

Welcome back to our "Designing Complex Interfaces" series. After covering Variables and Styles, we're now exploring Figma Components, a crucial element in creating efficient and consistent designs.

💡 Design system Workflow: Variables → Styles → Components


Understanding Figma Components

Figma Components are reusable elements that form the building blocks of your design system. They act as templates for design elements, allowing you to create a main component (often referred to as the "master") and then use instances of it throughout your design. The key advantage?

When you update the master, all instances update accordingly, ensuring consistency and saving time.


Key Aspects of Figma Components

Consistency and Efficiency:

 * Maintain design coherence across projects
 * Create once, use multiple times, saving significant time

Flexible Control:

 * Easy simultaneous updates across all instances
 * Override properties in instances while preserving core design

Improved Collaboration:

 * Team members use consistent elements, ensuring design alignment

Learning and Complexity:

 * Initial learning curve to understand best practices
 * Risk of overly complex nested components without careful management

Performance Considerations:

 * Large numbers of complex components may impact file performance


Example Application: Creating a Button Component

Let's walk through the process of creating a button component, a common and versatile element in many interfaces. Our example will use a simple button with an icon and text.

Note: This button uses Auto Layout, which we'll explore in depth in our upcoming article. For now, just know that Auto Layout helps create flexible, responsive components.

Create the master component:

 * Design a button with an icon and text. In our example, it's a blue rounded rectangle with a circular icon and "Get Component" text.
 * Select all elements of your button and click the "Create component" button in the top bar.
 * Name your component clearly, such as "Button/Primary/Default".

Define properties:

 * In the Properties panel, create properties for elements you want to be easily changeable:
 * Text: Make the button text a property.
 * Icon: Create a property for the button's icon.
 * Fill: Create a property for the button's background color.

Use your component:

 * Drag your new button component from the Assets panel onto your canvas to create instances.
 * Try changing the text, icon, or color properties in these instances. Notice how you can make these changes without affecting the master component.

Update the master:

 * Make a change to the master component, such as adjusting the corner radius or padding.
 * Observe how all instances update to reflect this change, while maintaining any custom property values you set.

Create variants (if needed):

 * With your button component selected, you could add variants for different states like "Hover" or "Disabled".
 * For each variant, adjust the appearance as needed (e.g., darker fill for "Hover", muted colors for "Disabled").

This button component example demonstrates the power of Figma components: you can maintain consistency across your interface while still allowing for necessary variations and easy updates. The use of properties allows for flexible customization of instances.


The Interplay of Components, Variables, and Styles

As we've progressed through this series, we've covered Variables, Styles, and now Components. Let's explore how components interact with variables and styles to create a robust, flexible design system.

→ Variables can be used within components to create dynamic, easily updatable designs.

→ Styles can be applied to elements within components, combining the reusability of components with the consistency of styles.


Pro Tips for Working with Components

 1. Plan your component structure: Outline your component organization before implementation.
 2. Use descriptive names: Opt for detailed names like "Button/Primary/Large" for clarity.
 3. Leverage variants: Use variants for related components with shared properties but visual or functional differences.
 4. Be selective: Not every element needs to be a component. Focus on frequently reused elements.
 5. Organize your library: Use the Assets panel to create a structured component library.
 6. Document your components: Add descriptions to help your team understand how and when to use specific components.
 7. Utilize instance swapping: This feature allows you to swap one component instance for another, facilitating quick design iterations.
 8. Regular audits: Periodically review and refine your components as your design system evolves.


To conclude Mastering Figma Components

You now have a notion on how to effectively use Figma Components in your design workflow but mastering this skill takes practice and experimentation. Figma components are a powerful tool for creating consistent, efficient, and flexible designs, especially when combined with the Variables and Styles we discussed in previous articles.

In our next article, we'll explore Auto Layout - a powerful feature for creating adaptive designs. We'll look at how Auto Layout can work in conjunction with components to create even more robust and flexible design systems.

Keep designing, innovating, and expanding your skills. We look forward to continuing this journey with you in our next installment!


Here’s what to expect in this series:

 * Variables: Learn how to use Variables to maintain consistency, ensure scalability, and keep your designs organized.
 * Styles: Combine variables into styles for easy property application to an element.
 * Components: Understand how to create reusable design elements to maintain uniformity across your project.
 * Auto Layout: Find out how to create designs that automatically adapt to different screen sizes and how to optimize space usage. Coming up!

By the end of this series, you should have practical knowledge to make your design process and your workflow work for you better.

Design

Designing Complex Interfaces: Part 3 - Using Figma Components for Consistent Design

This article is the second part of the "Designing Complex Interfaces” series, where we explore essential Figma features. The focus is on Figma Styles. Another core building block to a UI Kit or a design system.

Design system Workflow: Variables → Styles → Components →

Let’s continue with the series with the second part of the workflow: Styles.


Understanding Figma Styles

Figma Styles are predefined sets of design attributes (such as colors, text, and effects) that you can apply to elements in your design. They help maintain consistency and streamline the design process by allowing you to reuse the same styling across multiple components.

Benefits:

 * Consistency: Ensures uniformity in design elements throughout your project.
 * Efficiency: Saves time by reusing predefined styles instead of manually setting properties each time.
 * Scalability: Makes it easier to update designs globally. Changing a style updates all instances where it’s applied.
 * Organization: Keeps your design system organized by centralizing style definitions.

Drawbacks:

 * Initial Setup: Requires upfront time to define and document styles.
 * Learning Curve: May require training for team members unfamiliar with design systems.
 * Maintenance: Needs regular updates and management as your design system evolves.

Figma lets you organize your local text, color, and other styles using the "/" naming convention and folder hierarchy. This is easily done just by typing for example “Text/Large”. It makes it easy to navigate and reorganize when needed.

Styles can be grouped by type (Text,Color, Effect, Layout grid).

Local styles are styles that exist in the current file. As opposed to the styles that reside in a specific library, outside of the document.


Example Application: Creating Styles for Title and Paragraph

In this section, we'll walk you through the process of creating and applying styles for typography. Specifically, we'll focus on defining variables for text size and line height for two distinct text elements: a title and a paragraph. We’ll reuse the variables created in the first part about Figma variables.


Step1: Creating Styles for Title and Paragraph


Identify the Text Elements:

The title and the paragraph require different typographic settings.


Define Styles:

 1. Select the Text Element: Click on the text element you want to style (title or paragraph).
 2. Open the Styles Panel: In the right-hand sidebar, find the “Text” section.
 3. Create a New Style: Click the four-dot icon next to the “Text” section and select “Create Style.” (The plus button)
 4. Name the Style: Give it a meaningful name, like “Text/Large” and “Text/Base.”*
 5. Set Typography: Use the already existing variables for font size and line height.

Depending on your needs for styles in your design system you can follow the example and have a complete and easy to maintain design system.

Figma styles are key to creating consistent, efficient design systems. By adding styles to libraries, you create a central source of truth for typography, colors, and effects. This ensures updates spread automatically across all files, maintaining uniformity.

They allow you to quickly use shared elements, saving time and reducing inconsistencies.


Pro Tips for Using Figma Styles

Use a clear naming convention
Adopt a consistent naming system for your styles, e.g., 'Category/Subcategory/Variant'.

Create a style guide
Maintain a dedicated page in your Figma file that showcases all your styles for easy reference.

Utilize color styles for both fill and stroke
Apply color styles to both fills and strokes to ensure consistency across your designs.

Leverage style hierarchies
Use style hierarchies to create variations. For example, create a base text style and then variations for different sizes or weights.

Regularly audit and update styles
Periodically review your styles to ensure they're still relevant and update them as needed.

Use local styles for project-specific elements
For elements unique to a specific project, create local styles instead of adding them to your main library.

Communicate style changes
When updating styles in a team setting, communicate changes to ensure everyone is aware and can update their designs accordingly.

These tips will help you use Figma styles more effectively, leading to more consistent and efficient design workflows.

Further, integrating styles into libraries creates a powerful framework for consistent design across projects. Our future articles will cover best practices for managing Figma libraries as well. Stay tuned and thanks for reading.


Here’s what to expect in this series:

 * Variables: Learn how to use Variables to maintain consistency, ensure scalability, and keep your designs organized.
 * Styles: Combine variables into styles for easy property application to an element.
 * Components: Understand how to create reusable design elements to maintain uniformity across your project.
 * Auto Layout: Find out how to create designs that automatically adapt to different screen sizes and how to optimize space usage. Coming up!

By the end of this series, you should have practical knowledge to make your design process and your workflow work for you better.

Designing Complex Interfaces: Part 2 - Using Styles for Consistent Design

This article is the first part of the "Designing Complex Interfaces” series, where we explore essential Figma features. Our first focus is on Figma Variables. A core building block to a UI Kit or a design system.

💡 Design system Workflow: Variables → Styles → Components → Instances

Let’s start with the first part of the workflow: Variables.


Understanding Figma Variables

Variables store reusable design values like colors, typography, spacing, etc. Their primary benefit is providing a single source of truth (SSoT) that ensures consistency across your designs.

The benefits of using variables include efficiency and speed, reusability, consistency, global updates, and scalability.

There are drawbacks but they are manageable and don’t significantly detract from the overall advantages. Most potential issues can be mitigated with careful planning, proper training, and clear documentation.

Variables are easily managed in the “Variables” panel. Here, you can create, edit, organize, and apply variables to your design components.

To access the Variables panel:

 * Use the menu by going to View → Panel → Toggle Variables, or
 * Click on a the “Local Variables” section in the properties panel when the page is selected.


Example Application: Creating Variables for Title and Paragraph

In this section, we'll walk you through the process of creating and applying variables for typographic properties in Figma. Specifically, we'll focus on defining variables for text size and line height for two distinct text elements: a title and a paragraph.


Step1: Creating Variables for Title and Paragraph


Identify the Text Elements:

We have two text elements: the title and the paragraph. These require different typographic settings.


Define Variables:

We'll create two sets of variables for text size and line height: "Base" and "Large."

Before we dive into creating variables, it's important to understand the concept of design tokens. Design tokens are the basic, reusable elements such as colors, typography, spacing, and more, which define the visual properties of your design system.  In Figma, these design tokens are managed as variables.


Create Text Size Variables

Create Text Size Category:

Add a new category named "TextSize." — Categories help keep your design tokens organized.

Add Variables:
Create two variables within "TextSize":

 * Base: Set the value to 16 for the paragraph text size.
 * Large: Set the value to 24 for the title text size.


Create Line Height Variables:

Tip: If you don’t see the variables panel, make sure you don’t have any elements selected i.e. click on the Page itself until you see this in the properties panel:

Create Line Height Category:
Add a new category named "LineHeight."

Add Variables:
Create two variables within "LineHeight":

 * Base: Set the value to 24 for the paragraph line height.
 * Large: Set the value to 32 for the title line height.


Step 2: Applying the Variables

Choosing the Text Element:

 * Select the text element you want to style. In this case, we'll start with the title.

Set Title Properties:

 * With the title text element selected, apply the Large value from the "TextSize" category to set the font size to 24.
 * Apply the Large value from the "LineHeight" category to set the line height to 32.

Set Paragraph Properties:

 * Now, select the paragraph text element.
 * Apply the Base value from the "TextSize" category to set the font size to 16.
 * Apply the Base value from the "LineHeight” category to set the line height to 24.

By defining these variables, you ensure a consistent typographic structure across your design system. These variables simplify adjusting text properties across multiple elements, enhancing both workflow efficiency and overall design consistency.


Pro Tips for Using Figma Variables

Use descriptive naming conventions
Choose clear, consistent names for your variables. For example, use "TextSize/Large" instead of just "Large" to provide context.

Organize variables into categories
Group related variables into categories like "TextSize", "LineHeight", "Colors", etc. This makes them easier to find and manage.

Use local variables for project-specific elements
For properties unique to a specific project, create local variables instead of adding them to your main variable collection.

Leverage variable modes
Use Figma's variable modes to create different states or themes (e.g., light mode and dark mode) for your design system.

Connect variables to components
Apply variables to your components to ensure consistency. When you update a variable, all connected components will update automatically.

Use variables for spacing and layout
Don't limit variables to just colors and typography. Use them for spacing, border radii, and other layout properties to maintain consistency.

By following these tips, you'll be able to create a more robust and flexible design system using Figma Variables, leading to more consistent and efficient design workflows.

→ Next up — Figma Styles. What variables are made for.


Here’s what to expect in this series:

 * Variables: Learn how to use Variables to maintain consistency, ensure scalability, and keep your designs organized.
 * Styles: Combine variables into styles for easy property application to an element.
 * Components: Understand how to create reusable design elements to maintain uniformity across your project.
 * Auto Layout: Find out how to create designs that automatically adapt to different screen sizes and how to optimize space usage. Coming up!

By the end of this series, you should have practical knowledge to make your design process and your workflow work for you better.

Designing Complex Interfaces: Part 1 - Using Variables for Consistent Design

Discover what variable fonts are and how they streamline typography by housing multiple stylistic variations within a single file.

Introduction to Variable Fonts: One Font File, Infinite Possibilities

What Are Variable Fonts?

Variable fonts—or, more specifically, OpenType Font Variations—are a relatively new font format introduced in 2016 that allow one font file to contain multiple stylistic variations.

Unlike static fonts, variable fonts come in a single font file that incorporates multiple variations of a typeface. Instead of having separate files for different weights, widths, or styles, a variable font houses all these variations within one file.

This innovation transforms traditional static fonts by allowing designers to adjust weight, width, style, optical size, and more. The adjustments can be made manually or based on contextual rules, as seen in Google Fonts.


Historical Context: The Evolution of Fonts

To fully appreciate the innovation of variable fonts, you need to understand the historical development of typography. The journey from traditional typography to variable fonts is a story of technological and creative evolution.

Phototypesetting (1950s-1980s):

Transition: The mid-20th century brought phototypesetting, replacing metal type with photographic film.

This method offered more flexibility and precision, allowing for greater typographical variety and easier reproduction. Despite improvements, it still lacked the dynamic capabilities that modern designers desire.


The Digital Revolution (1980s-Present):

 * Digitization: The late 20th century saw the adoption of digital technology, leading to the creation of TrueType and OpenType formats.
 * TrueType (1980s): Developed by Apple and Microsoft, TrueType offered scalability and more precise control over how fonts were displayed on screens.
 * OpenType (1990s): Adobe and Microsoft enhanced typographic control and versatility with OpenType, which included advanced features like ligatures, alternate glyphs, and extensive character sets.

Despite tech advancements, digital fonts remained largely static.

Each variation of a typeface—such as regular, bold, and italic—needed its own distinct file, resulting in numerous font files for a complete typeface family.


The Birth of Variable Fonts (2016):

The introduction of OpenType Font Variations (variable fonts) at the ATypI conference in 2016 marked a revolutionary leap. For the first time, a single font file could encapsulate an entire typeface family's variations!

And also for he first time, Microsoft, google and Apple were together on the same stage at same time — "The font wars are over."

"ATypI was particularly proud to host the landmark Special OpenType Session, at which representatives from Adobe, Apple, Google and Microsoft announced OpenType Variations — otherwise known as variable fonts — and committed to produce and support the new fonts."

Besides this rare historical occurrence, variable fonts brought "Axes of Variation" and significant efficiency to digital typography:

Axes of Variation: Variable fonts use different axes like weight (wght), width (wdth), optical size (opsz), and slant (slnt) to allow seamless transitions between styles within the same file.

Efficiency and Flexibility: This innovation provided web designers with unparalleled flexibility and addressed performance concerns by reducing the number of required font files.

Variable fonts represent the culmination of centuries of typographic evolution. They blend the artistic heritage of traditional type with the technological flexibility demanded by modern web and graphic design.

With the historical context in mind, let's go further into the technical implications and influence of variable fonts on modern web design.


Importance in Modern Web Design

Efficiency and Performance: Variable fonts significantly reduce file sizes and loading times by consolidating multiple styles into one file. This efficiency translates to faster page loads and improved performance, which are crucial factors for user satisfaction and SEO ranking.

Design Flexibility: With variable fonts, designers can unlock a spectrum of typographic variations from a single font file. This flexibility allows for more nuanced and dynamic designs compared to traditional static fonts.


Additional Benefits of Using Variable Fonts

Enhanced Responsive Design: Greater consistency can be achieved across different devices and screen sizes with variable fonts.

Advanced Typography Control: Variable fonts offer sophisticated typographic features that static fonts cannot, such as smooth transitions between weights and widths. This capability allows for more refined designs, dynamic animations, and adaptive layouts that respond to user interactions and device capabilities.


Mitigating Potential Drawbacks

While variable fonts provide numerous benefits, they also come with certain challenges. Here’s how to mitigate these:

Larger Initial File Size:

 * Font Subsetting: By including only the specific characters and glyphs needed for your website, you can significantly reduce the file size of a variable font. Web font services like Google Fonts often offer subsetting options automatically.
 * Axis Subsetting: This technique allows you to specify and include only the ranges within the axes that are used on your site, eliminating unnecessary data.

Browser Support:
Although browser support for variable fonts is increasing, you may still need fallback fonts for some users. Regular testing across different browsers ensures a consistent experience for all users.

Implementation Complexity:
Using variable fonts may involve more complex CSS code and loads more testing. On the other hand, there are extensive guides available to help simplify the process.


Closing Thoughts

These fonts offer unmatched aesthetic flexibility and performance efficiency compared to static fonts. By using variable fonts, you can create visually stunning and high-performing websites that adapt seamlessly to various devices and screen sizes.

If you haven't already, start integrating variable fonts into your designs. By combining multiple font variations into a single file, you’ll streamline your design assets and boost your website’s speed and adaptability. As it evolves, it’s well on its way to become a standard practice — enriching the web’s typography.

Ready to take your typography to the next level? Go with the (variable) flow and watch your designs transform!


Key Resources and References

 * Google Fonts Guide to Variable Fonts: Comprehensive guide covering the basics, benefits, and implementation of variable fonts.
 * Adobe Fonts Variable Fonts: A resourceful library with tools to test and customize variable fonts.
 * Font Playground: A practical tool for exploring and experimenting with variable fonts.
 * NEXT.Js Font optimization: includes specifying a font subset, how to use multiple fonts in your NEXT.js project, local fonts integration etc.



Development

Introduction to Variable Fonts

Easily set up a local LLM for faster, private, and reliable AI—perfect for developers and designers.

How to Set Up a Local LLM with Ollama, Docker and Web UI.

I know, I know — why bother setting up your own local LLM when ChatGPT is right there? Well, maybe because it’s not nearly as complicated as you think. With a Mac or PC, it's a walk in the park. Stop putting it off.

Worried about getting stuck? I’ve got your back.

 * Detailed Documentation: I provide links to comprehensive documentation and resources that will help you understand each step and troubleshoot any potential issues.
 * Community Help: There are robust communities, forums, and GitHub repositories where you can seek help, share experiences, and learn from others who have already walked the path.
 * Troubleshooting Tips: I’ve included a section specifically for common issues and troubleshooting tips, so you’re never left wondering where things went wrong.


Ready to Get Started? Let’s Do This.

Just follow it step-by-step, and you’ll have a powerful LLM running locally in no time. It’s time to take control of your AI needs without depending on external services. Let’s dive in, and don’t forget – you can thank me later.


1. Set up Ollama

Ollama is an open-source platform for running large language models locally.

Download Ollama:
Visit ollama.ai and download the app for your operating system (macOS, Linux, Windows [preview]).

Run the Local Model:
After installation, open your terminal and run:

ollama run llama 3


This command will start the local LLM.

You can already interact with the LLM via terminal, but you want that sleek chat UI, right? On to the next step...


2. Set up Your Chat Interface via Open WebUI

Open WebUI is a web-based interface for interacting with Ollama's models.

This part requires Docker Desktop, so go ahead and install it before you continue onto the next step.

Run Open WebUI via Docker:
Open your terminal and enter:

docker run -d -p 3000:8080 --add-host=host.docker.internal:host-gateway -v open-webui:/app/backend/data --name open-webui --restart always ghcr.io/open-webui/open-webui:main 


Accessing Open WebUI:
Open your browser and go to http://localhost:3000/.

Updating WebUI:
To keep your WebUI up to date, use:

docker run --rm --volume /var/run/docker.sock:/var/run/docker.sock containrrr/watchtower --run-once open-webui


Tip: You can integrate your OpenAI API key within WebUI to use ChatGPT even when chat.openai.com is down. That's the beauty of it.


Documentation for Your Convenience

 * Ollama Docs: Ollama GitHub Repository
 * Open WebUI Docs: Open WebUI Documentation


Alternative to Open WebUI

Enchanted (Native macOS App)

 * Available via the App Store
 * Note: This alternative does not support API access to ChatGPT. I don't use it, but it is handy if you don’t want to install Docker and WebUI. You win some, you lose some.


Actual and Practical Applications and Benefits of Running Local LLMs

Running large language models (LLMs) locally offers numerous advantages, especially for designers and developers who often require swift, secure, and customizable AI solutions. Here are some key practical applications and benefits:

 * Data Privacy and Security: Ensures sensitive information remains protected.
 * Faster Response Times: Provides instant responses essential for real-time applications.
 * Reduced Dependency on External APIs: Guarantees reliability and continuous access.
 * Customization and Control: Allows for tailored solutions and system optimization.
 * Cost Efficiency: Offers long-term savings by eliminating recurring API costs.

Embracing local LLMs empowers you to build more secure, responsive, and custom AI applications, ultimately enhancing productivity and innovation in your projects.


System Requirements and Prerequisites

For Ollama:

Minimum System Requirements:

 * Operating System: macOS, Linux, or Windows (Preview)
 * Processor: A modern 64-bit CPU (Intel i5/i7/i9, AMD Ryzen, Apple M1/M2)
 * Memory: At least 8 GB of RAM (16 GB or more recommended for better performance)
 * Storage: At least 10 GB of free disk space (SSD recommended for faster performance)

Prerequisites:

 * Python: Ensure you have Python 3.6 or later installed.
 * Terminal/Command Line Interface: Basic familiarity with using the terminal or command line interface on your operating system.

For Docker and Open WebUI:

Minimum System Requirements:

 * Operating System: macOS, Linux, or Windows 10/11 with WSL 2 (Windows Subsystem for Linux) for proper Docker Desktop integration
 * Processor: A modern 64-bit CPU (Intel i5/i7/i9, AMD Ryzen, Apple M1/M2)
 * Memory: At least 8 GB of RAM (16 GB or more recommended for better performance)
 * Storage: At least 10 GB of free disk space

Prerequisites:

 * Docker Desktop:
 * Download and install Docker Desktop from Docker for your operating system.
 * Follow the installation instructions for Docker Desktop and ensure it is properly configured and running.
 * Terminal/Command Line Interface:
 * Basic familiarity with using the terminal or command line interface on your operating system.

Special Considerations for Windows Users:

 * WSL 2: Docker Desktop for Windows requires the Windows Subsystem for Linux (WSL 2). Make sure WSL 2 is enabled and properly configured.
 * Follow the instructions here to set up WSL 2: Install WSL.


Common Issues and Troubleshooting Tips

Even though setting up Ollama and Docker is straightforward, you might run into some hiccups along the way. Here are some common issues and troubleshooting tips to help you out:

1. Docker Installation and Configuration Issues

Issue: Docker Desktop doesn’t start or shows errors.

Troubleshooting Tips:

 * For Windows Users: Ensure that WSL 2 is installed and configured. Follow the official guide to set up WSL 2: Install WSL.
 * Check System Requirements: Make sure your system meets the requirements for Docker Desktop.
 * Restart Docker and Your Computer: Sometimes, a simple restart can resolve installation issues.
 * Administrative Privileges: Ensure that Docker Desktop is running with administrative privileges.

2. Docker Container Issues

Issue: Docker container for Open WebUI fails to start or crashes.

Troubleshooting Tips:

 * Check Docker Logs: View container logs for errors using:

docker logs open-webui


 * Sufficient Resources: Make sure your system has enough CPU and RAM allocated to Docker.
 * Port Conflicts: Ensure that port 3000 isn’t being used by another application. You can change the port mapping in the Docker run command if needed:

docker run -d -p 3001:8080 --add-host=host.docker.internal:host-gateway -v open-webui:/app/backend/data --name open-webui --restart always ghcr.io/open-webui/open-webui:main 


3. Ollama Installation Issues

Issue: Ollama command not found or errors during running the model.

Troubleshooting Tips:

 * Path Configuration: Ensure that Ollama is properly installed and that the installation path is included in your system’s PATH variable.
 * Verify Installation: Reinstall Ollama to make sure all components are correctly installed.
 * Check Dependencies: Make sure you have Python 3.6 or later installed, and that it’s properly configured in your system.

4. Performance Issues

Issue: Slow performance or lag when interacting with the LLM.

Troubleshooting Tips:

Allocate More Resources to Docker: Ensure Docker is allocated sufficient memory and CPU resources. Configure this in Docker Desktop settings.
Reduce Load: Close unnecessary applications to free up system resources.
Check Hardware: Ensure your computer meets the recommended hardware requirements (e.g., SSD, 16 GB RAM).

5. Network Issues

Issue: Unable to access Open WebUI via localhost.

Troubleshooting Tips:

Correct Ports: Confirm that you are using the correct port (http://localhost:3000/).

Firewall Settings: Check if your firewall settings are blocking the connection.
Restart Docker Container: Sometimes restarting the container can resolve connectivity issues. Use:

docker restart open-webui


6. Errors Related to Open WebUI

Issue: Errors or incomplete functionalities in Open WebUI.

Troubleshooting Tips:

Update Open WebUI: Make sure you’re using the latest version of Open WebUI. Update using:

docker run --rm --volume /var/run/docker.sock:/var/run/docker.sock containrrr/watchtower --run-once open-webui


Check Documentation: Refer to the official documentation for any version-specific steps or updates that need to be performed: Open WebUI Documentation.

7. General Tips

Tip: Always keep your software up to date. Regularly check for updates for both Ollama and Docker Desktop to ensure you have the latest features and bug fixes.

Pro Tip: Join community forums or GitHub issues pages for both Ollama and Open WebUI to seek help and share experiences with other users.

Follow this guide, and you’ll be well on your way to a more autonomous and efficient AI experience.

General

ChatGPT is down. Now what?

End-of-Year Roundup: The Top Five Articles from Our Blog That Captivated Readers in 2023, Featuring Expert Insights on Angular, React Native, and More...

2023 in Focus: Most Read Articles on our blog

As we close out 2023, we've invested some time digging into what really clicked with you on our blog. With a little help from Google Search Console, we've zeroed in on the top 5 articles that stood out this past year.

It's refreshing to see that in-depth, well-thought-out articles are still making a mark. Despite the fast-paced nature of online content, it's these detailed explorations of development topics that you've found most read worthy. This not only motivates us but also shapes our approach as we plan for 2024.

1. "How to Implement Intersection Observer API in Angular"

Clicks: 3.3k+
Impressions: 29k+

This one's a gem by Matej Jakšić. He took us on a deep dive into Angular’s cool tricks, making web apps faster and smoother. Observe this game-changer.

2. "React Native Video — Handling Fullscreen and Controls on Android"

Clicks: 2.7k+
Impressions: 61k+

Mateo Debeljak really hit it out of the park with this guide. He showed us how to level up our React Native skills, especially for those sweet video features on Android. Fullscreen primer.

3. "How to Set Cookies from an Embedded Iframe"

Clicks: 2.7k+
Impressions: 40k+

Sebastijan Dumančić tackled a tricky but super useful topic. He shared some clever ways to manage cookies in iframes, solving those pesky cross-domain puzzles.

4. "Multi-language Routing in React"

Clicks: 2.5k+
Impressions: 32k+

Vlatko Vlahek became our go-to guy for making React apps globally friendly. His insights on multi-language support were just what we needed for our international audience.

5. "Easier API Calls with a Wrapper Around Axios"

Clicks: 2k+
Impressions: 14k+

Dino Stančić broke down how to make dealing with APIs a breeze. His tips on using Axios wrappers were pure gold for simplifying our coding life.


Sorted by Impressions: What Caught Your Eye

Ever wonder what's catching everyone's eye? Here's the same list, but ranked by how many times they popped up:

 1. "React Native Video — Handling Fullscreen and Controls on Android" - 61k+ Impressions
 2. "How to Set Cookies from an Embedded Iframe" - 40k+ Impressions
 3. "Multi-language Routing in React" - 32k+ Impressions
 4. "How to Implement Intersection Observer API in Angular" - 29k+ Impressions
 5. "Easier API Calls with a Wrapper Around Axios" - 14k+ Impressions


Shoutout to Our Top Authors of 2023

Let's not forget the brilliant minds behind these hits. Big cheers to our top authors who made 2023 an incredible year for our blog:

 1. Matej Jakšić
 2. Mateo Debeljak
 3. Sebastijan Dumančić
 4. Vlatko Vlahek
 5. Dino Stančić

What's exciting is the promise of what lies ahead. With 2024 on the horizon, we're gearing up to bring you even more of these insightful and practical explorations into the world of web and mobile development.

Expect to see a wider array of topics, deeper insights into emerging technologies, like AI and more of the hands-on, real-world advice that you've come to rely on from our authors.

On behalf of our team, I'd like to extend a huge thank you for your continued engagement and curiosity. Your engagement is what make us want to write even more.

Here's to another year of learning, sharing, and innovating together.  Stay tuned, and as always, happy coding!

2023 in Focus: Top 5 Articles You Loved Most

Supercharge your workflow with ChatGPT+: Unlock the power of custom instructions and good prompting.

Maximize Your Company's Efficiency with ChatGPT: Insider Strategies from PROTOTYP

Maximizing Your ChatGPT+ Experience

Taking a look back at two wonderful days at TGG 2023. and looking forward to next year.

The Geek Gathering, which spanned over two days on October 5-6, 2023 was no run-of-the-mill tech conference. As per usual, it was a meeting point for the tech-curious, the daring, the builders, and the dreamers.

With an array of roundtables, masterclasses, and laid-back parties, it morphed into a playground where geeking out over the latest tech trends wasn’t accompanied by a sales pitch.

This year’s bash was touted as bigger, bolder, and geekier, marking it a red-letter event for tech aficionados far and wide. Over 400 attendees listened to 30 plus speakers doing more than 20 talks and over a half a dozen workshops.

It wasn’t just the riveting talks that made the gathering magnetic, but the easy-breezy networking, the end-of-day shindigs, and that unmistakable community vibe.

As October rolled in, we transformed Osijek's uptown into a cozy tech alcove where geekdom reigned.

One of our fellow attendees reminisced about TGG 2023, noting it was an amazing ride not just on a professional level, but a personal one too:

"The whole experience was amazing on so many levels, but one thing stood out—the organizers really put people and socializing first instead of making a show and promoting themselves. - Merlin Rebrović, Google

This was more than an event; it was where curiosity found company, and every handshake was the prelude to a fresh adventure in the sprawling world of tech.


Scaling New Heights: TGG 2023 vs TGG 2022

The story of TGG is one of growth, with each year topping the last. Compared to TGG 2022, the 2023 event saw a surge in attendees, showcasing a community growing in numbers and enthusiasm. It wasn’t just about the quantity but the quality of interactions that set TGG 2023 apart.

The masterclasses were the cherry on top, where seasoned pros unpacked tech subjects, igniting minds with fresh insights. And the buzz online mirrored the excitement on the ground.

Some of the feedback we got by people from Google, NEOS, Hrvatski Telekom and others:

“I really enjoyed it, and I hope you are also satisfied that you enabled others to have fun and learn something new.” - Merlin Rebrović, Google

“An excellent event with excellent content. I’m looking forward to next year. I’ll be back.” - Dean Mišić, NEOS

“I_t was a very relaxed conference for me as a speaker and I really enjoyed it, so see you next year!” - Vlatka Šipoš, Resonate

“Great conference, atmosphere and event in general. You are doing a great job! Geek ON!” - Ivan Hendija, IDE3

“Organization and people for 10!”_ - Boris Bajs, Hrvatski Telekom

As we gear up for TGG 2024, the momentum from TGG 2023 lays a solid foundation to up the ante even more, making TGG 2024 not just a repeat but a leap forward.


Masterclasses: A Deep Dive into Tech Enlightenment

TGG masterclasses are where curiosity finds its mentor. The 2023 lineup was a spread of experts who shared not just information, but wisdom. The City and University Library in Osijek was more than a venue; it was where ideas found a voice. Let's recap who geeked out on what:

Emanuel Miličević - UX Playbook: Setting the Foundation, Focus, and Direction:

 * Emphasized the importance of understanding a company's goals, direction, and capabilities to deliver exceptional user experiences.

Ana Mandić - Wake Up Your Learning Brain:

 * Discussed the brain's energy-conserving nature which leads to a natural resistance to learning.

Vlatka Šipoš - Exploring Powerful Research Methods for Digital Product Development:

 * Highlighted the importance of understanding customer needs through research based on live user interactions.

Dunja Vidak - The Case Study That Will Make or Break Your Leadership Skills!:

 * Provided a case study for participants to analyze in groups, aiming to foster joint decision-making and presentation skills.

Petar Belavić - Lead the Change and Change the Leader!:

 * An interactive workshop disguised as a paper presentation, featuring educational games to teach leadership, team motivation, and managing change.

These masterclasses covered a broad spectrum of topics from UX design, neuroscience in learning, customer-centric research methods, to leadership and change management, offering a rich learning experience for attendees.

The success of these masterclasses is a promise of what’s to come in TGG 2024, with even more diverse and engaging sessions. It’s a voyage of intellect, and sponsors are the wind in our sails.


Venues: More Than Just Spaces

TGG venues are where the magic happens. In 2023, venues like the City and University Library in Osijek, Cinema Urania and Caffe Bar Trica were not just spaces but experience hubs. Their layout and ambiance broke the ice, making networking feel like a friendly chat.

Looking ahead, TGG 2024 aims to find venues that amplify this camaraderie and intellectual buzz. It’s an open invite to sponsors to help craft spaces that inspire and ignite imaginations.


The Road Ahead: TGG 2024

The applause from TGG 2023 sets the beat for what’s coming in TGG 2024. It’s not just about another tech conference; it’s about creating a thriving ecosystem of learning and networking.

The plan for TGG 2024 is already bubbling with ideas to create a more engaging and inclusive event. Sponsoring isn't just about backing a tech event, but about forging a partnership in sculpting a community that’s not only intellectually robust but also warmly inviting. If the sparks of TGG 2023 ignited your interest, reaching out to be a part of TGG 2024 could fan them into a flame of engaging tech camaraderie.

TGG 2024 isn’t just a date on the tech community’s calendar; it’s a page in the narrative of tech evolution. It’s an open invite to be woven into a community’s journey, a shared learning adventure, and a legacy that’s in the making.

A heartful shoutout to all the speakers, the TGG crew, and the attendees who made TGG 2023 a chapter worth revisiting. Here’s to not just reminiscing the geeky past but to crafting a geekier future. See you all next year!

Gathered The Geeks - 2023 Edition

Kick back and dive into geekdom at The Geek Gathering 2023! As October unfolds, Osijek, Croatia turns into a relaxed tech hangout on Oct 5-6, offering a chill escape from a bustling September of conferences.

Nestled in the comfy settings of Cinema Urania, City and University Library in Osijek, American Corner, and the cozy Trica Caffe Bar, the event brings a tight-knit community vibe. The venues are just a casual stroll apart, letting you soak up Osijek's local charm without the need for wheels. Despite a bit of roadwork, the route to tech insights is clear.

Step into a conference where every path leads to fresh ideas, every corner buzzes with futuristic tech talks, and every chat could spark a lasting connection. Oh, and there's beer, beverages and delicious food, of course.


Day 0: CroAI Takes Over

CroAI extends its meetups beyond Zagreb, now touching down in Osijek. In a rapidly evolving AI-centric world, Osijek transforms into a hub of engaging dialogues on Oct 4. Dive into discussions with experts, professionals, and enthusiasts spanning various fields, exploring AI's monumental impact on modern living.

It's a confluence of minds — experts, professionals, and enthusiasts across various fields—all converging to share insights in a space brimming with informed discussions. Seize this chance to contribute to the shaping of the AI landscape. Osijek awaits!


Day 1: Kickstart at Trica Caffe Bar

As the clock strikes 15:30 on Oct 5, the heart of the gathering starts beating at Trica Caffe Bar. Registration opens the door to a realm of tech discussions starting at 17:00.

First on the agenda is an insightful dive into the startup ecosystem with "Starting-Up in Croatia — Raising Money from the US" by Vladimir Bosiljevac & Srđan Kovačević.

The narrative then shifts to fintech's bright horizon with "Aircash - A Rising Star of Fintech" by Hrvoje Ćosić, followed by a critical look at gadget sustainability in "Danas Gadget - Sutra Otpad?" by Ivan Hendija.

As night falls, the lively atmosphere shifts to Merlon Bar & Restaurant with a party starting at 21:00, creating a perfect setting for spontaneous networking and enjoyment.


Day 2: Talk, Talk, Talk

On Oct 6, explore a spectrum of tech themes across venues in Osijek from 09:00 to 18:15.

Get the whole schedule here: https://www.thegeekgathering.org/schedule



Highlights include AI, development, leadership, and product management discussions, allowing attendees to dive deep into contemporary tech narratives.


The Geeks Will See you Now

At TGG, the laid-back atmosphere is your canvas for networking. Casual meetups and discussion groups throughout the day pave the way for engaging exchanges. As talks wrap up, the parties kick off, transitioning the tech discourse into a fun, social vibe.

The casual setup breaks the ice, making it effortless to connect over shared tech interests, be it at a roundtable or on the dance floor. The proximity of venues and the communal aura foster a tight-knit tech community, turning fleeting interactions into enduring professional connections.

Join the geeks at TGG, Osijek from Oct 4-6. Dive into tech talks, meet like-minded enthusiasts, and bask in the relaxed, insightful ambiance. Your tech odyssey awaits!

Get your Geek on at TGG 2023.

Join us for a behind-the-scenes look at Digital Labin 2023. Discover workshops, expert insights, and why you should mark your calendar for next year.

Digital Labin 2023: A Tech Odyssey in Croatia's (not so) Hidden Gem

Digital Labin 2023 was more than just a conference; it was a celebration of tech and innovation set against the picturesque backdrop of Labin. This charming town on Istria's east coast was the perfect locale.

Overlooking the bustling resort of Rabac, where our team of seven stayed, Labin combines Croatian and Italian cultures seamlessly, creating a unique blend of tech and local culture.

As a bronze sponsor, we were thrilled to contribute to making this event unforgettable. Now, let’s dive into the two jam-packed days that left us buzzing with new ideas and connections.


Workshop Friday

Friday at Digital Labin 2023 was jam-packed with educational workshops that proved to be im. From mastering exploratory research methods in the "Supercharging the Discovery Phase" workshop to breaking down assumptions and avoiding echo chambers in "Validate Product Ideas," the day was a deep dive into the nuances of effective digital product development. The hands-on approach of the workshops and the calibre of the presenters made it an invaluable experience for everyone involved.


Workshop: #1 - Exploring Complex Systems Through Experimentation: Navigating the Unknown

For the very first time, the Digital Labin Conference unveiled a special track, tailored to the interests of both Project Managers (PMs) and Business Development enthusiasts. This innovative addition was met with such enthusiasm that attendees were clamoring for extra seats. While the track primarily catered to professionals in the project and product management fields, its workshops and lectures offered value to anyone with a keen interest in the tech industry.

Our Project Manager, Valentina Bermanec, participated in the workshop titled "Exploring Complex Systems Through Experimentation: Navigating the Unknown," facilitated by Josip Osrečki and Nikola Marjanović from Devōt. The workshop was not only insightful but also remarkably engaging. Participants were grouped into teams, fostering collaborative efforts to enhance systems thinking and tackle complexity head-on.

This workshop proved to be a revelation, introducing us to the Cynefin framework and its profound applications in project management. Furthermore, we delved into how Scrum can function as a valuable support tool during experimentation. Contrary to the notion that group work can be exhausting, we found ourselves enjoying the interactive games that improved our approach to challenges, whether in real-life problem-solving or project management.


Workshop: #2 - Supercharging the Discovery Phase

Our designers Bruno Predrijevac, Darko Bogović, and Ivo Anić attended an enlightening workshop called "Supercharging the Discovery Phase" led by Jure Sić and Andrija Prelec. The main goal of the workshop was to master the exploratory research methods and get a head start for your next discovery phase.

After the theoretical introduction, there was a hands-on part of the workshop where the attendees learned how to do an in-depth discovery phase with great examples and fun activities. Upon finishing working in teams for a couple of hours, everyone presented their work and engaged in a knowledge-filled Q&A session that explained the process even more.

Kudos to Jure and Andrija for an awesome workshop and insightful convos during the whole conference, even at the after-party.


Workshop: #3 - Validate product ideas by Resonate

Željko Prša and his colleague Marko Kolić had the opportunity to dive into the workshop "Validate Product Ideas," orchestrated by Elvis Mehmedović from Resonate. The workshop aimed to challenge assumptions and sidestep the echo chamber effect that often plagues digital product development.

The crux of the session was on using user testing to validate ideas. In the initial stage, they learned techniques for sourcing and recruiting interview participants. Later, they conducted in-depth interviews, ensuring their approach was data-driven and user-centered.

The hands-on element required them to craft a user interview from the ground up, a challenge they met with enthusiasm. To validate their approach, role-playing exercises were used, imparting essential tactics for gathering authentic feedback and steering conversations successfully.

Both Željko and Marko received invaluable guidance from Petra and Luka, who helped navigate them through the complexities of the process. All in all, the workshop armed them with actionable insights that they are eager to apply in upcoming projects.


Saturday: A Day of Connections and Conversations

Saturday was packed with engaging talks, networking, and cool booths. The highlight was talking to industry pros. We got practical advice from a design expert at a big agency, and it was a real eye-opener.

Another standout was a chat with an indie creative director about the future of design. We agreed on a lot and talked about their current and new and exciting projects. An experienced designer also gave us fresh perspectives in the digital world.

We also learned from a tech leader in sports analytics about how they're using AI to create quick visuals. Add in some good food and talks, and it was the perfect way to end the conference.


Until next year

Digital Labin 2023 was nothing short of a success. Not only did we meet a bunch of new faces, but we also caught up with familiar ones, making it a reunion of sorts.

The workshops and talks were both inspiring and packed with information, serving as a catalyst for new ideas and directions. With such an enriching experience under our belts, we're already looking forward to next year.

So, mark your calendars and join us for what promises to be another groundbreaking event.


Next Stop: The Geek Gathering in Osijek

If you enjoyed the vibe at Digital Labin 2023, you'll love what's coming next. Join us on October 5-6 in Osijek, Croatia, for The Geek Gathering.

A laid-back tech conference in a city that knows how to keep it chill. It's the perfect setting for those who've done the conference circuit and are looking for something a bit more relaxed, yet equally informative. See you there!

AuthorZeljko Prsa

Start a Project