From HTTP Messages to PSR-7: What’s It All About?

The PHP Framework Interoperability Group (PHP-FIG) has relatively recently approved another proposal, the PSR-7: HTTP Messages Interface. The document crystallizes HTTP messages into 7 interfaces which a PHP library should implement if they subscribe to the specification. In [PSR-7 By Example] (http://ift.tt/15E6n2t), Matthew Weier O'Phinney, editor of the PSR, gives an interesting overview of the specification. So what is it?

If you type bbc.co.uk in your browser, you go straight to the homepage of the BBC, but a number of things might have taken place between the time the browser sent an HTTP request to the server and it getting a response back.

Here's a sample raw request.

GET / HTTP/1.1
Host: bbc.co.uk
User-Agent: Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0)
Accept: */*
Referer:

It's always made up of a request line (GET / HTTP/1.1), a number of header field lines listed as <key>: value, a single empty line and an optional body for any data payload (for example query parameters or post data).

The blank line after the zero or more header lines must be a CRLF by itself. This means 2 characters - an ASCII 13 (Carriage Return), followed by ASCII 10 (Line Feed) or \r\n.

Let's send this request from the command line via curl and see the response:

curl -i -H "Host: bbc.co.uk" -H "User-Agent: Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0)" -H "Accept: */*" -X GET http://bbc.co.uk

HTTP/1.1 301 Moved Permanently
Content-Type: text/html
Date: Sun, 02 Oct 2016 20:49:42 GMT
Location: http://www.bbc.co.uk/
Connection: Keep-Alive
Content-Length: 0

Moved? There was a redirect. Then, let's follow the trail and make a request to http://www.bbc.co.uk/ instead:

Continue reading %From HTTP Messages to PSR-7: What’s It All About?%

by Deji Akala via SitePoint

New Course: Real-Time Apps With Rails 5 Action Cable

What if Your Icon Choices Ruined Your Work?

With the explosion of small-screen mobile computing across the world, iconography is often the most space-efficient technique to use in your UIs.

Icons are a visual representation of an object, an action or even an idea and using them, instead of a word, button, label or hyperlink, often affords you a spacier, cleaner interface.

Icons also let you simplify your messaging to the user by using ‘visual metaphors’. Common examples include:

• The pencil icon to edit a field;
• The camera icon to take a picture;
• The floppy disk to save your work.

Icons are simple, practical, and you probably use them on a daily basis. And they make complete sense, right? What if your users felt no connection to those icons – or worse, simply didn’t understand them at all?

Icons: Metaphors and redundant context

So, let’s think a bit about the meaning of icons you use in a typical interface. Most icons have functions that are clearly identifiable to most users. But there are a few common icons that are less clear.

In fact, it turns out that there are only a handful icons that can be defined as ‘universal’ – that have the same meaning in every context that we see them.

