We use mailto links in html that opens default mail client app in the system. Mailto takes parameters that helps to create message with relevant fields already filled out for us.

But here’s the kicker: How do we create email message with all relevant fields filled out but without recepient name? We want user to fill recepient manually.

Now: First let’s see how mailto link is constructed -

<a href=“mailto:recepient@email.com?cc=first@email.com, second@email.com&bcc=gossip@email.com&subject=blah”>
Email Us
</a>

Common Mailto components are:

Now comes the best part:

I use hex codes for color values - most of the part in my css than rgb or color name. We have limited named colors in css hence less color palette to work with so I generally don’t use them much frequently.

In rgb we have colors made of Red Green Blue channels. Values of each channel range from 0 to 255. In hex code, each digit contain values ranging from 0 - 9 and A - F - total 16 values. To represent each color channel we have two digit per channel that can provides us 256 combination of values.

Now we have #RRGGBB - two digit hex for each color channels.

We will add social media icons or buttons programmatically in html code of theme in Shopify. We are using free Debut theme. Our Debut theme does come with built-in most of the social icons. We will not be adding or uploading icon image files of our own. We will play with basic code and templating in Shopify.

The built-in social icons are all svg. We are glad they are svg. They are vector so works fluidly when adapting to any size we want it to be. It is very easy to customise the tint color by css or code. We don’t need separate image files for different colors or such. It is widely supported by all modern browsers.

All major files we work with are liquid files. Our whole theme customisation structure is built around Shopify’s liquid templating language that lets us work with all variables and objects to re-use without any heavy lifting work. Our built-in social media icons are in liquid files, which we will shortly see.

In visual editor of our basic free theme called Debut, we have feature to edit the information of social links that we want to use. This feature is in the social media settings inside theme settings of customisation.

When you save it. The value gets saved inside themes built-in settings liquid object. In our example here we are referring to Instagram link. Now for example if we are using Instagram url in our website in multiple places and with some custom layouts. Instead of copy pasting Instagram url into places, it would be much better if it was accessible from single liquid object. If in future Instagram link changes in one global place then it automatically updates throughout the website. This is just an example case scenario here and this can be used in many other situations.

While working with search input in html form I came across steps of information that helped me manipulate iOS keypad. What do I mean by manipulating iOS keypad? It doesn’t mean changing anything about core physical appearance or device capability of software keyboard or device.

• Search should be the text over return/action button
• When I press Search on keypad then action should take place or some event should fire off without redirecting or refreshing the page.
• Lastly when I press ‘Search’ then keypad should also go down or dismissed.