Firefox is releasing support for CSS display: contents

Sam RuebyCSS, Web Development 3 Comments

I’m finding Twitter to be the best aggregate web development news source for me. Sunday I caught wind that Firefox is going to support for display: contents . Mozilla Firefox Intent to Ship: CSS ‘display: contents’ – https://t.co/PXcHUzDk3Z — HTML5 News (@HTML5Weekly) February 7, 2015 Why? What’s that? I’ve never heard of display: contents . Why do we need it? I think MDN is …

Why is HTTPS faster than HTTP?

Sam RuebyWeb Development 3 Comments

Last weekend I was at Shmoocon, getting my annual fix of hacker-socialness. Unrelated to the conference I caught a tweet from @KatieHaxx: http://t.co/gR97nWuIB1 — Katie (@KatieHaxx) January 17, 2015 And if you go to www.httpvshttps.com you may be as surprised as I was. https was 70% faster than http. If you’re not as shocked as I was you either already understand …

CSS button with transparent gradient background overlayed photo of library

How to Make a Beautiful Transparent Gradient Button.

Sam RuebyCSS, Web Development 2 Comments

I saw a tweet from Tim Brown and I thought the button with the transparent gradient background was awesome. Designing & developing @deneenpottery has been awesome. Handmade Pottery in St Paul. Check it! http://t.co/W7QE33eA0w pic.twitter.com/GP31pG5AzC — Tim Brown (Design) (@timbdesignmpls) December 19, 2014 You have to go to the website he designed to get the full effect because it’s displayed …

What are the ‘m’ and ‘c’ buttons in Mini Profiler?

Sam Rueby.NET Tips, Software Development, Web Development Leave a Comment

I thought this answer was a bit unGoogleable. After upgrading StackExchange’s Mini Profiler I noticed an ‘m’ and ‘c’ at the button. But their use isn’t incredible clear. It turns out, the ‘m’ is minimize/maximize, which is great for those pesky situations where it’s covering a piece of the page you need to see. The ‘c’ button is “clear”: it …

Will-change property

Sam RuebyCSS Leave a Comment

I just heard about CSS’s will-change  property, which I am particularly interested in because getting websites to run well on mobile is hard. will-change is a CSS draft specification right now. Its purpose is to provide a hint to the browser that the provided properties can possibly change, allowing the browser to preemptively perform expensive operations before it happens, when the …

CSS z-index and stacking context.

Sam RuebyCSS Leave a Comment

It may be shocking to find out for beginners that don’t know, that CSS’s z-index property isn’t global. The z-index property is relative to the current stacking context. Put even more simply: You can’t set an element’s z-index to a smaller number than another element’s z-index and have it appear under that other element, if your element has any ancestor …

Using CSS to prevent the user from scrolling

Sam RuebyWeb Development 3 Comments

I was creating a mobile menu for a project today. The normal, click-the-hamburger, expose a drawer with menu items, etc. I mocked this up in JsFiddle. I darkened the background by making a simple overlay: .mobileNavOverlay { position: fixed; width: 100%; height: 100%; background: rgba(0, 0, 0, .7); z-index: 2; top: 0; left: 0; } But I noticed that on …

Great Tool for Converting WebForms Views to Razor Views

Sam Rueby.NET Tips, Web Development 1 Comment

The ASP.NET MVC Razor view engine has been out for a while now. I think it’s great for improving readability in complex MVC views. Especially with its magical-context-guessing ability, it greatly improves readability over the WebForms syntax. I found a great tool from Telerik that helped me convert an entire solution to Razor syntax. The word ‘helped’ is important here …

Treehouse Badges

Sam RuebyWeb Development Leave a Comment

I created my first GitHub project this past week, Treehouse Badges. This project allows Treehouse students to show off their progress on their website through a nice widget. As you progress through courses, you received badges called Achievements. I’m sure the Treehouse designers put a lot of work into these nice images: why not put them up for display? Example …