us

M-trust Co.,Ltd. Corporate

By www.designsnips.com
Published On :: Sun, 11 Oct 2020 00:00:00 +0000

M-trust Co.,Ltd. is a company with high-skilled professionals who solve social issues from the real estate business.


Full Article

us

Nahel Moussi – Portfolio

By www.designsnips.com
Published On :: Mon, 12 Oct 2020 00:00:00 +0000

Nahel Moussi is a Freelance Product Designer. Discover her work and get in touch if you want to collab.


Full Article

us

How we use DDEV, Vite and Tailwind with Craft CMS

By www.viget.com
Published On :: Wed, 10 Jul 2024 11:00:00 -0400

In 2022 we changed our dev tooling for new Craft CMS projects. Goodbye complex esoteric Webpack configuration, hello Vite. Goodbye complex esoteric Docker Compose configuration, hello DDEV. This small change in tooling has completely transformed our development experience. We start work faster and avoid wasting billable time debugging Webpack and Docker.

From Webpack to Vite #

Webpack has been the defacto way of bundling JavaScript and front end assets. It’s a powerful tool… but with that great power comes great responsibility complexity.

Vite bills itself as the “next generation” of frontend tooling. Vite is much faster at bundling. But more importantly… its default configurations work great for most website projects.

Before (Webpack) #

Well over 300 lines of configuration spanning three files. Good luck making changes!

After (Vite) #

A crisp 30 - 50 lines of code. Want to switch to TypeScript? Need to drop in a popular front-end framework? Easy! All it takes is adding a plugin and 2-3 lines of config.

Deleting old code has never felt this good!

From Docker to DDEV #

Docker is another development staple. It isolates server infrastructure into virtual “containers.” This helps avoid issues that arise from each developer having a slightly different setup. However, Docker can have a learning curve. Config changes, PHP upgrades and unexpected issues often eat up precious project time.

Enter DDEV! DDEV describes itself as “Container superpowers with zero required Docker skills: environments in minutes, multiple concurrent projects, and less time to deployment.” We’ve found that statement to be 100% true.

Before (Docker) #

Every Craft project has a different Docker config. Bugs and upgrades required deep Docker experience. Last (but not least), it was difficult to run several projects at one time (ports often conflict).

After (DDEV) #

Performance is consistently better than our hand-rolled setup thanks to Mutagen and faster DB import/exports. Simultaneous projects run out of the box. DDEV provides (and maintains) a growing list of helpful shortcuts and DX features.

Getting started #

Ready to make the switch? Here’s how to set up DDEV, Vite and Tailwind on your own Craft project.

Show me the config files already! #

If you would rather see full config files instead of following step by step, check out our Craft Site Starter on GitHub.

DDEV #

Let’s set up a fresh DDEV project and start customizing.

  1. Make sure you have DDEV installed on your computer.
  2. If you’re a PHPStorm user, install the exceedingly helpful DDEV plugin. VS Code users have a similar plugin too!
  3. Follow Craft’s guide for creating a new project (they love DDEV too).

Now you have a fresh .ddev/config.yaml just waiting to be customized.

Node Version #

Open your DDEV config and make sure your Node JS version matches Vite’s recommendations.

nodejs_version: '20' # Vite 5 expects Node 18+

Ports for Vite’s dev server #

Next, expose ports that Vite’s dev server uses will use to serve assets.

web_extra_exposed_ports:
  - name: vite
    container_port: 3000
    http_port: 3000
    https_port: 3001

Routing ports can sometimes be confusing. This diagram might help!

  • Vite’s dev server runs inside of DDEV’s web container (a Docker container).
  • Until we expose these extra ports, any custom port within DDEV is unavailable to your host machine (your computer).
  • When it’s time to configure Vite, we’ll use port 3000
  • HTTP and HTTPS traffic must use separate ports.
  • We use port 3000 for http traffic and 3001 for https

Run Vite automatically #

Usually, you’ll want Vite to watch and build files automatically after you start a DDEV project. Using web_extra_daemons adds a separate background process (daemon) for Vite.

web_extra_daemons:
  # Run Vite in a separate process
  - name: 'vite'
    command: 'npm install && npm run dev'
    directory: /var/www/html

Use hooks to improve DX #

DDEV’s powerful hooks system can run tasks before or after various DDEV commands. These post-start tasks keep dependencies and schemas up to date every time you start DDEV.

hooks:
  post-start:
    - composer: install # Keeps installed packages up to date
    - exec: ./craft up # Apply migrations & project config changes

Time for Vite #

Vite is a Node app that’s installed with NPM. Your project will need a package.json. If you don’t have one set up yet, follow NPMs initialization script.

ddev npm init

# Don't forget to ignore node_modules!
echo node_modules >> .gitignore

????Why ddev at the start of the command? This let’s us run NPM from within DDEV’s Docker containers. This means you’ll always be using the Node version configured for this project. DDEV has a bunch of shortcuts and aliases for running CLI commands (such as npm, yarn, craft and composer).

Make sure your NPM package is configured for ES Modules #

Our various config files will be using ES Module syntax for imports and exports.

ddev npm pkg set type=module

Install Vite! #

ddev npm install --save-dev vite

Add convenience scripts to package.json #

"scripts": {
  "dev": "vite",
  "build": "vite build"
}

npm run dev runs Vite in dev mode. It watches and builds your files every save. Files are served through Vite’s dev server.

npm run build bundles your JavaScript, CSS and static images for production. Your deploy process will usually call this script.

Configure vite.config.js #

Running Vite for a server rendered CMS requires some extra configuration. These options put production files in the right spot and keeps Vite’s dev server running on a specific port.

import { defineConfig, loadEnv } from 'vite'

// Match ports in .ddev/config.yaml and config/vite.php
const HTTP_PORT = 3000
const HTTPS_PORT = 3001

export default defineConfig(({ command, mode }) => {
  const env = loadEnv(mode, process.cwd(), '')

  return {
    // In dev mode, we serve assets at the root of https://my.ddev.site:3000
    // In production, files live in the /dist directory
    base: command === 'serve' ? '' : '/dist/',
    build: {
      manifest: true,
      // Where your production files end up
      outDir: './web/dist/',
      rollupOptions: {
        input: {
          // The entry point for Vite, we'll create this file soon
          app: 'src/js/app.js',
        },
      },
    },
    server: {
	    // Special address that respond to all network requests
      host: '0.0.0.0',
	    // Use a strict port because we have to hard code this in vite.php
      strictPort: true,
      // This is the port running "inside" the Web container
      // It's the same as continer_port in .ddev/config.yaml
      port: HTTP_PORT,
      // Setting a specific origin ensures that your fonts & images load
      // correctly. Assumes you're accessing the front-end over https
      origin: env.PRIMARY_SITE_URL + ':' + HTTPS_PORT,
    },
  }
})

Add JavaScript and CSS files (Entrypoint) #

Vite needs an entry point to determine what JavaScript, CSS and Front End assets it needs to compile. Remember src/js/app.js that we defined in vite.config.js? Let's make that file now.

/* Make a file in src/js/app.js */

import '../css/app.css'

console.log('Hello Craft CMS')

We’ll also add our CSS as an import in app.js . In plain-old-JavaScript you can’t import CSS files. However, Vite uses this to figure out CSS dependencies for the project.

Once Vite builds everything for production, you end up with a separate CSS file. The Craft Vite plugin includes this automatically with along your JavaScript bundle.

/* Make a file in src/css/app.css */

body {
	background-color: peachpuff;
}

Install the Vite Craft Plugin #

ddev composer require nystudio107/craft-vite
ddev craft plugin/install vite

Vite assets have different URLs in dev mode vs. production. In dev mode, assets are served from Vite’s dev server. It uses the ports that we defined in our DDEV & Vite configs.

When Vite builds for production, filenames are hashed (app.js becomes app-BZi_KJSq.js). These hashes change when the contents of the file changes. Browser can cache these files indefinitely. When an asset changes, a whole new file is served.

To help find these hashed filenames, Vite creates a manifest.json file. The manifest associates the name of your asset src/js/app.js to the hashed file that ends up on your server web/dist/assets/app-BZi_KJSq.js

