rmohns + webdev   280

Why mobile web apps are slow | Sealed Abstract
If you remember nothing else from this blog post, remember this chart.  The Y axis is time spent collecting garbage.  The X axis is “relative memory footprint”.  Relative to what?  Relative to the minimum amount of memory required.

[…]

HOW MUCH MEMORY IS AVAILABLE ON IOS?

It’s hard to say exactly. The physical memory on the devices vary pretty considerably–from 512MB on the iPhone 4 up to 1GB on the iPhone 5. But a lot of that is reserved for the system, and still more of it is reserved for multitasking. Really the only way to find out is to try it under various conditions. Jan Ilavsky helpfully wrote a utility to do it, but it seems that nobody publishes any statistics. That changes today.

Now it’s important to do this under “normal” conditions (whatever that means), because if you do it from a fresh boot or back-to-back, you will get better results since you don’t have pages open in Safari and such. So I literally grabbed devices under the “real world” condition of lying around my apartment somewhere to run this benchmark.

Photo May 14, 10 53 53 PMPhoto May 14, 10 51 13 PM

You can click through to see the detailed results but essentially on the iPhone 4S, you start getting warned around 40MB and you get killed around 213MB. On the iPad 3, you get warned around 400MB and you get killed around 550MB. Of course, these are just my numbers–if your users are listening to music or running things in the background, you may have considerably less memory than you do in my results, but this is a start. This seems like a lot (213mb should be enough for everyone, right?) but as a practical matter it isn’t. For example, the iPhone 4S snaps photos at 3264×2448 resolution. That’s over 30 megabytes of bitmap data per photo. That’s a warning for having just two photos in memory and you get killed for having 7 photos in RAM. Oh, you were going to write a for loop that iterated over an album? Killed.

It’s important to emphasize too that as a practical matter you often have the same photo in memory multiple places. For example, if you are taking a photo, you have 1) The camera screen that shows you what the camera sees, 2) the photo that the camera actually took, 3) the buffer that you’re trying to fill with compressed JPEG data to write to disk, 4) the version of the photo that you’re preparing for display in the next screen, and 5) the version of the photo that you’re uploading to some server.

At some point it will occur to you that keeping 30MB buffers open to display a photo thumbnail is a really bad idea, so you will introduce 6) the buffer that is going to hold a smaller photo suitable for display in the next screen, 7) the buffer that resizes the photo in the background because it is too slow to do it in the foreground. And then you will discover that you really need five different sizes, and thus begins the slow descent into madness. It’s not uncommon to hit memory limits dealing just with a single photograph in a real-world application. But don’t take my word for it:

The worst thing that you can do as far as your memory footprint is to cache images in memory. When an image is drawn into a bitmap context or displayed to a screen, we actually have to decode that image into a bitmap. That bitmap is 4 bytes per pixel, no matter how big the original image was. And as soon as we’ve decoded it once, that bitmap is attached to the image object, and will then persist for the lifetime of the object. So if you’re putting images into a cache, and they ever get displayed, you’re now holding onto that entire bitmap until you release it. So never put UIImages or CGImages into a cache, unless you have a very clear (and hopefully very short-term) reason for doing so. – Session 318, iOS Performance In Depth, 2011


What this chart says is “As long as you have about 6 times as much memory as you really need, you’re fine.  But woe betide you if you have less than 4x the required memory.” But don’t take my word for it:

[…]

In English: the philosophy of JavaScript (to the extent that it has any philosophy) is that you should not be able to observe what is going on in system memory, full stop. This is so unbelievably out of touch with how real people write mobile applications, I can’t even find the words to express it to you. I mean, in iOS world, we don’t believe in garbage collectors, and we think the Android guys are nuts. I suspect that the Android guys think the iOS guys are nuts for manual memory management. But you know what the two, cutthroat opposition camps can agree about? The JavaScript folks are really nuts. There is absolutely zero chance that you can write reasonable mobile code without worrying about what is going on in system memory, in some capacity. None. And so putting the whole question of SunSpider benchmarks and CPU-bound stuff fully aside, we arrive at the conclusion that JavaScript, at least as it stands today, is fundamentally opposed to the think-about-memory-philosophy that is absolutely required for mobile software development.
programming  development  ios  android  javascript  webdev 
5 weeks ago by rmohns
Filler Text - A humorous replacement for the standard Lorem Ipsum text
A humorous replacement for the standard Lorem Ipsum text. Each file has approximately 40 paragraphs of text. You can download each one individually, or all at once

