10 Things I Learned about Ext JS After 1 Week

I recently had the opportunity to work on a project for a new web application on the Ext JS framework. I am a front-end developer (“UX Engineer” by title) so my background is primarily in HTML, CSS, and JavaScript. As such, my responsibility on this project was to implement the user interface design, which had previously been conceptualized in Abode Photoshop.

Starting off, I did have some understanding of the basic concepts, but almost no practical experience. A co-worker helped me install the necessary bits and get the project up and running. I completed my work in Aptana Studio 3, primarily because it provided an easy way to compile and run the project.

I worked on the project for about 5 days, which was just enough time to get a crash course in Ext JS and complete the tasks assigned to me. During the frenzy that ensued, I learned several things about the Ext JS framework that I felt were worth sharing.

  1. Ext JS takes a very modular view of, well, everything. Instead of working in a few massive documents, I found myself working in several small documents. In some ways, this was nice because the documents were easy to scan through and work with, but it also meant that I usually had a lot of documents open in Aptana. I had to develop a system for ordering the tabs so I could easily find the one I needed.
  2. Ext JS projects come with a pre-built interface that includes dozens of UI components that can be utilized at will. There are several themes to chose from that allow developers to create projects with little-to-no CSS required.
  3. If you need to implement a custom interface, it seems that creating a new theme is the best approach. Ext JS has a theming guide that provides a pretty good overview of how to set up a new theme.

  4. Even custom themes need to start with a base theme. This provides a basic set of styles for all of the UI components included in the project. The “ext-theme-base” includes the least amount of inherent styles and should be the easiest to override.
  5. Ext JS utilizes SASS, which allows you to use variables, math operators, and other functionality not available in regular CSS. This was also my first real foray with SASS, but I was already familiar with the core concepts. Although I looked to make use of the various benefits that SASS offers, I was working on a very small project and I found that I only feature I needed was variables. Unfortunately, in this case, I don’t think the 10 or so variables offset the extra overhead that came with compiling the project every time I needed to check my styles in a browser.
  6. Even the CSS is modularized in Ext JS. Ext JS has a separate SCSS file for each UI component (which I didn’t touch) and I had a separate SCSS file for each custom view. That provides some organizational benefit, but, in the end, Ext JS compiles all of them into one file when the project is built, which nullifies any speed optimization benefits that separating the code may have also provided. It also means that you need to have a good understanding of how the final CSS file will be compiled or your style updates may get overridden by other code that is inserted later in the document.
  7. Ext JS allows you to create a “universal” style sheet in your theme that will be included on all views of your application. Under /packages/{your-theme}/sass/etc create a file name “all.scss.” I used this file to hold the base styles for my application as well as my SASS variables and then had view-specific styles in separate files.
  8. Although Ext JS does allow you to create custom themes and override most default styles, there are still many instances where inline styles are inserted. In those cases, I found that I usually needed to apply the !important CSS snippet in my file.
  9. The generated HTML in Ext JS 4.x is massively bloated. Although there are ways to insert your own HTML, most of the time, I worked with Ext’s UI components. A simple button generated by Ext might include like 10 nested HTML elements. I believe that the main reason for this is that the default themes still support IE6 and they need a lot of elements to pull off gradients, borders, etc. in exactitude in all browsers. This might be my least favorite thing about Ext JS, because it creates a lot of unnecessary overhead for the browser and makes navigating the DOM through Chrome’s Dev Tools (or a similar tool) an essential step in styling anything.
  10. Ext JS has pretty good documentation. I found it to be a little cryptic until I had worked with the framework for a little while, but then it was quite helpful. However, if you do have a question that the document doesn’t answer, I found that there are not a lot of other resources available. Even stackoverflow is short on answers. I’m told, however, that the Sencha forum is quite good in a pinch, but I have yet to try that route.

By the end of the week, I felt pretty comfortable working with Ext JS. There was a bit of a learning curve, but, between my helpful co-workers and Ext’s documentation, I was able to overcome most issues with little trouble.

After a week of total immersion, I don’t feel like I can fully endorse Ext JS. I can see how it would be a good tool for development teams that don’t have any front-end developers, but it certainly didn’t make my tasks any easier. In general, I prefer to work with lightweight frameworks that provide more control over the HTML and CSS.

What has your experience with Ext JS been like?