The Craft Vite Plugin by NYStudio107 takes care of all this routing for you.

{
  "src/js/app.js": {
    "file": "assets/app-BZi_KJSq.js",
    "name": "app",
    "src": "src/js/app.js",
    "isEntry": true,
    "css": ["assets/app-BXePGY5I.css"]
  }
}

Configure the Vite Craft Plugin #

Make a new plugin config file in config/vite.php

<?php

use crafthelpersApp;

// Use the current host for dev server requests. Otherwise fall back to the primary site.
$host = Craft::$app->getRequest()->getIsConsoleRequest()
    ? App::env('PRIMARY_SITE_URL')
    : Craft::$app->getRequest()->getHostInfo();

return [
    'devServerPublic' => "$host:3001", // Matches https_port in .ddev/config.yaml
    'serverPublic' => '/dist/',
    'useDevServer' => App::env('CRAFT_ENVIRONMENT') === 'dev',
    'manifestPath' => '@webroot/dist/.vite/manifest.json',
    // Optional if using React or Preact
    // 'includeReactRefreshShim' => true,
];

Include your Vite bundles in Twig #

The script and asset functions includes the appropriate files depending on in if you’re in dev mode or production. Clear out your templates/index.twig file and add the following snippet to your <head> tag.

{# Load our main CSS file in dev mode to avoid FOUC #}
{% if craft.vite.devServerRunning() %}
    <link rel="stylesheet" href="{{ craft.vite.asset("src/css/app.css") }}">
{% endif %}

{{ craft.vite.script('src/js/app.js', false) }}

Whew! ???? We’re at a point now where we can test our integration. Run ddev restart and then ddev launch . You should see “Hello Craft CMS” in your browser console.

Setup Tailwind #

Now that Vite is processing src/css/app.css, it’s time to install Tailwind and really get cooking.

These steps are based on Tailwind’s official installation guide. But make sure to run all commands from within DDEV.

Install packages #

ddev npm install -D tailwindcss postcss cssnano autoprefixer
# No DDEV shortcut for npx :(
ddev exec npx tailwindcss init -p

Configure template paths in tailwind.config.js #

/** @type {import('tailwindcss').Config} */
export default {
	// Watch Twig templates and any JS or JSX that might use Tailwind classes.
  content: ['./templates/**/*.twig', './src/**/*.{js,jsx,ts,tsx,svg}'],
  theme: {
    extend: {},
  },
  plugins: [],
}

Configure postcss.config.js for production #

export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
    ...(process.env.NODE_ENV === 'production' ? { cssnano: {} } : {})
  }
}

Add Tailwind directives to src/css/app.css #

@tailwind base;
@tailwind components;
@tailwind utilities;

You’ll most likely need to run ddev restart again to get Vite to recognize your new Tailwind config.

❓ Do i need to set up live reload of Twig? Turns out it’s already done for you! Styling a Tailwind project means editing Twig files to change styles. It’s super handy to reload your browser every time you save. Normally you’d reach for vite-plugin-restart to get this functionality. However, Tailwind’s JIT mode automatically notifies Vite when CSS has compiled and the page should reload.

That's a wrap! #

That’s all it takes to configure a minimal DDEV and Vite project! We’ve found that both of these tools are easy to extend as a project get more complo'ex. Adding things like Redis or React are just a plugin install and a few lines of config away.

???? If you'd like to see this setup (and more) in a real-world Craft CMS project, check out our Craft Site Starter on GitHub.

Go forth and Vite + DDEV to your heart’s desire.


Full Article

us

What is a Headless CMS and When Should I Use One?

By www.viget.com
Published On :: Wed, 17 Jul 2024 10:00:00 -0400

When starting a new project, decision makers are faced with the dilemma of choosing a content management system (CMS). Sometimes, it’s not that simple and they must choose whether to go with a traditional CMS or a headless CMS. Both offer unique benefits and cater to different needs, making it crucial to understand when each makes sense for your project. Let’s take a look at some considerations that can help you make the right decision.

What is a Traditional CMS?

Traditional CMS’s – like Craft CMS, WordPress, and Drupal – offer a pre-packaged solution for content creation, management, and delivery. They include powerful interfaces with content editing capabilities and templating out of the box, enabling you to create sites with ease. A traditional CMS can be monolithic because the back-end and front-end are tightly coupled. Using a traditional CMS typically means you are using all of the tools included to achieve your goal.

What is a Headless CMS?

A Headless CMS is like a Traditional CMS in that it includes content creation and management tools. But it differs in the fact that the back-end content management system is decoupled from the front-end (presentation layer), allowing developers to use any technology stack they prefer for building the front-end of the site. The back-end acts as an API with its only purpose being to serve content from the database. There are CMS options like Contentful, Payload, and Strapi that are built to be headless. Popular traditional CMS’s like Craft CMS and WordPress also offer headless variants.

The Restaurant Analogy

Let’s simplify things a bit more and look at the decision using an analogy; a restaurant.

Traditional Restaurant (Traditional CMS)

Imagine a restaurant where the kitchen and dining room are connected. The chefs cook the food, and the waitstaff serve it directly to the customers in the same building. This setup means that everything is closely integrated, and the kitchen (back-end) is tightly coupled to the dining experience (front-end). Picture a scenario where the restaurant decides to change from table service to buffet style. The food now needs to be prepared in advance and delivered to the front of house in a different way, potentially even requiring new equipment. The restaurant needs to be reconfigured to not only accommodate the buffet but also to interface with the kitchen differently. Because the restaurant and kitchen are coupled, both sides would require work in order to accommodate a shift in strategy. 

Ghost Kitchen (Headless CMS)

Now, think of a ghost (or cloud) kitchen where food is prepared centrally but can be delivered to various locations or dining experiences. The kitchen (back-end) focuses solely on cooking (content creation and management) and doesn't worry about where the food is served. Instead, the meals (content) can be delivered to different endpoints like food trucks, home deliveries, or partner restaurants (or in our case websites, mobile apps, etc.). This separation allows more flexibility in how and where the content is delivered without changing the core cooking process. If a new experience requires new equipment or processes, the kitchen can be expanded without affecting the front-end experience.

When to Use a Headless CMS

Omni-Channel Content Delivery 

If you consistently need to deliver content across multiple platforms (websites, mobile apps, IoT devices), a headless CMS is ideal because it can serve the same content through APIs to any front-end. The front-end can be swapped out without any need for development to the back-end.

Scalability and Flexibility

If you want the ability to keep your content management system up-to-date independently of the presentation layer, a headless CMS can allow for more agile and scalable development. This could be especially useful if you anticipate needing to redesign or update parts of the front-end frequently without affecting the back-end content.

Front-end Framework Preferences

Maybe your team has developers who are very proficient in a particular JavaScript framework, like Next.js, SvelteKit, or Astro. The time needed to learn a new templating language could push you past your deadline. Maybe you have some cool interactive interface in mind? A headless CMS can provide the raw content for your developers to build highly custom, tailor-made front-ends in whatever language or framework they please.

Security

Going headless can offer security advantages due to its decoupled nature. By communicating via API to the front-end, data access can be controlled more granularly. Because the back-end is only responsible for content management and delivery, fewer plugins are typically used which means a smaller chance of vulnerabilities due to third-party software.

Hosting & Infrastructure

A cloud-based headless CMS offers additional advantages over a self-hosted headless CMS. It can simplify maintenance and operating costs since the cloud provider is responsible for updates and security of the platform. Cloud-based solutions like Strapi Cloud often come with integrated security features, automatic backups, and disaster recovery options.

Which will you choose?

While the flexibility and security a headless CMS offers may be great benefits, it may not be necessary for every project and could even introduce complexity. It’s important to consider the long-term purpose of the project and who will be responsible for maintaining it as well as authoring content. If your primary focus is on managing and delivering content in a structured manner with rapid development, a traditional CMS can be an excellent choice. But if you feel any of the examples I’ve laid out above align with your project’s requirements then a headless CMS may be right for you! 

Whatever route you take, remember that both Craft CMS and WordPress can be used in traditional or headless applications and are a fine choice either way! Now you know the differences between a traditional and headless CMS, and an informed decision can be made. If you have more questions or a project you think could benefit from a traditional or headless CMS, we’d love to help!


