Here's a quick SASS mixin for developers using Bootstrap 4. Note that it only works for styles with a single value. The Motivation.... I was inspired to write this because I was working on a new custom WordPress theme where I had design mockups for Desktop and Mobile, which is great! The challenge was there was really a big difference between the Desktop and Mobile versions. The Desktop mockup depicted a screen width of 1920px, and the mobile version was for a width of 375px. The execution was really going to call for a LOT of interstitial styles, so I wanted a handy way to take the well-defined high and low values, and let it fill in the middle bits for me automatically. Equal Interval Interpolation (quick and dirty) [crayon-5e5390c9aadf7448319943/] It takes the high and low values for a style, and defines the middle ones for you, breaking them into equal intervals. By equal interval, we mean the algorithm assumes the differences between each value should be equal. For example, if your highest value is 160px and lowest is 40px, and you want 4 values (including the given high and low), they would be assigned at 40px intervals: 40px (given lowest) 80px 120px 160px (given highest) Note that we are ignoring the lowest value, since in my case, I didn't want the styles to start changing until the 2nd breakpoint: xs: 0 sm: 40px (given lowest) md: 80px lg: 120px xl: 160px (given highest) Notice that there's a bit of a flaw in the logic in the above case, though, since it doesn't take into account the actual intervals between breakpoint widths. It implies the breakpoint widths are always going to be equal distances [...]
That can hurt your SEO, confuse your visitors, expose you to security risks, and generally reflect poorly on your business. If you use tools like Yoast SEO to automatically create a sitemap xml, some pages may be included that you weren't expecting. Those pages are indexed by search engines, and end up in search results. Review your sitemap by adding /sitemap.xml to your site's URL (http://example.com/sitemap.xml). If you find some things in there you don't want, you can set the status of the offending posts to DRAFT, or visit the search appearance page to remove them from search results. If you haven't done this before, visit SEO > Search Appearance in your dashboard. Go through all the tabs, looking for any post types, archives, or taxonomies that you don't want to show in search results, and set their "Show in search results" option to NO. If someone else configured Yoast for you, we recommend checking on this, because it's something agencies often forget. If you're an agency, we recommend adding this step to your launch checklist.
Want to improve your Search Engine Ranking? Try adding schema markup to your site. It helps search engines place your content into context, and helping search engines understand your content is generally going to boost your SEO. As a bonus, since they understand your site better, search engines may display additional information about the page, and that will make your result stand out and be more attractive. If your page ranks highly, and the search engine decides to highlight your page, the markup will help it decide how to present it. When I talk about placing your content into context, I mean you can specify things like... This is my company's logo This is my company's physical address This is my contact form These are products or services I sell This is the main navigation menu for my site If you're a theme coder, I recommend you start incorporating schema markup into your themes. If you're not, here's a great WordPress plugin to help get you started: https://wordpress.org/plugins/schema/. Here is where you go to learn more about Schema markup: https://schema.org/ In the attached example, you see how schema markup in JSON_LD format is used to self-describe an Avengers Endgame movie review: https://www.commonsensemedia.org/movie-rev…/avengers-endgame.
Here are slides from my Lightning talk at the WordPress Seattle Lightning Talks & Help Desk Meetup, July 17, 2018. Please feel free to add constructive comments, corrections, alternative solutions, and your own advice. Talk Description Patrick discusses strategies and resources to help make your CSS more compatible across browsers. We'll touch on which deciding which browsers to support, Progressive Enhancement vs. Graceful Degradation, finding which rules to use, and testing strategies.
Here are the slides from a Lightning talk I gave at the Seattle WordPress Lightning Talks & Help Desk Meetup on June 19, 2018. Please feel free to add constructive comments, corrections, alternative solutions, and your own advice.
This is the slideshow for my presentation at WordCamp Seattle, Nov. 5, 2017 Enjoy! Please feel free to add constructive comments, corrections, alternative solutions, and your own advice for empowering web admins and improving maintainability. Talk Description “I never want my site to change.” – Said No Client Ever Healthy websites change over time just like healthy businesses do. As developers, it is our job to empower website admins, and make our sites more maintainable. This talk shares design patterns and best practices you will find invaluable when creating custom themes for clients, and demonstrates how to implement them using Advanced Custom Fields (ACF). ACF is a powerful development tool used to easily manage custom fields and data. Since the possibilities are endless, we will explore a handful of specific examples. These will include… Providing simple options for clients: Editable content fields for specific sections, such as changing the image and copy overlay for hero images Single, repeatable call-to-action blocks Choose between several kinds of content blocks Choose a custom post type “product” to be the featured product Providing options for advanced users: Add a field for custom CSS classes Automatically apply ids so admins can apply custom CSS Expose specific styling elements, such as tweaking the position of background images Apply icons to menu items Optionally add a sidebar to single content blocks Force a content block to be full width And many more!
The question came up today about whether to use Image Maps or other alternatives to add links inside of images. I did a little research on the subject, and thought it would be handy to share what I found along with my own thoughts. A Quick Q&A Summary Should I use image maps? Yes!... when it makes sense to. When should I use image maps? When your images won't change size When your link needs to be a complex shape, and not just a box When you're dealing with raster images like jpg photographs When should I NOT image maps? When your image is responsive and changes size When you're dividing the image into parts: slice it, and use image links When you want special styling or behavior When you're starting with a vector image, and can implement it as SVG What should I remember when using image maps? Always add descriptive alt tags to your area tags Add Title attributes to area tags to provide tooltips to users Include text links somewhere on the page corresponding to the image map links Order the areas from left to right, and top to bottom for screen readers, and tabbing Some Discussion Image maps have been around since the dawn of time (which in this case means 1997 with HTML 3.2), so people sometimes dismiss them as arcane. However, they're still fully supported in HTML5, and shouldn't be dismissed out of hand. Having said that, there are certainly some things they can't do, and should be implemented thoughtfully to be accessible to visitors using screen readers. Of course you know Google's going to have something to say about it, so you'll want to implement them properly to [...]