Hipster
Hillbilly
Metropolitan
Marketing
Pseudo German
Pseudo Latin
Technobabble
Television
tools  webdev  content 
8 weeks ago by rmohns
Modaal is a WCAG 2.0 Level AA accessible modal plugin
Modaal is a WCAG 2.0 Level AA accessible modal window plugin.
accessibility  ux  webdev  tools 
april 2018 by rmohns
The Cost Of JavaScript – Dev Channel – Medium
The Cost Of JavaScript
As we build sites more heavily reliant on JavaScript, we sometimes pay for what we send down in ways that we can’t always easily see. In this post, I’ll cover why a little discipline can help if you’d like your site to load & be interactive quickly on mobile devices.
javascript  performance  webdev  optimization 
march 2018 by rmohns
How GDPR Will Change The Way You Develop — Smashing Magazine
We’ve shown you how GDPR requires you to be more thoughtful about the sites and services you build, more transparent about the ways you collect and use data, more considerate of your users, and more thorough in your development and documentation processes. If you were expecting scary legal mumbo-jumbo, we won’t apologize. GDPR is only a complicated legal burden if you want it to be. The European privacy overhaul is really about adopting common-sense safeguards for data protection and privacy as fundamental parts of your development workflow on the code and process levels.
privacy  security  law  webdev  ux 
march 2018 by rmohns
Seven into seven. — Ethan Marcotte

On the face of it, this statement’s true. AMP’s markup isn’t proprietary as such: rather, all those odd-looking amp- tags are custom elements, part of the HTML standard. And the specification’s published, edited, and distributed on GitHub, under one of the more permissive licenses available.

So, yes. The HTML standard does allow for the creation of custom elements, it’s true, and AMP’s license is quite liberal. But spend a bit of time with the rules that outline AMP’s governance. Significant features and changes require the approval of AMP’s Technical Lead and one Core Committer—and if you peruse the list of AMP’s Core Committers, that list seems exclusively staffed and led by Google employees.

Now, there’s nothing wrong with this. After all, AMP is a Google-backed project, and they’re free to establish any governance model they deem appropriate. But when I hear AMP described as an open, community-led project, it strikes me as incredibly problematic, and more than a little troubling. AMP is, I think, best described as nominally open-source. It’s a corporate-led product initiative built with, and distributed on, open web technologies
standards  googleamp  ethics  webdev  ux  seo 
january 2018 by rmohns
nystudio107 | Handling Errors Gracefully in Craft CMS
Every web­site can have errors, it’s how you han­dle them that mat­ters. Here’s a prac­ti­cal error han­dling guide for Craft CMS. […]

DEFENSIVE CODING IN TWIG
This men­tal­i­ty of defen­sive cod­ing applies no mat­ter what lan­guage you’re using. Whether it’s C, PHP, JavaScript, or even tem­plat­ing lan­guages like Twig.

A good way to write code is to adopt cod­ing stan­dards; this ensures that you’re always doing things in a con­sis­tent way. This becomes more impor­tant when you’re work­ing with a team, but future-you will also ben­e­fit from con­sis­tent, stan­dard­ized coding.

You can adopt the Sen­sio Labs Twig Cod­ing Stan­dards, or you can adopt your own.

It’s less important what coding standards you adopt than it is that you’re using some type of standard.
Now that you’re on-board adopt­ing some form of cod­ing stan­dards, let’s talk about things you can do while you’re devel­op­ing a Craft CMS website.
craftcms  reference  development  webdev  coding  bestpractices 
january 2018 by rmohns
Understanding CSS Variables – YoungInnovations’ Blog
With the help of CSS Variables, you can localize values and simplify initial development, iterative testing, and later maintenance all in one go. It is also officially a part of the CSS specification
css  css3  reference  tutorial  html  webdev 
december 2017 by rmohns
WebGazer.js: Democratizing Webcam Eye Tracking on the Browser
WebGazer.js is an eye tracking library that uses common webcams to infer the eye-gaze locations of web visitors on a page in real time. The eye tracking model it contains self-calibrates by watching web visitors interact with the web page and trains a mapping between the features of the eye and positions on the screen. WebGazer.js is written entirely in JavaScript and with only a few lines of code can be integrated in any website that wishes to better understand their visitors and transform their user experience. WebGazer.js runs entirely in the client browser, so no video data needs to be sent to a server. WebGazer.js runs only if the user consents in giving access to their webcam.
tools  webdev  ux  usability  testing 
october 2017 by rmohns
The "Average Page" is a myth - igvita.com
Except, what is an "average page", exactly? Intuitively, it is a page that is representative of the web at large, in its payload size, distribution of bytes between different content types, etc. More technically, it is a measure of central tendency of the underlying distribution - e.g. for a normal distribution the average is the central peak, with 50% values greater and 50% values smaller than its value. Which, of course, begs the question: what is the shape and type of the distribution for transferred bytes and does it match this model? Let's plot the histogram and the CDF plots...
performance  webdev  metrics 
september 2017 by rmohns
Personal names around the world - and how this affects form design
How do people's names differ around the world, and what are the implications of those differences on the design of forms, databases, ontologies, etc. for the Web?