Full Article

us

Use Behavioral Analytics Data to Make Your Site More Effective

By www.viget.com
Published On :: Tue, 10 Sep 2024 10:00:00 -0400

Behavioral analytics are a great way to get a sense of what users are or are not doing on your website or app. While behavioral analytics may not provide insights into why users are behaving a certain way, this method does provide a quick and cost-effective way to see what your users are currently doing at scale. Knowing how your users are engaging with your website or product can help you make informed decisions that have a positive impact on engagement and conversions.

Here at Viget, we use behavioral analytics data for a number of use cases:

  1. Our client has a specific question about a certain aspect of their website or app (e.g., a specific user flow or content type) and wants to learn more about how and when users are engaging. 
  2. We are redesigning a client’s website and want to get a sense of where the current experience is excelling or falling short.
  3. We are conducting an annual analysis to help clients keep an eye on potential areas of growth or stagnation. 
  4. We are reviewing behavioral changes on a site or app after launching a new experience or feature to assess performance.

But what kind of insights can you expect to find from behavioral analytics data? 

It ultimately depends on the website or app, the users, and the kinds of questions you are asking, but let’s go through a few different examples of what kind of information you can gain from behavioral analytics tools.

Who is using your website or product?

Understanding who is using your website can provide helpful context on your user base and potentially unlock growth with new user groups you may have been unaware of. To investigate this, we may look at geographic location, language, device type, and any other demographic information that may be available. Sometimes this kind of data provides what I like to call descriptive information—information that often doesn’t feel immediately actionable but can become more useful relative to other data points. This could come from comparing your data to last year, to industry standards, to other content on the website, or it might come from comparing it to an assumption that an individual or organization holds. 

Here are some examples of findings that shed light on who was using the website or product:

✦32% of sessions were from users outside the United States. 
  Through a previously conducted survey, we were aware that some users were looking for content that was not specific to the United States. This metric helped us better gauge the size of that need.
✦97% of Canadian sessions interacted with the website in English, with only 3% of Canadian sessions using French.
  We were unsure to what degree French content needed to be prioritized and this metric helped provide a sense of scale.
✦15% of searches were conducted on a mobile device. 
  Although 15% may seem low, this metric was actually higher than expected because there were known issues with the mobile search experience. This demonstrated that even though the mobile experience was harder to use than the desktop version, users were still inclined to use it, further illustrating the importance of improving the mobile experience. 

How do users get to your website or product?

Knowing how users navigate to your website or product can highlight what traffic sources are particularly effective in driving conversions, but it can also help to provide important context on user expectations or goals. To understand this, we look at both the source/medium that brought them to the website as well as the first page they viewed. 

For example, users might:

  • Come from google and land on a blog article
  • Go directly to your home page
  • Come from an email referral to a donation page 
  • Learn about you from ChatGPT and land on your About page

From there, we might look at engagement rate, conversion rates, or other metrics to get a sense of what these users are doing and whether anything stands out as particularly effective or ineffective. 

Here are some examples of acquisition insights that informed our understanding and approach:

✦Only 10% of sessions started on the home page, with most users starting much deeper in the site on content-specific pages.
  Because only a small portion of users entered on the homepage, we could not solely rely on homepage messaging to orient users to the site. This highlighted the importance of providing sufficient context on any page of the site to ensure that users navigate to their desired content, regardless of what page they land on.
✦Although the paid ads were effective in driving users to the website, those sessions had abnormally high bounce rates, with one traffic source having a 95% bounce rate. 
  This indicated a potential mismatch between what users expected based on the ad, and what was actually on the page.
✦Organic search brought in a large amount of new traffic to their site through the blog pages and while users engaged with the blog content, they were not engaging with the CTAs. 
  Because these new users were potentially learning about this organization for the first time, the donation CTAs were likely not the best fit, and we recommended shifting the CTAs on those pages to focus more on learning about the organization.

What content or features do users engage with?

Here is where we start to get to the meat of what your users are actually doing on your website or product. Knowing what users are doing and what they’re not using can help to establish priorities and inform decisions. You might be surprised to learn that users are actually engaging with specific features or content quite a bit, but others are barely used. If the content or feature is surprisingly popular, then we likely don’t want to outright remove it and may instead consider iterating or leveraging that offering more. If users aren’t engaging with content or a feature, it may be worth considering the effort to maintain and iterate on that offering. 

Here are some examples of engagement insights that helped us identify opportunities related to content or features:

✦Less than 1% of users were engaging with a particular feature. 
  These same users were showing high engagement with other features though, indicating that users either didn’t know this feature existed, knew the feature existed but didn’t understand the value add, or the feature was simply not something they needed.
✦For a highly engaged audience, there wasn’t a standout page that most users visited. These users viewed a variety of pages across multiple sessions, typically viewing highly specific content pages. 
  This indicated that instead of relying on a single page to drive conversions, getting users to the specific details they needed was likely a better approach in getting users to try the product.
✦Nearly 84K sessions engaged with a particular content type. 
  While this was lower than other content types, it was much higher than expected. It was largely organic traffic and the sessions were highly engaged. We recommended doing some additional research to better understand the potential opportunities with that type of content.

What is the user journey or path?

Another major area of investigation is the sequence of steps users take when viewing content or completing certain actions. This could be perusing content on the website, going through a signup funnel, or checking out to make a purchase. 

This helps us identify:

  • the actual paths that lead to conversions (which is not always the path we assume it is) 
  • areas where users drop off at key points in the funnel
  • moments where users have to “turn around” in the journey, because the path laid before them doesn’t align with their needs 

This information can help you build towards a frictionless experience that encourages users to sign up, complete a purchase, or find the resources they need.

Here are some examples of user journey insights that helped us understand where there were existing points of friction for users:

✦While the CTA to demo the product appealed to users and they were quick to engage with it, it often resulted in users backtracking to the previous page. 
  We hypothesized that users were eager to get to the demo, but were moving too quickly and missed important context, resulting in them having to go back to a previous page. We were able to confirm this with user testing and recommended transitioning some of that context to the CTA page.

What “turning around” in the user journey can look like:

✦A select few products had abnormally high drop off rates, but at different stages depending on the product. 
  For one product, there was an abnormally high cart-abandonment rate, and for another product, there was an abnormally low add-to-cart rate. Based on these findings we recommended looking further into what is impacting a user’s purchasing decisions.

What dropoff can look like at different stages:

The Ecosystem at Large

Some clients have a larger ecosystem of products or services, and it’s important to look at how users engage with and navigate across the ecosystem. This might include subdomains for a shop, a marketing site versus the product site, help documentation, etc. By looking at the larger ecosystem we can reveal important connections that are missing or connections that could be strengthened.

Here are some examples of insights that demonstrated a need for changes in those ecosystem connections:

✦For sessions where a user was looking for a particular kind of resource, 95% of the searches were done exclusively in a single subdomain or microsite.
  Through user interviews we were able to confirm that this siloed experience was intentional for experienced users but unintentional for less-experienced users, who were largely unaware of the other parts of the ecosystem that were available. We recommended making changes to improve discoverability of those other areas.
✦For sessions where a user navigated between two domains, 75% of sessions navigated to the other domain to view documentation specifically.
  Yet, depending on the product, sometimes the documentation was hosted on a subdomain specific to documentation and sometimes it was available on the product domain. This created an inconsistent experience where for some products, users could find what they needed on the product website, but for other products, users were sent to an entirely different subdomain. We recommended creating a more consistent experience for users, where regardless of the product, the documentation would be found in the same location. 

Here at Viget, there are a wide variety of insights we may discover for any one project through behavioral analytics. These insights can help to identify new user groups, help to prioritize content or features maintenance and updates, or bring to attention moments in the user journey that are causing friction. These opportunities can help you bring in new users and retain your existing users, by providing an experience that aligns with their needs, whether that is finding resources, getting involved in a community, or making a purchase.  

If you’re interested in making your website or application more effective for your users by leveraging the power of behavioral analytics data, we’d love to hear from you. 


Full Article

us

Setting up a Python Project Using asdf, PDM, and Ruff

By www.viget.com
Published On :: Tue, 17 Sep 2024 10:00:00 -0400