Nielsen Norman Group (https://www.nngroup.com) tested this theory and they defined that the only icons that can be considered universal are:

I can’t overstate how important this is for each and every single implementation of a user interface. When we’re designing a UI for another culture/country with a different native language (or multi-languages even) and other cultural patterns, their iconography understanding may be very different.

Let me show you some quick examples.

The Save Icon

The save icon metaphor was born with the early days of the Graphical User Interface (GUI) with the drawing of a floppy disk. In general, it is an icon that works well for its purpose.

But let’s try switching our perspective for a moment.

[caption id="attachment_140661" align="alignright" width="240"] Photo: Sam Churchill - African cell phone[/caption]

There are new emerging markets – large parts of Africa, India, China, and South America – riding a recent technological boom. While the majority of their populations have no easy way to a computer, they’re almost guaranteed to have a smartphone in their pockets. These populations have never seen a floppy disk and may not have even used an object with a similar function.

So, how will these users understand and feel connected with this visual representation of “save” function?

Personally speaking, I’ve already faced this issue once on a professional level, in a very similar environment, where the “save” action was a crucial step for a task completion. The end-users were having more difficult than we expected since the floppy disk icon had no label associated with it.

The Favorite Icon

For gathering items and saving them to see later many user interfaces allow you to mark them as favorites.

[caption id="attachment_140665" align="alignright" width="1024"] Examples: Favourite Icon[/caption]

This is most often represented by one of three symbols – a star, a heart or a bookmark icon. The bookmark concept dates back to the earliest versions of the Netscape Navigator browser.

Microsoft Internet Explorer instead called their bookmarking systems ‘Favorites’, and used a ‘starred folder’ icon.

[caption id="attachment_140667" align="alignright" width="441"] @jack showing Twitter using the star in 2006.[/caption]

Twitter employed the five-pointed star for favoriting tweets for 10 years, until last year, when they switched to the heart icon.

All of these icons naturally compete with each other. The star icon is often applied to rating systems and feature items, the heart icon for wishlists and sharing your feelings about something and the bookmark icon for labeling contexts.

Continue reading %What if Your Icon Choices Ruined Your Work?%

by Catarina Borges via SitePoint

This Week's HTML5 and Browser Technology News (Issue 260)

Read this e-mail on the Web FrontEnd Focus formerly HTML5 Weekly Grid By Example: A Free Video Series on Learning CSS Grid Layout Rachel Andrew CSS Grid expert Rachel Andrew has put together a handy set of short videos covering different aspects of creating your own CSS Grid layouts. A Look at a Redesign with CSS Shapes Eric Meyer Small but mighty, CSS ‘float shapes’ and feature queries could provide the latest boost to your front-end development toolset. g9.js: Generate Automatically Interactive Web Graphics bijection Draw graphics, then g9 automatically makes them interactive for end users. There’s a great set of code-driven explanations and demos to learn more. Building a responsive HTML5 app? Learn the must-know techniques with this free whitepaper Progress  Sponsored If you're a HTML5/JS dev, maybe you have already jumped in on a responsive project and would like to learn more. If not, responsive web design will probably be a requirement in the near future. This whitepaper will give you the must-know responsive web. Real Art Direction on the Web Jen Simmons A step-by-step design process for creating layouts as unique as your content. Learn how Flexbox, Grid, Shapes, Multicolumn, Viewport Units, and more can be combined together to revolutionize how you approach page design. 31 minutes Grid Layout Is A Much Needed Step-Change for CSS Matt Hinchliffe “Grid layout is expressive and logical and it solves a number of fundamental gripes.” The State of HTML Mobile Frameworks in 2016 Kris Erickson A look into the current state of HTML mobile UI frameworks for building hybrid apps. Jobs Senior Front-End Engineer (San Francisco, US)We’re looking for an experienced front-end engineer to join our small team of focused, dedicated technologists. Join us and help build our market leading Enterprise Dashboard. Quri Senior Front End EngineerEveryone should have the power to create professional-quality videos. As a member of the Animoto team, you'll be developing a responsive, elegant web experience and pioneering the next generation of video creation software. Animoto Don't love your job? You Should - Try Hired and Find the Right Fit.Hired puts the power back in your hands, by having companies apply to you, not the other way around. With Hired you only talk to companies you're interested in. Hired In brief CSS Grid Layout Module Level 1 at Candidate Recommendation news CSS Grid Layout has transitioned to become a Candidate Recommendation.  Rachel Andrew WebKit Introduces MotionMark: A New Graphics Benchmark for Browsers news  WebKit Software Remodeling  Corgibytes’ CEO Andrea Goulet compares remodeling software to how we remodel houses, focusing on biggest value fixes first. It’s about slowly transforming the codebase to become as efficient as possible.  Corgibytes SPONSOR An Illustrated Guide to the SVG 'path' Element tutorial Described as ‘the ultimate drawing element’.  Chris Coyier 10 Things You Probably Didn’t Know You Could Do with Chrome’s Dev Console tutorial  Swagat Kumar Swain Responsive Table Layout tutorial Data tables on the web are used to communicate important information to a user. Yet so many of these aren’t mobile-optimized. Here’s one easy way to do just that.  Matt Smith How to Add or Remove a CSS Class with Vanilla JavaScript tutorial  Sitepoint Things to Watch Out for When Working with CSS 3D tutorial Ana Tudor explores some of the things which surprised her whilst working with CSS 3D, and reviews the challenges encountered so that you might avoid the same.  CSS Tricks 'Progressive Webapps' is the New Ajax video 32 minutes.  Chris Wilson How Front-End Development Can Improve Artificial Intelligence opinion Three ways in which front-end development can improve AI technology.  Ines Montani Why You Should Avoid document.write, Specifically for Script Injection opinion  Damien Jubeau Frontend Developer at Honeypot (Berlin, Germany)  If you have a deep knowledge in JavaScript, Web Standards (HTML5, CSS3), UI/UX, a passion to create the best apps imaginable, and are seeking a new challenge with an awesome team, apply to Honeypot.  Honeypot SPONSOR Landmarks: Navigate a Web Page via WAI-ARIA Landmarks tools  Matthew Tylee Atkinson stylelint: A Modern CSS Linter tools  GitHub Blend: Create and Customize Beautiful CSS3 Gradients. tools A handy browser tool to create CSS3 gradients.  Colin Keany text-spinners: Pure Text, CSS Only Inline Loading Indicators code A clever and flexible approach.  Optimizing Text Content for Screen Readers code Quick tip on how using opacity and the ::after element can optimize screen-reading output. Here’s a short video demonstrating it in action.  Šime Vidas Super Mario Kart Map Recreated in 3D with CSS demo A fun use of CSS 3D functions to create a playable Mario Kart demo — use the arrow keys. Code available on the CSS3Dprototypes repo.  xem Curated by Peter Cooper and published by Cooper Press. Unsubscribe : Change email address : Read this issue on the Web Published by Cooper Press Ltd. Fairfield Enterprise Centre, Louth, LN11 0LS, UK

by via FrontEnd Focus

The WordPress Customizer JavaScript APIs: Getting Started

This Week in Mobile Web Development (#128)

Read this on the Web Mobile Web Weekly October 5, 2016   #128 Holly Schinsky recommends The State of HTML Mobile Frameworks in 2016 — A look into the current state of HTML mobile UI frameworks for building hybrid apps. Kris Erickson Chris Brandrick recommends The Future Of Apps: In Our Own Words — Several honest, unabashed opinions on where the future of apps is headed. Localytics Brian Rinaldi recommends Google: AMP Will Override App Deep Links for The Foreseeable Future — Announced at SMX East, Barry explains what this means in terms of how results of searches on the mobile device will behave. Barry Schwartz Sponsored Join Firebase Dev Summit 2016 in Berlin on Nov. 7th — Firebase Dev Summit is a full-day event for app developers. Come meet the Firebase team, be the first to hear our exciting launches, and learn about Firebase through a mix of deep-dive sessions, office hours, and self-paced codelabs. Google Inc. Brian Rinaldi recommends Has the Time for Progressive Web Apps Already Come? — An overview of PWAs, some of the well known example sites and the potential benefits/drawbacks. Iryna Zakurdaeva Brian Rinaldi recommends The iOS Safari Menu Bar is Hostile to Web Apps: Discuss — Ben explains that it gets in the way of “app-like” layouts on iOS. Ben Frain Holly Schinsky recommends Creating Universal Windows Apps with React Native — The React Native Universal Windows platform extension allows you to create React Native apps that run on the Universal Windows families of devices. Eric Rozell Brian Rinaldi recommends Animate Your React Native App — How to implement animations in your React Native app. Wernher-Bel Ancheta Holly Schinsky recommends Mobile Applications with Cytoscape.js and Cordova — How to create a mobile app that creates a graph of Wikipedia pages using Cytoscape and Cordova. Joseph Stahl Brian Rinaldi recommends Data Sync, Event Handling and Offline-First Functionality — Realm is a commercial platform designed as a replacement for SQLite & Core Data that offers real-time data sync and event handling between server and devices. Realm Holly Schinsky recommends Service Workers for Everyone — Service Workers presentation slides from Web Unleashed 2016. Ryan Christiani Brian Rinaldi recommends Who Needs AMP? How to Lazy Load Responsive Images Quick and Easy... — How to deploy lazy loading on non-AMP websites using a script named Layzr.js. Kezz Bracey Holly Schinsky recommends Finding Better Mobile Analytics — How to implement and use mobile analytics to determine how users are interacting with your apps. Eduard Khorkov Brian Rinaldi recommends W3C Web Payments HTTP Specification Working Drafts Released — One of the key goals is a better checkout experience for users, especially on mobile devices. Jeevak Kasarkod Holly Schinsky recommends Smart Bulbs and IoT with Ionic 2 — Smart bulbs and IoT with Ionic 2 and Angular - from AngularConnect 2016. Uri Shaked Brian Rinaldi recommends How to Set Up Ads on Your AMP Pages — How to use the the amp-ad component to serve and configure ads. Arudea Mahartianto Holly Schinsky recommends Take The Guesswork Out of CSS Media Queries With This Tool — SimpleCSS instantly sorts you out with media queries, ready to paste into your CSS. Creative Bloq Peter Cooper recommends Paper Planes: A Novel Mobile Web Experience — Catch and throw paper planes with one another around the world. Paper Planes Sponsored One Application, 4,000+ Opportunities - Try Hired — On Hired companies apply to interview you. Get 1:1 support for your job search plus upfront compensation details. Hired Curated by Brian Rinaldi and Holly Schinsky for Cooper Press. Cooper Press is located at Office 30, Fairfield Enterprise Centre, Louth, LN11 0LS, UK Update your email address or stop receiving MWW here

by via Mobile Web Weekly

AtoZ CSS Screencast: Media Queries

The @media rule allows conditional styling of elements.

The conditions can be based on the type of media or known characteristics of the device being used.

Combining media queries with fluid layout and flexible images, allows us to implement responsive web design.

In this episode we’ll look at how @media queries can be used to change the styling of websites based on querying information about the device and two approaches for tackling page layout in responsive design.

Media Queries

Sometimes we only want certain styles to apply to certain types of devices or when certain characteristics of the device are true.

For example, we might want to remove the header and footer when printing a web page.

Using the query print will restrict the styles of the at-rule to the print media type.

[code language="css"]
@media print {
.site-header, .site-footer { display:none; }
}
[/code]

Other media types include

• all
• braille
• embossed
• handheld
• projection
• screen
• speech
• tty
• tv

The only two media types I use are print and screen, which is a bit of a catch-all for any screen-based device including mobile devices, tv and projection.

Continue reading %AtoZ CSS Screencast: Media Queries%

by Guy Routledge via SitePoint