Our Podcast
Siegfried, deploy!
Dominik and Steffen are long-term friends, the founders of Bleech – and total nerds when it comes to websites. Always having the user in mind they critically question the status quo in web development. By trying out the latest technologies they improve common approaches or develop new ones. Listen to them when they discuss current developments in web technologies and learn more about their tools, techniques and their philosophy.
Listen on
Featured Episode
Rapid WordPress dev setups with wp-now
We've all been there – the mere thought of configuring a new development setup sends shivers down your spine. But what if you could bypass the hassle and jump straight into action? Meet wp-now: the instant WordPress setup wizard.
Highlights
00:00 wp-now == smart
00:37 Demo
02:17 Customization
03:10 First time install
04:03 wp-env vs. wp-now
05:06 This is huge!
Links
– WordPress Playground / wp-now: https://github.com/WordPress/playground-tools/tree/trunk/packages/wp-now
– Flynt (WordPress 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)
Previous Episodes
46 Episodes
-
PGlmcmFtZSB0aXRsZT0iV2h5IFBhc3NrZXlzIGFyZSB0aGUgZnV0dXJlIiB3aWR0aD0iMTEyMCIgaGVpZ2h0PSI2MzAiIGZyYW1lYm9yZGVyPSIwIiBhbGxvdz0iYWNjZWxlcm9tZXRlcjsgYXV0b3BsYXk7IGNsaXBib2FyZC13cml0ZTsgZW5jcnlwdGVkLW1lZGlhOyBneXJvc2NvcGU7IHBpY3R1cmUtaW4tcGljdHVyZTsgd2ViLXNoYXJlIiByZWZlcnJlcnBvbGljeT0ic3RyaWN0LW9yaWdpbi13aGVuLWNyb3NzLW9yaWdpbiIgYWxsb3dmdWxsc2NyZWVuIGRhdGEtc3JjPSJodHRwczovL3d3dy55b3V0dWJlLW5vY29va2llLmNvbS9lbWJlZC9hYVB2WnEyS3lURT9mZWF0dXJlPW9lbWJlZCZhbXA7bW9kZXN0YnJhbmRpbmc9MSZhbXA7YXV0b3BsYXk9MSZhbXA7cmVsPTAiPjwvaWZyYW1lPg==Why Passkeys are the future
The future is passwordless! Learn all about Passkeys, the technology set to replace traditional passwords. The best part?! You can start using them today! We'll show you how.
Highlights
00:00 Why passwords are bad
01:12 Demo: Passkey registration
02:05 The technology & security options
03:11 Multi-device compatibility
04:07 Demo: Passkey login
05:01 Sharing Passkeys
05:29 Business applications
06:09 How to use them today
Links
– Passkey Demo: https://www.passkeys.io/
– Passkey Directory: https://passkeys.directory/More from Bleech
Blog Posts (WordPress Development)
Flynt (WordPress Starter Theme)
VRTs (Visual Tests for WordPress)
Siegfried, deploy! (YouTube Channel) -
PGlmcmFtZSB0aXRsZT0iVGhlIHVsdGltYXRlIGltYWdlIG9wdGltaXphdGlvbiB0b29sIiB3aWR0aD0iMTEyMCIgaGVpZ2h0PSI2MzAiIGZyYW1lYm9yZGVyPSIwIiBhbGxvdz0iYWNjZWxlcm9tZXRlcjsgYXV0b3BsYXk7IGNsaXBib2FyZC13cml0ZTsgZW5jcnlwdGVkLW1lZGlhOyBneXJvc2NvcGU7IHBpY3R1cmUtaW4tcGljdHVyZTsgd2ViLXNoYXJlIiByZWZlcnJlcnBvbGljeT0ic3RyaWN0LW9yaWdpbi13aGVuLWNyb3NzLW9yaWdpbiIgYWxsb3dmdWxsc2NyZWVuIGRhdGEtc3JjPSJodHRwczovL3d3dy55b3V0dWJlLW5vY29va2llLmNvbS9lbWJlZC9ha0ExT2lNa19xOD9mZWF0dXJlPW9lbWJlZCZhbXA7bW9kZXN0YnJhbmRpbmc9MSZhbXA7YXV0b3BsYXk9MSZhbXA7cmVsPTAiPjwvaWZyYW1lPg==The only 3 tools you need for perfect image optimization
Want to serve the fastest loading images in the wild wild web? By the end of this episode, you'll be armed with Google-recommended tools and strategies that set you on a fast track to becoming an image optimization expert.
Highlights
00:00 Intro
00:41 The magic wand
01:46 The right image format
03:02 Going the extra mile
04:20 The right perspective
05:55 Mastering SVGs
07:20 The no-brainer tool
08:38 Conclusion
Links
– Squoosh: https://squoosh.app/
– SVGO: https://svgomg.net/
– ImageOptim: https://imageoptim.com/More from Bleech
Blog Posts (WordPress Development)
Flynt (WordPress Starter Theme)
VRTs (Visual Tests for WordPress)
Siegfried, deploy! (YouTube Channel) -
PGlmcmFtZSB0aXRsZT0iT3duIHlvdXIgYnVzaW5lc3MgaW50ZWxsaWdlbmNlIHJlcG9ydHMgd2l0aCBldmlkZW5jZS5kZXYiIHdpZHRoPSIxMTIwIiBoZWlnaHQ9IjYzMCIgZnJhbWVib3JkZXI9IjAiIGFsbG93PSJhY2NlbGVyb21ldGVyOyBhdXRvcGxheTsgY2xpcGJvYXJkLXdyaXRlOyBlbmNyeXB0ZWQtbWVkaWE7IGd5cm9zY29wZTsgcGljdHVyZS1pbi1waWN0dXJlOyB3ZWItc2hhcmUiIHJlZmVycmVycG9saWN5PSJzdHJpY3Qtb3JpZ2luLXdoZW4tY3Jvc3Mtb3JpZ2luIiBhbGxvd2Z1bGxzY3JlZW4gZGF0YS1zcmM9Imh0dHBzOi8vd3d3LnlvdXR1YmUtbm9jb29raWUuY29tL2VtYmVkL0ZERVV6RThLSm1vP2ZlYXR1cmU9b2VtYmVkJmFtcDttb2Rlc3RicmFuZGluZz0xJmFtcDthdXRvcGxheT0xJmFtcDtyZWw9MCI+PC9pZnJhbWU+Own your business intelligence reports with evidence.dev
Ever felt trapped by traditional BI tools? We did too. That's why we're thrilled to share our experience with evidence – a tool that lets you build business intelligence dashboards using good old SQL and Markdown.
Highlights
00:00 Introduction
00:48 Features and capabilities of evidence
01:31 Portability and open source nature of evidence
02:52 Examples and use cases
04:17 Component reference and data sources
05:35 Build process and deployment
06:04 Code examples and dynamic routes
07:08 Adding static information to dashboards
08:13 Intended use
Links
– Evidence Website: https://evidence.dev/
– Evidence Examples: https://evidence.dev/examples
– Evidence Docs: https://docs.evidence.dev/
– Markdown Basics: https://www.markdownguide.org/basic-syntax/
– SQL Tutorial: https://www.w3schools.com/sql/
– DuckDB: https://duckdb.org/More from Bleech
Blog Posts (WordPress Development)
Flynt (WordPress Starter Theme)
VRTs (Visual Tests for WordPress)
Siegfried, deploy! (YouTube Channel) -
PGlmcmFtZSB0aXRsZT0iUmVhbGl0eSBDaGVjazogVGhlIExpbWl0cyBvZiBWaWV3IFRyYW5zaXRpb25zIiB3aWR0aD0iMTEyMCIgaGVpZ2h0PSI2MzAiIGZyYW1lYm9yZGVyPSIwIiBhbGxvdz0iYWNjZWxlcm9tZXRlcjsgYXV0b3BsYXk7IGNsaXBib2FyZC13cml0ZTsgZW5jcnlwdGVkLW1lZGlhOyBneXJvc2NvcGU7IHBpY3R1cmUtaW4tcGljdHVyZTsgd2ViLXNoYXJlIiByZWZlcnJlcnBvbGljeT0ic3RyaWN0LW9yaWdpbi13aGVuLWNyb3NzLW9yaWdpbiIgYWxsb3dmdWxsc2NyZWVuIGRhdGEtc3JjPSJodHRwczovL3d3dy55b3V0dWJlLW5vY29va2llLmNvbS9lbWJlZC9TRjc4YkVFTjJUTT9mZWF0dXJlPW9lbWJlZCZhbXA7bW9kZXN0YnJhbmRpbmc9MSZhbXA7YXV0b3BsYXk9MSZhbXA7cmVsPTAiPjwvaWZyYW1lPg==Reality Check: The Limits of View Transitions
Ever wondered how to animate between two UI states without wrangling heaps of extra code? Well, get ready to unlock a new level of web development capabilities with us, as we dive into the exciting world of view transitions.
Highlights
00:00 Introduction
00:44 Understanding View Transitions
02:05 Demos & Practical Applications
03:14 Current Reality vs. The Dream
06:47 Potential Use Cases & WordPress Context
07:25 View Transitions With HTMX
08:31 Working With View Transitions in CSS
12:54 Conclusion
Links
– Chrome Developers Article: https://developer.chrome.com/docs/web-platform/view-transitions/
– Astro 3.0 View Transitions: https://astro.build/blog/astro-3/#astro-view-transitions
– Svelte View Transitions: https://svelte.dev/blog/view-transitions
– HTMX View Transitions: https://htmx.org/docs/#view-transitions
– View Transitions API Overview: https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API
– Maxi Ferrera's Demo: https://live-transitions.pages.dev/
– Turbo: https://turbo.hotwired.dev/
– swup: https://swup.js.org/
– Shuffle.js: https://vestride.github.io/Shuffle/More from Bleech
Blog Posts (WordPress Development)
Flynt (WordPress Starter Theme)
VRTs (Visual Tests for WordPress)
Siegfried, deploy! (YouTube Channel) -
PGlmcmFtZSB0aXRsZT0iV2hhdCdzIE5ldyBpbiBGbHludCB2Mi4wIiB3aWR0aD0iMTEyMCIgaGVpZ2h0PSI2MzAiIGZyYW1lYm9yZGVyPSIwIiBhbGxvdz0iYWNjZWxlcm9tZXRlcjsgYXV0b3BsYXk7IGNsaXBib2FyZC13cml0ZTsgZW5jcnlwdGVkLW1lZGlhOyBneXJvc2NvcGU7IHBpY3R1cmUtaW4tcGljdHVyZTsgd2ViLXNoYXJlIiByZWZlcnJlcnBvbGljeT0ic3RyaWN0LW9yaWdpbi13aGVuLWNyb3NzLW9yaWdpbiIgYWxsb3dmdWxsc2NyZWVuIGRhdGEtc3JjPSJodHRwczovL3d3dy55b3V0dWJlLW5vY29va2llLmNvbS9lbWJlZC9sdDZUd0V5VlhtOD9mZWF0dXJlPW9lbWJlZCZhbXA7bW9kZXN0YnJhbmRpbmc9MSZhbXA7YXV0b3BsYXk9MSZhbXA7cmVsPTAiPjwvaWZyYW1lPg==What’s New in Flynt v2.0
Our WordPress Starter Theme got its biggest upgrade. Flynt v2 makes developing lightning fast websites fun and provides editors with a smooth experience. Learn all about the most significant improvements from the core team members.
Highlights
00:00 Introduction
00:34 Key improvements
01:11 1) Performance: JavaScript Islands
04:07 2) Editor Experience: Gutenberg and ACF
05:30 3) Developer Experience: Vanilla JS and CSS Variables
12:12 Feedback
Links
– Flynt Website: https://flyntwp.com/
– Flynt PageSpeed Test Results: https://pagespeed.web.dev/analysis?url=https%3A%2F%2Fflyntwp.com%2F
– Flynt Release Blog Post: https://flyntwp.com/flynt-2-0-rekindling-your-love-for-wordpress-again/
– Flynt GitHub Discussions: https://github.com/flyntwp/flynt/discussionsMore from Bleech
Blog Posts (WordPress Development)
Flynt (WordPress Starter Theme)
VRTs (Visual Tests for WordPress)
Siegfried, deploy! (YouTube Channel) -
PGlmcmFtZSB0aXRsZT0iSFRNWCBpcyBhd2Vzb21lIGFuZCBoZXJlJ3Mgd2h5IiB3aWR0aD0iMTEyMCIgaGVpZ2h0PSI2MzAiIGZyYW1lYm9yZGVyPSIwIiBhbGxvdz0iYWNjZWxlcm9tZXRlcjsgYXV0b3BsYXk7IGNsaXBib2FyZC13cml0ZTsgZW5jcnlwdGVkLW1lZGlhOyBneXJvc2NvcGU7IHBpY3R1cmUtaW4tcGljdHVyZTsgd2ViLXNoYXJlIiByZWZlcnJlcnBvbGljeT0ic3RyaWN0LW9yaWdpbi13aGVuLWNyb3NzLW9yaWdpbiIgYWxsb3dmdWxsc2NyZWVuIGRhdGEtc3JjPSJodHRwczovL3d3dy55b3V0dWJlLW5vY29va2llLmNvbS9lbWJlZC9rUFBfVFFGUGZVOD9mZWF0dXJlPW9lbWJlZCZhbXA7bW9kZXN0YnJhbmRpbmc9MSZhbXA7YXV0b3BsYXk9MSZhbXA7cmVsPTAiPjwvaWZyYW1lPg==HTMX is awesome and here’s why
What if you could supercharge your HTML with AJAX requests, CSS transitions, and web socket capabilities directly from HTML attributes? That's what HTMX can do for you. We're discussing its benefits and drawbacks in this episode.
Highlights
00:00 Introduction to HTMX
01:16 Triggers and Functionality
02:06 Benefits and Use Cases
03:26 Making static WordPress interactive
04:19 Modern JavaScript Frameworks vs HTMX
05:25 Areas for Improvement
08:15 Final Thoughts
Links
– HTMX Official Website: https://htmx.org/
– Alpine.js: https://alpinejs.dev/
– Tailwind CSS: https://tailwindcss.com/
– Mutation Observer: https://developer.mozilla.org/en-US/docs/Web/API/MutationObserverMore from Bleech
Blog Posts (WordPress Development)
Flynt (WordPress Starter Theme)
VRTs (Visual Tests for WordPress)
Siegfried, deploy! (YouTube Channel) -
PGlmcmFtZSB0aXRsZT0iTWljcm9kYXRhIHZzIEpTT04tTEQ6IFdoaWNoIFN0cnVjdHVyZWQgRGF0YSBGb3JtYXQgV2lucz8iIHdpZHRoPSIxMTIwIiBoZWlnaHQ9IjYzMCIgZnJhbWVib3JkZXI9IjAiIGFsbG93PSJhY2NlbGVyb21ldGVyOyBhdXRvcGxheTsgY2xpcGJvYXJkLXdyaXRlOyBlbmNyeXB0ZWQtbWVkaWE7IGd5cm9zY29wZTsgcGljdHVyZS1pbi1waWN0dXJlOyB3ZWItc2hhcmUiIHJlZmVycmVycG9saWN5PSJzdHJpY3Qtb3JpZ2luLXdoZW4tY3Jvc3Mtb3JpZ2luIiBhbGxvd2Z1bGxzY3JlZW4gZGF0YS1zcmM9Imh0dHBzOi8vd3d3LnlvdXR1YmUtbm9jb29raWUuY29tL2VtYmVkL1lqOHVqVWZBSk04P2ZlYXR1cmU9b2VtYmVkJmFtcDttb2Rlc3RicmFuZGluZz0xJmFtcDthdXRvcGxheT0xJmFtcDtyZWw9MCI+PC9pZnJhbWU+Microdata vs JSON-LD: Which Structured Data Format Wins?
Are you wrestling to decide which data format is superior, Microdata or JSON-LD? Take a seat and let us take you on a journey exploring the pros and cons of these two formats in relation to websites.
Highlights
00:00 Introduction to Structured Data Formats
00:44 Importance of Structured Data and Schema.org
01:45 Implementation of JSON-LD
02:56 Implementation of Microdata
04:01 Multiple JSON-LD Script Tags
05:12 When to Use Which Format
08:30 Ease of Implementation and Debugging
Links
– Structured Data Schemas: https://schema.org/
– Structured Data Validator: https://validator.schema.org/
– Rich Results Tests: https://search.google.com/test/rich-resultsMore from Bleech
Blog Posts (WordPress Development)
Flynt (WordPress Starter Theme)
VRTs (Visual Tests for WordPress)
Siegfried, deploy! (YouTube Channel) -
PGlmcmFtZSB0aXRsZT0iTmV2ZXIgSW50ZWdyYXRlIFNvY2lhbCBNZWRpYSBCdXR0b25zIExpa2UgVGhpcyIgd2lkdGg9IjExMjAiIGhlaWdodD0iNjMwIiBmcmFtZWJvcmRlcj0iMCIgYWxsb3c9ImFjY2VsZXJvbWV0ZXI7IGF1dG9wbGF5OyBjbGlwYm9hcmQtd3JpdGU7IGVuY3J5cHRlZC1tZWRpYTsgZ3lyb3Njb3BlOyBwaWN0dXJlLWluLXBpY3R1cmU7IHdlYi1zaGFyZSIgcmVmZXJyZXJwb2xpY3k9InN0cmljdC1vcmlnaW4td2hlbi1jcm9zcy1vcmlnaW4iIGFsbG93ZnVsbHNjcmVlbiBkYXRhLXNyYz0iaHR0cHM6Ly93d3cueW91dHViZS1ub2Nvb2tpZS5jb20vZW1iZWQvek9qQmR6QmFXU3M/ZmVhdHVyZT1vZW1iZWQmYW1wO21vZGVzdGJyYW5kaW5nPTEmYW1wO2F1dG9wbGF5PTEmYW1wO3JlbD0wIj48L2lmcmFtZT4=Never Integrate Social Media Buttons Like This
There's a clear winning approach when it comes to integrating social media share buttons into your website. Learn how to do it quickly, easily and safely.
Highlights
00:00 Introduction
00:18 Integrating Simple Social Media Links
00:43 Share Buttons for Specific Pages and Posts
02:09 Considerations for Privacy & Performance
05:42 DIY Integration vs. Using Plugins
07:33 Finding Non-Javascript Share LinksMore from Bleech
Blog Posts (WordPress Development)
Flynt (WordPress Starter Theme)
VRTs (Visual Tests for WordPress)
Siegfried, deploy! (YouTube Channel) -
PGlmcmFtZSB0aXRsZT0iRGVidWdnaW5nIE9wZW4gR3JhcGggSW1hZ2VzIG9uIFNvY2lhbCBNZWRpYSIgd2lkdGg9IjExMjAiIGhlaWdodD0iNjMwIiBmcmFtZWJvcmRlcj0iMCIgYWxsb3c9ImFjY2VsZXJvbWV0ZXI7IGF1dG9wbGF5OyBjbGlwYm9hcmQtd3JpdGU7IGVuY3J5cHRlZC1tZWRpYTsgZ3lyb3Njb3BlOyBwaWN0dXJlLWluLXBpY3R1cmU7IHdlYi1zaGFyZSIgcmVmZXJyZXJwb2xpY3k9InN0cmljdC1vcmlnaW4td2hlbi1jcm9zcy1vcmlnaW4iIGFsbG93ZnVsbHNjcmVlbiBkYXRhLXNyYz0iaHR0cHM6Ly93d3cueW91dHViZS1ub2Nvb2tpZS5jb20vZW1iZWQvZzlXZ2RQRlNFTXM/ZmVhdHVyZT1vZW1iZWQmYW1wO21vZGVzdGJyYW5kaW5nPTEmYW1wO2F1dG9wbGF5PTEmYW1wO3JlbD0wIj48L2lmcmFtZT4=Debugging Open Graph Images on Social Media
Ever wondered why the wrong images pop up when you share your posts on social media? There's an easy fix! Learn how to use tools like LinkedIn's post inspector to reset the social network's cache and ensure the newest image and information get displayed.
Highlights
00:00 Finding Link Debuggers to Fix Open Graph Images
00:28 LinkedIn Post Inspector
01:36 Facebook Sharing Debugger
03:15 Twitter's Card Validator (removed?!)
03:55 Previewing Social Media Posts with OpenTags.io
Links
– LinkedIn Post Inspector: https://www.linkedin.com/post-inspector/
– Facebook Sharing Debugger: https://developers.facebook.com/tools/debug/
– Twitter Card Validator: https://cards-dev.twitter.com/validator
– OpenTags.io Preview Tool: https://opentags.io/More from Bleech
Blog Posts (WordPress Development)
Flynt (WordPress Starter Theme)
VRTs (Visual Tests for WordPress)
Siegfried, deploy! (YouTube Channel) -
PGlmcmFtZSB0aXRsZT0iTWFraW5nIFdvcmRQcmVzcyBQb3N0cyBMb29rIEdyZWF0IG9uIFNvY2lhbCBNZWRpYSIgd2lkdGg9IjExMjAiIGhlaWdodD0iNjMwIiBmcmFtZWJvcmRlcj0iMCIgYWxsb3c9ImFjY2VsZXJvbWV0ZXI7IGF1dG9wbGF5OyBjbGlwYm9hcmQtd3JpdGU7IGVuY3J5cHRlZC1tZWRpYTsgZ3lyb3Njb3BlOyBwaWN0dXJlLWluLXBpY3R1cmU7IHdlYi1zaGFyZSIgcmVmZXJyZXJwb2xpY3k9InN0cmljdC1vcmlnaW4td2hlbi1jcm9zcy1vcmlnaW4iIGFsbG93ZnVsbHNjcmVlbiBkYXRhLXNyYz0iaHR0cHM6Ly93d3cueW91dHViZS1ub2Nvb2tpZS5jb20vZW1iZWQvOXpzSExKckh5NFU/ZmVhdHVyZT1vZW1iZWQmYW1wO21vZGVzdGJyYW5kaW5nPTEmYW1wO2F1dG9wbGF5PTEmYW1wO3JlbD0wIj48L2lmcmFtZT4=Making WordPress Posts Look Great on Social Media
Discover the key features of the Open Graph protocol, its common challenges, and how to seamlessly integrate it with your WordPress site.
Highlights
00:00 Introduction
00:52 OG (Open Graph) Tags in Social Media Sharing
02:23 Setting Global and Individual OG Images in WordPress
03:28 Customizing OG Image Sources Programmatically
04:40 Image Formatting and Sizing for Different Social Networks
06:02 Optimizing OG Titles and Descriptions
Links
– The Open Graph protocol: https://ogp.me/More from Bleech
Blog Posts (WordPress Development)
Flynt (WordPress Starter Theme)
VRTs (Visual Tests for WordPress)
Siegfried, deploy! (YouTube Channel) -
PGlmcmFtZSB0aXRsZT0iTWF4aW1pemluZyBSZWFjaDogQXV0byBTaGFyZSBmcm9tIFdvcmRQcmVzcyB0byBTb2NpYWwgTWVkaWEiIHdpZHRoPSIxMTIwIiBoZWlnaHQ9IjYzMCIgZnJhbWVib3JkZXI9IjAiIGFsbG93PSJhY2NlbGVyb21ldGVyOyBhdXRvcGxheTsgY2xpcGJvYXJkLXdyaXRlOyBlbmNyeXB0ZWQtbWVkaWE7IGd5cm9zY29wZTsgcGljdHVyZS1pbi1waWN0dXJlOyB3ZWItc2hhcmUiIHJlZmVycmVycG9saWN5PSJzdHJpY3Qtb3JpZ2luLXdoZW4tY3Jvc3Mtb3JpZ2luIiBhbGxvd2Z1bGxzY3JlZW4gZGF0YS1zcmM9Imh0dHBzOi8vd3d3LnlvdXR1YmUtbm9jb29raWUuY29tL2VtYmVkL21yV185ME9Zb0gwP2ZlYXR1cmU9b2VtYmVkJmFtcDttb2Rlc3RicmFuZGluZz0xJmFtcDthdXRvcGxheT0xJmFtcDtyZWw9MCI+PC9pZnJhbWU+Maximizing Reach: Auto Share from WordPress to Social Media
On the fence about auto-sharing your WordPress posts on social media? Learn about our experiences, strategies and tools to bridge the gap.
Highlights
00:00 Intro
00:31 Publishing with WordPress Plugins
02:02 Customization of Content
03:05 Evolution of Direct Publishing
04:48 Social Media Aggregators
Links
– Blog2Social: https://wordpress.org/plugins/blog2social/
– Jetpack Social: https://wordpress.org/plugins/jetpack-social/
– Social Media Auto Publish: https://wordpress.org/plugins/social-media-auto-publish/
– SchedulePress: https://wordpress.org/plugins/wp-scheduled-posts/
– Buffer: https://buffer.com/
– Zapier: https://zapier.com/More from Bleech
Blog Posts (WordPress Development)
Flynt (WordPress Starter Theme)
VRTs (Visual Tests for WordPress)
Siegfried, deploy! (YouTube Channel) -
PGlmcmFtZSB0aXRsZT0iT3B0aW1pemluZyBTb2NpYWwgTWVkaWEgRW1iZWRzIGluIFdvcmRQcmVzczogU3BlZWQgYW5kIFByaXZhY3kgVGlwcyIgd2lkdGg9IjExMjAiIGhlaWdodD0iNjMwIiBmcmFtZWJvcmRlcj0iMCIgYWxsb3c9ImFjY2VsZXJvbWV0ZXI7IGF1dG9wbGF5OyBjbGlwYm9hcmQtd3JpdGU7IGVuY3J5cHRlZC1tZWRpYTsgZ3lyb3Njb3BlOyBwaWN0dXJlLWluLXBpY3R1cmU7IHdlYi1zaGFyZSIgcmVmZXJyZXJwb2xpY3k9InN0cmljdC1vcmlnaW4td2hlbi1jcm9zcy1vcmlnaW4iIGFsbG93ZnVsbHNjcmVlbiBkYXRhLXNyYz0iaHR0cHM6Ly93d3cueW91dHViZS1ub2Nvb2tpZS5jb20vZW1iZWQvLThkMGdrVkFDTHc/ZmVhdHVyZT1vZW1iZWQmYW1wO21vZGVzdGJyYW5kaW5nPTEmYW1wO2F1dG9wbGF5PTEmYW1wO3JlbD0wIj48L2lmcmFtZT4=Optimizing Social Media Embeds in WordPress: Speed and Privacy Tips
Ever wondered why your WordPress site loads slowly with embedded social media content? Do you know how to ensure your site is both speedy and compliant with privacy regulations? We draw back the curtain on the built-in oEmbed functionality of WordPress, highlight its attractive ease of use and potential pitfalls, and share tips on optimizing your site's performance.
Highlights
00:00 Understanding oEmbed
00:54 oEmbed Challenges
01:44 Privacy Concerns
02:55 The Importance of Caching
05:02 Optimizing Load Speed and Lazy Loading
07:32 Recap and Summary of Embedding Practices
Links
– oEmbed Specs: https://oembed.com/
– WP YouTube Lyte: https://wordpress.org/plugins/wp-youtube-lyte/
– Mihdan: Lite YouTube Embed: https://wordpress.org/plugins/mihdan-lite-youtube-embed/
– Embed Privacy: https://wordpress.org/plugins/embed-privacy/More from Bleech
Blog Posts (WordPress Development)
Flynt (WordPress Starter Theme)
VRTs (Visual Tests for WordPress)
Siegfried, deploy! (YouTube Channel) -
PGlmcmFtZSB0aXRsZT0iV29yZFByZXNzIGFuZCBTb2NpYWwgTWVkaWE6IEEgQ29tcHJlaGVuc2l2ZSBJbnRlZ3JhdGlvbiBHdWlkZSIgd2lkdGg9IjExMjAiIGhlaWdodD0iNjMwIiBmcmFtZWJvcmRlcj0iMCIgYWxsb3c9ImFjY2VsZXJvbWV0ZXI7IGF1dG9wbGF5OyBjbGlwYm9hcmQtd3JpdGU7IGVuY3J5cHRlZC1tZWRpYTsgZ3lyb3Njb3BlOyBwaWN0dXJlLWluLXBpY3R1cmU7IHdlYi1zaGFyZSIgcmVmZXJyZXJwb2xpY3k9InN0cmljdC1vcmlnaW4td2hlbi1jcm9zcy1vcmlnaW4iIGFsbG93ZnVsbHNjcmVlbiBkYXRhLXNyYz0iaHR0cHM6Ly93d3cueW91dHViZS1ub2Nvb2tpZS5jb20vZW1iZWQvSkNtbFJTZ2Y3Tnc/ZmVhdHVyZT1vZW1iZWQmYW1wO21vZGVzdGJyYW5kaW5nPTEmYW1wO2F1dG9wbGF5PTEmYW1wO3JlbD0wIj48L2lmcmFtZT4=WordPress and Social Media: A Comprehensive Integration Guide
Are you on a mission to bridge the gap between your social media content and WordPress site? Let's explore the best ways to connect your site to social networks!
Highlights
00:00 Intro
00:32 Embedding social media posts
00:55 Auto-publishing to social media
01:26 Making content look great on social media
01:45 Social media profile links
02:02 Share and like buttons
02:15 Clarifying expectations
Links
– Embedding Social Media Posts: https://youtu.be/-8d0gkVACLw
– Auto-Publishing to Social Media: https://youtu.be/mrW_90OYoH0
– Making Content Look Great on Social Media: https://youtu.be/9zsHLJrHy4U
– Fixing Open Graph Image Previews: https://youtu.be/g9WgdPFSEMs
– Share and Like Button Integrations: https://youtu.be/zOjBdzBaWSsMore from Bleech
Blog Posts (WordPress Development)
Flynt (WordPress Starter Theme)
VRTs (Visual Tests for WordPress)
Siegfried, deploy! (YouTube Channel) -
PGlmcmFtZSB0aXRsZT0iV29yZFByZXNzIMODwpcgQUk6IFRoZSBGdXR1cmUgb2YgV2Vic2l0ZSBUcmFuc2xhdGlvbnMiIHdpZHRoPSIxMTIwIiBoZWlnaHQ9IjYzMCIgZnJhbWVib3JkZXI9IjAiIGFsbG93PSJhY2NlbGVyb21ldGVyOyBhdXRvcGxheTsgY2xpcGJvYXJkLXdyaXRlOyBlbmNyeXB0ZWQtbWVkaWE7IGd5cm9zY29wZTsgcGljdHVyZS1pbi1waWN0dXJlOyB3ZWItc2hhcmUiIHJlZmVycmVycG9saWN5PSJzdHJpY3Qtb3JpZ2luLXdoZW4tY3Jvc3Mtb3JpZ2luIiBhbGxvd2Z1bGxzY3JlZW4gZGF0YS1zcmM9Imh0dHBzOi8vd3d3LnlvdXR1YmUtbm9jb29raWUuY29tL2VtYmVkL1ZhTVJJSFFsS0YwP2ZlYXR1cmU9b2VtYmVkJmFtcDttb2Rlc3RicmFuZGluZz0xJmFtcDthdXRvcGxheT0xJmFtcDtyZWw9MCI+PC9pZnJhbWU+WordPress × AI: The Future of Website Translations
Have you ever battled with the idea that Google Translate could be the low-cost, low-effort solution to your translation woes? Then AI tools will make you think twice again!
Highlights
00:00 Intro
01:24 Translating With Google Translate
02:34 Bridging the Quality Gap
03:38 Teaching AI your Tone of Voice
05:49 Mastering Multilingual WordPress WebsitesMore from Bleech
Blog Posts (WordPress Development)
Flynt (WordPress Starter Theme)
VRTs (Visual Tests for WordPress)
Siegfried, deploy! (YouTube Channel) -
PGlmcmFtZSB0aXRsZT0iVGhlIEJlc3QgV2F5IHRvIENyZWF0ZSBNdWx0aWxpbmd1YWwgV29yZFByZXNzIFdlYnNpdGVzIiB3aWR0aD0iMTEyMCIgaGVpZ2h0PSI2MzAiIGZyYW1lYm9yZGVyPSIwIiBhbGxvdz0iYWNjZWxlcm9tZXRlcjsgYXV0b3BsYXk7IGNsaXBib2FyZC13cml0ZTsgZW5jcnlwdGVkLW1lZGlhOyBneXJvc2NvcGU7IHBpY3R1cmUtaW4tcGljdHVyZTsgd2ViLXNoYXJlIiByZWZlcnJlcnBvbGljeT0ic3RyaWN0LW9yaWdpbi13aGVuLWNyb3NzLW9yaWdpbiIgYWxsb3dmdWxsc2NyZWVuIGRhdGEtc3JjPSJodHRwczovL3d3dy55b3V0dWJlLW5vY29va2llLmNvbS9lbWJlZC9RN3pWVzZjVF9fWT9mZWF0dXJlPW9lbWJlZCZhbXA7bW9kZXN0YnJhbmRpbmc9MSZhbXA7YXV0b3BsYXk9MSZhbXA7cmVsPTAiPjwvaWZyYW1lPg==3 Ways to Create Multilingual WordPress Websites
Ever wondered about the best way to create a multilingual WordPress website? The answer is not as straightforward as it may seem. But fear not, we're here to dissect it for you and tackle the complexities involved, from using external plugins to the promise of a simpler future with the Gutenberg project.
Highlights
00:00 Intro
01:04 Field Translations
02:02 Post Translations
03:41 Multi-Site Translations
04:56 Multi-Market Translations
06:47 Gutenberg Translations
Links
– WPML: https://wpml.org/
– MultilingualPress: https://multilingualpress.de/
– Gutenberg Roadmap: https://wordpress.org/about/roadmap/More from Bleech
Blog Posts (WordPress Development)
Flynt (WordPress Starter Theme)
VRTs (Visual Tests for WordPress)
Siegfried, deploy! (YouTube Channel) -
PGlmcmFtZSB0aXRsZT0iV2h5IFdvcmRQcmVzcyBBZ2VuY2llcyBEaXNhYmxlIEF1dG8tVXBkYXRlcyAoQW5kIFlvdSBTaG91bGQgVG9vKSIgd2lkdGg9IjExMjAiIGhlaWdodD0iNjMwIiBmcmFtZWJvcmRlcj0iMCIgYWxsb3c9ImFjY2VsZXJvbWV0ZXI7IGF1dG9wbGF5OyBjbGlwYm9hcmQtd3JpdGU7IGVuY3J5cHRlZC1tZWRpYTsgZ3lyb3Njb3BlOyBwaWN0dXJlLWluLXBpY3R1cmU7IHdlYi1zaGFyZSIgcmVmZXJyZXJwb2xpY3k9InN0cmljdC1vcmlnaW4td2hlbi1jcm9zcy1vcmlnaW4iIGFsbG93ZnVsbHNjcmVlbiBkYXRhLXNyYz0iaHR0cHM6Ly93d3cueW91dHViZS1ub2Nvb2tpZS5jb20vZW1iZWQvREFxTDJMSUhCLVU/ZmVhdHVyZT1vZW1iZWQmYW1wO21vZGVzdGJyYW5kaW5nPTEmYW1wO2F1dG9wbGF5PTEmYW1wO3JlbD0wIj48L2lmcmFtZT4=Mastering WordPress Auto-Updates: Strategies for Security and Stability
Ever wondered if auto-updates in WordPress are a blessing or a curse? Join us as we explore the pros and cons of different update strategies and share our own experiences. We'll explain why it's essential to keep your WordPress site updated for security reasons and what could go wrong if you don't, but also discuss how unexpected results can occur.
Discover the best strategies for updating your WordPress site, from scheduled automatic updates with zero downtime deployments to utilizing external tools for backup and updates. We also touch on the importance of having a backup before updating, and how visual regression tests can ensure your site stays looking and functioning as it should. Don't miss out on this valuable advice for keeping your WordPress site secure and up-to-date!
Links
VRTs – Visual Regression Tests (Plugin): https://wordpress.org/plugins/visual-regression-tests/
Highlights
00:00 Intro
00:36 WordPress auto-updates
01:25 Scheduled automated updates
03:07 Failure checks & recovery
05:05 Manual update workflows
07:09 Zero downtime updates
08:50 ConclusionMore from Bleech
Blog Posts (WordPress Development)
Flynt (WordPress Starter Theme)
VRTs (Visual Tests for WordPress)
Siegfried, deploy! (YouTube Channel) -
PGlmcmFtZSB0aXRsZT0iUmVsYXVuY2hpbmcgV2Vic2l0ZXM6IFRoZSBBZ2lsZSBXYXkgKGFuIEl0ZXJhdGl2ZSBBcHByb2FjaCkiIHdpZHRoPSIxMTIwIiBoZWlnaHQ9IjYzMCIgZnJhbWVib3JkZXI9IjAiIGFsbG93PSJhY2NlbGVyb21ldGVyOyBhdXRvcGxheTsgY2xpcGJvYXJkLXdyaXRlOyBlbmNyeXB0ZWQtbWVkaWE7IGd5cm9zY29wZTsgcGljdHVyZS1pbi1waWN0dXJlOyB3ZWItc2hhcmUiIHJlZmVycmVycG9saWN5PSJzdHJpY3Qtb3JpZ2luLXdoZW4tY3Jvc3Mtb3JpZ2luIiBhbGxvd2Z1bGxzY3JlZW4gZGF0YS1zcmM9Imh0dHBzOi8vd3d3LnlvdXR1YmUtbm9jb29raWUuY29tL2VtYmVkL21WX19zVko5N2ZZP2ZlYXR1cmU9b2VtYmVkJmFtcDttb2Rlc3RicmFuZGluZz0xJmFtcDthdXRvcGxheT0xJmFtcDtyZWw9MCI+PC9pZnJhbWU+Relaunching Websites: The Agile Way (an Iterative Approach)
In a fast-paced business environment, it's no longer acceptable to wait months for a website relaunch. That's why it's time to say goodbye to the traditional waterfall approach and to go for an agile relaunch! In this episode, we dive deep into how an iterative approach enables faster, better results and more flexibility, to take your next website relaunch to new heights.
Highlights
00:00 Intro
02:06 Agile advantages
04:12 Rebuilding step by step
08:37 Scoping & budgeting
16:36 Focusing on ROI
18:34 2 page builders in 1 website
20:39 A matter of trust
22:43 Small scope multi-phase launchesMore from Bleech
Blog Posts (WordPress Development)
Flynt (WordPress Starter Theme)
VRTs (Visual Tests for WordPress)
Siegfried, deploy! (YouTube Channel) -
PGlmcmFtZSB0aXRsZT0iUmVsYXVuY2hpbmcgV2Vic2l0ZXM6IFNFTyBTdHJhdGVnaWVzIGZvciBhIFNtb290aCBUcmFuc2l0aW9uIiB3aWR0aD0iMTEyMCIgaGVpZ2h0PSI2MzAiIGZyYW1lYm9yZGVyPSIwIiBhbGxvdz0iYWNjZWxlcm9tZXRlcjsgYXV0b3BsYXk7IGNsaXBib2FyZC13cml0ZTsgZW5jcnlwdGVkLW1lZGlhOyBneXJvc2NvcGU7IHBpY3R1cmUtaW4tcGljdHVyZTsgd2ViLXNoYXJlIiByZWZlcnJlcnBvbGljeT0ic3RyaWN0LW9yaWdpbi13aGVuLWNyb3NzLW9yaWdpbiIgYWxsb3dmdWxsc2NyZWVuIGRhdGEtc3JjPSJodHRwczovL3d3dy55b3V0dWJlLW5vY29va2llLmNvbS9lbWJlZC9nVlExOHBLT21iaz9mZWF0dXJlPW9lbWJlZCZhbXA7bW9kZXN0YnJhbmRpbmc9MSZhbXA7YXV0b3BsYXk9MSZhbXA7cmVsPTAiPjwvaWZyYW1lPg==Relaunching Websites: SEO Strategies for a Smooth Transition
Are you ready to level up your website relaunch game? We've got you covered with advice on search engine optimization, content migration, and promoting your strongest content while ditching the old, low-performing stuff.
We also tackle the nitty-gritty of optimizing URL structures and redirects for a seamless transition. You'll learn how a short URL base can work wonders and why preparing for potential future restructures is essential.
Finally, we share SEO housekeeping tips, explore the significance of having a well structured sitemap and discuss tracking 404 requests, core web vitals, and accessibility issues.
Highlights
00:00 Intro
00:36 Overview
01:13 Strategy #1: Content Migration
08:05 Strategy #2: Slugs
19:06 Strategy #3: Redirects
25:41 Strategy #4: Google Search Console
Links
Franz Enzenhofer's SEO book: https://www.fullstackoptimization.com/a/understanding-seo
Google Search Console: https://search.google.com/search-console
Redirection plugin: https://wordpress.org/plugins/redirection/
Yoast plugin: https://wordpress.org/plugins/wordpress-seo/More from Bleech
Blog Posts (WordPress Development)
Flynt (WordPress Starter Theme)
VRTs (Visual Tests for WordPress)
Siegfried, deploy! (YouTube Channel) -
PGlmcmFtZSB0aXRsZT0iUmVsYXVuY2hpbmcgV2Vic2l0ZXM6IENvbnRlbnQgTWlncmF0aW9uIHRvIFdvcmRQcmVzcyIgd2lkdGg9IjExMjAiIGhlaWdodD0iNjMwIiBmcmFtZWJvcmRlcj0iMCIgYWxsb3c9ImFjY2VsZXJvbWV0ZXI7IGF1dG9wbGF5OyBjbGlwYm9hcmQtd3JpdGU7IGVuY3J5cHRlZC1tZWRpYTsgZ3lyb3Njb3BlOyBwaWN0dXJlLWluLXBpY3R1cmU7IHdlYi1zaGFyZSIgcmVmZXJyZXJwb2xpY3k9InN0cmljdC1vcmlnaW4td2hlbi1jcm9zcy1vcmlnaW4iIGFsbG93ZnVsbHNjcmVlbiBkYXRhLXNyYz0iaHR0cHM6Ly93d3cueW91dHViZS1ub2Nvb2tpZS5jb20vZW1iZWQvZUZaaUF3Y2stRlU/ZmVhdHVyZT1vZW1iZWQmYW1wO21vZGVzdGJyYW5kaW5nPTEmYW1wO2F1dG9wbGF5PTEmYW1wO3JlbD0wIj48L2lmcmFtZT4=Relaunching Websites: Content Migration to WordPress
In today's episode Steffen and Dominik discuss the challenges of content migration when relaunching websites. Migrating structured content is relatively easier, while unstructured content poses more challenges. Strategies such as archiving, database views, scraping tools, and manual copying are possible approaches to content migration, with emphasis on optimizing and redesigning content during the process.
Highlights
00:00 Intro
00:59 Challenges & opportunities
03:43 When not to migrate
05:47 Keeping archives alive
08:02 Case #1: Scraping
11:29 Other methods
13:37 Importing text & metadata
16:39 Importing images
17:54 How complicated is it?
19:51 Case #2: Database views
27:13 Exporting content types
28:29 Case #3: WordPress to WordPress
30:17 Bonus topic: SEO strategies
Links
WP All Import: https://www.wpallimport.com/More from Bleech
Blog Posts (WordPress Development)
Flynt (WordPress Starter Theme)
VRTs (Visual Tests for WordPress)
Siegfried, deploy! (YouTube Channel) -
PGlmcmFtZSB0aXRsZT0iV29yZFByZXNzIGNvbnRlbnQgc3luY2hyb25pemF0aW9uIGFjcm9zcyBlbnZpcm9ubWVudHMiIHdpZHRoPSIxMTIwIiBoZWlnaHQ9IjYzMCIgZnJhbWVib3JkZXI9IjAiIGFsbG93PSJhY2NlbGVyb21ldGVyOyBhdXRvcGxheTsgY2xpcGJvYXJkLXdyaXRlOyBlbmNyeXB0ZWQtbWVkaWE7IGd5cm9zY29wZTsgcGljdHVyZS1pbi1waWN0dXJlOyB3ZWItc2hhcmUiIHJlZmVycmVycG9saWN5PSJzdHJpY3Qtb3JpZ2luLXdoZW4tY3Jvc3Mtb3JpZ2luIiBhbGxvd2Z1bGxzY3JlZW4gZGF0YS1zcmM9Imh0dHBzOi8vd3d3LnlvdXR1YmUtbm9jb29raWUuY29tL2VtYmVkL2F6ZmlabTRZY0s4P2ZlYXR1cmU9b2VtYmVkJmFtcDttb2Rlc3RicmFuZGluZz0xJmFtcDthdXRvcGxheT0xJmFtcDtyZWw9MCI+PC9pZnJhbWU+WordPress content synchronization across environments
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) -
PGlmcmFtZSB0aXRsZT0iQWRkIGEgV29yZFByZXNzIEJsb2cgdG8gWW91ciBFeGlzdGluZyBXZWJzaXRlIiB3aWR0aD0iMTEyMCIgaGVpZ2h0PSI2MzAiIGZyYW1lYm9yZGVyPSIwIiBhbGxvdz0iYWNjZWxlcm9tZXRlcjsgYXV0b3BsYXk7IGNsaXBib2FyZC13cml0ZTsgZW5jcnlwdGVkLW1lZGlhOyBneXJvc2NvcGU7IHBpY3R1cmUtaW4tcGljdHVyZTsgd2ViLXNoYXJlIiByZWZlcnJlcnBvbGljeT0ic3RyaWN0LW9yaWdpbi13aGVuLWNyb3NzLW9yaWdpbiIgYWxsb3dmdWxsc2NyZWVuIGRhdGEtc3JjPSJodHRwczovL3d3dy55b3V0dWJlLW5vY29va2llLmNvbS9lbWJlZC9oQVgwRHF0WmpIaz9mZWF0dXJlPW9lbWJlZCZhbXA7bW9kZXN0YnJhbmRpbmc9MSZhbXA7YXV0b3BsYXk9MSZhbXA7cmVsPTAiPjwvaWZyYW1lPg==Add a WordPress Blog to Your Existing Website
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 approachesMore from Bleech
Blog Posts (WordPress Development)
Flynt (WordPress Starter Theme)
VRTs (Visual Tests for WordPress)
Siegfried, deploy! (YouTube Channel) -
PGlmcmFtZSB0aXRsZT0iSGVhZGxlc3MgV29yZFByZXNzIC0gU2hvdWxkIHlvdSB1c2UgaXQ/IiB3aWR0aD0iMTEyMCIgaGVpZ2h0PSI2MzAiIGZyYW1lYm9yZGVyPSIwIiBhbGxvdz0iYWNjZWxlcm9tZXRlcjsgYXV0b3BsYXk7IGNsaXBib2FyZC13cml0ZTsgZW5jcnlwdGVkLW1lZGlhOyBneXJvc2NvcGU7IHBpY3R1cmUtaW4tcGljdHVyZTsgd2ViLXNoYXJlIiByZWZlcnJlcnBvbGljeT0ic3RyaWN0LW9yaWdpbi13aGVuLWNyb3NzLW9yaWdpbiIgYWxsb3dmdWxsc2NyZWVuIGRhdGEtc3JjPSJodHRwczovL3d3dy55b3V0dWJlLW5vY29va2llLmNvbS9lbWJlZC9ZUl9nN1ZIdmtuUT9mZWF0dXJlPW9lbWJlZCZhbXA7bW9kZXN0YnJhbmRpbmc9MSZhbXA7YXV0b3BsYXk9MSZhbXA7cmVsPTAiPjwvaWZyYW1lPg==Headless WordPress – Should you use it?
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) -
PGlmcmFtZSB0aXRsZT0iU2hvdWxkIHlvdSB1c2UgQ2xvdWRmbGFyZSAoQ0ROKSBvbiB5b3VyIHdlYnNpdGU/IiB3aWR0aD0iMTEyMCIgaGVpZ2h0PSI2MzAiIGZyYW1lYm9yZGVyPSIwIiBhbGxvdz0iYWNjZWxlcm9tZXRlcjsgYXV0b3BsYXk7IGNsaXBib2FyZC13cml0ZTsgZW5jcnlwdGVkLW1lZGlhOyBneXJvc2NvcGU7IHBpY3R1cmUtaW4tcGljdHVyZTsgd2ViLXNoYXJlIiByZWZlcnJlcnBvbGljeT0ic3RyaWN0LW9yaWdpbi13aGVuLWNyb3NzLW9yaWdpbiIgYWxsb3dmdWxsc2NyZWVuIGRhdGEtc3JjPSJodHRwczovL3d3dy55b3V0dWJlLW5vY29va2llLmNvbS9lbWJlZC9ucHcydzgtazBJaz9mZWF0dXJlPW9lbWJlZCZhbXA7bW9kZXN0YnJhbmRpbmc9MSZhbXA7YXV0b3BsYXk9MSZhbXA7cmVsPTAiPjwvaWZyYW1lPg==Should you use Cloudflare (CDN) on your website?
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) -
PGlmcmFtZSB0aXRsZT0iVGhlIEJlc3QgSG9zdGluZyBmb3IgV29yZFByZXNzIFByb2Zlc3Npb25hbHM6IEEgQ29tcHJlaGVuc2l2ZSBDb21wYXJpc29uIiB3aWR0aD0iMTEyMCIgaGVpZ2h0PSI2MzAiIGZyYW1lYm9yZGVyPSIwIiBhbGxvdz0iYWNjZWxlcm9tZXRlcjsgYXV0b3BsYXk7IGNsaXBib2FyZC13cml0ZTsgZW5jcnlwdGVkLW1lZGlhOyBneXJvc2NvcGU7IHBpY3R1cmUtaW4tcGljdHVyZTsgd2ViLXNoYXJlIiByZWZlcnJlcnBvbGljeT0ic3RyaWN0LW9yaWdpbi13aGVuLWNyb3NzLW9yaWdpbiIgYWxsb3dmdWxsc2NyZWVuIGRhdGEtc3JjPSJodHRwczovL3d3dy55b3V0dWJlLW5vY29va2llLmNvbS9lbWJlZC9NZXJocWdTYUdWdz9mZWF0dXJlPW9lbWJlZCZhbXA7bW9kZXN0YnJhbmRpbmc9MSZhbXA7YXV0b3BsYXk9MSZhbXA7cmVsPTAiPjwvaWZyYW1lPg==The Best Hosting for WordPress Professionals: A Comprehensive Comparison
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 ExperiencesMore from Bleech
Blog Posts (WordPress Development)
Flynt (WordPress Starter Theme)
VRTs (Visual Tests for WordPress)
Siegfried, deploy! (YouTube Channel) -
PGlmcmFtZSB0aXRsZT0iSW1wcm92ZSBMYXJnZXN0IENvbnRlbnRmdWwgUGFpbnQgKExDUCkgYW5kIFNwZWVkIHVwIHlvdXIgV29yZFByZXNzIFdlYnNpdGUiIHdpZHRoPSIxMTIwIiBoZWlnaHQ9IjYzMCIgZnJhbWVib3JkZXI9IjAiIGFsbG93PSJhY2NlbGVyb21ldGVyOyBhdXRvcGxheTsgY2xpcGJvYXJkLXdyaXRlOyBlbmNyeXB0ZWQtbWVkaWE7IGd5cm9zY29wZTsgcGljdHVyZS1pbi1waWN0dXJlOyB3ZWItc2hhcmUiIHJlZmVycmVycG9saWN5PSJzdHJpY3Qtb3JpZ2luLXdoZW4tY3Jvc3Mtb3JpZ2luIiBhbGxvd2Z1bGxzY3JlZW4gZGF0YS1zcmM9Imh0dHBzOi8vd3d3LnlvdXR1YmUtbm9jb29raWUuY29tL2VtYmVkL1RSeUM2LWozd3Y4P2ZlYXR1cmU9b2VtYmVkJmFtcDttb2Rlc3RicmFuZGluZz0xJmFtcDthdXRvcGxheT0xJmFtcDtyZWw9MCI+PC9pZnJhbWU+Improve Largest Contentful Paint (LCP) and Speed up your WordPress Website
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/fontpieMore from Bleech
Blog Posts (WordPress Development)
Flynt (WordPress Starter Theme)
VRTs (Visual Tests for WordPress)
Siegfried, deploy! (YouTube Channel) -
PGlmcmFtZSB0aXRsZT0iSG93IHRvIFNlY3VyZSBZb3VyIFdlYnNpdGUgZnJvbSBIYWNrZXJzPyAoV29yZFByZXNzIFNlY3VyaXR5KSIgd2lkdGg9IjExMjAiIGhlaWdodD0iNjMwIiBmcmFtZWJvcmRlcj0iMCIgYWxsb3c9ImFjY2VsZXJvbWV0ZXI7IGF1dG9wbGF5OyBjbGlwYm9hcmQtd3JpdGU7IGVuY3J5cHRlZC1tZWRpYTsgZ3lyb3Njb3BlOyBwaWN0dXJlLWluLXBpY3R1cmU7IHdlYi1zaGFyZSIgcmVmZXJyZXJwb2xpY3k9InN0cmljdC1vcmlnaW4td2hlbi1jcm9zcy1vcmlnaW4iIGFsbG93ZnVsbHNjcmVlbiBkYXRhLXNyYz0iaHR0cHM6Ly93d3cueW91dHViZS1ub2Nvb2tpZS5jb20vZW1iZWQvOW1VVG5NS0hnR2c/ZmVhdHVyZT1vZW1iZWQmYW1wO21vZGVzdGJyYW5kaW5nPTEmYW1wO2F1dG9wbGF5PTEmYW1wO3JlbD0wIj48L2lmcmFtZT4=How to Secure Your Website from Hackers? (WordPress Security)
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) -
PGlmcmFtZSB0aXRsZT0iRGVwbG95aW5nIGNvZGUgdG8gYSBXZWJzaXRlIC0gV2hhdMOiwoDCmXMgdGhlIEJlc3QgU3RyYXRlZ3k/IiB3aWR0aD0iMTEyMCIgaGVpZ2h0PSI2MzAiIGZyYW1lYm9yZGVyPSIwIiBhbGxvdz0iYWNjZWxlcm9tZXRlcjsgYXV0b3BsYXk7IGNsaXBib2FyZC13cml0ZTsgZW5jcnlwdGVkLW1lZGlhOyBneXJvc2NvcGU7IHBpY3R1cmUtaW4tcGljdHVyZTsgd2ViLXNoYXJlIiByZWZlcnJlcnBvbGljeT0ic3RyaWN0LW9yaWdpbi13aGVuLWNyb3NzLW9yaWdpbiIgYWxsb3dmdWxsc2NyZWVuIGRhdGEtc3JjPSJodHRwczovL3d3dy55b3V0dWJlLW5vY29va2llLmNvbS9lbWJlZC9kcVZmTjF4LWdsST9mZWF0dXJlPW9lbWJlZCZhbXA7bW9kZXN0YnJhbmRpbmc9MSZhbXA7YXV0b3BsYXk9MSZhbXA7cmVsPTAiPjwvaWZyYW1lPg==Deploying code to a Website – What’s the Best Strategy?
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) -
PGlmcmFtZSB0aXRsZT0iR2xvYmFsICZhbXA7IFRyYW5zbGF0YWJsZSBPcHRpb25zIHdpdGggQUNGIFBybyIgd2lkdGg9IjExMjAiIGhlaWdodD0iNjMwIiBmcmFtZWJvcmRlcj0iMCIgYWxsb3c9ImFjY2VsZXJvbWV0ZXI7IGF1dG9wbGF5OyBjbGlwYm9hcmQtd3JpdGU7IGVuY3J5cHRlZC1tZWRpYTsgZ3lyb3Njb3BlOyBwaWN0dXJlLWluLXBpY3R1cmU7IHdlYi1zaGFyZSIgcmVmZXJyZXJwb2xpY3k9InN0cmljdC1vcmlnaW4td2hlbi1jcm9zcy1vcmlnaW4iIGFsbG93ZnVsbHNjcmVlbiBkYXRhLXNyYz0iaHR0cHM6Ly93d3cueW91dHViZS1ub2Nvb2tpZS5jb20vZW1iZWQvaVZnYU5pQUF0Qkk/ZmVhdHVyZT1vZW1iZWQmYW1wO21vZGVzdGJyYW5kaW5nPTEmYW1wO2F1dG9wbGF5PTEmYW1wO3JlbD0wIj48L2lmcmFtZT4=Global & Translatable Options with ACF Pro
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) -
PGlmcmFtZSB0aXRsZT0iVGhlIHNlY3JldCBjaGFuZ2UgaW4gTGlnaHRob3VzZSAxMCIgd2lkdGg9IjExMjAiIGhlaWdodD0iNjMwIiBmcmFtZWJvcmRlcj0iMCIgYWxsb3c9ImFjY2VsZXJvbWV0ZXI7IGF1dG9wbGF5OyBjbGlwYm9hcmQtd3JpdGU7IGVuY3J5cHRlZC1tZWRpYTsgZ3lyb3Njb3BlOyBwaWN0dXJlLWluLXBpY3R1cmU7IHdlYi1zaGFyZSIgcmVmZXJyZXJwb2xpY3k9InN0cmljdC1vcmlnaW4td2hlbi1jcm9zcy1vcmlnaW4iIGFsbG93ZnVsbHNjcmVlbiBkYXRhLXNyYz0iaHR0cHM6Ly93d3cueW91dHViZS1ub2Nvb2tpZS5jb20vZW1iZWQvMjNoamExcEpoT1k/ZmVhdHVyZT1vZW1iZWQmYW1wO21vZGVzdGJyYW5kaW5nPTEmYW1wO2F1dG9wbGF5PTEmYW1wO3JlbD0wIj48L2lmcmFtZT4=The secret change in Lighthouse 10
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) -
PGlmcmFtZSB0aXRsZT0iV2h5IHlvdSBzaG91bGQgY29kZSBjdXN0b20gZGVzaWducyIgd2lkdGg9IjExMjAiIGhlaWdodD0iNjMwIiBmcmFtZWJvcmRlcj0iMCIgYWxsb3c9ImFjY2VsZXJvbWV0ZXI7IGF1dG9wbGF5OyBjbGlwYm9hcmQtd3JpdGU7IGVuY3J5cHRlZC1tZWRpYTsgZ3lyb3Njb3BlOyBwaWN0dXJlLWluLXBpY3R1cmU7IHdlYi1zaGFyZSIgcmVmZXJyZXJwb2xpY3k9InN0cmljdC1vcmlnaW4td2hlbi1jcm9zcy1vcmlnaW4iIGFsbG93ZnVsbHNjcmVlbiBkYXRhLXNyYz0iaHR0cHM6Ly93d3cueW91dHViZS1ub2Nvb2tpZS5jb20vZW1iZWQvRTd1T0FqUkw1eVk/ZmVhdHVyZT1vZW1iZWQmYW1wO21vZGVzdGJyYW5kaW5nPTEmYW1wO2F1dG9wbGF5PTEmYW1wO3JlbD0wIj48L2lmcmFtZT4=Why you should code custom designs
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) -
PGlmcmFtZSB0aXRsZT0iQ3JlYXRlIGEgYmV0dGVyIFVJIHdpdGggZGF0YSBtb2RlbGluZyBpbiBXb3JkUHJlc3MiIHdpZHRoPSIxMTIwIiBoZWlnaHQ9IjYzMCIgZnJhbWVib3JkZXI9IjAiIGFsbG93PSJhY2NlbGVyb21ldGVyOyBhdXRvcGxheTsgY2xpcGJvYXJkLXdyaXRlOyBlbmNyeXB0ZWQtbWVkaWE7IGd5cm9zY29wZTsgcGljdHVyZS1pbi1waWN0dXJlOyB3ZWItc2hhcmUiIHJlZmVycmVycG9saWN5PSJzdHJpY3Qtb3JpZ2luLXdoZW4tY3Jvc3Mtb3JpZ2luIiBhbGxvd2Z1bGxzY3JlZW4gZGF0YS1zcmM9Imh0dHBzOi8vd3d3LnlvdXR1YmUtbm9jb29raWUuY29tL2VtYmVkL0dQNzRfSXJiajZBP2ZlYXR1cmU9b2VtYmVkJmFtcDttb2Rlc3RicmFuZGluZz0xJmFtcDthdXRvcGxheT0xJmFtcDtyZWw9MCI+PC9pZnJhbWU+Create a better UI with data modeling in WordPress
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) -
PGlmcmFtZSB0aXRsZT0iV2lsbCB3ZWIgY29tcG9uZW50cyByZXZvbHV0aW9uaXplIHRoZSB3ZWI/IiB3aWR0aD0iMTEyMCIgaGVpZ2h0PSI2MzAiIGZyYW1lYm9yZGVyPSIwIiBhbGxvdz0iYWNjZWxlcm9tZXRlcjsgYXV0b3BsYXk7IGNsaXBib2FyZC13cml0ZTsgZW5jcnlwdGVkLW1lZGlhOyBneXJvc2NvcGU7IHBpY3R1cmUtaW4tcGljdHVyZTsgd2ViLXNoYXJlIiByZWZlcnJlcnBvbGljeT0ic3RyaWN0LW9yaWdpbi13aGVuLWNyb3NzLW9yaWdpbiIgYWxsb3dmdWxsc2NyZWVuIGRhdGEtc3JjPSJodHRwczovL3d3dy55b3V0dWJlLW5vY29va2llLmNvbS9lbWJlZC9SQ0tfNEtha3lDRT9mZWF0dXJlPW9lbWJlZCZhbXA7bW9kZXN0YnJhbmRpbmc9MSZhbXA7YXV0b3BsYXk9MSZhbXA7cmVsPTAiPjwvaWZyYW1lPg==Will web components revolutionize the web?
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-elementMore from Bleech
Blog Posts (WordPress Development)
Flynt (WordPress Starter Theme)
VRTs (Visual Tests for WordPress)
Siegfried, deploy! (YouTube Channel) -
PGlmcmFtZSB0aXRsZT0iVW5kZXJzdGFuZGluZyBXb3JkUHJlc3MgU3RhcnRlciBUaGVtZXMiIHdpZHRoPSIxMTIwIiBoZWlnaHQ9IjYzMCIgZnJhbWVib3JkZXI9IjAiIGFsbG93PSJhY2NlbGVyb21ldGVyOyBhdXRvcGxheTsgY2xpcGJvYXJkLXdyaXRlOyBlbmNyeXB0ZWQtbWVkaWE7IGd5cm9zY29wZTsgcGljdHVyZS1pbi1waWN0dXJlOyB3ZWItc2hhcmUiIHJlZmVycmVycG9saWN5PSJzdHJpY3Qtb3JpZ2luLXdoZW4tY3Jvc3Mtb3JpZ2luIiBhbGxvd2Z1bGxzY3JlZW4gZGF0YS1zcmM9Imh0dHBzOi8vd3d3LnlvdXR1YmUtbm9jb29raWUuY29tL2VtYmVkL3h2aTF5TnowTUk4P2ZlYXR1cmU9b2VtYmVkJmFtcDttb2Rlc3RicmFuZGluZz0xJmFtcDthdXRvcGxheT0xJmFtcDtyZWw9MCI+PC9pZnJhbWU+Understanding WordPress Starter Themes
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/131More from Bleech
Blog Posts (WordPress Development)
Flynt (WordPress Starter Theme)
VRTs (Visual Tests for WordPress)
Siegfried, deploy! (YouTube Channel) -
PGlmcmFtZSB0aXRsZT0iVGVjaG5pcXVlcyBmb3IgcGVyZmVjdCByZXNwb25zaXZlIGltYWdlcyIgd2lkdGg9IjExMjAiIGhlaWdodD0iNjMwIiBmcmFtZWJvcmRlcj0iMCIgYWxsb3c9ImFjY2VsZXJvbWV0ZXI7IGF1dG9wbGF5OyBjbGlwYm9hcmQtd3JpdGU7IGVuY3J5cHRlZC1tZWRpYTsgZ3lyb3Njb3BlOyBwaWN0dXJlLWluLXBpY3R1cmU7IHdlYi1zaGFyZSIgcmVmZXJyZXJwb2xpY3k9InN0cmljdC1vcmlnaW4td2hlbi1jcm9zcy1vcmlnaW4iIGFsbG93ZnVsbHNjcmVlbiBkYXRhLXNyYz0iaHR0cHM6Ly93d3cueW91dHViZS1ub2Nvb2tpZS5jb20vZW1iZWQvanpSTFdZaFpyQUE/ZmVhdHVyZT1vZW1iZWQmYW1wO21vZGVzdGJyYW5kaW5nPTEmYW1wO2F1dG9wbGF5PTEmYW1wO3JlbD0wIj48L2lmcmFtZT4=Techniques for perfect responsive images
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-sideMore from Bleech
Blog Posts (WordPress Development)
Flynt (WordPress Starter Theme)
VRTs (Visual Tests for WordPress)
Siegfried, deploy! (YouTube Channel) -
PGlmcmFtZSB0aXRsZT0iRW50ZXJwcmlzZS1sZXZlbCBXb3JkUHJlc3MgaW50ZXJmYWNlcyB3aXRoIEphcmVkIE5vdmFjayIgd2lkdGg9IjExMjAiIGhlaWdodD0iNjMwIiBmcmFtZWJvcmRlcj0iMCIgYWxsb3c9ImFjY2VsZXJvbWV0ZXI7IGF1dG9wbGF5OyBjbGlwYm9hcmQtd3JpdGU7IGVuY3J5cHRlZC1tZWRpYTsgZ3lyb3Njb3BlOyBwaWN0dXJlLWluLXBpY3R1cmU7IHdlYi1zaGFyZSIgcmVmZXJyZXJwb2xpY3k9InN0cmljdC1vcmlnaW4td2hlbi1jcm9zcy1vcmlnaW4iIGFsbG93ZnVsbHNjcmVlbiBkYXRhLXNyYz0iaHR0cHM6Ly93d3cueW91dHViZS1ub2Nvb2tpZS5jb20vZW1iZWQvYzNHbGhod3BLUm8/ZmVhdHVyZT1vZW1iZWQmYW1wO21vZGVzdGJyYW5kaW5nPTEmYW1wO2F1dG9wbGF5PTEmYW1wO3JlbD0wIj48L2lmcmFtZT4=Enterprise-level WordPress interfaces with Jared Novack
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) -
PGlmcmFtZSB0aXRsZT0iQ29udGFpbmVyIFF1ZXJpZXMgYXJlIGhlcmUhIENhbiB3ZSB1c2UgdGhlbSBub3c/IiB3aWR0aD0iMTEyMCIgaGVpZ2h0PSI2MzAiIGZyYW1lYm9yZGVyPSIwIiBhbGxvdz0iYWNjZWxlcm9tZXRlcjsgYXV0b3BsYXk7IGNsaXBib2FyZC13cml0ZTsgZW5jcnlwdGVkLW1lZGlhOyBneXJvc2NvcGU7IHBpY3R1cmUtaW4tcGljdHVyZTsgd2ViLXNoYXJlIiByZWZlcnJlcnBvbGljeT0ic3RyaWN0LW9yaWdpbi13aGVuLWNyb3NzLW9yaWdpbiIgYWxsb3dmdWxsc2NyZWVuIGRhdGEtc3JjPSJodHRwczovL3d3dy55b3V0dWJlLW5vY29va2llLmNvbS9lbWJlZC9nVDdBNWxkZE5oOD9mZWF0dXJlPW9lbWJlZCZhbXA7bW9kZXN0YnJhbmRpbmc9MSZhbXA7YXV0b3BsYXk9MSZhbXA7cmVsPTAiPjwvaWZyYW1lPg==Container Queries are here! Can we use them now?
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) -
PGlmcmFtZSB0aXRsZT0iUGFnZVNwZWVkIDEwMCB3aXRoIEphdmFTY3JpcHQgSHlkcmF0aW9uIGFuZCBJc2xhbmRzIiB3aWR0aD0iMTEyMCIgaGVpZ2h0PSI2MzAiIGZyYW1lYm9yZGVyPSIwIiBhbGxvdz0iYWNjZWxlcm9tZXRlcjsgYXV0b3BsYXk7IGNsaXBib2FyZC13cml0ZTsgZW5jcnlwdGVkLW1lZGlhOyBneXJvc2NvcGU7IHBpY3R1cmUtaW4tcGljdHVyZTsgd2ViLXNoYXJlIiByZWZlcnJlcnBvbGljeT0ic3RyaWN0LW9yaWdpbi13aGVuLWNyb3NzLW9yaWdpbiIgYWxsb3dmdWxsc2NyZWVuIGRhdGEtc3JjPSJodHRwczovL3d3dy55b3V0dWJlLW5vY29va2llLmNvbS9lbWJlZC9sSEZHbWtEX3JqVT9mZWF0dXJlPW9lbWJlZCZhbXA7bW9kZXN0YnJhbmRpbmc9MSZhbXA7YXV0b3BsYXk9MSZhbXA7cmVsPTAiPjwvaWZyYW1lPg==PageSpeed 100 with JavaScript Hydration and Islands
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-observerMore from Bleech
Blog Posts (WordPress Development)
Flynt (WordPress Starter Theme)
VRTs (Visual Tests for WordPress)
Siegfried, deploy! (YouTube Channel) -
PGlmcmFtZSB0aXRsZT0iR3V0ZW5iZXJnJ3MgZmF0YWwgZmxhd3MgLSB3aHkgaXQncyBub3QgZm9yIGFnZW5jaWVzIiB3aWR0aD0iMTEyMCIgaGVpZ2h0PSI2MzAiIGZyYW1lYm9yZGVyPSIwIiBhbGxvdz0iYWNjZWxlcm9tZXRlcjsgYXV0b3BsYXk7IGNsaXBib2FyZC13cml0ZTsgZW5jcnlwdGVkLW1lZGlhOyBneXJvc2NvcGU7IHBpY3R1cmUtaW4tcGljdHVyZTsgd2ViLXNoYXJlIiByZWZlcnJlcnBvbGljeT0ic3RyaWN0LW9yaWdpbi13aGVuLWNyb3NzLW9yaWdpbiIgYWxsb3dmdWxsc2NyZWVuIGRhdGEtc3JjPSJodHRwczovL3d3dy55b3V0dWJlLW5vY29va2llLmNvbS9lbWJlZC9tLW5MdXZjaHNzZz9mZWF0dXJlPW9lbWJlZCZhbXA7bW9kZXN0YnJhbmRpbmc9MSZhbXA7YXV0b3BsYXk9MSZhbXA7cmVsPTAiPjwvaWZyYW1lPg==Gutenberg’s fatal flaws – why it’s not for agencies
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) -
PGlmcmFtZSB0aXRsZT0iSG93IENoYXRHUFQgd2lsbCBtYWtlIHlvdSBhIGJldHRlciBkZXZlbG9wZXIiIHdpZHRoPSIxMTIwIiBoZWlnaHQ9IjYzMCIgZnJhbWVib3JkZXI9IjAiIGFsbG93PSJhY2NlbGVyb21ldGVyOyBhdXRvcGxheTsgY2xpcGJvYXJkLXdyaXRlOyBlbmNyeXB0ZWQtbWVkaWE7IGd5cm9zY29wZTsgcGljdHVyZS1pbi1waWN0dXJlOyB3ZWItc2hhcmUiIHJlZmVycmVycG9saWN5PSJzdHJpY3Qtb3JpZ2luLXdoZW4tY3Jvc3Mtb3JpZ2luIiBhbGxvd2Z1bGxzY3JlZW4gZGF0YS1zcmM9Imh0dHBzOi8vd3d3LnlvdXR1YmUtbm9jb29raWUuY29tL2VtYmVkL200RXBrWVdqV3ZnP2ZlYXR1cmU9b2VtYmVkJmFtcDttb2Rlc3RicmFuZGluZz0xJmFtcDthdXRvcGxheT0xJmFtcDtyZWw9MCI+PC9pZnJhbWU+How ChatGPT will make you a better developer
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/copilotMore from Bleech
Blog Posts (WordPress Development)
Flynt (WordPress Starter Theme)
VRTs (Visual Tests for WordPress)
Siegfried, deploy! (YouTube Channel) -
PGlmcmFtZSB0aXRsZT0iU3RvcCB1c2luZyBKUEdzOiB1c2UgV2ViUCEiIHdpZHRoPSIxMTIwIiBoZWlnaHQ9IjYzMCIgZnJhbWVib3JkZXI9IjAiIGFsbG93PSJhY2NlbGVyb21ldGVyOyBhdXRvcGxheTsgY2xpcGJvYXJkLXdyaXRlOyBlbmNyeXB0ZWQtbWVkaWE7IGd5cm9zY29wZTsgcGljdHVyZS1pbi1waWN0dXJlOyB3ZWItc2hhcmUiIHJlZmVycmVycG9saWN5PSJzdHJpY3Qtb3JpZ2luLXdoZW4tY3Jvc3Mtb3JpZ2luIiBhbGxvd2Z1bGxzY3JlZW4gZGF0YS1zcmM9Imh0dHBzOi8vd3d3LnlvdXR1YmUtbm9jb29raWUuY29tL2VtYmVkL0NDV1BZdnBVUFlZP2ZlYXR1cmU9b2VtYmVkJmFtcDttb2Rlc3RicmFuZGluZz0xJmFtcDthdXRvcGxheT0xJmFtcDtyZWw9MCI+PC9pZnJhbWU+Stop using JPGs: use WebP!
When you're working with websites, you can't ignore the WebP image format. But what makes this format better than other image formats? And is it really practical and will stay? In this episode, Steffen and Dominik dive deep into image formats and discuss how to use WebP.
Highlights
00:00 Intro
00:48 How do you optimize image loading?
01:22 The old image formats of the web
02:55 The newer image format: WebP
05:35 How to optimize png and jpg for web
07:13 What’s so cool about WebP?
09:33 Why didn't we use WebP for a long time?
12:13 Who should convert images to WebP?
13:47 Why is it so great to use just one image format?
17:06 Upload WebP directly
17:30 Dominik has an idea…
20:33 Workflow of integrating WebP
29:09 The image resizing bug (Can somebody fix it, please!)
30:15 There's no ideal image size to upload
32:29 Use WebP!
Links
Squoosh: https://squoosh.app/
Flynt: https://flyntwp.com/
WebP Express: https://wordpress.org/plugins/webp-express/
Blurry images bug report (2015): https://bugs.chromium.org/p/chromium/issues/detail?id=562162More from Bleech
Blog Posts (WordPress Development)
Flynt (WordPress Starter Theme)
VRTs (Visual Tests for WordPress)
Siegfried, deploy! (YouTube Channel) -
PGlmcmFtZSB0aXRsZT0iTG9jYWwsIFJlbW90ZSwgRGV2LCBTdGFnaW5nLCBMaXZlOiBPdXIgV29yZFByZXNzIGVudmlyb25tZW50cyIgd2lkdGg9IjExMjAiIGhlaWdodD0iNjMwIiBmcmFtZWJvcmRlcj0iMCIgYWxsb3c9ImFjY2VsZXJvbWV0ZXI7IGF1dG9wbGF5OyBjbGlwYm9hcmQtd3JpdGU7IGVuY3J5cHRlZC1tZWRpYTsgZ3lyb3Njb3BlOyBwaWN0dXJlLWluLXBpY3R1cmU7IHdlYi1zaGFyZSIgcmVmZXJyZXJwb2xpY3k9InN0cmljdC1vcmlnaW4td2hlbi1jcm9zcy1vcmlnaW4iIGFsbG93ZnVsbHNjcmVlbiBkYXRhLXNyYz0iaHR0cHM6Ly93d3cueW91dHViZS1ub2Nvb2tpZS5jb20vZW1iZWQvS1hHRURBZFpEV3M/ZmVhdHVyZT1vZW1iZWQmYW1wO21vZGVzdGJyYW5kaW5nPTEmYW1wO2F1dG9wbGF5PTEmYW1wO3JlbD0wIj48L2lmcmFtZT4=Local, Remote, Dev, Staging, Live: Our WordPress environments
How do you make sure every developer on a website project sees the same content across environments? How do we maintain stable development environments for very old websites? And on which environments do we present code changes to our clients? In this episode Dominik and Steffen give insights how they set up the deployment and cloning process and architecture at Bleech.
Highlights
00:00 Intro
00:31 Why care about the development server setup?
01:44 How we deployed back in the days
05:24 How we synch database and assets across development environments
07:05 Local environments on a remote server
10:33 The challenge with maintaining build processes
15:07 How we set up environments, cloning and deployments
21:21 When we split development and staging
22:41 More environments increase complexity
24:34 Dominik's favourite stack and process
31:10 Beware of data privacy!
32:47 A typical workflow for new projects
37:26 The future of dev environments
Links
StackBlitz: https://stackblitz.com/
CodeSandbox: https://codesandbox.io/
InstaWP: https://instawp.com/More from Bleech
Blog Posts (WordPress Development)
Flynt (WordPress Starter Theme)
VRTs (Visual Tests for WordPress)
Siegfried, deploy! (YouTube Channel) -
PGlmcmFtZSB0aXRsZT0iRG9uJ3QgdHJ1c3QgeW91ciBXb3JkUHJlc3Mgb3B0aW1pemF0aW9uIHBsdWdpbiIgd2lkdGg9IjExMjAiIGhlaWdodD0iNjMwIiBmcmFtZWJvcmRlcj0iMCIgYWxsb3c9ImFjY2VsZXJvbWV0ZXI7IGF1dG9wbGF5OyBjbGlwYm9hcmQtd3JpdGU7IGVuY3J5cHRlZC1tZWRpYTsgZ3lyb3Njb3BlOyBwaWN0dXJlLWluLXBpY3R1cmU7IHdlYi1zaGFyZSIgcmVmZXJyZXJwb2xpY3k9InN0cmljdC1vcmlnaW4td2hlbi1jcm9zcy1vcmlnaW4iIGFsbG93ZnVsbHNjcmVlbiBkYXRhLXNyYz0iaHR0cHM6Ly93d3cueW91dHViZS1ub2Nvb2tpZS5jb20vZW1iZWQvM0RyUmhlOUF5S28/ZmVhdHVyZT1vZW1iZWQmYW1wO21vZGVzdGJyYW5kaW5nPTEmYW1wO2F1dG9wbGF5PTEmYW1wO3JlbD0wIj48L2lmcmFtZT4=Don’t trust your WordPress optimization plugin
With caching you can speed up the loading time of your website. In this episode Steffen and Dominik dig into types of caching and discuss different WordPress plugins. It seems popular caching plugins turn into huge optimization plugins, but they might not necessarily be the right choice.
Highlights
00:00 Intro
00:29 What is caching?
01:32 Three big types of caching
06:57 It's not the browser cache!
07:35 How to achieve the biggest impact with low effort?
10:44 Looking at different WordPress caching plugins
16:20 Think twice before choosing a complex plugin
17:45 How we cache browser assets indefinitely
23:23 Our advice on WordPress caching
32:38 Conclusion
Links
Cache Enabler: https://de.wordpress.org/plugins/cache-enabler/
WP Super Cache: https://de.wordpress.org/plugins/wp-super-cache/
W3 Total Cache: https://wordpress.org/plugins/w3-total-cache/
Enable Media Replace: https://de.wordpress.org/plugins/enable-media-replace/
WP Fastest Cache: https://wordpress.org/plugins/wp-fastest-cache/
Autoptimize: https://de.wordpress.org/plugins/autoptimize/
WP Rocket: https://wp-rocket.me/More from Bleech
Blog Posts (WordPress Development)
Flynt (WordPress Starter Theme)
VRTs (Visual Tests for WordPress)
Siegfried, deploy! (YouTube Channel) -
PGlmcmFtZSB0aXRsZT0iR29vZ2xlIEZvbnRzIENhc2U6IEltcGFjdCBvbiB0aGUgRnV0dXJlIG9mIFdlYiIgd2lkdGg9IjExMjAiIGhlaWdodD0iNjMwIiBmcmFtZWJvcmRlcj0iMCIgYWxsb3c9ImFjY2VsZXJvbWV0ZXI7IGF1dG9wbGF5OyBjbGlwYm9hcmQtd3JpdGU7IGVuY3J5cHRlZC1tZWRpYTsgZ3lyb3Njb3BlOyBwaWN0dXJlLWluLXBpY3R1cmU7IHdlYi1zaGFyZSIgcmVmZXJyZXJwb2xpY3k9InN0cmljdC1vcmlnaW4td2hlbi1jcm9zcy1vcmlnaW4iIGFsbG93ZnVsbHNjcmVlbiBkYXRhLXNyYz0iaHR0cHM6Ly93d3cueW91dHViZS1ub2Nvb2tpZS5jb20vZW1iZWQvNC1kRG9rN05wWmM/ZmVhdHVyZT1vZW1iZWQmYW1wO21vZGVzdGJyYW5kaW5nPTEmYW1wO2F1dG9wbGF5PTEmYW1wO3JlbD0wIj48L2lmcmFtZT4=Google Fonts Case: Impact on the Future of Web
In this episode, Steffen and Dominik discuss why the verdict on the use of Google Fonts is so absurd. Does this mean that for all other services that work similarly, a ruling has to happen first? Will courts decide on designs in the future? And what could the ruling mean for free and paid fonts?
Highlights
00:00 Why do people get sued over Google Fonts?
03:44 How to load fonts from a local server?
08:01 Why is the verdict absurd?
09:46 What's the problem with Google Fonts?
13:41 Loading Google Fonts via other services (reCaptcha)
22:43 Accomplish GDPR privacy = impact on competitiveness
29:10 Why is it so easy to load Google Fonts?
33:18 Future of paid and free fonts
Links
GDPR: https://gdpr.eu/
Google reCAPTCHA: https://www.google.com/recaptcha/about/
Plausible: https://plausible.io/More from Bleech
Blog Posts (WordPress Development)
Flynt (WordPress Starter Theme)
VRTs (Visual Tests for WordPress)
Siegfried, deploy! (YouTube Channel) -
PGlmcmFtZSB0aXRsZT0iU2FmZSB1cGRhdGVzIHdpdGggdGhpcyBXb3JkUHJlc3MgcGx1Z2luIiB3aWR0aD0iMTEyMCIgaGVpZ2h0PSI2MzAiIGZyYW1lYm9yZGVyPSIwIiBhbGxvdz0iYWNjZWxlcm9tZXRlcjsgYXV0b3BsYXk7IGNsaXBib2FyZC13cml0ZTsgZW5jcnlwdGVkLW1lZGlhOyBneXJvc2NvcGU7IHBpY3R1cmUtaW4tcGljdHVyZTsgd2ViLXNoYXJlIiByZWZlcnJlcnBvbGljeT0ic3RyaWN0LW9yaWdpbi13aGVuLWNyb3NzLW9yaWdpbiIgYWxsb3dmdWxsc2NyZWVuIGRhdGEtc3JjPSJodHRwczovL3d3dy55b3V0dWJlLW5vY29va2llLmNvbS9lbWJlZC9fSzhSQU5pTVA1MD9mZWF0dXJlPW9lbWJlZCZhbXA7bW9kZXN0YnJhbmRpbmc9MSZhbXA7YXV0b3BsYXk9MSZhbXA7cmVsPTAiPjwvaWZyYW1lPg==Track Website Changes With Visual Regression Tests – Try this WordPress plugin
In this episode, you'll learn how to use visual regression tests in WordPress to track website changes. We explain the benefits of visual tests, how they'll help you detect critical issues and how you can set up visual regression tests with software libraries or WordPress plugins.
VRTs WordPress Plugin
https://vrts.app
Highlights
00:00 Intro
00:22 What are visual regression tests (VRTs)?
01:39 Why we build a VRTs plugin for WordPress
04:54 Experience with BackstopJS
11:40 Questions to consider before building a tool
14:22 Why don't we use an existing tool?
18:02 Why did we need visual regression tests for our websites?
19:00 Reason 1: Automatic Plugin-Updates
24:45 Reason 2: Code-Changes
25:28 Reason 3: Unnoticed Changes
30:31 How does our plugin work?
33:47 The technical structure
37:35 Don't miss the promo code and get 50% off 🙂
38:58 Why VRTs is so simple
Links
VRTs WordPress Plugin: https://wordpress.org/plugins/visual-regression-tests/
BackstopJS: http://garris.github.io/BackstopJS/
Selenium: https://www.selenium.dev/
PhantomJS: https://phantomjs.org/
Puppeteer: https://pptr.dev/
Playwright: https://playwright.dev/
Storybook: https://storybook.js.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) -
PGlmcmFtZSB0aXRsZT0iQ29uc2VudCBNYW5hZ2VtZW50IEdvbmUgV3Jvbmc6IERvZXMgWW91ciBDb29raWUgQmFubmVyIFdvcmsgYXMgRXhwZWN0ZWQ/IiB3aWR0aD0iMTEyMCIgaGVpZ2h0PSI2MzAiIGZyYW1lYm9yZGVyPSIwIiBhbGxvdz0iYWNjZWxlcm9tZXRlcjsgYXV0b3BsYXk7IGNsaXBib2FyZC13cml0ZTsgZW5jcnlwdGVkLW1lZGlhOyBneXJvc2NvcGU7IHBpY3R1cmUtaW4tcGljdHVyZTsgd2ViLXNoYXJlIiByZWZlcnJlcnBvbGljeT0ic3RyaWN0LW9yaWdpbi13aGVuLWNyb3NzLW9yaWdpbiIgYWxsb3dmdWxsc2NyZWVuIGRhdGEtc3JjPSJodHRwczovL3d3dy55b3V0dWJlLW5vY29va2llLmNvbS9lbWJlZC9xZ1dkb2Y5ZmZVaz9mZWF0dXJlPW9lbWJlZCZhbXA7bW9kZXN0YnJhbmRpbmc9MSZhbXA7YXV0b3BsYXk9MSZhbXA7cmVsPTAiPjwvaWZyYW1lPg==Consent Management Gone Wrong: Does Your Cookie Banner Work as Expected?
We've seen it many times: a cookie banner pops up on a website, but it's clearly not working as expected. External scripts are loaded right away and cookies are set without consent. What's okay to load, what isn't? How are necessary cookies defined? Who's responsible? And what would we like to of see consent management in the future?
Highlights
00:00 Intro
00:48 What is consent management?
02:48 How we use the cookie banner
04:59 Accept all cookies or pay?
08:44 Goal of the GDPR failed
10:28 What's the problem with cookie banners?
11:50 Example: Saving a language / country
13:13 What does the German law TTDSG §25 say?
15:25 Handling embedded YouTube Video on your website
17:58 How do you check, if a cookie banner is wrongly implemented?
22:57 Can you rely on consent management tools?
27:16 Become more aware of the right way doing consent management
34:24 Solution: Go privacy by design
Links
Borlabs Cookie: https://de.borlabs.io/borlabs-cookie/
TTDSG §25: https://www.gesetze-im-internet.de/ttdsg/__25.html
Chrome DevTools: https://developer.chrome.com/docs/devtools/open/More from Bleech
Blog Posts (WordPress Development)
Flynt (WordPress Starter Theme)
VRTs (Visual Tests for WordPress)
Siegfried, deploy! (YouTube Channel) -
PGlmcmFtZSB0aXRsZT0iUmV2ZWFsaW5nIEJsYWNraGF0IFBhZ2VTcGVlZCBPcHRpbWl6YXRpb24gVGVjaG5pcXVlcyIgd2lkdGg9IjExMjAiIGhlaWdodD0iNjMwIiBmcmFtZWJvcmRlcj0iMCIgYWxsb3c9ImFjY2VsZXJvbWV0ZXI7IGF1dG9wbGF5OyBjbGlwYm9hcmQtd3JpdGU7IGVuY3J5cHRlZC1tZWRpYTsgZ3lyb3Njb3BlOyBwaWN0dXJlLWluLXBpY3R1cmU7IHdlYi1zaGFyZSIgcmVmZXJyZXJwb2xpY3k9InN0cmljdC1vcmlnaW4td2hlbi1jcm9zcy1vcmlnaW4iIGFsbG93ZnVsbHNjcmVlbiBkYXRhLXNyYz0iaHR0cHM6Ly93d3cueW91dHViZS1ub2Nvb2tpZS5jb20vZW1iZWQvNFhsQlFmclNOeDg/ZmVhdHVyZT1vZW1iZWQmYW1wO21vZGVzdGJyYW5kaW5nPTEmYW1wO2F1dG9wbGF5PTEmYW1wO3JlbD0wIj48L2lmcmFtZT4=Revealing Blackhat PageSpeed Optimization Techniques
To start off the podcast, Dominik and Steffen dive deeper into the question: for what or for whom should PageSpeed be optimized?
The user should be in the main focus of PageSpeed optimization, because a fast website contributes to a good UX. But should you consider users who come for the first time to the homepage or should you look at returning visitors?
On the other hand a high PageSpeed score is one of the most important numbers for website clients these days. Does increasing the score – without the user in mind – force developers to think of techniques to trick the measurement tool?
Highlights
00:00 Intro / Understanding Core Web Vitals
01:06 What did Dominik do to optimize the Bleech website?
02:16 What is Blackhat PageSpeed Optimization?
04:36 Should you consider Core Web Vitals or page speed ranking?
17:15 How did we optimize the page speed of bleech.de?
22:52 Why is this way blackhat?
26:57 The problem with Third-Party Scripts
29:08 What's the future of website optimization?
39:27 Wrap up
Links
Our website: https://bleech.de
PageSpeed Insights: https://pagespeed.web.dev/
Core Web Vitals: https://web.dev/vitals/
Plausible: https://plausible.io/
Borlabs Cookie: https://borlabs.io/borlabs-cookie/
Flynt WordPress Starter Theme: https://flyntwp.com/
Partytown: https://partytown.builder.io/
web-vitals JavaScript Library: https://github.com/GoogleChrome/web-vitalsMore from Bleech
Blog Posts (WordPress Development)
Flynt (WordPress Starter Theme)
VRTs (Visual Tests for WordPress)
Siegfried, deploy! (YouTube Channel)
Want more Bleech Insights?
Are you curious about what we have to say and want to stay up to date?
Then subscribe to Bleech Insights here!
powered by Borlabs Cookie