Frontendrails logo Front End Rails

Improved no results messages

Improved no results messages

Lugo Labs Lugo Labs 02 March 2017

Many times in index pages we need to show a message that there are no results to view. Usually as a results of a search, as in the example of Iconly. If you search for an icon on the top search bar, and no results our returned, the following message is shown.

Neat 2.0 Building the future of floated Sass grids

Neat 2.0 Building the future of floated Sass grids

Giant Robots Smashing into Other Giant Robots Giant Robots Smashing into Other Giant Robots 22 February 2017

Understanding different types of existing float grid systems, finding their strengths/weaknesses, and discovering something better.

Do responsive sites have to be so tall on mobile?

Do responsive sites have to be so tall on mobile?

Viget Viget 13 February 2017

When designing responsive sites, we tend to focus a lot on keeping content nicely formatted within all the various screen widths in the world today. This makes sense given that horizontal scrolling is not particularly user-friendly, so constraining the design to the browser's viewport width is generally a given.

TIL: Find the size of a response body using curl

TIL: Find the size of a response body using curl

Bloc Bloc 10 February 2017

Today I needed to inspect how large the body of one of our API end points was. My initial idea was to do this:

Our Big Frontend Plan Revealed

Our Big Frontend Plan Revealed

GitLab GitLab 06 February 2017

Our long term plan to make GitLab as fast and performant as possible with Vue and webpack.

Building a new GitLab Docs site with Nanoc, GitLab CI, and GitLab Pages

Building a new GitLab Docs site with Nanoc, GitLab CI, and GitLab Pages

GitLab GitLab 07 December 2016

How we built the new GitLab Docs portal from the ground up

Is Your Site Leaking Password Reset Links?

Is Your Site Leaking Password Reset Links?

Giant Robots Smashing into Other Giant Robots Giant Robots Smashing into Other Giant Robots 24 October 2016

Emailed password reset links are a common part of web applications. Is your site leaking these confidential links to third party sites?

How to do Web Accessibility QA: Part 2

How to do Web Accessibility QA: Part 2

Viget Viget 12 September 2016

Accessibility QA starts with broadening your frame of reference and understanding what it's like to use a computer in unfamiliar ways. With that understanding, we can dive into actual testing.

How to do Web Accessibility QA: Part 1

How to do Web Accessibility QA: Part 1

Viget Viget 12 September 2016

So your organization has decided to champion web accessibility. Awesome! 

Getting Started with HTTP/2: Part 1

Getting Started with HTTP/2: Part 1

Viget Viget 23 August 2016

HTTP/2 has some really amazing changes to the way web sites and applications can be built. A year and a half after becoming published, almost 10% of websites support HTTP/2. It has definitely had notable adoption, but the conversation should be pushed further for front-end developers on best practices when using HTTP/2. This is a multi-part blog post to give front-end developers a guide on how to switch over to HTTP/2. 

Instagram-style filters in HTML5 Canvas

Instagram-style filters in HTML5 Canvas

Viget Viget 10 March 2016

Instagram made us fall in love with image filters. A well-chosen filter can enhance a photo greatly. It augments the best parts and softens undesirable qualities.

Rails 5 switches from strong etags to weak etags

Rails 5 switches from strong etags to weak etags

Bigbinary Bigbinary 08 March 2016

ETag, short for entity tag, is a part of HTTP header and is used for web cache validation. ETag is a digest of the resource that uniquely identifies specific version of the resource. This helps browser and web servers determine if resource in the browser’s cache is exactly same as the resource on the server.
Complete list of custom icon properties for Bootstrap 3 Datepicker

Complete list of custom icon properties for Bootstrap 3 Datepicker

Development Thoughts Development Thoughts 06 March 2016

If you are using Bootstrap 3 Datepicker and want to change the icons used for the symbols within the datepicker then you can.

Your Guide to Healthy SEO

Your Guide to Healthy SEO

Viget Viget 12 February 2016

Search drives the web -- roughly two-thirds of website visitors originate from organic search. This search traffic represents a tremendous opportunity to present your product or service to customers who are actively looking for a solution to a problem or an answer to a question. This highly motivated behavior means that search is often a website's highest converting source of traffic.
5 Tips for Saving SVG for the Web with Illustrator

5 Tips for Saving SVG for the Web with Illustrator

Viget Viget 03 February 2016

Authoring SVGs in Illustrator is easy. Authoring an SVG in Illustrator and then properly exporting it for the web can be... tricky. Here's a short list of tips for avoiding common problems with exported SVG.