Standardizing the checkbox and radio buttons using CSS (and only CSS)
If you ask me to name one thing that I use everyday, I would probably say a browser and I'm pretty sure I'm not alone on this boat. For better or for worse, browsers have become part of our lives, we use them at work, we use them at home, we use them to read emails, news and even to chat and share our thoughts with the world. I dare say it's the one tool you cannot live without (unless of course you have been living under a rock for the last decade or so).
Fortunately for us, we are not short on options: Chrome, Firefox, Edge, IE, Opera, Brave, and the list goes on. But it was due to this diversity of options that non other than the founder of the Internet, Sir Timothy John Berners-Lee, decided some standards were needed. But standards are just guidelines that tell the browser the where and the what, but they don't tell the how. So the final implementation of a standard can (and almost 100% of the time, will) look different in one browser than it does in another.
Input elements - especially the checkbox and the radio buttons - are a good example of the above, so in this article I'm going to show you how to standardize these two elements with nothing but CSS.
Supercharging the Success Message in WFFM forms
How many of you have opted for a redirection to a thank you page over a simple successful message with no refresh when dealing with Web Forms for Marketers? If you are doing this willingly, then fine, but if you are doing it because there are no styling options in the Success Message field, then keep reading... there are a few tricks you can use to supercharge this field.
Adding content via css content/attr functions
Syntax
| <selector>:[before|after] { | |
| content: [attr(<attribute>) | 'plain text'] | |
| } |
| Option | Description |
|---|---|
| attribute | The name of the attribute to be used to populate content. |
Calculating values in css with calc
Syntax
| calc(<expression>) |
| Option | Description |
|---|---|
| expression | A mathematical expression, the result of which is used as the value. |
Pointer accuracy detection with pointer and any-pointer media features
Syntax
| @media ([pointer|any-pointer]: <[none|coarse|fine]>) { | |
| [styles] | |
| } |
| Option | Description |
|---|---|
| none | Use when the primary input mechanism of the device does not include a pointing device |
| coarse | Use when the primary input mechanism of the device includes a pointing device of limited accuracy |
| fine | Use when the primary input mechanism of the device includes an accurate pointing device (mouse) |
Detect browser support for specific CSS features
Syntax
| @supports [not](<supports-condition>) { | |
| [styles] | |
| } |
| Option | Description |
|---|---|
| supports-condition | The feature to be evaluated |
Page loading optimization with defer and async scripts
Loading time is a major contributing factor to page abandonment. The average
user has no patience for a page that takes too long to load, so it's always a
good idea to optimize web pages. One of the most common and easiest ways to
achieve this level of optimization is by loading scripts asynchronously with
either defer or async attributes in the script tag.
Field value interpolation in Sitecore
In a previous blog post we talked about branch templates and how they make a content author's life a little bit easier by reducing the creation process of complex tree structures to a mere click. But, unbeknownst to most, the post also introduced us to a new concept: tokens.
Rebase a pull request
There is nothing more daunting than rebasing your first pull request. I still
remember the day I was asked to do this and, honestly, I can't recall how I
pulled it off, but I did... of course this was years ago when there was no
Update branch button in Github (which by the way, does a merge commit
which I personally dislike). So I'm gonna save you some time and a lot of
trouble with this mini guide.
Don't repeat yourself with Sitecore Branch Templates
Wikipedia defines Don't Repeat Yourself (DRY) as a principle aimed at reducing repetition of software patterns, replacing it with abstractions or using data normalization to avoid redundancy. Easy right? In fact, so easy that most developers apply the principle almost naturally and, in most cases, without even noticing they are using it.
Have you ever considered how Sitecore uses it? Oh yes, Sitecore does use it and extensively.
Don't believe me, keep reading...