Technology

Why does PayPal suck so bad? I tried to set up a Venmo for donations and I failed. PayPal’s UI is awful.

ChatGPT Speaks:

You’re definitely not alone in finding PayPal frustrating—many users vent similar frustrations online. Here’s a breakdown of the most common pain points, especially relating to UI (user interface) and the headaches with setting up Venmo for donations:

Why PayPal Can Feel Clunky

1. Terrible Navigation & Overly Nested Menus

Users frequently report that the PayPal UI buries features deep within nested menus, making it hard to find what you need:

“I agree with you that this interface is terrible. It has a form of design that is obviously intended to hide your information… finding a sub category … you will have to dig back and forth until you find the button.” [PayPal Community

2. Poor Readability & Excessive White Space

The redesign with larger fonts and spacing makes scrolling a chore and reduces visibility:

“The new Transaction page uses big font … You can see a whole 8 transactions and then I have to hit the more button and scroll…” PayPal Community

3. Inconsistent Layouts & Confusing Checkout

The checkout process is overly complex, full of fields and confusing flows, even for experienced users:

“So why is the checkout SO COMPLICATED??? … I literally couldn’t understand what’s going on. So many instructions. So many fields to fill.” Reddit

4. Clumsy Authentication & Timeouts

Frequent logouts and multi-click login processes erode usability:

“PayPal times out… logging back in requires three clicks … click the log in prompt… log in button… ignore the promotional message… and click ‘go to my account.’ … design is annoying as all get?out.” PayPal Community

5. Dark UX Patterns & Hidden Defaults

Some design choices seem intentionally deceptive—like defaulting to paid options even after selecting free ones:

“It had defaulted to the ‘transfer now’ choice, so it cost me $6. … What a horrible thing to do.” Reddit

6. Glitches When Adding Bank Accounts

Many users struggle to link bank accounts due to awkward UI behavior:

“Try to add Fidelity as a bank account… No path forward… Workaround: type a bunch of garbage, and it will show you a button that will let you manually enter account details.” Reddit

7. Slow Performance & Looping Login Screens

Frequent re-authentication and laggy pages make the experience feel sluggish:

“Every step needs so much loading time. Every 1?minute I need to re?login. The dashboard and the activity feed is so confusing.”
Reddit

Setup Nightmares with Venmo Charity Profiles

If you’re trying to set up donations through Venmo via PayPal (especially for nonprofits), that introduces an extra layer of complexity.

Common Issues From the Trenches:

• Loops and endless redirects between platforms:
  “It takes me to Venmo Charity Profiles… then says ‘already verified’ and takes me back to PayPal. I’m getting so frustrated!”
  PayPal Community
• Renowned for being flaky and unresponsive support:
  “I’ve been struggling for two months… get the same error message… Venmo’s support folks are stumped… they open a tech ticket and nothing happens.” Reddit
• Account freezing or merging with personal profiles:
  “It was a nightmare… The account was frozen upon creation… multiple chats… have led to nothing.” Reddit
• Discomfort with linking a personal account to the charity:
  “They require it to be linked to a personal Venmo account… I don’t want my personal account linked to the charity I volunteer for part?time.” Reddit

Official Requirements That Make It Tough:

• You must verify charity status via PayPal.
• The same person must own both the PayPal and Venmo accounts—ownership is non-transferable. Venmo Help Center
• Venmo will reject setups if info doesn’t match or there’s a mismatch in phone number, ownership, or account status. Venmo Help Center+1
• Additional errors like “we can’t confirm your info,” “this link isn’t shareable,” or “timeout” are common blockers. Venmo Help Center

Summary Table

Issue Area	Why It Sucks
Navigation & Layout	Buried menus, oversized layout, poor readability
Checkout & Flow	Confusing steps, redundant forms — even returning users get tripped up
Authentication & Timeouts	Frequent logouts, multi-step login, slow loading
UX Design Choices	Hidden defaults magnified to extract fees or clicks
Technical Glitches	Bank linking weirdness, looping screens, unresponsive mobile buttons
Venmo Charity Integration	Ownership constraints, approval loops, flawed error handling, limited support

What You Can Do Next

• For UI frustration: Consider providing feedback directly via the PayPal Community, or exploring third-party integrations (like DonorBox or Stripe) for smoother UX.
• For Venmo setup:
  • Make sure the charity owner matches across accounts.
  • Use unique phone numbers and avoid account overlap.
  • Address any “good standing” issues with IRS or regulatory bodies first.
  • Be prepared to navigate redirects and reach out persistently to support.

Last week I made a jump into a new (old) direction. I signed up to make lithographs at The Art Students League in New York City.

I looked at the summer schedule in May. Lithography is offered for June 2025.

I had to decide quickly. The listing cryptically said “June 2025” and June began on a Sunday. The lithography class has a requirement to talk to the professor before signing up. He was holding interviews on Tuesdays and Wednesdays. That meant a danger of missing a week’s time.

I went to The Art Students League on Monday and invaded the facility to get a first look. The lithography shop was empty. The litho shop is rather small compared to university press shops. The presses have leather-strapped stretcher bars. The black ink rollers were wrapped in plastic. I did not see any color rollers. I did not see any color ink.

The Art Students League Litho Shop has a good many stones including some large ones. There is a small hand-crank lift to move stones from the shelf to tables and the press.

The layout was strange. I went home with doubts about enrolling.

Tuesday morning I woke and faced my fears and doubts. I went back to see the professor and took a second look.

The class professor is Michael Pellettieri. Michael turned out to be a very wise, kind man. He asked about my history and I showed a few prints from my website.

Micheal knew a professor at Cornell from when I was there. When I was at Cornell the professor was a professor emeritus.

Micheal suggested that I sign up for Wednesday/Thursday instead of Monday/Tuesday. I went home and tore up my storage area searching for my box of litho supplies and tools.

On Wednesday the shop assistant, Diego, gave me two stones. He offered a large stone but I could not move it from the shelf. The shelf rollers are plastic piping on rods and are hard to roll. I chose two medium-sized stones instead, a grey stone and a yellow stone. I spent Wednesday graining both stones. Diego made fresh paper covers for my stones to keep them clean.

On Thursday I had time to talk to Michael Pellettieri. He also teaches etching and is often in the etching room. I made trips to The Art Students League Art Supply Store and back. I talked to other students and monitors. I did not get more done than to gum out borders on my stones.

A huge limitation at The Art Students League is that people are not allowed to be in the shop except during the assigned “class time”. They keep things locked up. This is especially toxic for lithography as it is not practical to drag the stones home to work. I am used to a schedule of working from 8 am to 11 pm, seven days per week.

It is possible to pay to come on Fridays for four hours. The extra fee is $20. I paid at the bursars office. I came back on Friday afternoon to knock out a couple of touche images. I added texture with Korn’s crayons to provide for a comprehensive first test.

On Wednesday I will etch and then print. Thursday I will grain the stones and start a next set of images. I am excited to be working with lithography again.

Recently my tech developer friends were discussing replacing their M-series Apple computers with non-Apple hardware. They told me that Apple had decided to weld the hard drive, battery and chips to the motherboard, preventing the ability to upgrade their equipment.

I discovered that the limitations of upgrading Apple’s M-chip computers is a significant issue. A sentiment of frustration among developers and programmers is quite strong. As developers work with LLMs, video and other sophisticated software and programming needs they are starting to rebel and abandon Apple products.

Here’s a breakdown of the issue:

The Soldered Components:

RAM (Unified Memory): Apple’s M-series chips (M1, M2, M3, etc.) use a “Unified Memory Architecture” (UMA). This means the RAM is integrated directly onto the chip or logic board, very close to the CPU and GPU. This design allows for incredibly fast data transfer between the CPU, GPU, and memory, which is a major performance benefit. However, the downside is that RAM cannot be upgraded after purchase. You have to decide how much RAM you need at the time of purchase, and you’re stuck with it for the life of the machine.

SSD (Storage):

Similarly, the SSD storage in most M-chip Macs is also soldered to the logic board. While there have been some rare instances of engineers managing to desolder and replace SSD chips (a highly risky and complex process that voids warranties), for the vast majority of users, internal storage is not upgradeable.

Other Components:

The CPU, GPU, and other core components are all integrated into the M-series “System on a Chip” (SoC), meaning they are not modular and cannot be replaced or upgraded independently. Batteries can be replaced by Apple or authorized service providers, but not easily by users.

Why Apple Does This (and the Developer Perspective):

Performance:

The primary technical reason for integrating RAM and other components is performance. UMA significantly reduces latency and increases bandwidth, making M-chip Macs incredibly efficient and powerful for their size and power consumption.
Miniaturization and Design: Soldering allows for thinner, lighter, and more compact designs, which is a key aspect of Apple’s product philosophy.

Control and Profit:

This is where much of the developer and user frustration comes from. By making components non-upgradeable, Apple effectively forces users to buy a new machine if they need more RAM or storage, rather than simply upgrading existing hardware. This leads to higher costs for consumers and, some argue, contributes to e-waste. The premium Apple charges for RAM and storage upgrades at the time of purchase is often significantly higher than the market cost of those components.
Prevalence of Sentiment Among Developers and Programmers:

The sentiment among developers and programmers is widely critical of Apple’s non-upgradable hardware. Here’s why:

Resource Demands:

Developers often work with demanding applications, large codebases, virtual machines, and multiple tools running simultaneously. These tasks can quickly consume significant amounts of RAM and storage. Being locked into a fixed configuration means they might find their machines underpowered sooner than they’d like.

Cost of Ownership:

The inability to upgrade makes the total cost of ownership higher. If a developer needs more RAM a couple of years down the line, their only official option is to buy a completely new, expensive machine.

“Right to Repair” Concerns:

This issue feeds into the broader “right to repair” movement. Many developers and tech enthusiasts believe that consumers should have the right to repair and upgrade their own devices, and Apple’s practices are seen as directly opposing this.

Longevity and Sustainability:

From an environmental perspective, forcing users to replace entire machines instead of upgrading components contributes to electronic waste.

Exceptions and Workarounds:

While official upgrades are impossible, some users resort to external SSDs for additional storage. For RAM, there’s no practical external solution, although some highly skilled engineers in places like Shenzhen have demonstrated extremely risky and difficult methods of desoldering and replacing RAM chips. These are not viable options for the average user or even most professional developers.

In summary:

While Apple’s integrated design offers performance benefits, the inability to upgrade RAM and internal storage on M-chip Macs is a major point of contention for developers and programmers. It forces them to either over-spec their machines at the time of purchase (leading to higher upfront costs) or face the prospect of buying a new computer when their current one no longer meets their needs. This contributes to a strong negative sentiment regarding Apple’s hardware longevity and repairability.

What are the effects and uses of Poppy oil, Walnut oil, and Lavender Retouch Varnish for artist painting with oil painting and egg tempera painting?

Below is a concise, studio tested rundown of how each material behaves, why artists reach for it, and the main “do’s & don’ts” when you combine them withoil colors or traditional egg tempera panels.

---

1.Poppy Oil

(Often labeled “poppy seed oil,” a slow drying, very pale drying oil)

Aspect	Oil painting use	Egg tempera use	Key take aways
Dry-time	Slow – 5-10 days touch-dry vs. 1-3 days for linseed. Good for wet-in-wet blending or glazing.	Not used as a binder; but a few artists wipe a whisper-thin layer onto a fully cured tempera panel before glazing with oil (“tempera grassa” technique).	Build thin; avoid in thick impasto where wrinkling and yellowing risk grows.
Color shift / yellowing	Palest of the drying oils; yellows less than linseed or walnut.	N/A	Excellent for final lights, cool tints, whites.
Film strength / durability	Slightly weaker, more brittle than linseed.	N/A	Keep lean (little additional medium) in first layers; reserve for upper-most passages.
Handling feel	Longer, silkier stroke; less tack.	–	Mix with a touch of solvent for smooth, enamel-like glazes.
Clean-up / health	Comparable to other vegetable drying oils; non-toxic but can spontaneously combust on rags.	–	Dispose of rags in water-filled metal can.

When to pick it

• Ultra-pale highlights, delicate pastel passages, or icy glazes where linseed’s amber cast would muddy the hue.

• Extended open time for subtle blends (portrait flesh, sky gradations).

---

2. Walnut Oil

(Traditional Renaissance binder; medium-slow dryer with balanced properties)

Aspect	Oil painting use	Egg tempera use	Key take-aways
Dry-time	Moderate – generally 3-5 days touch-dry.	Historical egg-oil emulsions (“tempera grassa”): 1:part fresh egg yolk:1 part walnut oil yields a flexible, satin film.	Good all-rounder; slower than linseed, faster than poppy.
Color shift / yellowing	Noticeably paler than linseed, slightly darker than poppy.	Very stable in emulsions, minimal yellowing.	Safe for light tints, but still strong enough for under-layers.
Film strength / durability	Close to linseed; tougher than poppy.	With egg, forms a resilient, slightly flexible film ideal for panel work.	Reliable for alla prima or layered methods.
Handling feel	Smooth, less “drag” than linseed, but more body than poppy.	Egg-oil mix gives buttery, quick-setting strokes that sand easily after curing.	Great everyday brush feel; minimal brushstroke retention if desired.
Clean-up / health	Food-grade versions available; same spontaneous-combustion caution.	–	Pleasant nutty odor; hypo-allergenic relative to linseed.

When to pick it

• You want a compromise: slower and paler than linseed but tougher than poppy.

• Making historical egg-tempera-grassa layers that transition smoothly to straight oil glazes.

---

3. Lavender Retouch-Varnish

(Usually spike-lavender solvent + dammar resin in ~20% solution; marketed by Natural Pigments, Chelsea Classic, etc.)

Aspect	Oil-painting use	Egg-tempera use	Key take-aways
Purpose	(a) Temporary “in-progress” varnish that re-saturates sunken/dry areas; (b) fast-flash solvent-rich medium for lean glazing or couching.	Rarely used as a finish; but a light couch (wipe-on, wipe-off) can improve oil-over-tempera adhesion and value-matching when you resume work.	Think of it more like a gentle dammar retouch + aromatic solvent than a final varnish.
Dry-time	Surface flashes in minutes; dammar hardens overnight.	Same.	Can resume painting within the hour.
Color / gloss	Restores saturation; slight gloss that mimics final varnish look.	Same.	Good preview of final colors; avoid building thick coats (blooming risk).
Film strength / removability	Re-soluble in mild solvents (Turpentine, spike); safe to remove before final varnish.	Same.	Must be over-varnished or removed after 6–12 months.
Handling feel	As a couch: makes surface slick, helps fine detail and wet-in-wet merges.	Helps unify absorbent tempera matte spots before oil glazes.	Use sparingly; excess resin in early layers can crack later.
Health / odor	Spike-lavender is less toxic than gum-turps; still use ventilation.	–	Florid scent; good alt for turpentine allergy.

When to pick it

• Reviving matte, “sunken-in” passages mid-project.

• Light couch to prevent dry-patch drag in next oil layer.

• Low-tox studio where turpentine is banned.

---

Practical Workflow Tips

1. Layering order (fat-over-lean)

   • Tempera panel → tempera-only layers → optional very lean egg-oil emulsion (walnut) → fully dry → couch with lavender retouch → oil glazes (walnut or poppy-rich) → final dammar or synthetic varnish after 6-12 months.

2. Mixing mediums

   • Simple glaze: 2 parts poppy (or walnut): 1 part spike-lavender retouch = ultra-smooth, slow-dry glaze that keeps color brilliant.

   • Alla prima modifier: Walnut oil + a drop of spike-lavender speeds flow without over-thinning with mineral spirits.

3. Avoid common pitfalls

   • Don’t bulk-replace linseed with poppy in thick under-paintings – risk of wrinkling.

   • Keep dammar-containing retouch layers thin; too much early resin can cause future cracking.

   • For egg-tempera panels, ensure complete carbonization (brittle snap when flexed) before any oil or varnish layer — usually 3–5 days in warm, dry air.

4. Clean-up

   • Walnut oil can double as a brush-washing step before soap and water—helps condition bristles.

   • Rags: store in a sealed, water-filled metal container to eliminate fire risk from oxidizing oils.

---

Bottom line

• Poppy oil = coolest whites and long open time; upper-layer specialist.

• Walnut oil = balanced workhorse; ideal for tempera-grassa and everyday glazing.

• Lavender retouch varnish = quick, aromatic solution for re-saturating or “couching” between sessions — great in solvent-sensitive studios.

Use each deliberately, keep films thin and “fat-over-lean,’ and these classic ingredients will add finesse (not headaches) to both oil-painting and mixed egg-tempera approaches.

In mid-January I led a workshop on how to paint with Egg Tempera. My workshop was hosted by The Collaboratory, an artist collective with a public space in Long Island City, NY.

Egg tempera painting is a venerable medium. Egg tempera provides a translucent paint, as juxtaposed with the transparency of water color or the opaque quality of oil painting.

The egg tempera workshop consisted of many parts. I offered a slide presentation showing a history of egg tempera painting. The slide presentation consists of pre-renaissance Italian painting and modern American painting. I also showed slides that I took recently of an exhibition at The Metropolitan Museum of Art called The Siena Show.

Next I showed the materials and tools I use to paint with egg tempera. I use raw pigments that I get from Kramers Pigments in New York City. I came prepared with an egg mixture to use as binder for the pigment. The binder consists of egg yolk, water and damar varnish.

I also prepared masonite boards coated with gesso, and I brought paper and canvas to use. Tools include paint brushes, palette knives, styrofoam palettes and drip-bottles.

I discussed how to handle the powder pigments safely. A demonstration was made how to mix and modulate the egg mixture with pigment and water to make paint, and how to apply the paint with the brush.

Once those subjects were complete the participants were free to try painting with egg tempera themselves. We had more than two hours to paint during the three hour workshop.

I personally enjoyed most that each participant introduced themselves and we all had a chance to talk amongst ourselves. I was pleasantly surprised to feel an immediate sense of community. It felt really good to paint along with a group of friends.

My hosts at The Collaboratory were happy with the event. They have invited me to return again in a few months.

I am interested to give more workshops and looking for additional venues in the greater New York City area. If you are interested to host a workshop please send me a message.

This morning I started my day by reading tutorials on my computer. I read an article that made me look through my recent prototype files for my Links and Buttons project.

I had forgotten about the Links and Buttons project. I did lots of research. I want to write about links and buttons.

In March I delved into a deep dive into my WordPress CSS code and typography. My work on my code base required intense research and consistent concentration. The typography refactor project took way longer than expected.

Long projects affect my connection to other projects. I’ve lost the thread of other work that I was doing. Now I need to pick up the threads of previous projects.

I’ve written many articles recently. I had a nagging feeling that I wrote an article that I lost, or that I wanted to write.

A description I found embedded into the Links and Buttons prototype is the kernel of my article.

Links and buttons may look the same but they are different. Buttons connect to JavaScript functions. Links go somewhere.

A key interest I have for links and buttons has to do with CSS attributes and selectors. I used data attributes in my prototype to make variations of the links and buttons.

I opened more tutorials to study. I also dug into Aria a little more. I am thinking of revisiting the project to add aria labels for the links. From what I have read a simple “ID” is enough of a label for aria and CSS selectors.

I discovered many other prototype projects in my 2024 Prototype folder. The other prototypes have to do with color, scrolling behavior, and animation. I plan to combine elements of these projects to redesign parts of my website.

These prototypes are the components that I use to build websites for clients.

I am working on creating a presentation to teach how to set up an Eleventy project. I was testing the course to decide how to include styles. I need to write a purpose statement to introduce the presentation. My goal is to keep the presentation to 40 minutes.

Another project is a HTML portfolio that I will print as a PDF. I intend to use it for self-promotion and project search. I have many work samples to add.

At the end of the March typography refactor project I published my article. There are two more articles to edit and publish. I want to get these done and out. I am eager to pick up work on my other projects. I am putting myself out to the world looking for paid projects where I can offer my design expertise.

Last night I completed a complex revision of the typography for my WordPress Blog. Today I posted the new CSS and assets to my server. It worked. Beautiful. I edited an article and published it. Publishing is always a victory.

My typographical odyssey begins

Revising my stylesheet took over a month. The project started when I wanted to transfer an article from my Eleventy blog to my WordPress blog. A slight typographical oddity caused me to discover that my source fonts had changed.

I used fonts hosted on Google Fonts. I discovered that the static Open Sans Google font has changed to be a variable font. I needed to update my fonts.

I decided to download the new variable font versions and to host them on my local server.

One reason to host fonts locally is to comply with GDPR privacy laws. GDPR laws protect European users from tracking. Marketers and hackers can track data from fonts loaded on Google’s servers.

I’ve also found that connecting to external assets can cause problems.

Recently I looked at the code of an old client’s website. I found that years ago I had connected to a CDN for Twitter Bootstrap version 2.5. Twitter Bootstrap removed the code from the CDN. That broke my client’s website.

So I want all assets to be local to protect any website I am working on from any unanticipated outside changes.

My objectives were to:
A. Convert to variable fonts
B. Host fonts locally

Easypeasy. Not so easy. I proceeded to go on an odyssey of many rabbit-holes and gotchas.

Rabbit hole – Getting variable fonts

Working through typography tutorials I found rumors of an Ubuntu variable font. A developer test demonstrated an Ubuntu variable font example. I downloaded the font from the tutorial but I couldn’t get it to work. I didn’t know the right name to use to link to the font.

Research showed that Ubuntu is a framework for Linux. The Ubuntu framework homepage includes a page demonstrating the variable Ubuntu font.

I looked at the Ubuntu page source code and found links to a CDN host. I downloaded the fonts from the CDN. Then I found proper naming for Ubuntu variable fonts on Github.
I was able to download the font, copy Ubuntu’s font naming, and successfully load and test the font. Great.

Meanwhile I had many other details to tackle. I read more tutorials about linking fonts to websites. Previously I linked to Google fonts in the head section of my HTML page. To host locally I need to use @font-face declarations at the top of my CSS.

Rabbit hole – System fonts and font fallbacks

A popular new typography method is to load system fonts as a backup. The idea of system-ui fonts is to link to fonts that are on any system. However, system fonts do not reflect the font styles I use. I added a list of system fonts to a reset at the top of my cascade. System fonts are generic and dull. I hope I won’t need them.

An older method of font fallbacks is to have a “font-stack” of fonts to load if the primary fonts are unavailable. The purpose of choosing fallback fonts is that they will look similar to my font styles.

I selected my font-stack based on what fonts are on computers, based on current software. My old 2016 font stack was out of date. I selected a new series of fonts to match the style of my headline font.

My font-stack list starts with a custom property. Then I include my font in case the custom property does not work. Finally I include a list of similar fonts that potentially are on the user’s computers. If none of that works the system-ui fonts will load from the reset.

Rabbit hole – Code debt and synchronized code bases

Updating fonts required revisions to the stylesheet. My WordPress CSS matches my website more or less. I converted old SASS values to custom properties and removed old proprietary declarations.

Rabbit hole – Connecting fonts in WordPress

I tried to load the local font paths into my WordPress functions php. I failed. Most WordPress tutorials only show how to link to Google fonts. Few show a clear link to loading local fonts. WordPress tutorials are junk to read. Also, WordPress is changing into a creepy framework. It is not a developer friendly space anymore. I decided to load the new fonts through CSS.

Rabbit hole – Google Gotcha

While working I discovered that the Open Sans fonts were not loading. Google provides the ability to download variable fonts but the fonts are in .ttf format. Variable fonts need to be in .woff2 format to work. Following a tip from Henry Desroches, I found an application on Github to convert fonts. I installed it on my computer and converted the Open Sans font via the terminal.

Now the variable fonts work as expected. I’ve made a major update to both my WordPress and my website.

Part I: The Refactoring Sprint begins

I am now midway through a refactoring project. At this moment the refactor is breaking. I will fix it but this is a good moment to step back and consider where I am at and what I am doing.

This project started when I wanted to post an article to my WordPress blog. The article already exists on my Eleventy blog.

The article includes two definitions within a blockquote. CSS definitions have a headline label and the definition text.

The Eleventy blog has its own design system and style sheet. I have no CSS styles to put headline labels or definitions into a blockquote in my WordPress theme. This is a small, unusual variation.

While writing CSS to add styles I found that my font’s source has changed. The static Google fonts I use have become variable fonts.

This triggered a larger project refactoring my typography. The font change required research and testing. The required deep-dive into typography research is a story unto itself.

For the moment I am in the implementation stage. I am digging into concerns way beyond adding a headline label into a blockquote.

Part II: Looking back – How the journey began

I initially designed and built my website in 2004, in the early days of CSS. Recently I looked at The Wayback Machine and found a partial reconstruction of what it used to look like.

When I started with web design I liked that I could simply type code. I proudly learned to code using SimpleText.

Some of the design DNA from the original website remains. Periodically I have redeveloped the website. HTML5 and CSS3 came and responsive design took hold. I refactored.

I switched from using SimpleText to writing code using the SublimeText app. I added SASS to my design process. I refactored.

I learned to break my website into templates using Gulp and Handlebars. I refactored.

I added a WordPress blog to the website. My WordPress theme is based on my website design. I refactored the code base for WordPress using SASS.

Nowadays I use VSCode, but I also still use TextEdit to code. Often I find it is easier to open a file from a folder and work.

NPM modules and the Gulp build often need updates for both systems.

Part III: Looking where my feet are – Consolidating disparate design systems

I have two separate front-end design systems. My website is static HTML generated by Handlebars templates. I use a Gulp configuration. The WordPress theme has its own style sheet. The style sheets are separate but similar. The WordPress CSS imitates the style and design of the static website.

But the refactoring of each stylesheet has become out of sync. I am now comparing the SASS files between the Handlebars and WordPress systems. I seek to unify the code as much as possible.

Long ago I converted fonts and colors to SASS values. With the advent of CSS custom properties I switched. I converted the SASS values on the website to custom properties.

Changing fonts has triggered a larger refactoring sprint. Part of this WordPress refactor also includes exchanging SASS values for custom properties. I am comparing the two build systems, working to homogenize the code bases. Later I will also update the fonts in the website codebase.

This may seem crazy. But it is a great example of how small tasks often lead to finding problems that need correction. Taking care of details and delving into accumulated technical debt ultimately strengthens the design.

Part IV: Looking ahead from the summit

Looking ahead, there will be further redesign sprints for both design systems. The WordPress theme is now dated. The theme is built using PHP. The layout and architecture is brittle and no longer serves my needs.

WordPress has changed from strict PHP to a block-design system. Recently I built a custom WordPress theme for a client. Part of that project entailed adding CSS properties and values into a JSON format.

To modernize my WordPress I will need to convert my CSS into JSON format. How will that affect my intention to unify the two design systems? I do not know. Maybe I will abandon WordPress for Eleventy or another system.

It is important to keep codebases simple. Today there is a vast wave of change sweeping design and development. I am growing with it.

I look back proudly at my history of periodic refactoring sprints. I see where my feet are at today and where I will be refactoring again in the future. This is what it means to have a living design system.

Part of presenting a living Internet brand includes progressive enhancement. I seek to find clients who appreciate sustained website maintenance.

Build Systems
Build systems are programs that transform source code written by engineers into executable programs that can be read by machines.

Design Systems
A design system is a collection of reusable components and clear standards intended to manage design at scale using components and patterns to build any number of applications.

Many times I’ve written that I am good at design at the display layer. “Display layer design” does not appear in many job descriptions. What does display layer design mean?
What I’m saying is that I am good at and care about CSS. I understand the CSS cascade. My combined CSS and HTML “layers” of website design are semantic and well formed.

I’ve built a library of component prototypes. I organize my CSS into SASS files so that I can quickly target or grab elements or components.

My semantic, organized code enhances my client website’s SEO ranking. Combined with good content, I’ve placed client websites on page one of Google. Many for many years.

I really care about CSS. I spend lots of time on CSS research and development. The last two or five years has seen an incredible surge in new CSS elements, values and declaration patterns. The new CSS properties are exciting. The bottom-line news for hiring managers is that “you might not need React for that”.

Creative managers recognize the importance of design systems. Design systems control and enhance company brand development and cohesion. Many popular technologies exist to abstract and document design systems. But where the design system rubber really hits the road is at the CSS display layer.

Build Systems

Part of programming and design is creating the tools to use while coding. I have many “build systems”, constructed in Node, that I use or experiment with. To build my code I use various build systems that compile SASS, PostCSS, and JavaScript. I use templates to break HTML pages into components. The components compile with data using JavaScript or PHP.

Recently I updated my OpenProps ShortStack build system. I also installed a CSS design system by Andy Bell called “CSS Project Boilerplate”. CSS Project Boilerplate combines CUBE methodology with Tailwind.

OpenProps Design System

OpenProps is a design system by Adam Argyle. OpenProps breaks CSS elements and declarations down into elemental custom properties. Custom properties are equivalent to design tokens.

Adam Argyle offers a slew of build systems along with his OpenProps design system library. A variety of build systems are available. Adam’s build systems combine OpenProps with React, or Vue, or Vite, or PHP. I happen to like ShortStack, which uses Rollup, because it is simple. I focus mainly on CSS and HTML design.

The ShortStack build on Adam’s StackBlitz Collections site is out of date. I fixed the problem. Rollup 3 and the rollup-terser-plugin were breaking the build system.

Adam Argyle installs his OpenProps build systems using an NPM module with minified CSS. I inserted the un-minified CSS src files from Adam Argyle’s OpenProps Github repo into my fork. They are organized by category. That way I am able to read the CSS while I work.

I posted my modified ShortStack OpenProps to my Github page.

Now that I have it working I am exploring the abundance of custom properties that Adam has put together. It is an exhaustive array.

I will build webpages and prototypes using OpenProps. I plan to learn from Adam’s design system. I will incorporate some of it into my own. Some of Adam’s custom property names are verbose. I prefer short names.

Andy Bell’s CSS Project Boilerplate

Andy Bell published an article recently. The article, A CSS project boilerplate, introduces his build system for CSS. Andy Bell, like Adam Argyle, is an important design maven. I am interested in anything he does. I downloaded Andy Bell’s boilerplate, installed and tested it.

Some interesting and surprising facts about Andy Bell’s CSS Project Boilerplate system:

First, Andy Bell is including a subset of Tailwind. Sacrilege! Andy says that he has built a JavaScript configuration that weeds out most of the Tailwind code. Actually what I see is a rather small amount of CSS with some few custom properties. I may not have the Tailwind portion working yet.

Second, The CSS Project Boilerplate has CSS declaration patterns derived from his CUBE design methodology. The code is well documented with comments.

Andy Bell and Heydon Pickering have co-published a website called EveryLayout. It consists of a series of CSS and HTML component patterns.

So Andy’s CSS Project Boilerplate consists of a subset of Tailwind in service to his CUBE methodology. It is documented with excerpts from Every Layout. Very cool.

Andy Bell’s CSS Project Boilerplate build system only processes CSS. I plan to add NPM module functions to copy and post HTML files to the distribution folder.

I am still exploring Andy Bell’s CSS Project Boilerplate. I see the CUBE styles exported but not the Tailwind styles. The Tailwind styles are in JSON. I may need to work on the configuration.

In parallel with working on the CSS Project Boilerplate, I’ve happened upon numerous articles about Tailwind. Tailwind, although popular with JavaScript developers, is controversial. I will explore issues with Tailwind in a future article.

Other popular design system libraries include Bootstrap and Material Design. Major companies such as Salesforce and governments including the UK and the US have their own branded design systems.

I am keen to explore and familiarize myself with others while I build and refine my own.

I am eager to share what I’ve learned this year. I’d love to have a community to discuss programming and web development.

2022 has introduced some earth-moving developments in web production. It is hard to keep it linear. There is lots going on. This is only my own partial list. But I will start with a list.

There are many other things that belong on the 2022 list. This is only my little world. People are moving toward Next.js from React for instance.

Three sea-change movements are:
The plethora of new CSS declarations, Figma, and Github.

Github has come into its own. Now owned by Microsoft, Github is well integrated with VS Code. It is now possible to work within Github. Github has become the crossroads between development platforms.

Last summer I watched a portion of the ViteConf Keynote Presentations on YouTube. This Keynote Presentation by StackBlitz CodeFlow (video Start time 2:15:17) blew me away. Stop reading this and watch this video now.

I signed up with StackBlitz right away. Using StackBlitz CodeFlow I am able to launch any public Github repo in my browser and make edits. I save my edits as a push into my Github repo. I can then merge changes and pull changes to my local build. With StackBlitz CodeFlow I am able to edit client repos without needing to install an entire development build on my local server.

Github is also offering its own services to work within a browser environment. WordPress is rolling out a similar capability to work on WordPress themes. Figma is an exploding community. The holy grail of being able to draw pictures of websites and export it as code (across Github) has arrived.

StackBlitz Codeflow uses Vite. The same developer who builds Vue builds Vite. Vite 4.0 is now released. It utilizes Rollup.js 3.0, also a new upgrade.

Jumping over to CSS:
There are lots of new CSS syntax and declarations available. These new declarations will influence how developers organize and write the cascade. There are many end-of-year lists about new CSS out now. One design package that I found this summer is Open-Props.style, by Adam Argyle. Adam Argyle is a presenter at CSS conferences. Find his videos on YouTube. He also has a Discord that I follow.

OpenProps uses CSS custom properties and new CSS declarations, such as the where() property, to set basic styles and organize the cascade.

I worked on updating my Gulp build system that I use for my WordPress. Many NPM modules were out of date. Node has depreciated the code format known as CommonJS. Not all NPM modules use the new ES module syntax. Also, Dart SASS has now surpassed and replaced LibSass in Node NPM.

SASS cannot keep pace with all of the new CSS.

I found that in order to use the newest CSS declarations it is necessary to implement PostCSS. PostCSS has been available for years, mostly used to add custom browser prefixes. PostCSS has hundreds of plugins. The PostCSS-cli adds new CSS via third-party apps called Browserslist and Can-I-Use.

Digging into all this, I have built many build systems. I built a Gulp revision; a NPM/PostCSS build system; a PostCSS with Rollup system; and a system that compiles SASS directly from Node NPM. While wading through tutorials, I found a build system by Adam Argyle called “ShortStack”. I had trouble installing it until I updated Rollup from version 2.0 to the brand-new Rollup 3.0.

Adam Argyle has published a page featuring a variety of development builds using Vite and StackBlitz Codeflow. (He added ShortStack to the page after I wrote to him). It includes a basic build for Vue and OpenProps, for example. See it here: https://stackblitz.com/@argyleink/collections/open-props;

Definitely look at this page. Each card features a Stackblitz link to a full working repo. You can edit, clone to Github, or install to your local server. Look at this list:

 

Even if you are not interested in using Open-Props.style, all these repos are ready to clone and go.

Earlier this year I began an implementation of Eleventy.js. Eleventy, also referred to as 11ty, is a JAMstack build tool similar to Jekyll except that it is JavaScript instead of Ruby. I also compare it to my experience with Gulp and Handlebars. Eleventy has a growing community. It is possible to publish an Eleventy blog housed on Github to Netlify for free.

I found this video by Kevin Powell, Turn static HTML/CSS into a blog with CMS using the JAMStack, which helped. I have a simple Eleventy blog published to Netlify.

My personal design system consists of many SASS partials that I have used to build many websites. I am updating my design system to use new CSS declarations, patterns, and syntax. I will refer to Open-Props and other systems. I will even look at Bootstrap.

I enjoy building in code. I have a library of components that I built. I can easily modify their theme elements to customize for branding.

However, Figma is much in demand. Figma has exploded in popularity and has a huge community and also a community of open source and premium plugins. Figma was eating Adobe’s lunch so bad that this summer Adobe bought Figma for $20 Billion dollars.

The ability to transfer design systems from Figma across Github to development code is huge. Sometimes it will be smarter to design in Figma and export code from Figma and modify it. I am also working to understand and use Storybook. Now Storybook has released version 7.0. It plays well with Vite.

Artificial Intelligence (AI) is blowing through the industry like a hurricane. There are apps to make illustrations from text prompts now. Another app can produce fairly average content on almost any subject “in the style of” so-and-so. Github is rolling out a co-pilot system. It acts as a pair-programmer, offering debugging tips as you work. I am bookmarking new new things to study everyday.

Currently I am working on many projects.
One project is a front-end design using parallax and animation.
The second is a color app. I need to export color data from an API as JSON and import it into a templating system. I want to show the colors and display various codes as text. I may build it in CSS/HTML or in SVG
A third is my revised build system, ready to use when I get my next client.

Recently I took a deep dive into learning the in’s and out’s of a JavaScript program named Eleventy.

The first iteration of the Eleventy program was first published in late December, 2017. A certain core of web mavens on Twitter, whom I follow, noticed Eleventy and began to talk about it. I put a sustained effort into building a working Eleventy jamstack system.

Eleventy is a JavaScript method of templating websites. This type of JavaScript rendering is called jamstack. Jamstack refers to a component architecture that includes Javascript, APIs, and Markup. Programs like Eleventy stage static pages on the server, ready to send. Eleventy generates static HTML page output that can include functions and data.

As a comparison, WordPress compiles templates on the server and then builds pages on the client. WordPress, built with php, is not JavaScript. WordPress code can be bulky ugly and slow. Because WordPress crosses the Internet to build pages, WordPress has increased security risks.

A previous static website builder named Jekyll, built in Ruby, launched in 2008. It became popular as a way to build websites housed on Github, a social media website for sharing programs and code.

Developers sought ways to compile website templates using JavaScript instead. JavaScript templating gained interest many years ago. Programs like Mustache and Handlebars led the way. Popular modern frameworks such as Angular and React incorporate JavaScript templating.

I build my website using Gulp and Handlebars. Working with Eleventy feels similar to working with Gulp and Handlebars. Developers are doing amazing work with Eleventy.

Eleventy uses a plugin system that enables connection to programs such as React, Vue and APIs. People continue to build open-source components and APIs to add functionality.

Eleventy’s flexibility allows development of very large enterprise websites with complete design systems.

Doing work that I love reflects my passion.

I am attracted to this kind of web development. I like to know the code and have control over the means of production.

I like building complete website structures. Template scaffolding is valuable. It fits with building simple, effective CSS cascades and concise writing.

Eleventy is not on the radar of corporate recruiters. I have only seen one job description asking for Eleventy skills. Insider developers know about Eleventy and are using it.

Recently two different people spoke to me about building websites using Squarespace. It’s been awhile since anyone has mentioned the subscription CMS platform and it was surprising to be asked about the product on two occasions.

Squarespace gained market share and popularity by advertising on NPR and public radio stations like WNYC*.

Working to design within the Squarespace platform is like trying to paint a bedroom through the door keyhole. The CSS can only be accessed through Squarespace’s proprietary user interface. The proprietary user interface is kept locked away because Squarespace charges subscription-based fees and the way to charge the fee is to insert a roadblock to thwart web development.

Many Internet-based services such as Squarespace are designed to insert themselves into the service in order to extract money from the transaction or work. A common example of that business model is LinkedIn, where users upload their personal contacts. LinkedIn’s business model is to make it difficult for users to access their own data unless a fee is paid. Trolls build bridges and extract payment to cross. Working with Squarespace is a little like that.

The first person needed to publish sales content for a third party startup. Using an off-the-shelf Squarespace template might be good enough for this purpose. Editing the front-end design or maintaining the website are not concerns. The website will probably not need to exist in six months.

The second person who asked about Squarespace already has a mammoth website built using WordPress. The WordPress website is the primary marketing hub for the client’s entire business.

The WordPress website, built over a fifteen year period, has rambling content, a lack of cohesive brand development and an unplanned site architecture. None of these faults require a technical solution.

The website utilizes multiple custom plugins and consists of many different types of content. It is hard to imagine porting the existing content successfully to Squarespace.

WordPress is utilized for some 25% of websites worldwide. WordPress has a wide and deep technical ecosystem; most of it is public sourced (free to use). WordPress website maintainers are able to access the website from within the user interface and from without, as long as access to the site host location is available.

If there is a strong need to redevelop the website, there are many much better options to use than Squarespace. What the second client really needs is to invest in knowledgable web developers to maintain and develop the website. Lacking that, switching to Squarespace will not solve problems. It will increase them.

* Here’s a little marketing secret: If you have a mediocre Internet technology that you want to foist onto consumers be sure to advertise on public radio. Public radio stations are advertising hungry and will promote anything, without question or testing for quality; and listeners will suck it up, also without any further investigation.