Connecting Business Applications with Mobile Customers via Twilio’s SMS Service

In the constantly changing and ever-growing market of mobile technology, businesses face the challenge of finding methods to effectively communicate and connect with their target customers who are always on the move.

In this post, I’ll outline how you can integrate Twilio’s SMS service into a .NET web application in a few simple steps. We’ve recently integrated Twilio into a client’s web application as a means to communicate with employees after-hours, when employees have left for the day but a situation arises that needs further attention.

Before we get into the coding, let’s take a quick look at other methods that are used to send SMS messages from applications.

Email-to-SMS Gateway functionality has existed for a while and offers some of the same benefits, but with a few caveats.

  1. What if you don’t know the customer’s carrier? You need this in order to utilize it (for example, if your customer’s number is 555-777-8888 and is a Verizon customer, you can text them by sending an email to 5557778888@vtext.com)
  2. You cannot control who the message is sent from, for some carriers is the email address of the send, for some it’s the email address of the server
  3. You cannot control what number delivers the message, so the customer may not be able to respond back to the message

Twilio’s SMS service overcomes these hurdles in simplistic fashion. Twilio’s SMS service allows web applications to communicate with mobile customers with a few simple lines of code.

Let’s get started. First, you’ll need to add the Twilio service into your project by following these steps (note that this is for .NET 4.0 application). The installation process can be found here: https://www.twilio.com/docs/csharp/install

Once you’ve installed the service, you’re ready to add your SMS code.

In this case, our function is setup to receive a Phone Number that we are going to send a message and the Body of that message.

Public Sub SendSMS(ByVal receivePhoneNumber As String, ByVal messageBody As String)

Dim accountSID As String = ""
Dim authToken As String = ""
Dim objTwilio As Twilio.TwilioRestClient = Nothing
Dim objMessage As Twilio.Message = Nothing
Dim sendPhoneNumber As String = ""

When you sign up for your Twilio account, you’ll receive the following credentials within their application.
authToken = "111111"
accountSID = "222222"
sendPhoneNumber = "5553211212"

Instantiate your Twilio object
objTwilio = New TwilioRestClient(accountSID, authToken)

And send!
objMessage = twTwilio.SendMessage(sendPhoneNumber, receivePhoneNumber, messageBody, "")

End Sub

So now we’ve sent our message. It’s sent to the end user via a telephone number, just as if you were sending a text message from your phone. What if the end user wants to respond back? They can, with no additional effort on their end. The message will be sent back to the Twilio number, and Twilio will redirect the response to your web application.