People who create web forms, databases, or ontologies are often unaware how different people’s names can be in other countries. They build their forms or databases in a way that assumes too much on the part of foreign users. This article will first introduce you to some of the different styles used for personal names, and then some of the possible implications for handling those on the Web.

This article doesn't provide all the answers – the best answer will vary according to the needs of the application, and in most cases, it may be difficult to find a 'perfect' solution. It attempts to mostly sensitize you to some of the key issues by way of an introduction. The examples and advice shown relate mostly to Web forms and databases. Many of the concepts are, however, also worth considering for ontology design, though we won't call out specific examples here.
ux  usability  forms  accessibility  webdev 
august 2017 by rmohns
Falsehoods Programmers Believe About Names | Kalzumeus Software
I have never seen a computer system which handles names properly and doubt one exists, anywhere.

So, as a public service, I’m going to list assumptions your systems probably make about names.  All of these assumptions are wrong.  Try to make less of them next time you write a system which touches names.
ux  usability  design  culture  webdev  forms  accessibility 
august 2017 by rmohns
Mercury Amp Converter by Postlight
Instant AMP results. Zero development.
With just one line of code, Mercury AMP gets your publication ready for Google AMP. Get lightning-fast load times and boosted search results on mobile.
seo  tools  webdev 
july 2017 by rmohns
NoCoffee Chrome Extensions
Simulates color blindness and other visual deficiencies
accessibility  chrome  webdev  ux 
july 2017 by rmohns
Measuring Time On (Bounce) Page | Analytics Edge Help
For people measuring their website traffic with Google Analytics, there is nothing more frustrating than building a really popular web page that gets tons of visits, but GA shows Session Duration close to ZERO! The problem is that Google Analytics doesn’t measure the time on the last page of a visit, so even if they read your article for 5 minutes, if they don’t click on another page, their session is recorded as 0 seconds. Sigh….
[…]

The magic is performed with a simple Javascript snippet, placed just before the </head> tag:

<script type="text/javascript">
function timer11(){ga('send', 'event', 'TimeOnPage', '1', '11-30 seconds', { 'nonInteraction': 1 });}
function timer31(){ga('send', 'event', 'TimeOnPage', '2', '31-60 seconds', { 'nonInteraction': 1 });}
function timer61(){ga('send', 'event', 'TimeOnPage', '3', '61-180 seconds', { 'nonInteraction': 1 });}
function timer181(){ga('send', 'event', 'TimeOnPage', '4', '181-600 seconds', { 'nonInteraction': 1 });}
function timer601(){ga('send', 'event', 'TimeOnPage', '5', '601-1800 seconds', { 'nonInteraction': 1 });}
function timer1801(){ga('send', 'event', 'TimeOnPage', '6', '1801+ seconds', { 'nonInteraction': 1 });}
ga('send', 'event', 'TimeOnPage', '0', '0-10 seconds', { 'nonInteraction': 1 });
setTimeout(timer11,11000);
setTimeout(timer31,31000);
setTimeout(timer61,61000);
setTimeout(timer181,181000);
setTimeout(timer601,601000);
setTimeout(timer1801,1801000);
</script>
</head>

time-on-page-event-labelsVery simply, it sets up a series of timers that trigger after a period of time, and when they do, they trigger a non-interaction event in Google Analytics. The events use a Category of ‘TimeOnPage’, and an Action of 0 through 6 in order of the time spent on the page.

I populated the Event Labels with the actual group labels I wanted in my report, so I could use them in my reports.

All of the sessions should trigger the first event (0-10 seconds), and then they should continue triggering each new level until they leave the page. What you get is a simple count of the number of sessions that stayed the length of time in the category…not exactly like the Behavior report, but good enough for my reporting purposes.

Its been running for a couple of weeks now, and I am really pleased with the results, so I thought I’d share.
analytics  metrics  google  usability  ux  webdev  content  performance 
july 2017 by rmohns
4 awesome slides showing how page speed correlates to business metrics at Walmart.com - Web Performance Today
Conclusions: Optimization resulted in improved conversions, revenue, and SEO

You may be happy to know that the Walmart team not only hit their SLA at the end of their optimization sprint, they actually overreached it by almost 3 seconds. They note the following benefits:

