Craft well-formed HTML
When browsers parse malformed or incorrect HTML, they don’t throw an error, like they do for script. They ignore bad HTML and carry on parsing the rest. The end result is pages that look odd or not quite right. Tables and other elements aren’t symmetrical, and browsers make other aspects of the UI appear strange. So we can’t build great looking UIs without well formed HTML elements. Fortunately for us, Rider is always monitoring our HTML to ensure it’s well formed and up to date so our pages will appear as intended.
Nobody has the time to type out all the brackets and double quotes needed to create proper HTML. So Rider relies on Emmet to provide several basic but super handy shortcuts to help you write it faster. Just type in the tag name, press Tab, and off you go! The tag is automatically completed. Sometimes, the simplest features are the most effective and useful.
A common activity when writing HTML is the need to sweep through a section of code and replace all tags (start and end tag) with another. Often, developers use the Find/Replace command in many editors, but Rider makes it even simpler. Just place the cursor on the tag to be changed, press Alt + Enter, choose Replace all ‘span’ tags, and enter the new tag. Look at just how much more smooth replacing a tag is as opposed to a Find/Replace.
All too often, we write some code and then realize that we’ve gone a bit overboard on nesting tags (looking at you, div tag). Usually removing the extra tags involves finding both the start and end, then deleting it, but losing our place in the process. Then we end up with mismatched tag starts and ends, and some red squiggles or an indicator of malformed code, while we wonder how we messed up something so simple. That’s just no fun and gets in the way of getting work done. Rider has a simple yet perfect solution to this. Use the ever familiar Alt + Enter and select Remove tag and promote children. Now our work on structure and layout has become much easier.
Links are the very foundation of the World Wide Web. Without them, the Internet wouldn’t even function! Because of that, nearly every page on the internet has links, and that means someone has to create them (that’s us!). The Surround With feature, invoked by Alt + Enter, allows us to highlight some text and wrap a link around it. Presto! The easiest anchor, ever.
Surround with also allows you to surround any chunk of code or text with HTML tags as well.
Create CSS the easy way
Part of building a sleek front-end that people love to look at is ensuring that CSS is done right. The problem is that many people have a difficult time writing CSS that works properly – as there are many caveats to using the language. But CSS doesn’t have to be such a struggle. Rider has hundreds of CSS inspections, as well as a validator that validates CSS with W3C CSS validator library, and support for the popular Stylelint library as a plug-in.
Because it’s important for browser compatibility to know which version of CSS we’re working with, Rider shows the version whenever there is a code completion tool window is displayed, along with lots of other important information.
As CSS in a project becomes more complex, we often find ourselves with duplicate CSS properties, so Rider performs an overwrite detection, and notifies us when there are duplicates. This feature is super handy, since it’s so easy to overlook properties that were already added.
Color me impressed by Rider’s color tools. Traditional web apps often use HEX color codes, RGB, or named colors. While these colors are no problem for machines to read, they’re not exactly friendly for us humans. Newer, modern web apps often use the HSL (hue, saturation, lightness) or HWB (hue, whiteness, blackness) instead. The latter options give designers more flexibility in the opacity, lightness, or darkness of the color portrayed. Rider lets you convert between all these color formats with a quick shortcut (Alt + Enter).
Often, we create a shorthand CSS property just to find out that we need to break it out into separate parts. Perhaps we’ve added a border to an element, but noticed that we could reuse that same ruleset on other elements (Alt + Enter).
catch calls to an