Home Babes About

Category: Web Development

Web Development

F8: React Fiber, Baby

Facebook announces React Fiber, a rewrite of its React framework

Facebook has completely rewritten React, its popular JavaScript library for building user interfaces. The company hasn’t previously talked much about React Fiber, as the project is called, but it has actually been working on it for a while. It’s now ready to talk about this project publicly in more detail (after word about it started spreading last year) and the plan is to put this rewrite into the hands of developers once React 16.0 launches later this year. It’s already in use on Facebook.com today, which clearly indicates that Facebook itself thinks it’s ready for prime time.

In addition, it is also launching a rewrite of Relay, its framework for building data-heavy applications.

oh man, the boys at work are gonna love this… we switched from AngularJS over to React on addthis.com about a year or more ago… so will be curious to read more about this new flavor of React.

Facebook open sources Caffe2, its flexible deep learning framework of choice

Leave a comment
Web Development

Speed Is the New SEO

For Web Developers, Speed Is the New SEO

Page speed refers to the time it takes a specific web page to display its content — text, images and more.

Google uses a point-based system that ranges from 0-100 that considers two main components of page speed: time to above-the-fold load and time to full page load.

When optimized, page speed can work wonders for your brand — no matter what your business goals are. Fast loading sites, in general, receive 25% more views in ads, lower bounce rates and better reputations. Best of all, users stay longer.

That’s why your page speed directly affects your sales and conversions. The faster your web page, the more revenue you’ll make.

i just love, and couldn’t agree more, with the title of this article — speed is the new SEO, bitches!


Web Development

Front-End vs Back-End

Front-End vs Back-End vs Full Stack Development

Front-end development. A front end developer will often focus heavily on understanding HTML, CSS, and JavaScript since these languages live in the browser. In addition to fluency in these languages, front-end devs need to be familiar with frameworks like Bootstrap, Foundation, Backbone, AngularJS, and EmberJS, which ensure great-looking content no matter the device, and libraries like jQuery and LESS, which package code into a more useful, time-saving form.

Back-end development. Server-side languages like PHP, Ruby, Python, Java, and .Net to build an application, and tools like MySQL, Oracle, and SQL Server to find, save, or change data and serve it back to the user in front-end code. Experience with PHP frameworks like Zend, Symfony, and CakePHP; experience with version control software like SVN, CVS, or Git; and experience with Linux as a development and deployment system is also very welcome.

Full stack development. Full stack developers work, like back-end devs, on the server side of web programming, but they can also fluently speak the front-end languages that control how content looks on a site’s user-facing side. So it’s two previous points together.

being a certified polish webhead, this had all kinds of “DUH” written all over it… except for that skills & tools graphic that i found rather interesting, which had me looking over it and going “hmmmmm…. nice breakdown.”


Leave a comment
Web Development

The Grid Has Arrived

CSS Grid and the Grid Inspector
Firefox 52 includes support for CSS Grid Layout Module Level 1, a CSS specification that defines 18 new CSS properties. CSS Grid is a two-dimensional layout system for the web, making it much easier to code many of the layout patterns we’ve been solving for years using grid frameworks, natively in the browser. And it opens up a world of new possibilities for graphic design. Whether you are focusing on user interfaces for app experiences or the editorial design of content, there’s a lot of power for you in this new toolset.

CSS Grid works by defining rows and columns, and placing items into areas on the grid. The rows and columns can be given a specific size (fixed, fluid, or a mix), or they can be defined to resize themselves depending on the size of content. Items on the grid can be explicitly placed in CSS, or they might be placed by the browser according to the Grid auto-placement algorithm. These sizing and placement options give CSS Grid more power and flexibility than any of the existing layout frameworks. In addition, the ability to define and place things in rows is completely new.

We are also proud to announce our new Grid Inspector Tool, which allows you to see the grid lines directly on the page, making it easier to see what’s happening.

after reading about the new css Grid for the past year or so, i’m pretty damn hapy to hear that it’s finally arrived and been released in a production browser… i’m should be releasing it in Chrome next week, and Safari should have it with the next update from what i’ve read — MS Edge already has support, but for the original draft, so they should be rolling out an update soon i’d imagine.

still, it’s definitely good news for us webheads ;)