For every 1 second of improvement they experienced up to a 2% increase in conversions
For every 100 ms of improvement, they grew incremental revenue by up to 1%
SEO benefits for entry pages and reduce bounces
ux  webdev  performance  metrics  testing  commerce  bestpractices 
july 2017 by rmohns
How to run the perfect content audit – GatherContent Blog
Depending on the way you set up your inventory, you can create custom formulas to crunch the data and combine metrics. If you’re using Trim, you’ll see our Engagement, Popularity, and Performance scores do this for you to identify things like:

Popular pages with low engagement
Start here, these are pages which will have most impact on the most visitors.

Popular pages with high engagement
What can you learn from these pages and apply to other content you’re writing or refreshing?

Pages with low traffic, but high engagement
When people find these pages, they seem to like what they see. Perhaps you want to promote or make these pages more prominent?

Pages with low traffic and low engagement
Consider whether these pages are really needed – who are they for, and should we keep them in their current state?
content  planning  strategy  webdev 
july 2017 by rmohns
Migrating Your Site From Justia
Moving your site can be a nerve-wracking experience no matter where it resides. Any type of site move can impact your site’s ranking in search. Many attorneys use the popular marketing and web development services of Justia.

Whether you are checking out your options or deciding to make the move to a WordPress site, this post is all about the experiences others have had as well as a checklist for what you need to move your website from Justia when you are ready.
seo  bestpractices  webdev 
june 2017 by rmohns
Responsive Images with Craft — Stephen Bowling
With Craft and the picture element, you can display images optimized for different breakpoints and have more control over your responsive layouts. You'll need Picturefill to enable the picture element in browsers that don't support it natively. If you aren't familiar with the picture element, the Picturefill site does a great job of explaining the markup and it's features.
responsive  craftcms  howto  webdev  responsivedesign 
june 2017 by rmohns
Migrating your websites to the Grid - Media Temple
Whether you have a site with just static html pages or a dynamic database-driven one, this migration guide should help you get started with your new Grid. This guide covers migration basics and will facilitate your move. Please keep in mind that it does not cover every possible migration scenario. Some of the instructions may not be compatible with your setup. 
howto  webdev  reference 
may 2017 by rmohns
drush-ops/drush: Drush is a command-line shell and scripting interface for Drupal, a veritable Swiss Army knife designed to make life easier for those who spend their working hours hacking away at the command prompt.
Drush is a command line shell and Unix scripting interface for Drupal. Drush core ships with lots of useful commands for interacting with code like modules/themes/profiles. Similarly, it runs update.php, executes sql queries and DB migrations, and misc utilities like run cron or clear cache. Drush can be extended by 3rd party commandfiles.
drupal  webdev  tools 
february 2017 by rmohns
Float Label Pattern | Brad Frost
The float label pattern floats the inline label up above the input after the user focuses on the form field or enters a value.
ux  usability  forms  concepts  bestpractices  webdev 
january 2017 by rmohns
Multi-Part Forms: 5 Features You Don't Want to Miss!
conversion rates of multi-part forms are 300% greater than single-page forms. Forms conversion plummets after adding a 5th field on a single page.
forms  conversion  data  usability  webdev  bestpractices 
december 2016 by rmohns
8 Optimisation Experts' Tips on Form Design
Karl Blanks, Co-founder of Conversion Rate Experts

“Start your form with an irresistible one-sentence summary of the value proposition. It’s your final chance to remind visitors why they should do all the hard work of completing the form.”

“For each form field, consider explaining why the user will benefit from submitting that information. A great example comes from our friend the legendary marketer Drayton Bird. Drayton was working on an application form for a loan product. He decided to move the ‘your address’ field from the end of the form to the start of it, giving it the following title: ‘To which address would you like us to send the cheque?’”

“The words on the call-to-action button should be irresistibly appealing. ‘Register now’ isn’t irresistibly appealing.”

Connect with Karl by receiving his newsletter.
forms  usability  webdev  conversion  bestpractices 
december 2016 by rmohns
Mobile Form Usability: Never Use Inline Labels - Articles - Baymard Institute
Labels placed inside the form field (aka “inline labels”) are widespread in mobile apps and sites – almost to the point of being a best (mal)practice. Yet in every usability test we’ve conducted inline labels have suffered from major usability problems. Mobile included.

