Siegfried, deploy!

Join Steffen and Dominik as they dive deep into the world of WordPress content synchronization. Discover the best strategies and techniques to seamlessly migrate and synchronize your WordPress database and uploads across various environments, including local, development, staging, and production.

Highlights
00:00 Intro
01:13 Synch #1: to fix bugs
01:52 Synch #2: to launch websites
02:20 Synch #3: to collaborate in development
03:28 WordPress specialty: URLs in the database
07:34 Tools to synch content
10:47 Cloning from the dev server
18:35 Migrating from dev to production
22:26 Replacing URLs in the WP database
28:06 Synching from production to dev
30:43 Anonymizing personal data
33:05 How often we synch content
35:20 Database-less WordPress

Links
WP Migrate DB Pro: https://deliciousbrains.com/wp-migrate-db-pro/
Duplicator: https://duplicator.com/
ManageWP: https://managewp.com/
rsync: https://rsync.samba.org/
WP CLI: https://wp-cli.org/
faker library: https://fakerjs.dev/

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

In todays episode Steffen and Dominik explore different ways to integrate WordPress into existing websites, particularly for blogs, magazines, and landing pages. You'll learn about methods like integrator templates, reverse proxies and others.

Highlights
00:00 Intro
01:08 Method 1 - Integrator template 
6:48 Method 2 - Reverse Proxy
09:46 Challenges with Reverse Proxies
14:05 Method 3 - Rebuilding
16:46 Method 4 - Module Federation
20:44 Method 5 - Content Only
25:39 Combine multiple approaches

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

In this episode Steffen and Dominik are discussing headless and static WordPress, explaining the motivations behind using a static site generator over a traditional PHP server. While they acknowledge the hype around headless systems, they emphasizes that the need for static sites is often more important and that there are tools available, both WordPress-specific and general, to generate static sites.

Highlights
00:00 Intro
01:11 Static WordPress
03:50 Headless WordPress
06:16 Making a WordPress website static
09:46 Concept & advantages of a headless website
12:40 Data modeling in WordPress
16:11 Challenges with headless
18:55 Advantages of headless
33:38 Should you go headless?

Links
Simply Static: https://simplystatic.com/
GraphQL: https://graphql.org/
Andy Bell - The loud minority: https://andy-bell.co.uk/the-extremely-loud-minority/
Contentful: https://www.contentful.com/
Next.js: https://nextjs.org/
Astro: https://astro.build/
WP Engine Atlas: https://wpengine.com/headless-wordpress/
Faust.js: https://faustjs.org/
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)

In today’s episode Steffen and Dominik are discussing content delivery networks (CDNs), with a focus on Cloudflare. CDNs are used to distribute static content to users more quickly and efficiently. However managing content on a CDN can be complicated, especially when it comes to caching and ensuring that content is consistent across different servers. In this episode you'll learn about some best practices for dealing with these issues.

Highlights
00:00 Intro
00:15 What is a CDN?
02:42 How to use a CDN
05:17 Pros and Cons of Push vs. Pull
08:16 Prevent inconsistent assets
14:10 Types of Caching
17:32 Full-Page Caching
18:51 What's special about Cloudflare
21:55 Does every website need a CDN?
25:12 GDPR compliance
27:53 Why we use Cloudflare
31:36 Pro tip

Links
Cloudflare: https://www.cloudflare.com/
Cloudflare Plugin: https://wordpress.org/plugins/wp-cloudflare-page-cache/

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

In this episode Steffen and Dominik discuss different options for WordPress hosting, including dedicated WordPress hosting, managed PHP hosting, VPS or root server hosting. What are the pros and cons of each option? Learn what they recommend for those with high traffic WordPress websites or single instances.

Highlights
00:00 Intro
00:39 Hosting Options Overview
03:16 Dedicated WordPress Hosting
11:26 Managed PHP Hosting
20:19 VPS / Root Server Hosting
28:38 Docker & Kubernetes Hosting
37:02 Other Hosting
42:57 Our Recommendations
47:35 Your Experiences

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

Today Steffen and Dominik dive deep into the page speed factor of the Largest Contentful Paint (LCP). You'll learn how to optimize your website to achieve a fast LCP and which strategies work for flexible components. But with all the details, don't forget the basics of page speed optimization...

Highlights
00:00 Intro
00:10 What is LCP?
02:56 Typical largest elements
05:51 Reach fast LCP
09:03 How to handle video?
13:27 New Blackhat PageSpeed technique?
14:24 How to optimize LCP?
17:19 Strategies for flexible components
22:20 Font display strategy
28:42 First do the basics
32:52 Simplicity over Complexity

