Expand all Asana comments and threads in a task

May 18, 2023 at 12:56 pm | Programming, web.

You can use the following piece of Javascript as a bookmark in your browser to expand all the comments and threads in an Asana task. This is really helpful when you have long threads with lots of comments and you are unable to see all of them because Asana hides them by default.

Read more »

Fixing preview or unfurl in Slack

February 19, 2022 at 1:48 pm | Programming, web.

Sometimes you will find that certain links in slack do not preview or unfurl inside of a channel or conversation. When you have ruled out all of the basic reasons set forth in the Slack share links documentation setup here here are a couple more that you can look into.

Read more »

Drupal: Get the node/bundle when preprocessing a paragraph

January 20, 2022 at 9:42 am | blabbing.

If you need to preprocess a specific paragraph type for it’s content or fields but you need to know the node/entity type that the request is coming from you can use the following.

Make sure that you check to make sure the $node is not NULL before running methods against $node.

Here we are going to preprocess a PARAGRAPH_TYPE but only if that paragraph is part of a CUSTOMER node/entity type.

<?php

function MODULE_NAME_preprocess_paragraph__PARAGRAPH_TYPE(&$variables){

  // Get the paragraph
  $paragraph = $variables['paragraph'];

  // Get the Language
  $language = \Drupal::languageManager()->getCurrentLanguage()->getId();
  
  // Get the Node from the request.
  $node = Drupal::request()->attributes->get('node');

  // Check to make sure the node is NOT null before running something like $node->bundle();
  if($node != null && $node->bundle() == 'customer' ){
    // Code
  }
}

CSS selector for lang :not en/english

January 5, 2022 at 11:49 am | blabbing.

This type of CSS selector can be useful for when you have a multi-lingual site and some content or features may be different between the EN (english) site and other languages. Without having to explicitly name each language in the selector you just want to say “everything that is not EN”.

html:not([lang="en"]){
  .name-of-selector{
    // Updated attributes
  }
}

Load the fonts first for page speed

November 21, 2021 at 1:14 pm | blabbing, Design, Programming, web.

To increase page speed for blocking font rendering and to reduce the font rendering time when the page loads on your site, add your fonts as a preload at the top of your page.

This may seem counter intuitive to load an asset ahead of time for page speed, but it makes sense in two respects.

  1. When the CSS renders it will get to the fonts and then go fetch them and wait for them to come back and then go on to get other assets that are related to the CSS. This is referred to as a “Blocking call” which means nothing is going to happen until this comes back. Google does not like this and will penalize your page speed for this. Once you preload the fonts you will notice that your fonts are no longer listed as a block call and you can see this in your network tab in the inspector.
  2. If the fonts are not preloaded you might see a noticeable flicker or shift in the page once the font in rendered in the page. Many people will even set an opacity on the body tag and transition it in once the fonts are available to avoid this shift. Preloading avoids this shift because the fonts are immediately available in the document render.
<link rel="preload" href="PATH-TO-YOUR-OTF-FONT.otf" as="font" type="font/otf" crossorigin>
<link rel="preload" href="PATH-TO-YOUR-WOFF-FONT.woff" as="font" type="font/woff2" crossorigin>

For preloading Google fonts it’s usually recommended that you preconnect as well as preload the CSS

<link rel='preconnect' href='https://fonts.gstatic.com' crossorigin>
<link rel='preload' as='style' href='https://fonts.googleapis.com/css2?family=Open+Sans|Roboto:wght@300&display=swap'>
<link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Open+Sans|Roboto:wght@700&display=swap'>

Triggering javascript on change programmatically and have it bubble

October 28, 2021 at 10:01 am | Programming, web.

A problem I ran into recently is that updating an input value is a form using javascript or jQuery is fairly easy but sometimes this programmatic update of the field does not trigger an onChange event that another piece of code is listening for. Adding a dispatchEvent on the selector can accomplish this.

<script>
  // Get the selector
  const $emailField = document.getElementById('Email');
  // Update the selector value
  $emailField.value = "[email protected]";
  // Trigger a dispatchEvent on the selector
  $emailField.dispatchEvent(new Event("input", { bubbles: true }));
</script>

Working with Hubspot forms onFormSubmit

October 13, 2021 at 11:02 am | Programming, web.

Getting values from the hubspot form in it’s onFormSubmit handler can be pretty tricky so here is a quick tip.

Add the onFormSubmit closure function to the hbspt.forms.create script and then use .find() to get the value of individual form elements that you need. At that point you can use them to pass to tracking or cookies or whatever.

<script>
  hbspt.forms.create({
	region: "na1",
	portalId: "555121212",
	formId: "23845959d-1d80-4af7-81ae-5b3f5c52adf483",
	onFormSubmit: function($form) {

		var firstname = $form.find("[name=firstname]").val();
		var lastname = $form.find("[name=lastname]").val();
		var email = $form.find("[name=email]").val();
		var jobtitle = $form.find("[name=jobtitle]").val();
		var company = $form.find("[name=company]").val();
		
	} 
});
</script>