As a Web Developer, What Should I Know about SEO?
There are a lot of reasons why you might want to start developing a website. It could be a way to expand or establish your small business, or a way to organize a portfolio for your art. It could even serve as a personal website that helps job recruiters find you and learn more about… Read more »
Category: Articles / Common Questions
How to Fire a jQuery Function When the Page is Loaded and Resized
When building responsive websites you often want to run a script when the page loads. But when you resize the window the layout breaks. You can use the on method to run your code if the page loads or has been resized.
1 2 3 4 5 6 7 | // run on page load and when the window is resized $(window).on("load resize",function(e){ console.log("adjust layout"); $('.page-header').matchHeight(".target"); }); |
Source
Category: Code Snippets
Web Font Weight and Style Mixin [Code Snippet]
If you are using Google Fonts or a custom web font, you probably are writing different font weights and styles. These mixins combine the two to make it really easy to update a global font style in your stylesheet.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 | @mixin font-xlight { font-weight: 200; font-style: normal; } @mixin font-xlight-italic { font-weight: 200; font-style: italic; } @mixin font-light { font-weight: 300; font-style: normal; } @mixin font-light-italic { font-weight: 300; font-style: italic; } @mixin font-book { font-weight: 400; font-style: normal; } @mixin font-book-italic { font-weight: 400; font-style: italic; } @mixin font-medium { font-weight: 500; font-style: normal; } @mixin font-medium-italic { font-weight: 500; font-style: italic; } @mixin font-bold { font-weight: 700; font-style: normal; } @mixin font-bold-italic { font-weight: 700; font-style: italic; } @mixin font-black { font-weight: 800; font-style: normal; } @mixin font-black-italic { font-weight: 800; font-style: italic; } |
Category: Code Snippets
How to Visually See What Your jQuery Selection is Selecting
I was recently working on form validation and wanted to mark a.form-group as successful if it contained a particular icon inside the label. The icon was set using PHP depending if the data existed in the database. I was writing .prev() and .parent() to try and select the wrapping .form-group but it wasn’t working and… Read more »
Category: Code Snippets / Tutorials
How to Migrate a HubSpot Blog to WordPress
If you are looking for a way to migrate your HubSpot blog to WordPress there isn’t a one click option unfortunately. However, by following the steps below you can create a CSV file of the data to import into your WordPress site. Export HubSpot blog data to import into WordPress
1 2 3 4 | {% set export = blog_recent_posts('YOUR_BLOG_ID_HERE', 200) %} "post_title","post_slug","post_date","post_content","post_thumbnail","post_author","post_category",<br> {% for content in export %} "{{ content.name|forceescape }}","{{ content.slug|forceescape|replace('blog/', '') }}","{{ content.publish_date_localized|forceescape }}","{{ content.post_body|replace('"','""')|forceescape|escape_jinjava }}","{{ content.featured_image }}","{{ content.blog_post_author }}","{{ content.topic_list|forceescape|replace('[', '')|replace(']', '') }}"<br>{% endfor %} |
Follow these steps: Create… Read more »
Category: Tutorials
How to Get a List of WordPress PDF, Image, Post, or Page URLS
Below are two PHP scripts you can use to help get a list of URLs of content in your WordPress site. I use these when I am migrating posts or media library files to another sites without using a plugin. Follow the steps below to use these scripts Open a text editor and copy and… Read more »
Category: Code Snippets
How to Create a List of Urls and Meta Titles from a Domain
I was working on a site migration and I needed to create an excel spreadsheet of all of the urls, page titles, and meta description. This document would then be shared with the copywriters to work on editing the page copy. I found some nice online tools to make this process easy. Step 1: Generate… Read more »
Category: Tutorials
How to Prevent One Word Lines (widow orphan) In Website Paragraphs
I am often adding padding to the left and right of paragraphs to force copy down to prevent one word on a line. Or even worse, I add <br> to a word on the line above to prevent the word by itself. But this causes issues with responsive design because the <br> changes position breaking… Read more »
Category: Code Snippets
What are the Open Sans CSS Font Weights?
I often want to use different font weights for Open Sans and so am adding them here for quick reference later. Open Sans light font-weight: 300; regular font-weight: 400; semi-bold font-weight: 600; bold font-weight: 700; extra-bold font-weight: 800;
Category: Common Questions
Trigger HubSpot Popup Form on Page Load or CTA Click
HubSpot provides the ability to display a pop up form with various triggers (exit intent, after 7 seconds, etc.) But what if you want to show it immediately or when a button is clicked? Below is some javascript to help achieve this functionality.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | window.onload = function() { // add a delay to give time for the pop form to load setTimeout(function() { // trigger the opening of the pop up window.leadflows.dynoFactory.create(window.leadflows.lfConfig.leadFlows[0]).open(); /* can also be triggered on button click $(".cta").click(function(){ window.leadflows.dynoFactory.create(window.leadflows.lfConfig.leadFlows[0]).open(); }); */ }, 200); // window load }; |
Category: Code Snippets