Links
Optimize LCP: https://web.dev/optimize-lcp/
Flynt Starter Theme: https://flyntwp.com/
lazysizes: https://github.com/aFarkas/lazysizes
fetchpriority="high": https://www.smashingmagazine.com/2023/01/optimizing-image-element-lcp/
Best practices for fonts: https://web.dev/font-best-practices/
LCP font optimization: https://pixelpoint.io/blog/advanced-web-font-optimization-techniques/
Fontaine (font fallback generator): https://github.com/danielroe/fontaine
Fontpie (font fallback generator): https://github.com/pixel-point/fontpie

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

Is WordPress secure? We get asked this question over and over again. The answer: WordPress websites are just as secure or insecure as any other website. Because most of the time, mistakes in the absolute basics are the reason for a website being hacked. In this podcast episode, Steffen and Dominik discuss what the weak points of a WordPress website are and how you can protect yourself against a hack.

Highlights
00:00 Intro
00:20 Is WordPress secure?
02:52 Risk: Plugins and themes
08:14 Growing interest in WP security
09:54 Risk: Passwords
12:03 Plugin whitelist
12:43 Other measures to prevent hacking
14:22 Security plugins vs. infrastructure security
16:31 Important basics
17:19 Why external hosting service?
18:54 DoS attack of client website
21:00 „Random“ WordPress hacks
22:06 Prevent saving private data in WP
25:31 Security Plugins for WP
29:11 Monitoring with Visual Regression Tests

Links
WP Scan: https://wpscan.com/wordpress-security-scanner
Patchstack: https://patchstack.com/
VRTs: https://bleech.de/en/products/visual-regression-tests/
More Security Tips: https://bleech.de/en/blog/protect-website-from-hackers/

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

In today's episode, Steffen and Dominik explore the pros and cons of deployment strategies for websites. What's the difference between continuous deployment and continuous integration? Which strategy is worth trying and which one should you consider leaving alone?

Highlights
00:00 Intro
00:13 What is continuous deployment
06:42 Buddy.works
08:46 Github Actions
10:50 Speed of Buddy
15:18 Docker
19:42 Managed Hosting
20:34 AWS
22:07 All-Inkl
25:39 Github Repo
27:58 Versioning website releases

Links
Continuous Deployments w/ GitHub Actions: https://css-tricks.com/continuous-deployments-for-wordpress-using-github-actions/
Buddy: https://buddy.works/
Github Actions: https://github.com/features/actions
all-inkl Hosting: https://all-inkl.com/PA4A94BC2F49CD0 (Affiliate Link)

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

In this episode, Steffen and Dominik discuss the concept of global and translatable options for WordPress websites. Components can have options that are either limited to where they are inserted, or that apply to all components of a certain type on the site, even for different languages. This concept makes it easier for developers and editors to maintain and manage websites.


Highlights
00:00 Intro
00:10 How global & translatable options work?
04:18 ACF Option pages
06:25 Use Cases
08:14 Standardize option pages
11:39 Downside of global options
13:00 Structuring options
14:14 Manage multiple languages with WPML
17:17 Translatable options
20:50 Going without ACF Pro
22:18 WP translation functionality
26:11 Localisation Feature of WordPress
31:37 More flexibility with Global and Translatable options

Links
Flynt Starter Theme: https://flyntwp.com/
ACF Option Pages: https://www.advancedcustomfields.com/resources/options-page/
WordPress Internationalization Functions: https://developer.wordpress.org/apis/internationalization/internationalization-functions/

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

In today's episode, we discuss the latest update to Google's Lighthouse tool. Version 10 introduces significant changes to the way Page Speed scores are calculated. We discuss the key features of the update and how they might affect website owners and developers.

Upon closer inspection, we spotted an important change that hasn't been announced. So stay tuned for the episode!

Highlights
00:00 Intro
00:10 What is Lighthouse?
01:26 What is new?
03:10 CLS metric
07:09 Why some scores will decrease
08:40 Using custom fonts
12:29 FOUC and FOUT
15:38 Rendering issues / Loading CSS
17:48 Back/forward Cache
20:43 Paste-preventing input
22:50 Scoring Calculator
25:34 Mobile device size
29:14 Mobile layout
30:50 Responsive images

Links
PageSpeed test: https://pagespeed.web.dev/
Announcement Blog Post: https://developer.chrome.com/blog/lighthouse-10-0/
GitHub Release: https://github.com/GoogleChrome/lighthouse/releases/tag/v10.0.0
Scoring Calculator: https://googlechrome.github.io/lighthouse/scorecalc/
Cumulative Layout Shift (CLS): https://web.dev/cls/
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)

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)