Online/Web Web Development

Command Line Ninja

Hack This: Become a Command Line Assassin

No matter what kind of cluttered, icon-littered hellscape your filesystem happens to be, take heart that your computer provides a pristine alternate reality in the form of its command line interface. Essentially, this is a direct, minimal way of interacting with your computer, offering a shortcut around all of the clicking and dragging in the form of a small box that takes text-based commands and is mostly mouse-agnostic.

Using the command line is second-nature for me, almost as much so as using the regular old OSX/Windows GUIs. In developing software/programming, we wind up constantly using a lot of tiny utility applications that just don’t have graphical frontends, nor do they need them. To interact with these utilities, we use command-line interfaces, either those provided by an operating system—Terminal in OSX or just the command prompt in Windows—or something third-party, like Cygwin.

Why should you the non-hacker care about this particular functionality? For one thing, it’s a slight window into how operating systems actually work. Moreover, there are a few fairly routine tasks that can really only be done via command prompt, and, beyond that, a much larger number of small, helpful utilities that you might like to employ in your regular day-today computing, especially those relating to automation.

Let’s start small though and run through a few operating system tasks that we’d normally accomplish via the Windows or Mac GUIs—running programs and dealing with files. But first, a general orientation. Continue…

gotta love the command line, mang ;)


Leave a comment
Online/Web Web Development

2017 Software Developer Survey

2017 Software Developer Survey Shows Why Websites Fail In Some Browsers

Sauce Labs provides a cloud-based, automated testing platform for web and mobile software development. For the past three years they have surveyed professionals in the field to track trends in testing practices among software development teams. They released their 2017 survey today and the results are of interest to software developers and the general public alike. […]

Why do websites fail in some browsers?

There’s a simple and straightforward answer to this question – the browser wasn’t tested before the current build of the website went live. The graph above shows the percentage of companies that test their web applications for a number of popular browsers. With the exceptions of Google’s Chrome and Microsoft’s Edge, all the browsers saw a decline in testing from 2016 to 2017.

The one percentage point changes for Chrome and Opera are too small to be meaningful and the 16-point loss for Internet Explorer isn’t surprising because it’s now a legacy browser. However, the 10-point loss for Firefox and the 14-point loss for Safari are unexpected. The survey did not ask why some companies have decided to stop testing for everything except Chrome and Edge.

A decline in testing for individual browsers isn’t the only reason why websites may fail. The Sauce Labs survey found that the percentage of companies that only test the current version of each browser rose from 37% in 2016 to 49% in 2017. One of the reasons behind this increase may be that companies assume most browsers are automatically updated. Unfortunately, this practice can lead to problems for consumers that turn automatic updating off and companies that do not allow automatic updates from outside their firewall.

Sauce Labs characterizes the decline in cross-browser testing as “a potential area of alarm”. It’s also surprising given how fast and easy it is to conduct tests of multiple browsers and browser versions with automated testing platforms like the one provided by Sauce Labs. Continue…

i don’t always read through a posting / article from start to finish, but this was one of ’em that i did… some really good info in there, and to be honest, i think we’re right smack dab in the middle of these findings as well… i feel like i spent more time browser testing in the past than i have of late, so that might be something i need to try to be better about — and certainly aware of — moving forward into 2017.


Leave a comment
Online/Web Web Development

The Problem With AMP

The Problem With AMP

Google’s Accelerated Mobile Pages or AMP is a markup language similar to HTML that allows publishers to write mobile optimized content that loads “instantly”. AMP is Google’s response to both the Apple News Format and Facebook’s Instant Articles. The goal of the AMP project is to make websites faster by essentially disabling external JavaScript and caching all pages on Google’s CDN. While the intentions of the project seem good, there are a number of issues with AMP that both promote lock-in and provide a poor user experience.

Poor User Experience

Many of the AMP links to pages are either broken or do not load properly despite their HTML equivalents working flawlessly. As of the time of this writing, I am having trouble loading Reddit pages with an AMP link. The exact same link to the HTML version loads correctly. For pages from sites that do manage to load, many are missing important content elements that have been accidentally excluded during the AMP HTML generation process. I have run into issues with tabular data on wordpress.com sites that fail to load without any indication that something has gone wrong. These bugs are simply unacceptable for a standard that has been in use and promoted by Google for over a year, and there have been numerous complaints from users about AMP.

