Home Babes About

Category: Web Development

Online/Web Web Design Web Development

Christmas XP

just stumbled across this and figured i should post it real quick before i fooget… ’tis the season afterall.

some good shit, mang.

#ThumbsUp  #HellYeah

Online/Web Web Development

Google Wants To Help Web Devs

Google wants to help developers make better websites

Developers already have access to a number of tools that let them see how real-world users experience their websites, but until now they weren’t able to see how their website user experience compared to others. Enter the Chrome User Experience Report, a public dataset of key user experience metrics gleaned from Chrome users who have opted in to usage statistic reporting.

The report offers up data from 10,000 origins and lets developers see how Chrome users experience the web from a wide variety of hardware, software and networks. Google hopes the report will help developers see where they’re doing well, identify areas for improvement and identify trends and advancements over time. At the moment the dataset focuses on loading metrics, but in a blog post on the release, Google says it hopes to expand coverage in future iterations.

well that’s pretty cool, and certainly welcome… always good to have some tools in your back pocket, especially if it helps and makes life a little easier.

#hellyeah  #thumbsup

Web Development

Safari Worse Than IE?

Safari is the new IE

Working with CSS these days is way better than few years ago thanks to the new specs as well as the commitment towards W3C standards from browser vendors.

Unfortunately, it’s not perfect. Indeed, we’re far from living in a perfect world.

I can feel a pattern everytime I work with CSS and layout: Safari is the last step, the “give me a break, eventually, I’ll fix Safari issues”.


just stumbled across this one and the headline alone caught my attention, so naturally i clicked on it to check it out… interesting read and examples, especially since i don’t think i’ve ever really thought or said that the safari browser is “worse” than IE — i mean, nothing can possibly be worse than IE, right?

PS. it’s always gonna be IE, no matter what microsoft says.

Online/Web Web Development

Emoji… Code?!

seems like some of my co-workers were going a little batshit crazy nuts with the emoji’s in slack today, and i made a comment about how these damn emoji’s are gonna be the end of us all… and that they seem to be on a fast-track to taking over the world — then my buddy dropped a link to this.

ummmm… yeah…

holy… shit.

i guess we’re already well on our way there!



Web Development

Bootstrap 4 Beta

feel like this new version (v4) of bootstrap has been in the making or development forever… but if you’re curious, looks like they released the official Bootstrap 4 Beta.

Two years in the making, we finally have our first beta release of Bootstrap 4. In that time, we’ve broken all the things at least twenty-seven times over with nearly 5,000 commits, 650+ files changed, 67,000 lines added, and 82,000 lines deleted. We also shipped six major alpha releases, a trio of official Themes, and even a job board for good measure. Put simply? It’s about time.


Long story short, shipping a beta means we’re done breaking all your stuff until our next major version (v5). We’re not perfect, but we’ll be doing our best to keep all the classes, features, and docs URLs as they appear now in this release. We can always add more things, but we cannot take away.


soooooo many frameworks, so little time….

still, looking forward to checking out and using the new bootstrap whenever it’s finally released… but at this rate, maybe by the end of 2018?


Humor/Funny Web Development

90s Web Developers

Only 90s Web Developers Remember This

Have you ever shoved a <blink> into a <marquee> tag? Pixar gets all the accolades today, but in the 90s this was a serious feat of computer animation. By combining these two tags, you were a trailblazer. A person capable of great innovation. A human being that all other human beings could aspire to.

You were a web developer in the 1990s.

With that status, you knew you were hot shit. And you brought with you a score of the most fearsome technological innovations, the likes of which we haven’t come close to replicating ever since.

Put down the jQuery, step away from the non-relational database: we have more important things to talk about.


1×1.gif should have won a fucking Grammy. Or a Pulitzer. Or Most Improved, Third Grade Gym Class or something. It’s the most important achievement in computer science since the linked list. It’s not the future we deserved, but it’s the future we needed (until the box model fucked it all up).


oh man, this one brought back memories..!

the good ol’ days, right?


Web Development

Ghost 1.0 Unleashed

Announcing Ghost 1.0: New editor, new design, big update

About four years ago we launched Ghost on Kickstarter as a tiny little prototype of an idea to create the web’s next great open source blogging platform.

In the early days we really just focused on just making everything work. Ghost was one of the very first open source Node.js applications, and it certainly came with a steep learning curve. Our first release was Ghost 0.3 in September 2013, and since then there have been a total of 99 releases, all the way up to Ghost 0.11.9.

In that time we’ve watched as the Ghost ecosystem has grown and flourished. From some of the web’s best loved startups like Square and Tinder, to some of the world’s most important organisations like Elon Musk’s OpenAI and Mozilla. Ghost even made a very brief appearance in this season of HBO’s Silicon Valley.

Today marks our 100th release of Ghost and, fittingly, it’s Ghost 1.0.0

