Siegfried, deploy!

This time Steffen and Dominik reflect on coding custom designs and the challenges faced with writing CSS. To create a solid base stylesheet in combination with minimal styles for a website is an important starting point. However, it is challenging to create things by hand, interlinking layout and design, and maintaining components. Frameworks could be a solution, but they have a big disadvantage.

Highlights
00:00 Intro
02:53 Best way of coding custom designs
07:07 Challenges
12:50 Component Frameworks
14:39 Is writing HTML & CSS programming?
15:42 Design of interfaces (today)
18:42 Great Design = ruleset
20:45 Skillset of a frontend developer
26:29 Pros & Cons of CSS frameworks
30:34 Building up confidence
31:54 A good Schlusswort

Links
Tailwind CSS: https://tailwindcss.com/
Cube CSS: https://cube.fyi/
Andy Bell: https://buildexcellentwebsit.es/
Flynt Starter Theme: https://flyntwp.com/

More from Bleech
Blog Posts (WordPress Development)
Flynt (WordPress Starter Theme)
VRTs (Visual Tests for WordPress)
Siegfried, deploy! (YouTube Channel)

Data modeling is the process of creating a conceptual representation of your data. It's a crucial step in building effective databases and applications. In this episode we discuss why it is important to look at both aspects of data modeling: how data is structured and how it is presented in the user interface for those who work on the website.

Highlights
00:00 Intro
00:10 What is data modeling? 
03:09 Two perspectives on data modeling
04:11 From Waterfall to Agile
05:31 Challenge: Open Source Starter Theme + ACF Pro (paid)
09:03 ACF Pro is not easy to replace
10:40 The Fields API
14:50 Clone Field
17:40 Atlas Content Modeler
18:50 WP custom fields UX fails
19:55 Free alternatives to ACF Pro
22:13 Plugin Comparison for custom fields
25:25 Carbon fields
26:40 Custom fields and Gutenberg
27:36 Improve UI with data modeling

Links
Gutenberg: https://wordpress.org/gutenberg/
Flynt: https://flyntwp.com/
ACF Pro: https://www.advancedcustomfields.com/pro/
Atlas Content Modeler: https://github.com/wpengine/atlas-content-modeler
Compare WP: https://docs.google.com/spreadsheets/d/1mSqienVYxLopTFGLPK0lGCJst2knKzXDtLQRgwjeBN8/edit#gid=3
Carbon fields: https://carbonfields.net/

More from Bleech
Blog Posts (WordPress Development)
Flynt (WordPress Starter Theme)
VRTs (Visual Tests for WordPress)
Siegfried, deploy! (YouTube Channel)

In this episode we discuss web components and their potential to revolutionize the web. Web components have been around for a while and aim to provide a standardized way of authoring front-end JavaScript, but they never really took off due to the missing parts of the spec. We explore various types of web components, the issues with JavaScript, and the challenges in picking the right approach to create a web component.


Highlights
00:00 Intro
00:10 Revolutionary or dead?
04:30 Why it's not popular yet
06:15 61 ways - What's the difference?
07:37 What to do with custom elements?
10:10 Extending built-in elements
12:01 Browser Support
16:36 Example: relative-time
20:08 Benefits
25:13 Front-end JavaScript
26:52 Customize an element
27:47 Can you expose APIs?
30:44 A step to bring Frontend and Backend together


Links
Flynt: https://flyntwp.com/
webcomponents.org: https://www.webcomponents.org/
Browser support: https://caniuse.com/?search=custom%20elements
Relative-time element: https://github.com/github/relative-time-element

More from Bleech
Blog Posts (WordPress Development)
Flynt (WordPress Starter Theme)
VRTs (Visual Tests for WordPress)
Siegfried, deploy! (YouTube Channel)

WordPress Starter Themes are important for custom WordPress web development. Above all, they put developer experience first and challenge the status quo of best practices. We discuss the differences between a developer starter theme and a multi-purpose theme, and why using a starter theme can give you a big head start in your custom theme development to achieve better results.

Highlights
0:00 Intro
2:44 Multipurpose vs. Starter Themes
5:21 Benefits of Starter Themes
8:34 Approaches to Starter Themes
16:03 Popular Starter Themes
17:44 What makes a good Starter Theme?
20:40 The future of themes
24:13 Why we build Flynt
26:52 Gutenberg redefined themes
31:06 Challenging the status quo
33:37 Better developer experiences