The largest complaint by far is that the URLs for AMP links differ from the canonical URLs for the same content, making sharing difficult. The current URLs are a mess. They all begin with some form of https://wwww.google.com/amp/ before showing a URL to the AMP version of the site. There is currently no way to find the canonical link to the page without guessing what the original URL is. This usually involves removing either a .amp or ?amp=1 from the URL to get to the actual page. Continue…

found this one to be an interesting read, especially since by boss asked me to look into it awhile back… and i know some pubs have asked us over at addthis about adding support for AMP to some of our social widgets.


Leave a comment
Web Development

Top 50 JS Plugins 2016

Top 50 Lightweight JavaScript Plugins & Libraries from 2016

All released this year, the free JavaScript plugins and libraries on this page all offer a straightforward and specific function. There are no bloated all-in-one frameworks. Just useful, lightweight and problem-solving solutions to help make the web design and development process much easier and quicker for you.

it’s coming up on the end of the year, so we’re going to see a whole crapload of these “top ____ of 2016” type posts… so figured i’d kick it off with some of the most popular JS plugins that came out this year.

some of these are pretty damn good, too.

Leave a comment
Web Development

WordPress 4.7

What’s Coming in WordPress 4.7 (Features and Screenshots)

The beta version of WordPress 4.7 arrived last week. We have been following the development closely, and we are excited to report that final version is expected to be released around December 6th, 2016. In this article, we will highlight what’s coming in WordPress 4.7 with features and screenshots.

New Default Theme – Twenty Seventeen

WordPress 4.7 will be the last major release of 2016. As is the tradition, it will come with a new default theme for the next year.

Video Headers Support

Many premium WordPress themes are already allowing users to add video headers. Twenty Seventeen will be the first default theme to come with video header support. You can upload and use your own videos in mp4 format, or you can also use YouTube and Vimeo videos by simply entering the video URL.

didn’t even realize that WP 4.7 was so close to being final… looking forward to this new theme, since i usually just start with one of the defaults and then go about tweaking it… also nice to see that they’re adding video header support by default.

How to survive as a web designer beyond 2020

#nice  #thumbsup

Leave a comment
Web Development

How To Use Cakebrew

How to Use Cakebrew, the Beautiful Homebrew GUI For Your Mac

Homebrew makes it easy for Mac users to install command line tools, so it’s only logical that it runs entirely from the command line. But that doesn’t mean having access to a graphical user interface isn’t handy from time to time. Cakebrew is a free Homebirew GUI that makes overseeing your setup just a bit easier.

Sure, Homebrew may be all about the command line. But maybe you want to see a quick list of your installed formula, or run a quick search and see what the various formula are for. In both cases, some users are going to prefer a GUI, and Cakebrew is that GUI. It’s kind of like Ubuntu’s Synaptic Package Manager, but for the Mac (though not quite as powerful).

i stumbled across cakebrew awhile ago, and thought it was pretty damn spiffy… i don’t mind jumping into terminal and dropping in some line commands, but given a choice, i’m one of those guys that prefers a nice simple “mac” GUI app if i have the choice.

though i still use terminal when dropping git push/pull commands, which is probably a couple dozen times a day…

so yeah, go figure.

Leave a comment
Web Development

jQuery 3 Warning

A Warning About jQuery 3

jQuery recently had a major update to version 3. With it came a subtle change that might cause some headaches for you if your aren’t prepared for it.

The Problem
The $(document).ready function now uses a jQuery deferred promise internally. This is probably for the best but it has an unfortunate side effect of swallowing any exceptions that happen inside the callback.

oh man, this is good to know.

Bootstrap 4: A Visual Guide


Leave a comment
Web Development

12 Books You Should Read

12 Books Every JavaScript Developer Should Read

to be honest, i can’t remember the last time i sat down and cracked open a javascript book… i barely have enough time to read a book as it is, and when i do, it’s definitely not a scripting book.

hmmmm, how about you?

1 Comment
Web Development

jQuery 3.0 Released

jQuery 3.0 Final Released!