Perhaps the popularity of inline labels on mobile is due to Apple’s extensive use of them, or the great simplistic look they afford, or their space efficiency – most likely it’s combination of all those factors. And while good looks and space efficiency are valid benefits of inline labels, these are by far outweighed by the major usability drawbacks of inline labels, the most significant of which is the loss of context.
usability  forms  webdev  ux 
december 2016 by rmohns
Mobile Form Usability: Place Labels Above the Field - Articles - Baymard Institute
On mobile, should the field label go to the left of or above the field? After completing a large-scale usability study of 18 mobile e-commerce sites, which included test subjects completing more than a thousand mobile checkout form fields, the answer is: above, with one exception.
usability  forms  webdev  ux 
december 2016 by rmohns
Here’s Why Client-side Rendering Won
There’s no denying that client-side rendering is harder to do well. You have to think about bundling, transpiling, linting, cache busting, and so much more. Doing client-side right is so hard that I walk through over 40 decisions you need to make to get all this right in my new Pluralsight course.

Just a few reasons client-side development is challenging.
So why are we subjecting ourselves to such pain? Because client-side rendering offers a long list of benefits that server-side rendering just can’t touch.
Here’s why client-side rendering won.
webdev  javascript  opinion  opensource 
december 2016 by rmohns
Stop Validating Email Addresses With Regex
Just stop, guys. It’s a waste of your time and your effort. Put down your Google search for an email regular expression, take a step back, and breathe.

[…]

Just send them an email already

No, I’m not joking. Just send your users an email. The activation email is a practice that’s been in use for years, but it’s often paired with complex validations that the email is formatted correctly. If you’re going to send an activation email to users, why bother using a gigantic regular expression?
ux  email  webdev  bestpractices 
november 2016 by rmohns
The 100% correct way to validate email addresses
Let’s imagine that my email address is davidgilbertson@example.com. That’s 27 stabs at the keyboard that could go awry. Any mistype will definitely result in an incorrect email address but only maybe result in an invalid email address.
[epiphany]
ux  email  webdev  howto  rants 
november 2016 by rmohns
How to reduce incorrect email addresses
Last week I wrote about the 100% correct way to validate email addresses which, in short, pointed out that detecting ‘invalid’ email addresses misses the majority of mistakes.
I suggested checking that the user attempted to enter an email ( /.+@.+/) and then requiring a response to a confirmation email. In hindsight that post could have been a lot shorter.
Since then, two themes have occupied my daydream machine:
ux  email  webdev  tools  howto 
november 2016 by rmohns
mailcheck/mailcheck: Reduce misspelled email addresses in your web apps.
The Javascript library and jQuery plugin that suggests a right domain when your users misspell it in an email address.

mailcheck.js is part of the Mailcheck family, and we're always on the lookout for more ports and adaptions. Get in touch!
ux  tools  email  webdev 
november 2016 by rmohns
What is Bounce Rate? Avoid a Common Pitfall
Google Analytics Benchmark Averages for Bounce Rate

40-60% Content websites
30-50% Lead generation sites
70-98% Blogs
20-40% Retail sites
10-30% Service sites
70-90% Landing pages
analytics  benchmarking  stats  webdev 
november 2016 by rmohns
How security flaws work: SQL injection | Ars Technica
SQL injection attacks exist at the opposite end of the complexity spectrum from buffer overflows, the subject of our last in-depth security analysis. Rather than manipulating the low-level details of how processors call functions, SQL injection attacks are generally used against high-level languages like PHP and Java, along with the database libraries that applications in these languages use. Where buffer overflows require all sorts of knowledge about processors and assembler, SQL injection requires nothing more than fiddling with a URL.

FURTHER READING
How security flaws work: The buffer overflow
As with buffer overflows, SQL injection flaws have a long history and continue to be widely used in real world attacks. But unlike buffer overflows, there's really no excuse for the continued prevalence of SQL injection attacks: the tools to robustly protect against them are widely known. The problem is, many developers just don't bother to use them.
security  programming  development  webdev  bestpractices 
october 2016 by rmohns
The CMS is Dead. Long live the CMS — Forge
Which bloody CMS do we use?
Over the years, we've tried everything from Wordpress, Drupal, Squarespace, custom Codeigniter MVC app, custom Rails app... and we came all the way back to static.

We've been building static single page sites for a while now, which for value proposition testing and product sites that works just fine. But what about when you want something more? An e-commerce site perhaps, a blog or news site or a larger marketing site.

Whatever method we chose, whatever the tech, it never felt right. There was never an occasion that every stakeholder in the team could say they were happy. From a developer perspective, we were always "hacking" the set of pre-defined characteristics to bend it to our will - whether it was extending the wordpress content models or injecting javascript into squarespace templates.