When I was tasked with looking into alternative ways to set up a new Python project (not just using the good ol' pip and requirements.txt setup), I decided to try to find the tools that felt best to me, as someone who writes Python and Ruby. On this journey, I found a way to manage dependencies in Python that felt as good as bundler, among other great tools.

The Runtime Version Manager #

asdf has been my primary tool of choice for language version management for multiple years now. The ease of adding plugins and switching between versions of those plugins at a local or global level has saved me massive amounts of time compared to alternatives.

If you've never set up asdf before, follow the instructions here to get it set up. For reference, I use fish for my shell, so I installed asdf using the "Fish & Git" section.

Once you have asdf on your machine, the next step is to add the plugins you need for your project. Plugins are the actual tools that you want to manage the versions of, like NodeJS, Python, Ruby, etc. For the purposes here, I'll start with adding the plugin for Python:

asdf plugin-add python

Once you have added a plugin to asdf, you're ready to install various versions of that plugin. Since we just installed Python, we can install the version we want:

asdf install python 3.12.4
# OR if we want to just use whatever the latest version is
asdf install python latest

Once the version you want is installed, you can tell asdf to use that version in the current directory by running:

asdf local python 3.12.4
# OR 
asdf local python latest

depending on which version of python you installed.

The Dependency Manager #

In the past, I just used pip install and requirements file(s) to handle most of this. I knew of other options, like pipx or pipenv, but I still have never tried using them. I was more interested in finding a dependency manager that did these things in a significantly different way than what I was used to with pip.

Therefore, I wanted to find something that felt similar to bundler for Ruby. Luckily, very early on in my journey here, I found PDM.

Upon reading what PDM did, I immediately decided to try it out and get a feel for what it offered. Some key notes for me that piqued my interest:

  • Lockfile support
  • Can run scripts in the "PDM environment"
    • pdm run flask run -p 3000 executes the normal flask run -p 3000 command within the context of your installed packages with PDM.
    • In other words, it adheres to PEP 582 and allows you to run project commands without needing to be in a virtual environment, which to me is a big plus.
  • Similar commands to bundler
    • pdm run => bundle exec
    • pdm install => bundle install
    • pdm add <package> => bundle add <gem-name>
      • Note: My workflow was almost always to just add gem <gem-name> to the Gemfile rather than using bundle add, but there is no direct 1:1 equivalent of a Gemfile with PDM.

Installing PDM #

PDM has its own asdf plugin, so let's just use that here as well! Running:

asdf plugin-add pdm

adds the plugin itself to asdf, and running:

asdf install pdm latest 
# can replace 'latest' with a specific version number here too

installs the latest version of PDM. Finally, set the local version with:

asdf local pdm latest
✦Side note about asdf local
  asdf local creates a .tool-versions file (if it doesn't already exist) in the current working directory, and appends the plugin and version number to it. At this point, the directory in which you ran asdf local python 3.12.4 and asdf local pdm latest should have that .tool-versions file, and the contents should be a line each for Python and PDM with their associated version numbers. This way, if someone else pulls down your project, they can just run asdf install and it will install the versions of those plugins, assuming the user has the necessary plugins added themselves.

Now that we have PDM and Python set up, we're ready to use PDM to install whichever packages we need. For simplicity, let's set up a simple Flask app:

pdm add flask flask-sqlalchemy flask-htmx

This line adds Flask, Flask-SQLAlchemy and Flask HTMX. Flask is a web application framework, Flask-SQLAlchemy adds SQLAlchemy and its ORM, and HTMX builds on top of HTML to allow you to write more powerful HTML where you'd otherwise need some JS. Side note, but HTMX is really cool. If you haven't used it before, give it a go! I'm even a part of the exclusive group of HTMX CEOs.

Linting and Formatting #

Finally, I wanted to find a way to avoid pulling in multiple packages (commonly, Black, Flake8 and isort) to handle linting and formatting, which felt to me like it could be the job of one tool.

Pretty quickly I was able to find Ruff which did everything I wanted it to, along with being really fast (thanks Rust ????).

First things first, we need to install Ruff. Since it's a Python package, we can do it using PDM:

pdm add ruff

Once it's installed, we can use ruff check and ruff format to lint and format, respectively. Note that since we installed via PDM, we need to prepend those ruff calls with pdm run:

pdm run ruff check --fix

This runs the linter and fixes any issues found (if they are automatically fixable). The linter can also be run in --watch mode:

pdm run ruff check --watch

which re-lints on every saved change and tells you of any new errors it finds.

The Ruff formatter is similar to use:

pdm run ruff format

which will automatically fix any formatting issues that it finds and can fix. If you want to use this in CI (which you should), you can use the --check flag that will instead exit with a non-zero status code, rather than actually formatting the files:

pdm run ruff format --check

Bringing it all together #

Working with projects set up this way is much easier than how I used to do it. Using tools like asdf, PDM, and Ruff rather than pyenv, pip, and Black/Flake8/isort make both setting up projects and pulling down/installing existing projects more straightforward. I hope the contents of this article are helpful to anyone interested in setting up Python projects in a similar way.


Full Article

us

Founders Welcoming Business Partners

By www.viget.com
Published On :: Mon, 21 Oct 2024 15:54:00 -0400

When Viget was founded in 1999, Andy and I used the title “Founding Partner.” We were founders of the business and also committed business partners. Within a couple of years, we switched to more specific titles: Co-Founder and President (Andy) and Co-Founder and CEO (me), but “business partners” was always the key structure.

We divided responsibilities of leadership, delivery, and operations in ways that optimized our different strengths and weaknesses. Key decision making has always been a collaborative process, with healthy debate between the two of us. I know some incredible solo entrepreneurs, but for us, having a partner to lean on, leverage, and grow with has been not only rewarding, it’s been essential to Viget’s longevity and success.

Also key to our success has been a founding principle of hiring incredible people who share our values and vision, value longevity and lasting relationships, and take pride in their work and careers. As they’ve joined, we’ve shared the opportunities and responsibilities that come with running a healthy business. Empowering others to lead key parts of Viget has taken us further than we’d ever gone otherwise.

Being owners and partners in the business has always been a privilege, an honor, and, at times, a stressful burden. When things go well – clients are happy, the team is gelling, the finances are solid – I’m filled with pride, satisfaction, and calm. When things aren’t going well – projects are sideways, turnover seems contagious, and the metrics point in the wrong direction – I’m filled with anxiety, frustration, and self-doubt. In either scenario, having a partner to navigate the waters with has been vital.

In recent years, three key areas of our business have matured thanks to the overall strength of our team and especially strong leadership. Our sales and marketing systems, tools, and strategies have fed a much more predictable revenue engine with great clients. Our client delivery processes and best practices have helped us consistently deliver value for our clients with more clarity, less risk, and better results. Finally, through some very challenging years in our industry, our culture has grown stronger and more adaptable, still centered on meaningful human connections at the core.

These three business areas have been led by Zach Robbins (sales and marketing), Kelly Kenny (delivery), and Emily Bloom (culture). They are the pillars upon which all other aspects of the business are built. These leaders have truly grown up with the business, having joined more than 13, 14, and 17 years ago, respectively. Their impact first as individual contributors, then managers, and eventually strategic leaders has been immeasurable.

Viget is coming up on a major milestone: we’ll soon eclipse 25 years since our founding on December 27, 1999. As Andy and I looked out at the next decade and beyond of our business, expanding our partnership became a clear goal. Embracing additional partners to not just lead their area of the business but to weigh in on all major decisions would help Viget continue to mature into the business we believe it can be. We saw an opportunity to invite others into the deep water of business partnership – the good, bad, and ugly – so that our shared decision making can be sharper, more insightful, and more strategic in the years to come.

At our fall retreat last week, we announced that we're welcoming Emily, Zach, and Kelly as partners at Viget. They’ve each been here for more than half of Viget’s history, each shaping Viget into what it is today. As partners, they’ll have even more influence as we take Viget into our second quarter century and beyond.


Full Article

  • News & Culture
us

Can I Import Photoshop Brushes into Affinity Photo?

By www.beyondphototips.com
Published On :: Sat, 12 Aug 2023 22:05:39 +0000

This post: Can I Import Photoshop Brushes into Affinity Photo? was first published on Beyond Photo Tips by Susheel Chandradhas

Digital brushes are a powerful tool for digital artists, designers, and photographers. The brushes allow them to create a wide range of textures, patterns, and effects in image editing apps. Can Affinity Photo use existing Photoshop Brushes? Over the years, many professionals and hobbyists have curated extensive collections of Photoshop brushes over time, tailored to […]

This post: Can I Import Photoshop Brushes into Affinity Photo? was first published on Beyond Photo Tips


Full Article

us

Squared Circle Pit #77 – Justin Whang talks old-school ECW and his favorite wrestlers

By metalinjection.net
Published On :: Tue, 21 Dec 2021 00:14:23 +0000

Internet sensation Justin Whang enters the Squared Circle Pit. He talks about his favorite wrestlers and metal bands growing up, staying up late to watch ECW, his thoughts on the […]


Full Article

us

RIP a Livecast Bonus: The Matrix Resurrections Roundtable Discussion

By metalinjection.net
Published On :: Sat, 15 Jan 2022 18:52:09 +0000

As a special bonus, we have unlocked the first of two bonus episodes this month on the RIP a Livecast Patreon page, where we go through our thoughts on all […]


Full Article

us

4 Business Scaling Strategies to Implement in 2023

By www.crazyleafdesign.com
Published On :: Thu, 14 Sep 2023 08:45:40 +0000

Business scaling is setting the stage to support growth in your company. In other words, it means investing in cutting-edge technology, hiring top talent, and executing effective marketing campaigns to successfully grow your business. And while business owners often wish to achieve success overnight, scaling requires a long-term, sustainable strategy.  Scaling a business is often […]


Full Article

us

The Psychology of Colour in Web Design: How to Influence Customer Perception

By www.crazyleafdesign.com
Published On :: Tue, 19 Dec 2023 19:43:13 +0000

There are over 7000 languages spoken in the world today, and it’s constantly increasing. Without the help of translation tools, many of us would not be able to make friends or do business with people beyond our geographical borders due to language barriers. However, if there is one language everybody on this planet speaks fluently […]


Full Article

us

6 Tactics for Promoting Your Local Business

By www.crazyleafdesign.com
Published On :: Thu, 04 Jan 2024 08:16:26 +0000

As a small business proprietor, you must establish connections with local patrons, integrate into the community, and differentiate yourself from your rivals. However, understanding how to market your business locally requires clever marketing techniques. Given the limited pool of potential customers in your vicinity, prioritizing local marketing endeavors is essential, especially when considering that your […]


Full Article

us

Web Designer Must-Have Skills As A Pro in 2024 – Web Design Tips

By www.crazyleafdesign.com
Published On :: Fri, 30 Aug 2024 19:38:53 +0000

As we navigate the ever-evolving landscape of web design, it’s crucial to stay ahead of the curve and continuously expand our skill set. As a seasoned web designer with years of experience, I’ve witnessed firsthand the rapid changes in our industry. Today, I’ll share my insights on the must-have skills for professional web designers in […]


Full Article

  • Web Design
  • Adobe XD
  • advanced web design tools
  • AI in web design
  • CMS for web design
  • content management systems
  • continuous learning in web design
  • design prototyping tools
  • design systems
  • ethical web design
  • Figma for web design
  • Git for web designers
  • HTML CSS JavaScript
  • microinteractions in web design
  • mobile-first design
  • modern web design trends
  • must have web design skills
  • privacy and security in web design
  • professional web designer
  • Responsive web design
  • SEO best practices
  • Sketch for web design
  • user experience design
  • ux design
  • version control for web designers
  • web accessibility
  • web design animation
  • web design collaboration tools
  • web design skills 2024
  • web designer skills 2024
  • website performance optimization
us

Situs Slot Online Terbaik Dengan Fasilitas Lengkap

By www.webjackalope.com
Published On :: Tue, 18 Oct 2022 19:23:11 +0000

Slot menjadi permainan yang banyak di pilih oleh pemain, bukan tanpa alasan game tersebut populer di kalangan pemain. Pasalnya, slot memiliki cara main yang sederhan dan mudah dipahami. Bagi pemain pemula akan sangat mudah mainkan game satu ini. Cara bermain slot sangat mengandalkan keberuntungan, para pemainnya membutuhkan sebuah strategi terbaik untuk menangkan game satu ini. […]


Full Article

  • Tutorial Perang Dadu
us

Mudahnya Daftar Akun Poker Online di Situs Resmi

By www.webjackalope.com
Published On :: Mon, 10 Apr 2023 13:20:34 +0000

Mudah adalah satu kata yang tepat untuk menggambarkan permainan judi poker online pada situs resmi. Setiap situs judi menyediakan layanan bermain berbeda beda, tergantung kualitas yang ada di dalamnya. Situs dengan lisensi resmi tentu tidak perlu anda ragukan lagi terkait dengan kualitas layanannya. Namun perlu anda amati apakah jenis layanan itu sesuai dengan apa yang […]


Full Article

us

The Apple TV 4K Device is a Deeply Flawed and Frustrating Product… for Me

By thomashawk.com
Published On :: Thu, 27 Sep 2018 00:19:25 +0000

About 12 years ago, in 2006, I had what at the time felt like the biggest technological change in my life. I switched from a PC to my first MacBook Pro. Switching computer operating systems at the time seemed like a massive chasm to overcome, but I did it and I’m glad I did. My …

Continue reading "The Apple TV 4K Device is a Deeply Flawed and Frustrating Product… for Me"


Full Article

us

Why Limiting Free Users to 1,000 Photos on Flickr is a Smart Move

By thomashawk.com
Published On :: Fri, 02 Nov 2018 13:24:42 +0000

Yesterday Flickr made their first big restructuring announcement since recently being purchased by SmugMug. Beginning next year on January 8th, Flickr will limit free accounts to 1,000 photos. The previously offered free 1 terabyte of storage goes away. At the same time Flickr is returning their paid pro account to unlimited storage which had been …

Continue reading "Why Limiting Free Users to 1,000 Photos on Flickr is a Smart Move"


Full Article

us

Innovative Branding and Visual identity using Google Slides assets

By abduzeedo.com
Published On :: Mon, 04 Nov 2024 13:21:18 +0000

Innovative Branding and Visual identity using Google Slides assets

abduzeedo

Montag School’s branding fuses corporate trust with creative appeal, using Google Slides assets to reach diverse audiences.

Creating a brand identity for an educational institution like Montag School requires balancing the rigorous standards of corporate audiences with the appeal needed to engage a younger, learning-focused crowd. In this project by Monga Design, Montag School’s visual branding comes to life with a thoughtful, dual-purpose approach that reaches across the boundaries of institutional professionalism and educational creativity.

Montag School’s goal was to represent itself as a trustworthy, contemporary leader in personalized education. This meant moving away from conventional, corporate-heavy design toward a more flexible and approachable brand image. The resulting visual identity integrates both institutional authority and a fresh, dynamic appeal, capturing the trustworthiness expected in corporate circles while aligning with the openness and innovation desired in education.

One of the project’s standout qualities is its focus on balance. By addressing both institutional credibility and the youthful appeal needed for online and in-person classes, the branding reinforces Montag’s positioning as a leader in educational innovation. The design combines strong visual cues—such as clean lines and modern typography—with a vibrant color palette, adding depth to both the brand’s academic and professional facets.

Leveraging Google Slides for Visual Consistency

An innovative aspect of this project is the use of Google Slides as a foundational tool for asset creation. This choice reflects an understanding of Montag’s operational needs and the educational landscape’s demands for accessibility and efficiency. By designing custom graphics within Google Slides, Monga Design created a versatile, cost-effective solution for maintaining consistent visuals across various educational materials. Google Slides not only provides easy customization but also aligns with the widespread use of this tool in both corporate and learning environments, allowing Montag to produce branded materials in-house without requiring extensive software training.

Montag School’s branding thoughtfully considers its diverse target audiences. For in-company courses and corporate conventions, the brand maintains a polished, professional tone, ensuring credibility and trust in a business context. Simultaneously, for students attending online and in-person classes, the brand incorporates a more engaging, youthful look. The graphics, colors, and animations appeal to students by creating an approachable and modern learning environment.

Monga Design introduced animations for key assets to add a layer of interactivity to Montag’s branding. These animations, crafted by Clint Studio, enhance the brand’s visual appeal while ensuring they resonate with both young learners and seasoned professionals. This visual dynamism strengthens the brand’s reach by making it adaptable to the changing demands of the educational landscape.

The design team approached this branding project with a detailed, collaborative process. Their “Visual Thermometer” meeting—a strategy to explore visual possibilities rather than set rigid creative guidelines—proved essential for crafting a design that was both client-centered and creative. By aligning client preferences with design expertise, they established a visual identity that resonates on multiple levels, providing a cohesive experience for all audiences.

Montag School’s branding successfully bridges the gap between education and business, providing a clear, attractive, and credible visual identity that aligns with the brand’s values. By balancing a contemporary, accessible aesthetic with the professionalism expected in corporate circles, Montag School positions itself as a modern leader in education, with a visual identity that can grow with its expanding audience.

For more on this project, you can view the video case here.

Branding and visual identity artifacts

Credits

  • Visual identity: Monga Design → Mateus Yuzo and Michel Refatti
  • Motion: Clint Studio → Gustavo Brazzalle, Lucas José Galego e Luciano Burger


Full Article

us

Adobe Illustrator 2025 Splash Screen Illustration: TRÜF’s “Weird Fishes”

By abduzeedo.com
Published On :: Mon, 04 Nov 2024 13:33:42 +0000

Adobe Illustrator 2025 Splash Screen Illustration: TRÜF’s “Weird Fishes”

abduzeedo

Discover how TRÜF’s “Weird Fishes” splash screen for Adobe Illustrator 2025 celebrates creativity with vibrant, minimalist illustration.

The Adobe Illustrator 2025 splash screen opens with a statement: creativity meets minimalism. Designed by TRÜF Studio, the “Weird Fishes” artwork that greets users embodies Adobe’s tools while making an instant visual impact. This splash screen not only excites users about the app but also showcases Illustrator’s dynamic possibilities, creating a memorable start to the creative process. Here’s a look at the creative vision, tools, and collaboration behind this unique splash screen update.

“Weird Fishes”: A Showcase of Creative Tools

TRÜF’s “Weird Fishes” centers on playfully stylized fish, created using Adobe Illustrator’s updated typography and 3D tools, which highlight the 2025 release’s expanded capabilities. This splash screen is a celebration of how Illustrator can bring out unique textures, gradients, and typographic designs, making it feel like a blend of traditional and digital artistry. The design follows Adam G’s distinctive style—minimal yet quirky, with each element purposefully crafted to show off Adobe’s creative potential.

The splash screen, as Adobe intended, isn’t just a loading screen. It’s a reminder of what Illustrator users can “Dream Up.” As Alex Fernald and Gleren Meneghin, Adobe’s staff designers, emphasized, the splash screens are not only entry points into the app but connections to Adobe’s creative community. They bring in commissioned art, linking Illustrator users to other creators while inviting exploration of the software’s capabilities.

Balancing Art and Function in the Design

This splash screen’s journey began the old-fashioned way—on paper. This initial sketching phase gave TRÜF the freedom to experiment with the composition, exploring the balance of shapes and lines. Once refined, the concept moved into Illustrator, where TRÜF fully explored the software’s features to enhance the digital version. In a brief, 90-second process video, TRÜF showcased their workflow from sketch to the finished splash screen, a rare peek into how minimalist, impactful design comes together.

A User-Centric Approach to Illustration

Adobe’s splash screens, including “Weird Fishes,” are a result of ongoing feedback from users. Through surveys sent to product teams, Adobe designers Alex and Gleren learned the nuances that users valued in the loading screen—like minimal launch delays and artist recognition. This feedback shaped the design, ensuring the new splash screens would spotlight the artist while maintaining the program’s efficiency.

To make the splash screen visually immersive, Adobe made adjustments based on past feedback. The artwork was enlarged, and the artist’s name appears in a larger, bold typeface, creating a clearer hierarchy that celebrates both the art and artist. As the Adobe Spectrum design system evolved, so did the splash screens, aligning with modern standards while preserving Adobe’s commitment to showcasing diverse creative voices.

Reflecting Adobe’s Evolution with Modern Minimalism

Historically, Illustrator splash screens have evolved alongside the Adobe brand. From early versions in the 1980s, featuring iconic art references, to today’s community-focused pieces, these screens highlight a shift from static visuals to dynamic creative introductions. Adobe’s recent redesign, led by Fernald and Meneghin, reimagined this format to center both the artist and the Adobe brand, using clean type and colors while expanding the visual space for the artwork. This shift reaffirms Adobe’s mission to foster connections within its creative ecosystem.

The splash screens across Adobe products are meant to offer a consistent brand experience, but each one also tells a unique story, showcasing the latest in illustration and design through collaboration with Studio team artists. Adobe’s team expanded the artwork’s size, adjusting its specs back to 2019 dimensions to create a more immersive user experience. The Adobe wordmark in red stands beside the product name in black, emphasizing the connection between Adobe and its creative community.

The Legacy and Future of Adobe Splash Screens

“What’s next?” is a question Adobe’s designers are always answering. With the 2025 Illustrator splash screen’s debut at Adobe MAX 2024, Adobe introduced the latest evolution in Creative Cloud. These splash screens remain essential touchpoints, showcasing new work, enhancing user experience, and connecting each user to Adobe’s creative network.

TRÜF’s “Weird Fishes” invites Illustrator users to think beyond the ordinary. It’s a nod to the creative possibilities the software enables, a tribute to digital and analog techniques, and a reminder that every creative journey begins with opening Adobe Illustrator.

This splash screen illustration is a subtle invitation for creatives to make the most of Illustrator’s tools and capabilities, setting the stage for inspired design from the moment they open the app.

Illustration artifacts

Pillow manufactured by Adobe. Photo courtesy of Adobe


Full Article

us

Graphic Hunters: Pushing the Boundaries of Sports Visual Identity

By abduzeedo.com
Published On :: Thu, 07 Nov 2024 13:57:12 +0000

Graphic Hunters: Pushing the Boundaries of Sports Visual Identity

abduzeedo

Explore how Graphic Hunters’ visual identity redefines sports branding through innovative design inspired by fashion and art.

Graphic Hunters, a Dutch studio dedicated to sports branding, isn’t playing by the typical design rulebook. Instead, their newly crafted visual identity steps outside the confines of traditional sports aesthetics, introducing elements drawn from fashion and high design. The result is a high-impact, versatile identity that positions Graphic Hunters as a creative club worth joining—whether as a client or a collaborator.

A New Playbook for Sports Branding

At the heart of Graphic Hunters’ approach is the idea that the sports industry deserves a more refined and exclusive visual experience. This belief is woven into every part of their branding, which Monga Design and Vogau led with a clear vision. The goal was to create a system that balances functionality with creative exploration, breaking conventions while still delivering practical, adaptable solutions for various applications.

This innovative take on visual identity isn’t just about aesthetics; it’s a strategy aimed at redefining the brand’s place in the market. Graphic Hunters has always described itself as a team hungry for new challenges, and now, their brand identity reflects that spirit. The new look aims to make the studio stand out in the sports arena and beyond, appealing to clients and team members who value originality and impact.

Graphic Hunters’ identity combines familiar elements from the sports world—like motion and heat—with unexpected treatments. The design team drew inspiration from fashion and abstract art to create a visual language that transcends typical sports branding. This cross-pollination of ideas manifests in several core elements:

1. Typographic Experimentation: Instead of relying on traditional sports typefaces, the team played with a variety of fonts that feel bold and contemporary. Typography serves as both structure and disruption, bringing energy to each layout.

2. Photographic Treatments: The identity includes photographs that have been creatively manipulated, breaking up the grid and adding an element of surprise. This technique turns static images into dynamic design features, echoing the constant motion of sports.

3. Grid System and Stickers: To keep the brand’s applications cohesive yet flexible, a structured grid underpins the design. However, this is cleverly offset by playful elements like stickers and graphical interventions, which keep the brand feeling fresh and exciting.

One of the biggest challenges was making the visual system adaptable yet creatively open. Sports branding often leans into themes of power and motion, but Graphic Hunters wanted to do more. The result is a brand that’s equally at home on a team jersey or a digital campaign, seamlessly moving between refined, impactful moments and bold, playful expressions. This adaptability speaks to the studio’s ethos of being a “creative club,” where everyone is encouraged to push the boundaries.

Another essential aspect was research. The design team explored references beyond the sports realm, looking at high fashion and experimental graphic design. This broader inspiration palette allowed Graphic Hunters to create something genuinely unique for the industry. The identity’s experimental typography and abstract motifs capture the feeling of heat and energy—core elements of sports—while grounding them in a sophisticated design language.

Elevating Sports Design Beyond the Field

By combining these unexpected references with a strong foundation of sports elements, Graphic Hunters has crafted a visual identity that is both striking and functional. It stands as a testament to the idea that sports design can be more than bold fonts and action shots. It can be a narrative of innovation and exclusivity, appealing to an audience that appreciates both the adrenaline of sports and the sophistication of high design.

Graphic Hunters’ reimagined branding proves that sports-focused design can be just as experimental and refined as any high-fashion brand. It’s a visual identity that elevates the sports studio into a space where design meets performance, art meets action, and innovation becomes the new norm. As the brand continues to grow, this identity will serve as a powerful statement of their ambition: to bring high-impact, original design to the world of sports, one project at a time.

Branding and visual identity artifacts

Credits

  • Authors: Monga Design, Vogau and Clint Studio
  • Visual identity: Monga Design (Mateus Yuzo, Michel Refatti) and Vogau (Carlos Eduardo Marin, Gabriela Colebrusco Peres)
  • Motion: Clint Studio (Bruno Vitalino, Danilo Coelho, Gustavo Brazzalle, Lucas José Galego, Luciano Burger


Full Article

us

Illustration for Impact: HART Curatorship Incubation Programme Visuals

By abduzeedo.com
Published On :: Fri, 08 Nov 2024 16:21:13 +0000

Illustration for Impact: HART Curatorship Incubation Programme Visuals

abduzeedo

Discover Anthony Lam’s captivating illustration work for the HART Curatorship Incubation Programme 2024, blending art with purpose.

HART Collective Limited’s 2024 Curatorship Incubation Programme comes alive through a series of vibrant visuals and social media collaterals designed by Anthony Lam. This illustration project, aimed at amplifying the HART initiative’s reach, seamlessly combines creativity and purpose. Let’s dive into the thought process, design elements, and impact of these compelling illustrations.

Bringing Artful Storytelling to HART

The HART Curatorship Incubation Programme is more than just an event; it’s a platform that nurtures emerging curators and fosters artistic engagement in Hong Kong. For this initiative, HART Haus collaborated with Anthony Lam to create visuals that encapsulate the spirit of innovation and community central to the programme. With a focus on vibrant, eye-catching design, Lam’s illustrations breathe life into the promotional material, making the programme’s message resonate visually.

One of the striking features of this project is the careful choice of typography. The primary typeface used is Degular Display by James Edmondson from OH no Type Co. This choice lends a contemporary and approachable vibe to the design, complementing the modern and energetic illustrations. The type’s bold and clean lines create a sense of structure amidst the dynamic visuals.

Lam’s illustrations use a playful yet sophisticated color palette, striking a balance between the avant-garde and the accessible. The design approach draws heavily from art movements that emphasize form and rhythm, mirroring the essence of a programme that curates art as an experience. Each piece incorporates abstract shapes and flowing patterns that evoke a sense of motion, representing the evolving journey of curatorship and the fluid nature of artistic collaboration.

Illustration isn’t just about static visuals; it’s about telling a story that connects with an audience. For this project, Lam crafted designs meant to adapt seamlessly across multiple platforms, from print to digital media. The social media assets, in particular, utilize animations and interactive elements to capture the attention of a fast-scrolling audience. These designs ensure that the HART Curatorship Incubation Programme stands out in the crowded digital space.

The use of illustration as a core element of the visual identity allows for more flexibility and engagement. It provides a canvas where abstract concepts about art and curatorship can be expressed in a way that feels both authentic and exciting. Whether seen on a poster, a website, or a social post, each visual invites viewers to explore and learn more about the programme.

Illustration plays a crucial role in making art initiatives accessible to a broader audience. By employing a visually striking yet relatable design language, Anthony Lam’s work for HART bridges the gap between curators and the community. The visuals don’t just inform; they inspire curiosity and engagement, which is essential for an incubation programme that seeks to elevate emerging curators.

This collaboration also highlights the impact of thoughtful design in the arts sector. By leveraging illustration, HART Collective can convey complex ideas in a way that is immediately understandable and appealing. The choice of colors, the movement within the compositions, and the bold typography all work together to create a cohesive narrative that draws people in.

The HART Curatorship Incubation Programme’s visual identity showcases how illustration can elevate an arts initiative, making it more engaging and impactful. Anthony Lam’s designs prove that illustration, when done thoughtfully, can serve as a bridge between art and the public, turning viewers into participants and supporters.

This project is a reminder that effective visual identity goes beyond aesthetics; it tells a story that connects and captivates. As HART continues to grow its curatorship programme, the illustrations created for this year’s campaign will undoubtedly leave a lasting impression, drawing more people into the world of art and collaboration.

Graphic design and illustration artifacts

Credits


Full Article

us

Indigenous Farmers Practice the Agriculture of the Future

By www.ecology.com
Published On :: Thu, 05 Nov 2015 10:48:19 +0000

By Leaiman Yes! Magazine Affectionately called “Professor” by his neighbors, Josefino Martinez is a well-respected indigenous farmer and community organizer from the remote town of Chicahuaxtla, in the Mexican state of Oaxaca. He watched with patient attention as I showed … Continue reading →


Full Article

us

A few photos I just took around our foggy garden this morning!

By www.neilcreek.com
Published On :: Wed, 04 Jun 2014 03:22:28 +0000


Full Article

us

How to Alert Your Customers of a Price Drop in WooCommerce

By www.isitwp.com
Published On :: Mon, 04 Sep 2023 09:18:00 +0000

Are you looking for a way to alert your customers about a discounted price in your WooCommerce store? Price drop campaigns show popup notifications when your brand reduces the price of a product. Sending your visitors alerts allows you to improve engagement and maximize sales on your website. In this tutorial, we’re going to show […]

The post How to Alert Your Customers of a Price Drop in WooCommerce first appeared on IsItWP - Free WordPress Theme Detector.


Full Article

us

Duplicator Vs. UpdraftPlus Vs. BackupBuddy – Which One is Better?

By www.isitwp.com
Published On :: Tue, 05 Sep 2023 14:10:20 +0000

Are you looking for a great backup solution for your WordPress site? Duplicator, UpdraftPlus, and BackupBuddy are three of the best plugins to help you back up your site.  They stand above the rest because of their simplicity of use, many features, and security.  Even though they are all great, you need just one backup […]

The post Duplicator Vs. UpdraftPlus Vs. BackupBuddy – Which One is Better? first appeared on IsItWP - Free WordPress Theme Detector.


Full Article

us

The June WordPress users group meeting

By wpcult.com
Published On :: Fri, 25 Oct 2024 18:08:10 +0000

The days have been flying by really fast. In fact I am glad I decided to check out LAWPUG.org today. I was reminded that this weekend is when the meet is. So if you in the Los Angeles area, and would like to sit down and chat with a few WordPress guru’s, please feel free […]

The post The June WordPress users group meeting appeared first on WPCult.


Full Article

us

Calling custom fields for next/previous posts

By wpcult.com
Published On :: Sat, 26 Oct 2024 06:08:28 +0000

Custom fields are definitely very useful and are used on many WordPress installs. Today I’m going to show you how to easily get custom fields values outside the loop.

The post Calling custom fields for next/previous posts appeared first on WPCult.


Full Article

us

A busy busy Wednesday night!

By wpcult.com
Published On :: Sat, 26 Oct 2024 18:08:50 +0000

Well, aside from waiting all day for WordPress 2.8 to be released into the wild (public). I left the comfort of my home to get some dinner only to get a message that 2.8 was out. Upon returning home I’ve had a chance to download and install 2.8 on a few site’s I own. BUT!! […]

The post A busy busy Wednesday night! appeared first on WPCult.


Full Article

us

Use WordPress to print a RSS feed for Eventbrite attendees

By wpcult.com
Published On :: Wed, 30 Oct 2024 18:08:25 +0000

Today I was working on the WordCamp.LA site. I was trying to show the “attendee list” on the attendees page with out having to update the page every day. Since I am using EventBrite to promote and sell ticket to the event I can collect info from there list. Evey one who purchases a ticket […]

The post Use WordPress to print a RSS feed for Eventbrite attendees appeared first on WPCult.


Full Article

us

Grow Your Real Estate Business With Pinterest

By wpcult.com
Published On :: Tue, 12 Nov 2024 18:08:15 +0000

Pinterest is a social media website where users share their favorite images from around the web with their followers. Rather than using words to express themselves, Pinterest users use images and photographs instead. Like other forms of social media, Pinterest offers a unique opportunity for real estate agents looking to grow their businesses. With so […]

The post Grow Your Real Estate Business With Pinterest appeared first on WPCult.


Full Article

us

Used Ford Focus – An Elegant Free WP Theme

By www.elegantwpthemes.com
Published On :: Tue, 09 Feb 2010 11:20:03 +0000

Used Ford Focus is 3 columns free wordpress theme with unique and modern style, having the classic combination of white, blue, grey and orange. Features: XHTML 1.0 Transitional Adsense Ready Threaded comments support FeedBurner subscribe via email support A lot of advertising spots 125×125 Note: Used Ford Focus Theme is Distribute by ElegantWPThemes.com designed by [...]


Full Article

us

Sweet Nostalgia In August (2024 Wallpapers Edition)

By smashingmagazine.com
Published On :: Wed, 31 Jul 2024 09:30:00 GMT

Do you need a little inspiration boost? Well, then our new batch of desktop wallpapers might be for you. Designed by the community for the community, they come in versions with and without a calendar for August 2024. Enjoy!


Full Article

us

Generating Unique Random Numbers In JavaScript Using Sets

By smashingmagazine.com
Published On :: Mon, 26 Aug 2024 15:00:00 GMT

Want to create more randomized effects in your JavaScript code? The `Math.random()` method alone, with its limitations, won’t cut it for generating unique random numbers. Amejimaobari Ollornwi explains how to generate a series of unique random numbers using the `Set` object, how to use these random numbers as indexes for arrays, and explores some practical applications of randomization.


Full Article

us

Why Anticipatory Design Isn’t Working For Businesses

By smashingmagazine.com
Published On :: Tue, 10 Sep 2024 10:00:00 GMT

Anticipatory design, powered by Artificial Intelligence (AI), Machine learning (ML), and Big Data (BD), promises to transform user experiences by predicting and fulfilling needs before users even express them. While this proactive approach seems revolutionary, many businesses struggle to meet the high expectations it sets. Joana Cerejo delves into the challenges of anticipatory design, highlights key failures, and offers a framework to help designers and businesses succeed in this complex landscape.


Full Article

us

How To Build Custom Data Visualizations Using Luzmo Flex

By smashingmagazine.com
Published On :: Thu, 12 Sep 2024 11:00:00 GMT

Bringing data to life in your application can be done without the usual headaches. Paul Scanlon shows you how you can build beautiful data visualizations using the Google Analytics API, and you won’t have to spend any time “massaging” the data.


Full Article

us

Creating Custom Lottie Animations With SVGator

By smashingmagazine.com
Published On :: Tue, 17 Sep 2024 11:00:00 GMT

Creating ready-to-implement Lottie animations with a single tool is now possible thanks to SVGator’s latest feature updates. In this article, you will learn how to create and animate a Lottie using SVGator, an online animation tool that has zero learning curve if you’re familiar with at least one design tool.


Full Article

us

SVG Coding Examples: Useful Recipes For Writing Vectors By Hand

By smashingmagazine.com
Published On :: Wed, 18 Sep 2024 09:00:00 GMT

Myriam Frisano explores the basics of hand-coding SVGs with practical examples to demystify the inner workings of common SVG elements. In this guide, you’ll learn about asking the right questions to solve common positioning problems and how to leverage JavaScript so that, by the end, you can add “SVG coding” to your toolbox. You’ll also be able to declare proudly, “I know how to draw literal pictures with words!”


Full Article

us

How To Manage Dangerous Actions In User Interfaces

By smashingmagazine.com
Published On :: Fri, 27 Sep 2024 15:00:00 GMT

One of the main laws that applies to almost everything in our lives, including building digital products, is Murphy’s Law: “Anything that can go wrong will go wrong.” Our goal is to prevent things from going wrong and, if they do, mitigate the consequences. In this article, Victor Ponamarev explores different strategies for preventing users from making mistakes.


Full Article

us

Using Multimodal AI Models For Your Applications (Part 3)

By smashingmagazine.com
Published On :: Fri, 11 Oct 2024 10:00:00 GMT

In this third part of the series, you are looking at two models that handle all three modalities — text, images or videos, and audio — without needing a second model for text-to-speech or speech recognition.


Full Article

us

Why Optimizing Your Lighthouse Score Is Not Enough For A Fast Website

By smashingmagazine.com
Published On :: Tue, 05 Nov 2024 10:00:00 GMT

Feeling good with your Lighthouse score of 100%? You should! But you should also know that you’re only looking at part of the performance picture. Learn how Lighthouse scores are measured differently than other tools, the impact that has on measuring performance metrics, and why you need real-user monitoring for a complete picture.


Full Article

us

Alternatives To Typical Technical Illustrations And Data Visualisations

By smashingmagazine.com
Published On :: Fri, 08 Nov 2024 09:00:00 GMT

Thomas Bohm rethinks technical illustrations and data visualizations, sharing interesting and uncommon examples of how to present data and information. Bar graphs and pie charts are great, but there’s so much more to explore!


Full Article

us

California Study: Four Widely Used Neonicotinoid Pesticides Harm Bees

By www.ecology.com
Published On :: Thu, 02 Aug 2018 18:33:52 +0000

Center for Biological Diversity Press Release WASHINGTON – Four commonly used neonicotinoid pesticides can harm bees and other pollinators, according to a new analysis by California’s Department of Pesticide Regulation. The study found that current approved uses of the “neonics” … Continue reading →


Full Article

us

‘Coming Mass Extinction’ Caused by Human Destruction Could Wipe Out 1 Million Species, Warns UN Draft Report

By www.ecology.com
Published On :: Tue, 23 Apr 2019 18:47:43 +0000

By Jessica Corbett Common Dreams Far-reaching global assessment details how humanity is undermining the very foundations of the natural world     On the heels of an Earth Day that featured calls for radical action to address the current “age … Continue reading →


Full Article

us

Curious Little Apps

By www.cssleak.com
Published On :: Tue, 23 Jul 2013 11:11:51 +0100



Full Article

us

Juste avant l’orage

By www.gino-caron.com
Published On :: Wed, 12 Jun 2024 20:28:06 +0000

Ce midi à St-Donat, le ciel se métamorphose en un spectacle grandiose et inquiétant juste avant la tempête. Une masse nuageuse imposante et tourmentée envahit le ciel, ses volutes sombres contrastant violemment avec les champs verdoyants en dessous. Les nuages, lourds et menaçants, semblent presque toucher les collines, créant une atmosphère à la fois dramatique...

Lire plus


Full Article

us

Couleurs d’automne à Rimouski

By www.gino-caron.com
Published On :: Fri, 11 Oct 2024 20:58:47 +0000

Cette vue aérienne de Rimouski, baignée sous un ciel bleu éclatant, dévoile une ville côtière paisible, nichée entre les rives du majestueux fleuve Saint-Laurent et les collines verdoyantes à l’horizon. Les maisons, disposées en un réseau de rues sinueuses, forment un patchwork harmonieux de toits et de jardins colorés, reflétant l’ambiance sereine de cette ville....

Lire plus


Full Article