<
<div class="span index">1</div> <span><a class="" data-remote="true" data-type="html" href="/series/species-unite">Species Unite</a></span>
Stories that change the way the world treats animals.
Player FM - Internet Radio Done Right
Checked 7M ago
اضافه شده در two سال پیش
محتوای ارائه شده توسط Bleech. تمام محتوای پادکست شامل قسمت‌ها، گرافیک‌ها و توضیحات پادکست مستقیماً توسط Bleech یا شریک پلتفرم پادکست آن‌ها آپلود و ارائه می‌شوند. اگر فکر می‌کنید شخصی بدون اجازه شما از اثر دارای حق نسخه‌برداری شما استفاده می‌کند، می‌توانید روندی که در اینجا شرح داده شده است را دنبال کنید.https://fa.player.fm/legal
Player FM - برنامه پادکست
با برنامه Player FM !
با برنامه Player FM !
))
Daily Deals
پادکست هایی که ارزش شنیدن دارند
حمایت شده
PageSpeed 100 with JavaScript Hydration and Islands
Manage episode 353634043 series 3419630
محتوای ارائه شده توسط Bleech. تمام محتوای پادکست شامل قسمت‌ها، گرافیک‌ها و توضیحات پادکست مستقیماً توسط Bleech یا شریک پلتفرم پادکست آن‌ها آپلود و ارائه می‌شوند. اگر فکر می‌کنید شخصی بدون اجازه شما از اثر دارای حق نسخه‌برداری شما استفاده می‌کند، می‌توانید روندی که در اینجا شرح داده شده است را دنبال کنید.https://fa.player.fm/legal
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)
47 قسمت
اشتراک گذاری
Manage episode 353634043 series 3419630
محتوای ارائه شده توسط Bleech. تمام محتوای پادکست شامل قسمت‌ها، گرافیک‌ها و توضیحات پادکست مستقیماً توسط Bleech یا شریک پلتفرم پادکست آن‌ها آپلود و ارائه می‌شوند. اگر فکر می‌کنید شخصی بدون اجازه شما از اثر دارای حق نسخه‌برداری شما استفاده می‌کند، می‌توانید روندی که در اینجا شرح داده شده است را دنبال کنید.https://fa.player.fm/legal
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)
47 قسمت
همه قسمت ها
×
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)…
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)…
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)…
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)…
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)…
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/discussions More from Bleech Blog Posts (WordPress Development) Flynt (WordPress Starter Theme) VRTs (Visual Tests for WordPress) Siegfried, deploy! (YouTube Channel)…
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/MutationObserver More from Bleech Blog Posts (WordPress Development) Flynt (WordPress Starter Theme) VRTs (Visual Tests for WordPress) Siegfried, deploy! (YouTube Channel)…
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-results More from Bleech Blog Posts (WordPress Development) Flynt (WordPress Starter Theme) VRTs (Visual Tests for WordPress) Siegfried, deploy! (YouTube Channel)…
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 Links More from Bleech Blog Posts (WordPress Development) Flynt (WordPress Starter Theme) VRTs (Visual Tests for WordPress) Siegfried, deploy! (YouTube Channel)…
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)…
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)…
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)…
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)…
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/zOjBdzBaWSs More from Bleech Blog Posts (WordPress Development) Flynt (WordPress Starter Theme) VRTs (Visual Tests for WordPress) Siegfried, deploy! (YouTube Channel)…
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 Websites More from Bleech Blog Posts (WordPress Development) Flynt (WordPress Starter Theme) VRTs (Visual Tests for WordPress) Siegfried, deploy! (YouTube Channel)…
به Player FM خوش آمدید!
Player FM در سراسر وب را برای یافتن پادکست های با کیفیت اسکن می کند تا همین الان لذت ببرید. این بهترین برنامه ی پادکست است که در اندروید، آیفون و وب کار می کند. ثبت نام کنید تا اشتراک های شما در بین دستگاه های مختلف همگام سازی شود.
Daily Deals
Daily Deals
Player FM - برنامه پادکست
با برنامه Player FM !
با برنامه Player FM !
))