Within the Twilio client, you can setup a Messaging URL, which will define where Twilio POSTs the response to (for example , http://www.yoursite.com/receiveTwilioResponse.aspx). Let’s setup that page.

When we setup receiveTwilioResponse.aspx, we’ll need to capture the Page Request and parse out the response message.

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

Dim fromPhoneNumber As String = ""
Dim messageBody As String = ""

First, we’ll get the Phone Number of the end user who is responding back to us
If Not Request.Form("From") Is Nothing Then

fromPhoneNumber = Request.Form(“From”)

End If

Next, we’ll get the Message Body from the page request
If Not Request.Form("Body") Is Nothing Then

messageBody = Request.Form("Body")

End If

And that’s it! From here, we can handle this data how we see fit.
Call LogDataToDatabase(fromPhoneNumber,messageBody)

End Sub

This is simplified for example purposes. You will want to setup error handling and logging in conjunction with sending the message, and will need to clearly define the business logic of when and who to send messages to.

Learn more about the service here : https://www.twilio.com/sms

Print Styles Talk from WordCamp Buffalo 2013

Back in October I had the pleasure of speaking at Buffalo’s second WordCamp. Unlike the talk I gave at least year’s event, I opted to go for something a bit more technical, something we build into every site we develop at Algonquin Studios and that I have been promoting for years now.

So I crafted a presentation on how to use print styles on a web site. At Algonquin Studios we support many platforms, including our own homegrown content management system (CMS), QuantumCMS. I have also learned that many WordPress developers also work on other platforms, so I opted to discuss print styles independent of the CMS used to power the site.

I focused on the background of print styles and related them to responsive design, I covered best practices and techniques, demonstrated how you can use Google Analytics to track what pages are printed from a site, and touched on the future of print styles.

All of my slides are here along with a video from my talk. Below the embedded content are links to other articles and posts I have written about print styles for those who want to get a deeper dive into some of the aspects.

The Slides

The Video

The video gets cut off before the end, but the key information is still in the slides.

Further Reading

You Should Be Using Two-Factor Authentication. Everywhere.

We’re not very good with passwords, although we think we are. According to a recent study by security company CSID, 89% of us think we practice safe password routines. Unfortunately, 1 in 5 of us have had an online account compromised and yet only about half of us change our passwords more frequently than once per year. The best passwords typically utilize a combination of letters, numbers, and punctuation, and the longer they are the better (at least 8 characters). Only 6% of users have passwords that meet these criteria. Even worse, 60% of us reuse the same password for multiple sites. This is a recipe for disaster.

Here’s a quick scenario: Tommy has a forum account on a fan-made music site. The music forum that he visits regularly doesn’t maintain their security patches regularly, and a random hacker manages to hack into the site and steal his password. A simple web search reveals that Tommy works for Company X. Company X uses the Outlook web app, and wouldn’t you know it, Tommy uses the same password everywhere. Through a little trial and error, the hacker discovers that tommy@companyx.com is his work email, and boom, the hacker now has access to Tommy’s work email.

So what is two-factor authentication, and how does it solve this problem? Well, two-factor authentication (2FA) is a multi-stage method of verifying that you are who you say you are. Typically it’s a combination of something you know (a password), and something you have access to (a phone). Most commonly, the second factor of authentication will be a code that you will be sent through a text message or an automated phone call, and it’s only valid for a short period of time. This code will be entered on a secondary screen before you can have access to your account.

Unfortunately a lot of people don’t know what 2FA is – roughly 75% of people surveyed didn’t have a clue. It has also garnered a reputation for being a hassle, which is simply not the case. Most two-factor implementations will allow you to “register” a device as a “trusted device” for a period of time (typically ranging from a day to a month). I know what you’re probably thinking – what if I lose my phone? Then what? Well, the answer to that is “it depends.” Every two-factor implementation has different ways to handle account recovery in the event of a lost device, but this shouldn’t deter you from using 2FA – the benefits outweigh the risks by far.

So where are some common places you should start using two-factor authentication to protect your online accounts? Here’s a list:

  1. Google: Sends a 6 digit text message when you attempt to login from a new device. They also provide a Google Authenticator app for Android, iOS, and BlackBerry that can be used to obtain the second factor authentication codes.
  2. Apple: Sends you a 4-digit code via text message or Find My iPhone notifications when you attempt to log in from a new machine.
  3. Facebook: Sends you a 6-digit code via text message when you attempt to log in from a new machine.
  4. Twitter: Sends you a 6-digit code via text message when you attempt to log in from a new machine.
  5. PayPal: Sends you a 6-digit code via text message when you attempt to log in from a new machine.
  6. Microsoft Accounts: Sends you a 7-digit code via text message or email when you attempt to log in from a new machine.
  7. Yahoo! Mail: Sends you a 6-digit code via text message when you attempt to log in from a new machine.
  8. LinkedIn: Sends you a 6-digit code via text message when you attempt to log in from a new machine.
  9. WordPress: Utilizes the Google 2FA app.

For a more complete list of companies and products that support two-factor authentication, please review Evan Hahn’s list. Ask your local security or IT professional if your organization could benefit from using 2FA for email or work accounts. There are also ways to implement two-factor authentication into your own custom applications and web sites.

Passwords are becoming less secure all the time, and hackers are getting better at cracking them (check out the strength of your password). Enabling two-factor authentication provides an extra layer of security at a negligible cost. Protect your financial accounts, identity, and your career by using it wherever you can.

Styling Tabular Data with CSS3

In my career as a web developer, I’ve helped build many web applications that require the display of tabular data in a clean and simple fashion. Over time, I’ve developed a few techniques for doing so that are effective and easy to implement.

But before I go into that, let me quickly remind my fellow web developers that tables are not, in fact, the enemy. Although the days of using tables for layout are long past, tables are still a perfectly appropriate method for displaying tabular data on the web.

However, I must also acknowledge that there are some disadvantages to working with tables to be aware of, including:

  1. Tables don’t always scale down well and may display poorly when space is limited, like on mobile devices. If your primary audience is viewing your web site on mobile devices, it may be better to use lists or other markup that’s better suited for vertical display.
  2. Tables are not as adaptable as other elements, especially in older versions of Internet Explorer, and that can limit your options when developing a responsive web site.
  3. Display tends to vary slightly across different browsers. This is particularly true with column widths. I’ve encountered many situations where the text in one column wraps to two lines while there is clearly ample space to accommodate for it in another cell. There are ways to get around that of course, but the solution is generally specific to the situation.

So after much preamble, here are four simple examples that I’ve created to demonstrate different ways you can work with tables to display data cleanly:

  1. Basic Grid with Alternating Row Colors
  2. Basic Grid with Alternating Row and Column Colors
  3. Basic Grid with Rounded Corners
  4. Simplified Grid with Generated Content

Keeping Projects on Budget

BudgetYou know the drill.  Some ridiculously high percentage of software projects go over budget… And you’ve heard stories to back it up. Or worse, you have your own tales of being hung upside down by your ankles while the developers shake you down for every last cent.  Yet, here you are.  You’ve got a problem and it seems the only solution is custom software.  You’re doomed, right?  You might as well get ready to grin and bear it as you’re no doubt about to head down a path of endless pain and misery.  How did it ever come to this?

It doesn’t have to be this way!
I know… suspend disbelief for just a minute.  It’s going to take a lot of planning, coordination and hard work, but a well-executed software project can stay on budget AND deliver you a solution that satisfies your objectives in an effective and lasting way.  Here’s how we’ll help you do it:

Initial Sales Meetings and Preliminary Requirements Gathering
We start every engagement with an open mind. It’s important to fully understand all of the issues and goals before committing to any particular solution or technology.  Our initial meetings are designed to learn about your business and the issues you face.  What are the specific problems you are trying to solve and what are your goals?  Essentially, we start by helping you to define what success looks like for your project.  With that understanding our team will draft preliminary recommendations and deliver those with ballpark estimates.  At this point, we still won’t have all of the knowledge required to solve your problems, but we definitely have enough to determine if we are in the same ballpark… that is, determine whether or not we should continue before you spend any money.  If we are, the next steps will be to propose a formal Requirements Analysis process.

Requirements Analysis (RA) Phase
In this phase you’ll formally define what we are going to build.  We’ll schedule a number of meetings (preferably face-to-face) where our staff will spend time with your team to define the nitty-gritty details of the project. We’ll ask questions… I mean A LOT of questions.  We‘ll gain an understanding of your workflows, your staff, your business cycles, etc. so that we can clearly identify all of your needs.  With this deep understanding, we’ll produce several outputs that will help you effectively solve your issues within a predictable budget:

  • Business Requirements Document (BRD) – This is a comprehensive, plain-English, easy to understand definition of what you’re asking us to build. It can be read and understood by anyone on the project team, regardless of technical ability. The BRD is the cornerstone of the project and plays a fundamental role in sending you down a path where a predictable outcome and budget is possible.
  • Screen Mockups/Wireframes – These will provide a roughed-out visual representation of the system. They will help you to gain a better understanding of how the system will look, flow and feel.
  • Flowcharts – These are a visual representation of the workflow and business rules for the more complicated sections of the system.  They will help to further iron out the finer details of the project and identify “holes” early on.
  • Fixed fee for implementation – Once we know exactly “what” we’re building, we can very accurately predict how long it will take and how much it will cost.  That allows us to provide you with a fixed fee proposal for implementation.

In addition to these outputs, we will provide you with guidance on infrastructure needs, licensing for 3rd party components, and requirements for any 3rd party vendors, plus details on what your team will need to do to keep everything on track and make the project a success. Getting all of these issues on the table early and working together on a plan for dealing with them is the most important step towards a path that allows for a predictable budget.

The outputs from RA are yours to keep and are designed in such a way that any development shop with the appropriate technical abilities could implement them for you.  We certainly hope that you’ll choose to continue working with us, but at this point you are free and clear to move on if that’s what ‘s best for your organization.  And the best part… you’ve likely gotten here in less than 20% of your overall project budget.

Implementation
Once you agree to our fixed-fee proposal we’ll begin to implement your solution.  As far as the agreed upon scope is concerned, you won’t have anything to worry about in terms of budget.  We’ll produce the agreed upon output for thee agreed upon fee.  However, there may still be other costs that need to be managed.

Out of Scope (OOS)
We’ll continue to spend a lot of time with you during the implementation phase.  In particular, we’ll have regularly scheduled demos and walkthroughs that will allow you to see, feel and tweak the system throughout the process.  Minor adjustments to layout, appearance, terminology, etc. are expected and this is taken into account within your fixed fee.  However, you will inevitably identify additional opportunities for enhancements/changes that were not thought of during the RA phase.  Many of these items will be relegated to a future phase, but some may represent such a benefit to your solution that you choose to implement them now.  We’ll tap our vast project experience to help you classify the items and advise on how to best fit in those “must haves” with minimal impact to your timeline and budget.

Third Party Vendors
Very often you’ll have additional vendors that play roles in your solutions (i.e. your IT staff, your hosting company, the firm that supports the application you have asked us to integrate with, etc.).  This can create pressure on timelines and that can have an impact on your true costs (even if just by requiring additional time investment by your staff).  We’re very experienced in dealing with these situations and will advise you on how to get commitments from these parties and hold them accountable to meeting them.

Adoption
Once your software is complete, you need to get your users to use it.  This involves training, planning cut-overs, etc. and these things can definitely impact your true costs for the project. Having deployed hundreds of systems into organizations of all sizes under a wide array of circumstances, we’re able to advise you on a roll-out strategy that will help this all happen predictably (and on budget).

Quality Assurance (QA)
Your project has been in QA since the RA phase. Our QA team is tasked with reviewing and approving your Business Requirements before implementation can begin.  Then, the QA process continues through implementation with Code Reviews and internal screen reviews. Finally, the resulting software is put through a rigorous final QA pass that verifies all of your business rules and may include load tests, security scans, etc.  How does this impact the budget?  It’s all included in the fixed fee, but the value goes beyond that.  By ensuring a quality product goes out the door, we’re really enabling you to predict the long-term operating costs of the solution.  That will keep you “on-budget” for the long haul.

Ongoing Support
Depending on your specific situation, there’s a very good chance you’ll need or desire some level of support from our staff post-go-live.  With a full-time help desk and available 24x7x365 support solutions, we are equipped to provide you with a long-term support arrangement that meets your budget and business needs.

Deployment
Once everything is done, we still need to launch your software before you can start using it.  Delays of any kind will likely impact your total costs (i.e. think costs associated with preparing your staff for a launch that doesn’t happen, then doing it all over again a week later). Our development process takes a structured approach to this as well.  With thorough checklists in hand, our staff will be able to launch your software on schedule and will be less likely to run into last second “surprises”.

Summary
Our development process has been defined and tuned over the past 15 years through the experiences gained in thousands of engagements.  Our comprehensive approach, combined with the vast experience of our staff, allows us to identify and address hurdles early on and helps to eliminate the big “surprises” that plague so many software projects.  This allows predictability… And predictability saves budgets.

New iPad Browser: Coast by Opera


This post originally appeared yesterday on my blog.

Yesterday Opera announced the release of its newest browser, Coast, built specifically for iOS tablets (I would say just iPads, but if my fridge gets an iOS tablet UI then I’d be wrong and will have paid too much for a fridge).

Background

Recently Opera moved away from Presto as its rendering engine and hitched its future to Blink, the rendering engine born from WebKit that powers Chrome. Now instead of Opera worrying about the rendering engine, it is focusing on the user interface, the place where it can set itself apart from the other browsers.

Essentially Opera is removing the browser chrome (implying to the user that a web page is just an app) and adding gesture support. Given that Opera was the browser that introduced us to mouse gestures well over a decade ago, and given that a touch screen is an inherently gesture-based UI, this seems like a natural fit.

Bits for Developers

Sadly, my office wifi was down and I couldn’t play with the browser immediately (my crusty iPad 2 is wifi only). So instead I took some time to read through the developer notes.

Tablet First

Overall Opera recommends general responsive design current best practices, though it promotes a tablet-first approach. Opera offers some CSS you can use to specifically target iPads Mini, 2, 3 and 4 (Retina and non-Retina), though it leans on vendor prefixes with only a brief note to also use other prefixes and unprefixed rules.

Responsive Images

It’s also clear that Coast supports the new srcset option for responsive images. It even offers a code example: <img src="image.jpg" srcset="retina.jpg 2x">

Note: As Bruce was kind enough to inform me (because I missed it in the dev notes), responsive images will be supported only in iOS7 and up.

Update as of September 20, 2013

According to Opera, iOS7 did not come with a WebKit update. That means Coast cannot support responsive images via the srcset attribute without a polyfill. Nor can Safari, of course.

Tile Speed Dial Web App Image

Instead of “Speed Dial” icons/images, Coast now looks for a “web app image.” If you don’t have one, Coast will first look for a Windows 8 tile image, then an Apple touch icon, then a shortcut image, then just a favicon. You can, however, create your own 228 × 288 pixel image and stuff it into your site with the following HTML:

<link rel="icon" href="$URL" sizes="228x228">

User Agent String

Don’t use this to do any browser sniffing. Browser sniffing bad. This is instead handy for recognizing it in your logs:

Mozilla/5.0 (iPad; CPU OS 6_1_3 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Coast/1.0.2.62956 Mobile/10B329 Safari/7534.48.3.

General Review

Getting going is pretty easy, just start typing into the only field on the screen. As you type you can see a Google preview on the left, which you can tap at any time to go to Google, or a list of icons on the right which correspond to sites you might mean. The icons start out just displaying the first letter of the site, and then identify the site’s tile or shortcut image.

Screen shot of Opera Coast navigate screen.
Note the handy “.com” and “.net” options that appear above the right end of the text box.

Once you are on a page, you can go back by swiping from the left, forward by swiping from the right, or reload the page by pulling down from the top — but not too far or you get the iOS menu instead.

Vine of me playing with back, forward and reload in Opera Coast.

Opera Coast skips tabs and windows altogether and, frankly, feels a lot more like Internet Explorer for Metro than other current tablet browsers. It’s pretty easy to see the open “tabs,” flip through them, get more details, and discard them. It’s also incredibly easy to forget you have so many tabs open. I regularly found myself littered with tabs because of all the links opening new windows.

Testing Opera Coast window/tab management.

While in that tab view, you can also see how “safe” the page is and can get to options to share it, email it, print it, and so on.

Screen shot of Opera Coast safety and share information.
The arrow on the right gives you all the share options.
Opera Coast print dialog.
I don’t have a printer installed, so I’d love to hear feedback on how Coast honors print styles.

Adding and removing a bookmark, tile, whatever, is pretty easy. It took a few swipe-fails, but I got the hang of it well enough to show the whole process in one uninterrupted Vine:

It takes a little getting used to, but it’s not too hard

Gotchas

There were a few things that threw me off. Perhaps because I am a power user, perhaps because I only played with it for one evening.

Swipe History

The swipe for back/forth is handy, but conflicts with behavior I have already learned. In Chrome for Android, swiping left or right has the infuriating feature of bringing me to the next or previous tab in the stack order. For those rare sites that implement a slide that is swipe-friendly, imprecise swipes will move me back and forth in the history instead.

Web App Images

Using the browser in portrait view, the additional screens of tiles (speed dial icons if you are already familiar with Opera) aren’t immediately apparent. It wasn’t until I turned to landscape that I saw them. The tiny dots under the Coast icon weren’t enough for me to intuit that. They also aren’t nearly large enough to tap to jump to a specific screenful of tiles.

Hit Sizes

The 9-box grid at the center bottom as well as the three rectangles at the bottom right are the only real browser chrome in play as you surf. They are also maddeningly small to tap. And I have dainty, lady-like fingers, so I suspect it may cause consternation for others.

Address Bar

If I am on a site and I want to change the address of the current page (maybe I fat-fingered and got to a 404, or I know a super-secret URL), I could not find a way to bring up the address bar and change it. It also made it impossible to know the current page address at any time. As someone who regularly looks at the URL for familiar addresses, indications of scam sites, quick commitment to memory, and so on, this alone takes it out of the running as an everyday browser for me.

Email a Page

I did not care for the email feature one bit. Not only does it embed a screen shot of the page (with a Coast watermark), the screen shot won’t display on other devices. Outlook blocked the image because the attachment ended in .com (not .png or .jpg). Had it not come from me, I wonder if Outlook would have blocked it as spam. My Android email client couldn’t display it because there was no file extension to give it a clue.

Screen shot of emailing a web page from Opera Coast.
What you see when you choose to email a web page from Opera Coast.
Screen shot of received email from Opera Coast.
Best case scenario of what the email recipient sees, though the attachment was blocked in Outlook and unusable in my Android email client.

Tweet a Page

Tweeting a page left me similarly dissatisfied. By default it includes a Twitpic screen shot of the current page with an Opera Coast watermark. When composing the tweet, I tapped the paperclip icon to see if it would do anything, but nothing happened. I opted not to tweet again.

Screen shot of tweeting a page from Opera Coast.
Tweeting a page from Opera Coast.

The resultant tweet:

Wrap-up

Overall, I like the browser. I like what it’s trying to do for consumers. As a power user, however, It’s not a fit for me though I’d be interested in bringing it in front of some other members of my family.

I also didn’t get to try out unsafe sites, printing pages, responsive images (need iOS7), or poorly-built sites. My opinion might change as I continue to play with the browser.

Open Question

There are a lot of Android tablets out there, not just the four screen size offerings from Apple. So how long before we can see Coast on my Nexus 7, if ever?

Updates

I’m adding notes throughout the day as they come up.

Surprising no one, the following reviews from more mainstream sources completely fail to include any screen shots or videos that weren’t pilfered from Opera. I only say that to remind you that by reading this post you have gotten the most in-depth review currently on the web and you should be excited and send me a thank you note and maybe read all my other posts and high-five me on the street.

These articles are, however, worth visiting just to see the comments and how others are reacting to it.

Tips from Bruce:

Update: September 18, 2013

Opera has fielded some questions about Coast and collected them into two posts (so far):

An Introduction to SAML

Security Assertion Markup Language (SAML) is an XML-based open standard for exchanging authentication and authorization data between parties – typically an identity provider (IdP) and a service provider. A standard SAML integration does not involve the exchange of a password and simply operates on a system of trust wherein only the user’s identity is passed between these providers.

SAML is commonly used in instances where an end user has access to many different applications or products, such as the health care or higher education fields. Instead of having to login with a username and password for each of these applications, a user simply has to authenticate once in order to access any of them. This is commonly referred to as single sign-on (SSO).

After authenticating with the IdP, a user has access to multiple applications and/or products due to a previously defined trust relationship. This trust relationship is facilitated through the use of certificates, which have been previously distributed between the IdP and the service providers. These certificates are used to “sign” all communication between the IDP and service providers.

A sample SAML integration:

  1. A trust relationship is defined between the IdP and each service provider through the use of installed certificates.
  2. An end user authenticates into the IdP using a single set of user credentials (username and password).
  3. A user selects a service or external system to log in to.
  4. The IdP sends a “signed” SAML Response to the service or external system with the user’s identity.
  5. The service or external system validates the SAML Response.
  6. The browser redirects the user to their requested resource – typically a welcome or landing page.

This is part one of what will be an ongoing series on the topic of SAML. If you have any questions or comments, please post below – or contact us.

Optimizing Site Speed

Talking about site speed today almost seems superfluous, with so many users accessing the web with powerful Internet connections and download capabilities. Most desktop users access the web via cable or fiber optic lines, brandishing download capacities of 15 megabits per second (Mbps) or greater. Although many users will often access those same Internet services via wireless signal, the rapid spread of 4G networks has brought similar download speeds to mobile devices even when they aren’t connected to WiFi.

Despite all that, there are still some desktop users that access the web using DSL or dial-up connections and many mobile users that are restricted to less powerful networks.

But, regardless of all the latest technologies, there will always be some subset of users that hit your web site with poor Internet connections. In addition, many mobile users are limited to how much they can download over their provider’s data network. Personally, I’m limited to 2 gigabytes of data usage per month, excluding any data transferred over WiFi.

That means that when we build and maintain web sites, we need to be cognizant of users’ technology capabilities, as well as their limitations, and plan accordingly.

Understanding Your Users

The first step towards building an optimized web site is simply getting to know your users. Getting a basic idea of user demographics such as age, income, and location will allow you to make some general assessments about how they are accessing your site.

I recommend utilizing Google Analytics to help verify (or nullify) any assessments that you have made about your users. There are several “Audience” reports that will help you gain some insight.

  1. Demographics > Location – Shows where your users are located geographically.
  2. Technology > Browser –  Shows what browsers your users are accessing the site with. I like to check this prior to development to help determine what browsers need to be supported for the site.
  3. Technology > Network – Shows what Internet networks are being used to access your web site. This may give you some idea about your users’ download capabilities.
  4. Mobile > Overview – Shows a basic breakdown of your total desktop, mobile, and tablet users.

Google Analytics doesn’t collect enough information to paint a detailed picture, but these reports, combined with your own experiences, should give you a pretty good idea of what to expect.

Once you understand your users, you can then determine which optimization practices are necessary for your site.

Optimization Basics

Here are some easy techniques that I recommend for all sites, regardless of user technology.

  1. Minify CSS and JavaScript files. This will remove all unnecessary spaces from your files and reduce their size. I prefer cssminifier.com.
  2. Combine CSS files to reduce HTTP requests. Previously, I would keep my screen, mobile, and print styles in separate files, but I have begun combining them into a single file to reduce the number of requests the browser has to process.
  3. Create image sprites. Likewise, you can reduce requests by creating a single image with all of your design files. High traffic web sites like Amazon.com use this technique frequently, but I find it to be a bit cumbersome and avoid it unless I feel it’s necessary.
  4. Scale down and optimize images for the web. I recently noticed a client site was loading slowly and discovered that three of the photos on the home page totaled over 12 mb. By simply scaling those images down to dimensions that fit their container, I was able to reduce the page weight to well under 1 mb.
  5. Optimize PNGs. Photoshop is notorious for creating bloated PNGs. There are many services that you can use to reduce the bloat and overall file size. I like TinyPNG.
  6. Only reference the files that you really need. If you are only using JavaScript on the home page, only call the file on the home page. There’s no need to impact the loading of other pages if they never use the file.
  7. If you are using jQuery or another popular code library, consider referencing Google’s hosted copy. Since many other sites do the same, users may already have the file cached in their browsers, which will save loading time.
  8. Many JavaScript libraries such as Modernizr allow you to customize what code is included in the file that you create. Only download the functionality that you really need.

Most of these steps are simple and can easily be implemented on any web site without impacting quality or deadlines. Doing these things will reduce page weight, decrease loading time, and ultimately improve user experience.

There are many other things that you can do to help reduce page weight and decrease load time, but you’ll need to decide what techniques are right for you and your site. In many cases, the basics may be fine, but in others, every kilobyte may be important.

To learn more about page weight optimization, I recommend reviewing the Network and Audits features within Google Chrome’s Developer Tools. I also really like the Pingdom Tools website speed test. Both of these will break down how long it takes each resource to load and provide suggestions for optimizing your site.

My Presentation Slides: Making Your Site Printable

This post originally appeared on my blog.

On Friday, May 17 I had the pleasure of speaking for the first time at Stir Trek, a one-day conference in Columbus, Ohio, that drew over 1,200 attendees (and I understand sold out in just a few minutes). Apparently the name is a reference to the MIX developer conference, for which they were unable to obtain license to use a variation on the name.

I also had the pleasure of presenting for the first time on best practices for making your web site printable, built from my own professional experience, my PrintShame site, and an article I wrote for .net Magazine, among other resources (also linked in the presentation).

With 40 great speakers across 8 different tracks, there was quite a lot to offer throughout the day. Considering the other presentations held at the same time as mine, I was thrilled to get any audience and more excited to see that those who attended saw value in the topic and asked great questions throughout.

As promised in the session, I have made my slides available online via SlideShare and embedded them here:

Well after the talk I got even more questions and feedback on the session, which I truly appreciated. Since there is no official survey for attendees to give feedback on a speaker, I am hoping any attendees will feel comfortable tweeting about it or leaving a comment here. So far I have gotten one great bit of feedback on Twitter:

(I worked in some accessibility tips during my presentation.)

All other feedback is welcome (including if I was loud enough when the lavalier microphone failed).

While in Columbus I also had the pleasure of having a nice dinner (I arrived too late to make the speaker dinner), visiting the North Market, and, as part of the conference, getting to see a double feature of Iron Man 3 and Star Trek: Into Darkness. All around a good time which I look forward to repeating next year.