This release contains over 2,600 commits of features, refactors, improvements, and fixes to make the entire codebase more robust and more reliable all-round.

i know my sense of time really sucks, but sure does feel like it’s been more than a year or so since hearing and checking out Ghost… and even though i ended up just rolling with WP since it was easier to port over all my blog posts, i still remember installing and getting it setup locally and liking it quite a lot.

if i start a new blog, i’d probably roll with ghost — well, as long as it still had a standalone option or instance.


Online/Web Web Development

Meet 15yr Old Developer

Meet the 15-year-old developer making a difference one app at a time

Like many developers about to attend their first major developer conference, Amanda Southworth is looking forward to the week-long event. Besides Monday’s keynote, when Apple will unveil the next version of iOS, MacOS and maybe even some new hardware, there will be deep dives into new developer tools and countless networking opportunities.

That’s enough for any developer to get excited about, but Southworth is not like most other developers.

At just 15 years old, Southworth has the distinction of being among the youngest to attend Apple’s developer conference, which awarded her one of its WWDC Scholarships — a program that helps “talented students and STEM organization members,” travel to and attend the event.

Though she’s been teaching herself to code for the better part of six years she says it wasn’t until the seventh grade when she really began to throw herself into her coding projects and other “nerd stuff.” Soon, she was spending as much as 30 hours a week to her various projects: first building robots and programming micro-controllers; then picking up web and iOS development.

She was 12 and working on all this on top of her schoolwork. So after about two years of a lot of coding and far too little sleep she decided to leave public school and take up home schooling, which would allow her to spend more time on coding without sacrificing her health.

“Now I do coding about five hours a day and schoolwork for about two hours of the day,” she says.

just stumbled across this article on mashable and thought it was pretty damn cool… and being that i have 6 neices, went ahead and fwd it along to both my sisters for them to share — you never know, right?

#inspire  #hopefoo

Web Development

Node V8.0.0 Released

just in case you into or running NodeJS, then you might be interested in reading up on what’s been updated with the latest release — Node v8.0.0 (Current)

The next major release of Node.js brings a range of significant changes and additions, far too many for us to cover adequately in a blog post such as this. This article contains a summary of the most significant changes and features.

Say hello to npm version 5.0.0

npm, Inc. recently announced the release of version 5.0.0 of the npm client and we are happy to include this significant new version within Node.js 8.0.0.

Say hello to V8 5.8

Node.js 8.0.0 ships with V8 5.8, a significant update to the JavaScript runtime that includes major improvements in performance and developer facing APIs. Most significant for Node.js developers is the fact that V8 5.8 is guaranteed to have forwards ABI compatibility with V8 5.9 and the upcoming V8 6.0, which will help to ensure stability of the Node.js native addon ecosystem. During Node.js 8’s lifetime, we plan to move to 5.9 and possibly even 6.0.

The V8 5.8 engine also helps set up a pending transition to the new TurboFan + Ignition compiler pipeline, which promises to provide significant new performance optimizations for all Node.js applications. Although they have existed in previous versions of V8, TurboFan and Ignition will be enabled by default for the first time in V8 5.9. The new compiler pipeline represents such a significant change that the Node.js Core Technical Committee (CTC) chose to postpone the Node.js 8 release, originally scheduled for April, in order to better accommodate it.

been checking out this static site generator called Metalsmith, which runs on NodeJS… pretty cool stuff, though at the moment i’m just scratching the surface… hell, kinda wondering if i should maybe ditch wordpress and maybe create my own personal little metalsmith powered blog.


Web Development

React Sketch App

saw this yesterday and immediately thought it would’ve made for a cool or interesting thing to play around with on our hackathon over here @addthis… but alas, i’m already booked helping a few groups out already, so might have to put this one in the back pocket for later — React Sketch.app

The “normal” workflow I’m sure we’ve all lived is that design happens, then coding happens. A healthy workflow has back-and-forth between everyone involved in a project, including designers and developers, but still: The code is the final product. You design your way to code, you don’t code your way to designs.

It was only a little over a month ago when it was news that Sketch 43 was moving to a .JSON file format. […]

“Interesting.” I thought to myself. “It’s like an API to a design document. I wonder how this will play out.” Little did I know just weeks later we’d see a really powerful tool drop.

Jon Gold, for Airbnb:

… share a tool we built to help bridge the gap between designers and engineers working on design systems at scale. React-sketchapp is an open-source library that allows you to write React components that render to Sketch documents.

oh man, this could be huge… i mean seriously, think about it… we design/develop with both React and Sketch on a daily basis here, so this could potentionally be a bit of a game changer.

will definitely have to follow-up on this one.

PS. Auto Layout for Sketch

#bookmark  #awesomesauce

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

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.”


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 ;)


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.


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.


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.

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

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.