Links
Flynt: https://flyntwp.com/
underscores: https://underscores.me/
Sage: https://roots.io/sage/
Episode w/ Jared Novack (Timber): https://youtu.be/c3GlhhwpKRo
Popular Starter Themes: https://github.com/topics/wordpress-starter-theme
Episode about Gutenberg: https://youtu.be/m-nLuvchssg
WordPress block hydration experiments: https://github.com/WordPress/block-hydration-experiments/discussions/131

More from Bleech
Blog Posts (WordPress Development)
Flynt (WordPress Starter Theme)
VRTs (Visual Tests for WordPress)
Siegfried, deploy! (YouTube Channel)

It's still a complicated task to optimize images for different devices, screen sizes, and pixel densities. In this episode we discuss the challenges of creating perfect responsive images and explore various techniques that can help optimize images.

Highlights
00:00 Intro
00:50 Why is it so hard?
03:56 What do you need?
05:04 The sizes attribute explained
09:39 Library: lazysizes
13:22 Couldn't browsers do better?
16:13 Idea: better progressive images
19:19 Computing power and bandwidth
20:55 Focus on mobile PageSpeed
23:13 WordPress default sizes attribute
27:00 The Shrinkening
28:08 Fluid layouts & clamp
29:28 WordPress max image size
31:43 Good enough vs. perfect
32:50 Fetchpriority=high
34:41 The picture element
37:09 Background images

Links
Lazy Sizes: https://github.com/aFarkas/lazysizes
Flynt Starter Theme: https://flyntwp.com/
PageSpeed Module: https://developers.google.com/speed/pagespeed/module
Add "auto sizes" for lazy-loaded images: https://github.com/whatwg/html/issues/4654
Optimizing The Image Element LCP: https://www.smashingmagazine.com/2023/01/optimizing-image-element-lcp/
WordPress max image size: https://developer.wordpress.org/reference/hooks/big_image_size_threshold/
WordPress default sizes: https://developer.wordpress.org/apis/responsive-images/#browser-side

More from Bleech
Blog Posts (WordPress Development)
Flynt (WordPress Starter Theme)
VRTs (Visual Tests for WordPress)
Siegfried, deploy! (YouTube Channel)

Jared is the author of Timber, a powerful development library for WordPress with more than 1 million downloads. Jared started his career working at newspapers. He and his partners saw the importance of the backend user experience in digital publications and started using WordPress to develop custom built WordPress interfaces for large-scale websites. What does such an interface look like? And where does he see the future of content management and WordPress? Find out in our conversation.

Highlights
0:00 Intro
1:09 WordPress is great, but the loop isn't
2:23 Timber's origins
3:57 Jared's background
8:43 Editor empathy × developer experience
15:06 WordPress usability studies
17:36 Gutenberg revolution vs. evolution
25:09 Timber 2.0
27:51 Getting out of the way
32:59 Consistency of WordPress
35:49 Building platforms that last
40:18 Structured data in WordPress
47:20 Large scale CMS interfaces

Links
Timber: https://upstatement.com/timber/
Upstatement: https://upstatement.com/
Flynt: https://flyntwp.com/
Heroku: https://www.heroku.com/
Roots: https://roots.io/
ACF: https://www.advancedcustomfields.com/
Lumberjack: https://lumberjack.rareloop.com/
make: https://www.make.com/
Zapier: https://zapier.com/
Airtable: https://www.airtable.com/

More from Bleech
Blog Posts (WordPress Development)
Flynt (WordPress Starter Theme)
VRTs (Visual Tests for WordPress)
Siegfried, deploy! (YouTube Channel)

Let's dive into the hotly-anticipated arrival of container queries! We’ll discuss whether it’s worth jumping on them now, what strategies you can follow, and the potential pitfalls to watch out for, including limited browser support, increased design and development complexity, and the potential performance issues. That said, let’s not be afraid, but embrace the future!

Highlights
00:00 Intro
05:00 Defining a container query
07:18 Use cases
09:20 Built-in fallback
12:09 ACF Blocks in Gutenberg
14:04 New length units
17:11 Naming and nesting
25:55 Should we use them now?
32:58 Progressive enhancement ftw

