Text Input Non-Editable

If you ever need to make an input field or text area non-editable the readonly attribute comes in very handy. When the readonly attribute is present in the markup, it specifies that the user will not be able to modify the value. However the user will still be able to tab to it and copy … Read more

Get URL with JavaScript

At some point in time you need to get the current URL and do some logic based on it. JavaScript has handy API called window.location which has all the information related to the windows current location. Running console.log(window.location); in the console or your JavaScript file will return the following Location object: Having a reference to … Read more

Scroll to position with jQuery

If you need to scroll to a specific location on the page this little custom jQuery function can help you out. This snippet will help you scroll to a particular section based on the element you choose. Add this little snippet inside your scripts file. Add this (also in your scripts file) and modify it … Read more

Converts pixels to EMs with Sass

If you like using pixel values but understand that having your fonts set in EMs works better, especially when tackling responsive web design then this little Sass function will become super handy. This function automatically converts pixels to EMs with Sass so that you don’t have to manually calculate them. The function takes two arguments, … Read more

Web Design Weekly #329

Addy Osmani covers some strategies you can use to deliver JavaScript efficiently while still giving users a valuable experience. Thomas Lombart passes on some knowledge on how to write maintainable CSS code and how to organise it. Generate beautiful mockups with Screely and lots more. Enjoy.

Web Design Weekly #328

Philip Walton goes into great detail about the new Page Lifecycle API. Philip Walton goes into great detail about the new Page Lifecycle API. Andrew Clark discusses React’s vision for how async rendering can improve data fetching, code delivery, prefetching, view transitions, and more. Enjoy.

Web Design Weekly #327

A brief history of how the GitHub Design Systems team grew, what they have been working on, and what’s next. Joanna Ngai has compiled a list of things to keep in mind as a designer working with data. Oliver Williams looks at augmenting HTML with components that have built-in functionality and styles. Enjoy.

Web Design Weekly #326

A peek under the hood of how the web version of Google Photos works. Brent Jackson shares a collection of thoughts, opinions, and advice for defining component Reacy APIs that are meant to be more flexible, composable, and easier to understand. Ryan Singer from Basecamp explains that focusing on individual features and experiences is good, but you should never forget about the position you’re trying to hold. Enjoy.

Web Design Weekly #325

Headlines Balancing Time If you have a hard time balancing work, life and free time then hearing about how Sarah Drasner sets up her workflow might help you reconsider your own. (css-tricks.com) The Cost of JavaScript (youtube.com) Bug tracking so simple, it’s like sticky notes on a website. BugHerd keeps your team on the same … Read more

Web Design Weekly #324

Max Böck shares an awesome post that highlights why CSS Grid is a game changer in our industry. Ethan Marcotte shares a small refection on learning how to use CSS Grid. Jeffrey Zeldman reminds us that as our medium is growing up, it’s our great privilege to help shape its future while creating great experiences for our users. Enjoy.