jQuery 3.0 is now released! This version has been in the works since October 2014. We set out to create a slimmer, faster version of jQuery (with backwards compatibility in mind). We’ve removed all of the old IE workarounds and taken advantage of some of the more modern web APIs where it made sense. It is a continuation of the 2.x branch, but with a few breaking changes that we felt were long overdue. While the 1.12 and 2.2 branches will continue to receive critical support patches for a time, they will not get any new features or major revisions. jQuery 3.0 is the future of jQuery. If you need IE6-8 support, you can continue to use the latest 1.12 release.

Despite the 3.0 version number, we anticipate that these releases shouldn’t be too much trouble when it comes to upgrading existing code. Yes, there are a few “breaking changes” that justified the major version bump, but we’re hopeful the breakage doesn’t actually affect that many people.

To assist with upgrading, we have a brand new 3.0 Upgrade Guide. And the jQuery Migrate 3.0 plugin will help you to identify compatibility issues in your code. Your feedback on the changes will help us greatly, so please try it out on your existing code and plugins!

You can get the files from the jQuery CDN, or link to them directly:



pretty sweet man, this one’s been in the works for quite awhile now so it’s nice to see it finally unleashed upon the world… i’ll have to look into it and maybe drop it into a site or two and test it out.

Leave a comment
Web Development

Sublime Text 3 Released

been using Sublime Text for years, though for the last couple months now i’ve been using Atom pretty much on a daily basis.

sublime still rocks, though i feel like i was waiting around for version 3 for a long ass time… dunno, maybe it’s just me.

figure it’s still worth a mention, though ;)

Leave a comment
Web Development

Safari, Tech Preview 5

Apple makes big changes in Safari Technology Preview 5


  • Fixed the cascading order for !important properties in ::slotted and ::host rules correctly
  • Added color-gamut media query support for wide gamut displays
  • Made Web Fonts only download when characters are used in its unicode-range
  • Restored legacy parsing of color attributes with 4 and 8 digits
  • Corrected how transitions behave when auto values are used
  • Unprefixed -webkit-cross-fade()
  • Corrected cross-fade() rendering to match expectations
  • Corrected how prefixed and unprefixed variants in CSSStyleDeclaration are handled
  • Stopped attempting to compute min/max width for replaced elements with no intrinsic size
  • Unprefixed CSS Grid Layout properties
  • Fixed static position for positioned CSS Grid items
  • Corrected parsing when just using span as a grid-line value
  • Implemented CSS Grid auto-repeat computation

i just like seeing what different browsers are doing and fixing… been using Safari a lot more of late, because it just seems to be pretty damn fast and lean compared to most other browsers — still love Chrome, but it definitely has gotten a bit heavy.

Apple is about to build the perfect laptop…

Leave a comment
Online/Web Web Design Web Development

What Front-End are you?

What Front-End are you?
About the Front-End professional

First of all, I want to clarify that this post is just my humble opinion. It is not the absolute truth, but wanted to share with you how I see the Front End professional. I will be very direct and objective.

Front-End has two ways: Designer and Development

Front-End Designer: is a professional that will care about all concepts of creation to User Interface. Knows HMTL, but knows very well CSS. He creates animations that has direct relationship with usability. UX is in his blood, knows about colors harmony, he has very affinity with layout creation tools… Some don’t like Javascript, others until that makes some things with jQuey, but the focus is on Design.

Front-End Developer: is a professional that will develop interfaces, as the designer, but Javascript it is what he loves. Knows accessibility, performance, JS frameworks, code tests, concepts of programming, and others. He code semantic HTML5, modular CSS and performatic Javascript.

Although knows CSS, he don’t has diference sense of Design itself. This professional is a Interface programmer.

What I show here with this definition is that although both sides are Front End, what differentiates a professional from another is the affinity he has with each area. So, logically, he will devote his time studying what enjoy: design or development.

Not wrong to think the guy is Front End and just know HTML and CSS. He can be very good at UX, knows how to create an interface that will take you where he wants, creates pages that convert, know design tools, he’s good at it.

I think the big problem is the term variable-Front-End. Sometimes we complicate things too — keep it simple, stupid — Want to work with Front-End? See what else has affinity and specialize in it. Just It.

have to say, i really do feel what he’s dropping here — i’m asked all the time what i do (for a living), and i often just say something like “i design and code websites” or “i try to make sites look good”.

