Best of DockYard — 2024

1. 1
   Article

   DockYard·2y

   Creating an Accessible Toggle Switch in Tailwind CSS

   Learn how to create an accessible toggle switch in Tailwind CSS using the `aria-checked` attribute and the `group` helper class. This allows for cleaner and more legible code, reducing the need for additional logic.

   32

   1
2. 2
   Article

   DockYard·2y

   Animate Intrinsic Size With CSS

   Animating the size of UI elements with CSS has historically been challenging, especially for properties like height. Modern CSS introduces tools such as CSS Grid and the new `calc-size()` function to make these animations more seamless. CSS Grid allows replicating intrinsic-size animations, while `calc-size()` enables developers to calculate intrinsic sizes natively. While `calc-size()` has limited browser support currently, it shows great promise for future use.

   28
3. 3
   Article

   DockYard·2y

   LiveView Native Is Here!

   LiveView Native v0.3 provides a framework for building native UI on multiple devices using the LiveView programming model. It reduces development and maintenance costs, allows for critical updates without app store delays, and can deploy to all Apple and Android devices. Unlike other frameworks, it wraps first-class UI frameworks like SwiftUI and Jetpack, ensuring optimal user experience on each device.

   27

   3
4. 4
   Article

   DockYard·2y

   My Experiences as an Engineer: Context Switching

   Managing multiple projects and tasks can be challenging for engineers due to frequent context switching. Key strategies for handling this include staying organized, setting daily intentions, grouping browser tabs, prioritizing time-sensitive tasks, and using tools like Pomodoro timers. It's also essential to document everything and avoid common anti-patterns like multitasking and skipping breaks. Taking regular breaks and enjoying small moments throughout the day can significantly improve productivity and well-being.

   24
5. 5
   Article

   DockYard·2y

   Introducing LVN Go

   LVN Go is introduced as an alternative to Xcode for developing LiveView Native applications. This app allows developers to run their applications directly on a device without needing Xcode. It supports iPhone, iPad, and MacOS. Key features include LiveReload, a shake-to-refresh functionality, and a versatile settings menu. The post also hints at future improvements, such as tree-sitter syntax highlighters and language server integrations.

   21

   1
6. 6
   Article

   DockYard·2y

   Improve Your Test Automation with Cypress

   Cypress is a web-specific test automation framework that offers streamlined setup, clean tests, the Page Object Model (POM), and code reusability. It provides comprehensive testing, automated testing, debugging tools, cross-browser testing, mocking and stubbing, command log, synchronization, and more.

   20
7. 7
   Article

   DockYard·2y

   Web Crawling with Hop, Mighty, and Instructor

   Web scraping, or web crawling, involves automated browsing to extract information from websites. This guide demonstrates how to use the Hop library in Elixir to build a basic SEO bot for extracting readable content and performing keyword analysis using the Mighty library. The post also discusses the ethical considerations of web scraping, including respecting robots.txt, rate limiting, and respecting terms of service. Advanced techniques such as combining traditional web crawlers with large language models to enhance data extraction applications are also explored.

   18