When we had more freedom, such as building out our own rails-based CMS, there was never enough time or budget to do the job properly - and even if we did, we'd just be contributing another fixed architecture platform that would inevitably change beyond recognition, the next time round.
cms  webdev  content 
october 2016 by rmohns
Reminder: Today Is The Day Microsoft Pulls Support For Internet Explorer 8, 9, And 10 For Good

If you’ve been putting off your final farewells to Internet Explorer, it’s time to stop procrastinating: Microsoft is ending support for IE versions 8, 9, and 10, effectively sending the browser to that Internet pasture in the sky, where its friends Netscape Navigator, Mosaic, and other tech dinosaurs are waiting.
The final security update delivers a few bug fixes for the browser, as well as a warning that it’s about to bite the bucket, in the form of an “end of life” notification. The message will push users to upgrade to IE’s successor, Microsoft Edge.
browsers  webdev 
october 2016 by rmohns
Grade.js
This JavaScript library produces complementary gradients generated from the top 2 dominant colours in supplied images.
javascript  color  design  webdev  webdesign 
august 2016 by rmohns
PNG optimisation
Exporting an identical image from different design tools results in different file sizes. Why? What can be done to optimise them to reduce downloading time and disk space?

To test, we can use an image that is a single pixel. A 1×1 white pixel PNG shows the efficiency of how various tools package their exports, and if metadata or additonal data chunks are included. Here’s how the various tools and common export methods rank. Sizes are in bytes and smaller is better.
webdesign  performance  optimization  webdev  graphics 
august 2016 by rmohns
The Human Cost of Tech Debt - DaedTech
If you’re not already familiar with the concept of technical debt, it’s worth becoming familiar with it.  I say this not only because it is a common industry term, but because it is an important concept.

Coined by Ward Cunningham, the term introduces the idea that taking shortcuts in your software today not only means paying the price eventually — it means paying that price with interest.  In other words, introducing that global variable today and saving half a day’s work ahead of shipping means that you’re going to pay for it with more than half a day’s labor down the line.
development  webdev  webdesign  business  management  process  productivity 
august 2016 by rmohns
The Languages Which Almost Became CSS - Eager Blog
When HTML was announced by Tim Berners-Lee in 1991 there was no method of styling pages. How given HTML tags were rendered was determined by the browser, often with significant input from the user’s preferences. It seemed, however, like a good idea to create a standard way for pages to ‘suggest’ how they might prefer to be rendered stylistically.

But CSS wouldn’t be introduced for five years, and wouldn’t be fully implemented for ten. This was a period of intense work and innovation which resulted in more than a few competing styling methods which just as easily could have become the standard.

While these languages are obviously not in common use today, I find it fascinating to think about the world that might have been. Even more surprisingly, it happens that many of these other options include features which developers would love to see appear in CSS even today.
history  webdev  css  css3  culture 
july 2016 by rmohns
Structuring CSS in large projects — Peergrade.io — Medium
However, the world has changed, and the web has changed. We no longer build web pages — we build web applications. The publication metaphor that HTML and CSS was built around, no longer applies to most things built on the web today.

Really this calls for a new way of specifying styles, and perhaps a new way of building for the web. But, for now, we’re stuck with CSS and HTML, and that means we have to use these tools carefully, in a way that produces manageable and maintainable web applications.

The way Peergrade.io does CSS
css  css3  webdev 
july 2016 by rmohns
Moving from WordPress to Craft - Gregor Terrill
I want to talk about why Craft has won me over, and why WordPress development is something I'm hoping to one day leave behind altogether.

The Hype

Craft's been around since 2012, but people have really started to take notice in the past couple of years. Craft was named Best PHP CMS for Small to Midsize Business in 2014 and Best CMS for Developers in 2015.

More importantly for me, there have been a lot of high-profile agencies making the switch to Craft in the past few years. Several of them have posted great write-ups about why they chose to do so, and I've been collecting them in an effort to convince my own team to make the switch.
cms  craftcms  craft  wordpress  webdev 
may 2016 by rmohns
tota11y – an accessibility visualization toolkit
tota11y helps visualize how your site performs with assistive technologies. Check out the announcement blog post.

The process of testing for accessibility (a11y) is often tedious and confusing. In many cases, developers must have some prior accessibility knowledge in order to make sense of the results.

Instead, tota11y aims to reduce this barrier of entry by helping visualize accessibility violations (and successes), while educating on best practices.
accessibility  tools  webdev  development  testing 
march 2016 by rmohns
Documentation - Craft plugin to assist in the client documentation workflow in a project.
This plugin designed specifically to assist the team document this Craft project during each phase. During the projects phases, your developers should use a simple markdown file to create end user documentation, this encourages the "document during development" mentality.

