The Contagious Specialist

Tuesday, August 25, 2015

Creating a tiltshift effect with the -webkit-backdrop-filter

When I first heard about the new CSS filters being added to webkit and Safari (especially the backdrop-filter) I immediately wanted to see if I could create a tilt shift effect. For those that don't know, tilt shift photography is a technique that can simulate a miniature scene by using lens tilt for selective focus. There are already Javascript plugins such as tiltShift.js that can create this effect but I wanted to go for a pure CSS approach.

Note: this only works in Webkit nightly at the moment. Hopefully other browser vendors follow.

My approach uses three elements, an image to act as a mask, a div for the backdrop-filter and the image that is being affected.


radialMask.png	nyc.png

I also decided to animate the position of the mask so that the effect could be seen better. Here is the code and an animated gif of the effect as seen in Webkit:

<style>
img {
position: absolute;
top: 0;
left: 0;
}
.mask {
animation-duration: 4s;
animation-name: moveBlur;
animation-iteration-count: infinite;
animation-direction: alternate;
-webkit-animation-duration: 4s;
-webkit-animation-name: moveBlur;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-mask-image: url(radialMask.png);
-webkit-mask-position-x: 50%;
-webkit-mask-position-y: 5%;
-webkit-mask-repeat: no-repeat;
z-index: 200;
}
.blurFilter {
position: absolute;
top: 0;
left: 0;
width: 550px;
height: 412px;
background-color: rgba(89, 124, 135, 0.3);
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
z-index: 100;
}
@keyframes moveBlur {
from{
-webkit-mask-position-y: 5%;
}
to {
-webkit-mask-position-y: 100%;
}
@-webkit-keyframes moveBlur {
from{
-webkit-mask-position-y: 5%;
}
to {
-webkit-mask-position-y: 100%;
}
}
</style>
</head>
<body>
<img src="nyc.png" class="mask" />
<div class="blurFilter"></div>
<img src="nyc.png" />
</body>

Tuesday, July 21, 2015

List of open data sources for New Jersey

In March I participated in a hackathon for journalism and data in New Jersey. The following is a list of open data sources they provided us to aid us in our team projects.

Click below to jump to topic

APIs /// Budget and Spending /// Business and Finance /// Campaign Finance /// Census and Demographics /// Crime and Corrections /// City Open Data Repositories /// Education /// Elections /// Disaster Relief /// Environment, Pollution and Wildlife /// Health /// Housing and Real Estate /// Human Services /// Infrastructure /// Labor /// Legislature /// Mapping and Shapefiles /// Miscellaneous /// Non-profits and Charities /// Pensions /// Transportation and Safety /// Taxes /// Veterans /// Weather

APIs

— Sunlight Foundation has seven APIs, including campaign finances and voting records [editor’s note: Sunlight’s APIs power these apps, so don’t replicate anything already here, http://sunlightfoundation.com/projects/ ]

— New Jersey Boundary Service API

— U.S. Census API

— Facebook API

— Foursquare API

— Twitter API,

— Untappd API

— Yelp API

— FDA API

— Parse.ly API

— Bizyhood API
Click to scroll back to top menu

Budget and spending

— The latest Budget Data released in the state Data Portal.

— NJ State Transparency Center has online query tools and PDF-based reports

— The latest Port Authority payrolls (in 2014)
Click to scroll back to top menu

Business and Finance

— NJ Business Records Service has a form-based query that may require some scraping to access data

— List of New Jersey banks, from the NJ Division of Banking and Insurance

— Financial Institution Statistics, from the Treasury Department, state-level data

— Insurance and Licensing, from NJ Division of Banking and Insurance
Click to scroll back to top menu

Campaign finance

— NJ ELEC’s campaign finance databases, with downloads of reports for some races and PDF filings for local elections

— Federal Election Commission data

— FEC-Scraper, Python library for handling FEC data

— Fech, Ruby library for doing the same
Click to scroll back to top menu

Census and Demographics

— American Fact Finder, the main search tool for digging into the Census’ data sets.

— Census Reporter, easy-to-use tool for journalists to find and visualize Census data

— Rutgers’ New Jersey Data Book, online source for many New Jersey demographic datasets, goes down to the municipality-level
Click to scroll back to top menu

Crime and corrections

— NJ State Police statistics on crime, gang activity and accidents. Data is mostly in PDF formats and would require some OCR and massaging to unlock

— FBI Uniform Crime Reports

— NJ Registered sex offender database, with query-based data retrieval

— NJ Department of Corrections inmate finder, with form-based queries

— Arrest-related deaths 2004-2014, from NJ Advance Media “Kenwin Garcia” project

— Juvenile Justice Commission data, weekly statistics since 2011 in PDFs
Click to scroll back to top menu

City Open Data Repositories

— Hoboken’s Open Data site

— Jersey City’s Official Data site

— Jersey City Open Data portal, a searchable repository of Jersey City data

— Newark Open Data portal
Click to scroll back to top menu

Education

— NJ Department of Education data, one stop shop for everything data in New Jersey

— NJDOE’s Electronic Violence and Vandalism Reporting System, contains school weapons, fights, assault, bomb threats, bullying incidents, etc.

— College Campus Safety and Security Data, from U.S. Department of Education, has data on alleged criminal offenses reported to campus security authorities and/or local law enforcement agencies.
Click to scroll back to top menu

Elections

— NJ Election Information and Results Archive, with historical returns mostly in PDF

Disaster relief

— Federal Emergency Management data feeds and APIs

— FEMA flood maps

— Federal Procurement Data System

— Sandy Programs and Disbursement data on the state’s Data Portal
Click to scroll back to top menu

Environment, pollution and wildlife

— NJ Department of Environmental Protection’s Data Miner, with form-based data retrieval

— Contaminated brownfield remediation

— Air Quality data

— Wildlife, fishing and hunting information

— NJ Bear Hunt Data

— Farmland preservation

— Drought data

— Profile of New Jersey’s energy emissions, consumptions and alternative fuel use, from US Energy Information Administration

— Toxics Release Inventory (TRI) Program data, from the Environmental Protection Agency
Click to scroll back to top menu

Health

— State inspection report cards for hospitals, nursing homes and other facilities, may require some scraping.

— CMS Open Payments database & ProPublica’s Dollars for Docs project, both contain data on money received by doctors from pharmaceutical companies.

— Data.Medicare.gov, has quality measure comparisons for nursing homes, hospitals, home health and physicians.

— New Jersey Prescription Drug Price Registry

— Affordable Care Act (Obamacare) plan premium prices, down to the county-level

— FDA API, contains adverse reactions and recalls for drugs, devices and foods

— Patient data breaches in medical facilities
Click to scroll back to top menu

Housing and Real Estate

— Building Permit data, monthly, also going back since 2000

— Foreclosure Statistics, from the State Division of Banking

— Zillow Real Estate Data

— Property Assessment records
Click to scroll back to top menu

Human Services

— Family Development, food stamp, child services data, along with WorkFirst New Jersey Program.

— FamilyCare Enrollment, enrollment data on the state’s FamilyCare Program.

— New Jersey Division of Addiction Services, Substance Abuse Statistics

— Substance Abuse Treatment Reports, the state’s annual performance reports from substance abuse treatment centers

— Intoxicated Driving Program Reports, from the state’s Intoxicated Driving Program

— Epidemiological Reports, issued annually by NJ Dept. of Human Services
Click to scroll back to top menu

Infrastructure

— National Bridges inventory

— National Dams Directory
Click to scroll back to top menu

Labor

— NJ Department of Labor’s State Data Center

— State labor force estimates and unemployment data

— OSHA enforcement inspections
Click to scroll back to top menu

Legislature

— State legislature FTP, has bills, laws, votes and bill tracking information from the current and past sessions
Click to scroll back to top menu

Mapping & Shapefiles

— The NJ Geographic Information Network (NJGIN)

— NJ Office of GIS

— State Department of Environmental Protection GIS data

— State Department of Transportation GIS data, includes roads and highways

— NJ Transit rail GIS data and bus GIS data
Click to scroll back to top menu

Miscellaneous

— Professional licensing data, with form-based data retrieval queries

— Asbury Park Press’ Data Universe

— Society of Professional Journalists tool box with links to public records

— NJ DataBank, a repository of policy reports and data on various topics

— NJ Child Care licensing data
Click to scroll back to top menu

Nonprofits & charities

— Directory of registered New Jersey charities

— IRS master file of tax exempt organizations
Click to scroll back to top menu

Pensions

— Active and Retired State Pension Data
Click to scroll back to top menu

Transportation and Safety

— State Department of Transportation data, includes tons of transportation data, including downloads of raw accident databases, GIS data and roadway usage

— All of Hudson County Public Transportation GIS data, courtesy of @FakeGreenDress

— 511 Traffic info with form-based data query that could be scraped

— NJ Transit Developer site (need to sign up with a free account) contains GTFS schedule data and rail advisory feeds

— Five months of PATH ridership Turnstile data

— Federal Rail Administration data, includes railroad accident data, among other things
Click to scroll back to top menu

Taxes

— State Department of Community Affairs’ Property Tax data

— State Department of Treasury tax data

— Property ownership records

Thursday, June 18, 2015

W3C specs that won't melt your brain

Let's face it, some of the W3C specs produced by the different working groups weren't meant to be read by the average developer or web designer. You'd be better off watching a flower bloom than wrapping your head around the various concepts that are presented in the different documents. I recently spent a short amount of time going through different specifications in the HTML and CSS working groups and to my surprise there were a few that are straight forward and make for really great references if you're looking to gain a solid understanding of the concepts. Besides, it's these specs that ultimately make it into the browser (sometimes, r.i.p FileSystem API).

The following is an opinionated short list of the specs I find are easy enough for beginner and intermediate designers/developers to wrap their heads around. As I look through more of the specs I'll update this list.

HTML5 - http://www.w3.org/TR/html5/sections.html#sections
CSS Selectors Level 3 - http://www.w3.org/TR/css3-selectors/
CSS Selectors Level 4 - http://www.w3.org/TR/selectors4/

CSS Counter Styles Level 3 - http://www.w3.org/TR/css-counter-styles-3/

Compositing and Blending Level 1 - http://www.w3.org/TR/compositing-1/

CSS Masking Module Level 1 - http://www.w3.org/TR/css-masking-1/

CSS Transforms Module Level 1 - http://www.w3.org/TR/css-transforms-1/

Geofencing API - http://www.w3.org/TR/geofencing/

If you think there is a spec that I missed suggest it in the comments section and I'll take a look.

Tuesday, August 26, 2014

A quick rundown of website performance optimizations from Smashing Magazine

I'm a subscriber to the Smashing Magazine newsletter. Every once in a while when I receive one of their newsletters I'm presented with a nugget of information that is nothing short of pure gold. Their latest newsletter (August 26th, 2014) is one such email.

The following comes from their newsletter and are some optimization tips they present get your site to render quickly:

What's the best performance optimization strategy for a (responsive or non-responsive) website? Actually, it's pretty simple. You make sure that your WebPageSpeed's SpeedIndex is under 1000 and ensure that your main content is within the first 14Kb round-trip — and keep your critical rendering path as short as humanly possible. The latter usually means that you have a very clear understanding and agreement of what is critical for the page to start rendering and what is not so essential, and, consequently, could be deferred.

The next step would be to identify the JavaScript that can be deferred and load it asynchronously because otherwise it would block the construction of the DOM tree. You defer web fonts, too. This can be done by either storing them in localStorage (or potentially AppCache) or by using Web Font Loader if you don't have the WOFF files. You can also export critical CSS and embed it inline in HTML to fit within the 14Kb budget (for TCP Slow Start). This way you also avoid unnecessary HTTP requests. Also, you can load full CSS asynchronously once the page has started rendering or has fully loaded, e.g. on DomContentReadyor on Load event.

Well, that's pretty much it. And if your server-side configuration is solid, it's going to be very difficult to be very, very slow. Unless, of course, you don't optimize images. A little trick we've recently discovered is that PageSpeed Chrome extension provides a little handy tool to optimize images aggressively. Once you install the extension and run it for a given website, you'll find a tab called "Optimize Images". It doesn't just show a list of unoptimized files but also allows you to open and save perfectly optimized files without using any external tools. The compression is usually at least as good as in popular compression tools.

So that's basically the strategy we followed on Smashing Magazine, resulting inGoogle PageSpeed Score 97–99 — both on desktop and on mobile (although it varies depending on the advertising we display). Building a fast responsive site isn't that difficult as long as you are strict about what is and what isn't important on the page. For example, we defer loading of ads, tracking scripts, syntax highlighting, web fonts and other non-critical resources, all of which have helped us immensely speed up the entire site.

Nevertheless, some work still lies ahead of us. We are planning to move to new servers soon (server response time is just unacceptable with our current provider), and will defer the loading of Gravatars on article pages as well as move to SPDY shortly. An article explaining all of the mini-optimizations we've done over the last few months will be published on SmashingMag in early September.

Bottom line: if somebody tells you that responsive sites are fat, bloated, unusable and take too much time to develop, tell them that they're wrong. It's animplementation problem, not the technique itself. And with a proper strategy, it can be done right.

— Stay responsive!
Vitaly (@smashingmag)

I couldn't have said it any better. If you haven't subscribed to the Smashing Magazine newsletter please do so here, you won't be disappointed.