but even at work, it’s sometimes hard to say what exactly you do… since if you think about it, just “front-end design” doesn’t quite encapsulate it all, y’know?

think my job title at Oracle is currently: Senior UX Developer.

yup, i guess that’s me.

Leave a comment
Online/Web Web Development

HTML 5.1 Begins

Work begins on HTML5.1 via Github

The language which is the foundation for most of the Internet is set to have another facelift soon, with the World Wide Web Consortium (W3C) revealing that development of HTML5.1 is underway. The international body which dictates the standards of the Web have outlined that a draft recommendation of changes to the markup language should be completed by mid-June, with the finalized recommendation sent in September.

The update is currently being built via the software development code host Github, with anyone familiar with the data modifier bikeshed and HTML able to make simple edits to the code. In their proposal, the W3C said any issues should be brought to their attention. Alternatively, they said that a recommendation should be made on how to fix this issue, otherwise known as a Pull Request. “If you make a Pull Request, this will be automatically checked, and the editors, chairs, or W3C staff will contact you to arrange the details.”

The W3C said the goal of HTML5.1 was to make it easier for its users to read, as well to streamline potential future changes. “The core goals for future HTML specifications are to match reality better, to make the specification as clear as possible to readers, and of course to make it possible for all stakeholders to propose improvements, and understand what makes changes to HTML successful.”

well that’s pretty cool… does this mean we can all start using flexbox reliably across our web projects now?

just curious…

Web Design Web Development Work

My Dashy Hackathon Project

not sure if i mentioned it, but we had another hackathon yesterday… and yeah, as usual, it kinda wiped me out being that it’s an all day / all night affair… ended up working on a couple things, one being pure design and the other was coding, but hot damn it all came out really nice! sorta proud of myself here, if you don’t mind my saying so… heh… can’t show some or most of it, but this is something i “cheated” on a bit by working on it before the hackathon — it’s an idea i’ve had rolling around for awhile now, and just wanted to get a static prototype up and running to show peeps what i’m talking about.

basically, it’s a native OSX app that loads up a web-app, much the same as Slack which we use at work everyday and i love it.

so here’s some screenies of the prototype, which i’m calling “AddThis Dashy” at the moment.

Dashy Login Screen

Dashy Dashboard

can’t see it in the screenshots, but the login screen has a looping video background of some of the guys at work… then i went ahead and designed / coded up a mockup dashboard that’s also responsive (naturally).

think it all worked out really nicely, and can’t believe i actually got this thing working! freak’n awesome… oh, and special thanks to my buddy Brad, who helped me get this whole thing working in the first place — you rock dude!

it’s a little basic at the moment, and i have a lot of ideas and features i want to add, but i’m stoked just to get the whole thing working so peeps could fire it up on their macs at work… only caveat being that it only works on El Capitan right now.

anywho, just thought i’d share ;)


Leave a comment
Online/Web Web Development


was trying to get two blogs setup under WordPress the other day — some hacky methods and setups for it, and then found that it does have some built-in functionality for it, though just have to make sure you go about setting it all up correctly, otherwise it’s all fucked up… and yeah, learned that one the hard way unfortunately.

then i thought, “Seriously, is there any other simple CMS out there other than wordpress to do this?!?” — and then i stumbled across this open and free badboy, Hugo.

just downloaded it locally and starting to play around with it, but thought i’d go ahead and drop a quick blog post in case anybody else was interested.



Sketch, Illustrator or Fireworks? Exploring A New Free UI Design App: Gravit

Leave a comment
Web Development

Oh Hello, Docker

man oh man… finally got around to setting up this new iMac, and have literally spent the last 2-3 days fucking around with all this stuff — the real kick in the nuts is getting my head wrapped around this new “docker” container stuff and getting it all properly setup / configured on my workstation… for the first time.


thank gawd for my co-worker sami, who’s been helping me out on slack and hang’n out in google… no effin way i would’ve got this shit finally working locally.

had both of us pulling our hair out for awhile there.

been messing with this so much, i don’t even remember half of the stuff we did… and now i can’t even seem to get my localhost setup to bring up a local directory in my browser (apache / vhosts, etc).


Leave a comment