The final result of this working markdown file will be available in Craft for the clients quick reference.
craftcms  tools  webdev  plugin 
september 2015 by rmohns
Reverse Relations plugin for Craft CMS
Plugin that allows you to show and save reverse relations in both the CP and the Site.

Features:
• Able to output the relation in the CP and in the site (no other plugin has this feature)
• Only supports entries at the moment
craftcms  tools  webdev  plugin 
september 2015 by rmohns
Introvert Fieldtype for Craft CMS
Introvert allows you to see reverse related entries to the entry currently being edited.

The fieldtype is super handy for seeing which assets are being used by which entries. Simply add a Reverse Related Entries field on your Asset source Field Layout…
craftcms  tools  webdev  plugin 
september 2015 by rmohns
Craft Many-to-Many – A Field Type plugin for CraftCMS that allows the management of relationships from both sides
Many to Many is a CraftCMS plugin developed by Page 8. This plugin allows you to manage relationships in Craft from either of the entries that belong to the association. For example, if you have a recipe with many ingredients, and ingredients that belong to many recipes, you can manage the relationship from either the Recipe's entry or the Ingredient's entry.
craftcms  tools  webdev  plugin 
september 2015 by rmohns
Behind the scenes of a modern website | Forty
We recently redesigned our own website (on which you’re probably reading this article right now), and thought you might be interested in hearing about some of the technology elements running the background that help shape the overall user experience. Ultra advanced front-end framework meets a trusted CMS Our whole site is built using ZURB’s Foundation front-end …
webdev  engineering  frontend  wordpress  uxjam 
august 2015 by rmohns
Hacking vendor support for HiDPI Canvas - Crowd Favorite

The way browsers handle canvas drawing on HiDPI (or Retina) displays is a bit of an unknown specification. The common assumption is that because canvas uses vectors to rasterize its entities like lines and shapes, it should “just work” for HiDPI displays. This assumption is currently incorrect and leads to inconsistent results across browsers. To try and sum up the technical issue at hand, this is Paul Lewis writing about this for HTML5 Rocks.

… This means that if you draw an image into a canvas in Safari it will automatically double the dimensions of the image when writing it to the canvas’s backing store, so after scaling down to the logical pixel size and back up again through the devicePixelRatio you will arrive back at the size you specified. In Chrome, however, the image will be written to the backing store at the exact size you specify which means that after the devicePixelRatio is applied it will be upscaled and blurry.

In short, Safari automatically handles this issue, upscaling your canvas work to appear at retina quality, while all other browsers currently do not. In the article he describes the correct way to approach this problem in writing your own canvas code, but what happens if you’re using a vendor library that does not account for this problem? Do you edit the vendor’s source attempting to correct it? On this site we’ve chosen to use the FF Chartwell font to render our graph displays as seen on our services page.

We found ourselves in this exact position in using FF Chartwell as they do not account for HiDPI displays, and the cross-browser issues it presents. In contemplating this problem, we came up with a solution that would handle these cross-browser exceptions without having to edit the vendor’s source. Using JavaScript’s inherent (over?) flexibility, we were able to modify the core behavior of HTMLCanvasElement and CanvasRenderingContext2D to produce a cross-browser HiDPI friendly result without the need to modify the vendor source. This is the pattern we used to extend the core functions, commented for clarity.
webdev  hacks  uxjam  howto  html5 
august 2015 by rmohns
Tools don’t solve the web’s problems, they ARE the problem - QuirksBlog
The movement toward toolchains and ever more libraries to do ever less useful things has become hysterical, and with every day that passes I’m more happy with my 2006 decision to ignore tools and just carry on. Tools don’t solve problems any more, they have become the problem. There’s just too many of them and they all include an incredible amount of features that you don’t use on your site — but that users are still required to download and execute.

Why all these tools? I see two related reasons: emulating native, and the fact that people with a server-side background coming to JavaScript development take existing tools because they do not have the training to recognise their drawbacks. Thus, the average web site has become way overtooled, which exacts a price when it comes to speed.