Links
Browser support: https://caniuse.com/css-container-queries
Polyfill: https://github.com/GoogleChromeLabs/container-query-polyfill
WP Podcasts: https://wppodcasts.com/
Nested container queries: https://developer.mozilla.org/en-US/docs/Web/CSS/@container#nested_container_queries
Gutenberg: https://wordpress.org/gutenberg/
Flynt: https://flyntwp.com/
Planning Poker: https://www.planningpoker.net/ 

More from Bleech
Blog Posts (WordPress Development)
Flynt (WordPress Starter Theme)
VRTs (Visual Tests for WordPress)
Siegfried, deploy! (YouTube Channel)

JavaScript can add significant weight to a website and is hard to optimize. JavaScript hydration concepts can significantly optimize JavaScript loading, parsing, and execution. We talk about the various techniques and how we implemented a custom islands architecture into Flynt, our WordPress Starter Theme for developers.

Highlights
00:00 Intro
00:38 What is JavaScript Hydration?
02:58 Strategies of Hydration
04:41 What is so interesting about it?
06:56 Making JavaScript execution effective
11:32 Full hydration
12:57 Biggest improvement with islands
18:18 Load JS on current viewport
22:25 Three approaches + 1
23:38 Inspiration from libraries
25:43 Cut down JS as much as possible
30:22 You need a wrapper
31:32 Amazing results

Links
Flynt: https://flyntwp.com/
webpack: https://webpack.js.org/
astro: https://astro.build/
is-land: https://is-land.11ty.dev/
qsa-observer: https://github.com/WebReflection/qsa-observer

More from Bleech
Blog Posts (WordPress Development)
Flynt (WordPress Starter Theme)
VRTs (Visual Tests for WordPress)
Siegfried, deploy! (YouTube Channel)

As a WordPress agency, we have decided not to use Gutenberg, the block editor for WordPress. When it was first introduced, we were excited about the potential improvements it offered over the classic editor, but after trying it out, we found that it had several major issues that prevent us from using it for our clients’ websites.

The user interface is less intuitive and the development experience is more difficult and less efficient than our current approach. We believe that there are better options available for our clients and for our development process.


Highlights
00:00 Intro
00:28 Potential of Gutenberg
03:11 Fundamental issues of Gutenberg
04:14 Issue 1: User Interface is not made for end users
19:15 Comeback of the webmaster?
22:13 Issue 2: Breaking design is too easy / HTML rendering
30:14 Experience with Gutenberg blocks based on ACF
34:07 Is Gutenberg worth using it?
34:36 Gutenberg works well for long copy editing
38:15 Issue 3: Fast development without central documentation
42:21 Should we use it? Not yet


Links
Gutenberg: https://wordpress.org/gutenberg/
Flynt: https://flyntwp.com/
ACF Pro: https://www.advancedcustomfields.com/pro/
Elementor: https://elementor.com/
Beaver Builder: https://www.wpbeaverbuilder.com/
CSS Container Queries: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries
Content-only editing in Gutenberg: https://richtabor.com/content-only-editing/
10up Gutenberg Best Practices: https://gutenberg.10up.com/

More from Bleech
Blog Posts (WordPress Development)
Flynt (WordPress Starter Theme)
VRTs (Visual Tests for WordPress)
Siegfried, deploy! (YouTube Channel)

Everyone is talking about ChatGPT right now, just like us. What are our first experiences with the AI tool? How will it affect coding challenges in the developer application process? And how do we evaluate the relevance of AI tools for the future of coding?

Highlights
00:00 Intro
00:38 First experiences
03:30 Where does ChatGPT get the data from?
04:50 AI tools transform essential skills
08:02 Evaluating given information
11:05 Are specialized AI tools better?
17:20 Impact of AI on job interviews for developers
20:31 Will Copilot or ChatGPT become the new Stack Overflow?
23:43 Should you use ChatGPT in coding challenges?
27:50 Future meaning for coding?

Links
ChatGPT: https://openai.com/blog/chatgpt/
Github Copilot: https://github.com/features/copilot

More from Bleech
Blog Posts (WordPress Development)
Flynt (WordPress Starter Theme)
VRTs (Visual Tests for WordPress)
Siegfried, deploy! (YouTube Channel)