tips & tricks
Small things
worth stealing.
One-minute reads. Platform features you forgot existed, and habits that make code easier to come back to.
javascript#01Better variable namesMeaningful and easy to pronounce variable names are much better than random names. It helps other developers to read your code without any problemsjavascript#02Numeric separatorUnderscore in numbers is called a numeric separator. It allows to use big numbers efficiently in javascripthtml#03Native date pickerYou might not need another library to solve your problem. If you need a date picker, choose HTML Native date picker. It is supported by all major browsershtml#04Native color pickerDid you know you don't have to use an additional javascript library to add a color picker on your website? You can use native HTML input type color!html#05Power of anchor tagAn anchor tag can also be used differently. You can send a mail, sms or make a phone call!css#06Required or not?Style required inputs out of the box: add the required attribute and target the input with the CSS :required pseudo-class selector.css#07Style your selected textCSS allows to style selection text. Style yours to match your website!css#08Style your placeholdersYou can easily style your input placeholders with CSS pseudo-elements. Styling input placeholders will improve the UX of your forms!ux/ui#09Connect button with the formIf the spacing between the last field and the button is too big, it may feel disconnected. It misleads users that the button is not what sends the form.css#10Color your links with specific hrefYou can take advantage of CSS selectors to color different anchors with different colors! For example pdf files, external or internal links!css#11Target first line of sentenceSelector ::first-line will find your first line in your HTML element and will style it differently.css#12Target first letter of elementYou can easily create fancy styles for your texts in HTML elements targeting the first letter of the sentence.javascript#13Most common javascript methodsJavascript has a lot of different methods. Let's learn how to use the five most common methods on emoji example!ux/ui#14Add some space!In the example on the left, when the error messages are displayed, the spacing between forms makes all the fields blend into one large column.html#15Suggestion datalist for inputsThe <datalist> element was created to be used as a recommendation list for inputs. You can choose available options or type your answer.ux/ui#16Call to Action buttonAlways prioritize one button in a group. Buttons should never look the same: make the call to action the most prominent one.other#17URL schemeEvery URL follows the same scheme. Learn the names of its five parts: protocol, domain, path, query string and fragment.css#18Gradient textFill text with a CSS gradient: set a linear-gradient background, clip it to the text and make the text color transparent. Three lines of CSS.css#19Background shorthandCSS background has many properties. We can combine many lines with only one using shorthand. Let's see how to replace four major ones with only one line.