That’s the problem. Remove the tools, and we’ll recover speed.
webdev  performance  development  ux  unjam 
may 2015 by rmohns
ImageAlpha — heavy compression for PNG images (like JPEG with alpha channel!)
ImageAlpha greatly reduces file sizes of 24-bit PNG files (including alpha transparency) by applying lossy compression and conversion to a more efficient PNG8+alpha format. Such images are compatible with iOS, all browsers, and even degrade well in IE6.
uxjam  ux  webdev  tools  mac 
december 2013 by rmohns
Performance Calendar » PNG that works
Clever PNG hacks, including 8-bit paletted images with 8-bit alpha
uxjam  ux  webdev 
december 2013 by rmohns
Hey Google, why did you turn the lights out? | Wordtracker
The week’s big news is that Google is turning the lights out on organic search, by encrypting all keyword referral data. They are extending the https secure search to 100% organic searches. The bad news is that if you were tracking the keywords sending traffic to your web pages in Google Analytics, then life just got harder.
google  search  webdev  metrics  stats 
september 2013 by rmohns
Bootstro.js demo
framework to make tour of a web page
jquery  tools  ux  webdev  ui  javascript 
september 2013 by rmohns
Why Your Site is Now Illegal in Europe - SitePoint
As of May 26 2012, any website available to European visitors must comply with the EU E-Privacy Directive. New laws came into effect in 2011 which prevent identifying information being stored a user’s computer without their knowledge and consent.

If you’re using cookies or any other technologies for non-essential tracking, you must:

Tell users that tracking technologies are used.
Explain the reasons for using those technologies.
Obtain the user’s consent prior to using that technology and allow them to withdraw permission at any time.
privacy  security  law  webdev 
september 2013 by rmohns
CSS Sprites vs. Data URIs: Which is Faster on Mobile? | Mobify
This article is the final piece of a three part series investigating the performance of data URIs on mobile.
mobile  performance  webdev  css  reference 
august 2013 by rmohns
Sloppy - the slow proxy for dial-up modem speed simulation (slow down)
Sloppy deliberately slows the transfer of data between client and server.

Example usage: you probably build web sites on your local network, which is fast. Using Sloppy is one way to get the "dial-up experience" of your work without the hassle of having to install a modem.
webdev  tools  testing 
april 2013 by rmohns
jQuery Sparklines
This jQuery plugin generates sparklines (small inline charts) directly in the browser using data supplied either inline in the HTML, or via javascript.
tools  ux  uxjam  webdev  javascript  jquery  visualization  data 
april 2013 by rmohns
Yahoo! YSlow for Safari
YSlow analyzes web pages and suggests ways to improve their performance based on a set of rules for high performance web pages.
ux  uxjam  tools  performance  webdev 
april 2013 by rmohns
How Ars slayed the moonshark: On building and running liveblogs | Ars Technica
Sometimes simple solutions are apparently the best - here they're using just three static files hosted on S3, polled periodically. No fancy WebSocket or Comet stuff, no dynamic pages. Wow.
reference  tech  webdev 
march 2013 by rmohns
divergent media, inc. - Forget Flash, Skip GIF, Control iOS
Through a clever combination of still images, JavaScript and the canvas tag, Apple implemented a basic video decompression system, without needing browser support for video. We later found the makers of Sublime Text were doing something similar. We decided a tool that could generate this type of content without all the hassles might be useful for a web developers and designers at large.
tools  html5  css  javascript  hacks  webdev  howto 
february 2013 by rmohns
« earlier      
per page:    204080120160

related tags

@font-face  accessibility  aea  analysis  analytics  android  apache  apple  apps  art  audio  awesome  awesomeness  benchmarking  bestpractices  blackberry  books  browsers  business  c++  chrome  cms  coda  codecs  coding  color  commentary  commerce  compatibility  concepts  content  conversion  cool  craft  craftcms  css  css3  cthulu  culture  data  debug  demo  design  development  documentation  drupal  email  engineering  ethics  facebook  flash  font  fonts  forms  framework  frontend  Funny  generator  google  googleamp  graphics  grid  grids  hacks  history  how  howto  html  html5  ia  icons  ie  imarc  informationarchitecture  insight  inspiration  interesting  ios  ios4  iOS5  ipad  ipad3  iphone  iphone4  iphonedev  javascript  jquery  law  layout  library  lightbox  liveblog  mac  macosx  macosxserver  management  maps  marketing  mediaqueries  metrics  microformats  mobile  mountainlion  opensource  opinion  optimization  osx  performance  phone  php  planning  plugin  plugins  presentation  privacy  process  productivity  programming  prototype  prototyping  publishing  query  rants  reference  regex  resources  responsive  responsivedesign  retina  rim  safari  sarcasm  search  security  seo  socialmedia  socialnetworking  software  standards  statistics  stats  storage  strategy  svn  tech  testing  tips  to  tools  tricks  troubleshooting  tutorial  type  typography  ui  unjam  usability  userinterface  utilities  ux  uxjam  validator  video  virtualization  visualization  vmware  web  webapp  webdesign  webdev  webfonts  webkit  win7  wireframes  wordpress  work  xhtml  xoom 

Copy this bookmark:



description:


tags: