Unit test JavaScript applications with Jasmine | Adobe Developer Connection
yesterday by sunpig
Jasmine is a behavior-driven development (BDD) JavaScript testing framework Pivotal Labs maintains it and makes it available on GitHub under the MIT license. Jasmine allows tests to be written independent of the DOM or other JavaScript frameworks. You run Jasmine in a browser, or headless without a browser by integrating with other frameworks such as Rhino, Envy, or the Jasmine-headless-webkit library.
bdd
tdd
jasmine
javascript
browser
test
testing
adobe
tutorial
headless
automated
development
webdev
frontend
yesterday by sunpig
Introduction · Intro to CSS 3D transforms › Docs
yesterday by sunpig
Even with these difficulties mounted up, trying out 3D transforms today is the right move. The CSS 3D transforms module was developed by the same team at Apple who produced the CSS 2D transforms and animation. Both specifications have since been adopted by Mozilla and Opera. Transforming three-dimensionally now will guarantee you’ll be ahead of the game when the other browsers catch up.
daviddesandso
css
3d
tutorial
webdev
frontend
browser
transform
perspective
yesterday by sunpig
CSS3 Structural Pseudo-class Expressions Explained | Impressive Webs
5 weeks ago by sunpig
The keywords and the integer are pretty straightforward. A value of “even” or “odd” selects the even or odd elements, respectively, and an integer selects the nth of the targeted element. In other words, “li:nth-child(4)” means the “4th” list item will be selected.
The expressions, on the other hand, are a little more complicated, but not too bad once you mess around with them a little.
css
css3
presudoclass
expression
selector
odd
even
linear
webdev
frontend
The expressions, on the other hand, are a little more complicated, but not too bad once you mess around with them a little.
5 weeks ago by sunpig
Responsive viewport units - destroy/dstorey
6 weeks ago by sunpig
Introducing vh, vw, and vmin
The vh unit stands for viewport height, vw for Volkswagen viewport width, and vmin represents whichever of vh or vw is the shortest length.
css
viewport
unit
responsive
height
width
proportion
grid
design
webdev
frontend
The vh unit stands for viewport height, vw for Volkswagen viewport width, and vmin represents whichever of vh or vw is the shortest length.
6 weeks ago by sunpig
Stubbornella » Blog Archive » Scope donuts
7 weeks ago by sunpig
The interesting thing about UI components (different than ads or widgets) is that they can sometimes contain other unrelated components. You can have a tabset that contains headings, paragraphs, media blocks, or even (holy ugly!) another tabset. Ideally, you would scope the CSS of the tabset to the tabs only, so it can’t bleed outward and change styles on the rest of the page, but you also want to prevent the styles from bleeding inward to content components. So we need a way of saying, not only where scope starts, but where it ends. Thus, the scope donut. The styles affect the donut shape, but not the other components which can be found in the donut hole.
css
nicolesullivan
scope
donut
hole
body
limit
html
webdev
frontend
future
7 weeks ago by sunpig
Media Query & Asset Downloading Results | TimKadlec.com
7 weeks ago by sunpig
If you’re going to hide a content image, you’re not going to be able to do it by setting display:none. I recommend using a Javascript or server-side based approach instead.
If you want to hide a background image, your best bet is to hide the parent element. If you can’t do that, then use a cascade override (like test five above) and set the background-image to none when you want it hidden.
For swapping background images, define them both inside of media queries.
timkadlec
mediaquery
screen
image
responsive
css
html
frontend
optimization
If you want to hide a background image, your best bet is to hide the parent element. If you can’t do that, then use a cascade override (like test five above) and set the background-image to none when you want it hidden.
For swapping background images, define them both inside of media queries.
7 weeks ago by sunpig
» The EMs have it: Proportional Media Queries FTW! Cloud Four Blog
9 weeks ago by sunpig
RT @lyzadanger: Oops. I just blogged on @cloudfour again, this time about em-based media queries:
lyzagardner
mobile
em
media
query
mediaquery
responsive
width
layout
zoom
css
design
frontend
webdev
cloudfour
9 weeks ago by sunpig
Testing For Dummies | Testing
9 weeks ago by sunpig
When testing the devices, there are 4 main areas to cover, feature phones, smart phones with low level support, smart phones and tablets. The primary tablet market will be 7-inch devices up to 720x1280 pixels with the lowest smart phone being 240x360 pixels.
Currently, we are only approaching devices that are not conforming to desktops, so smart TV’s, games consoles and other exotic devices are test, desktops are not.
bbc
responsive
news
webdev
frontend
testing
device
browser
ios
android
apple
iphone
ipad
tablet
phone
from twitter
Currently, we are only approaching devices that are not conforming to desktops, so smart TV’s, games consoles and other exotic devices are test, desktops are not.
9 weeks ago by sunpig
Organizing Your Backbonejs Application With Modules - Bocoup
9 weeks ago by sunpig
If you have spent any time looking atBackbone.js, like many others, you are probably amazed by how lightweight, flexible and elegant it is. Backbone.js is incredibly powerful, but not prescriptive in how it should be used. With great power comes great responsibility, and if you’ve tried to use Backbone.js for a large project you might be asking yourself: how do I organize my code?
bocoup
backbone
js
javascript
architeture
module
organization
organize
code
frontend
webdev
pattern
9 weeks ago by sunpig
We're in an icon-sharpness limbo | simurai
9 weeks ago by sunpig
With the rise of Retina displays people are looking for resolution independent alternatives to PNG icons. Some fell in love with font-icons, some are shouting “SVG”. But I’m sorry, if you’re looking for a silver bullet, I’m afraid it doesn’t exist.
icon
font
svg
png
graphic
image
sharpness
hinting
pixel
blur
webdev
frontend
optimization
9 weeks ago by sunpig
sigma.js | a lightweight JavaScript graph drawing library
9 weeks ago by sunpig
sigma.js is an open-source lightweight JavaScript library to draw graphs, using the HTML canvas element. It has been especially designed to:
Display interactively static graphs exported from a graph visualization software - like Gephi
Display dynamically graphs that are generated on the fly
canvas
graph
html5
javascript
visualization
js
data
html
webdev
frontend
library
Display interactively static graphs exported from a graph visualization software - like Gephi
Display dynamically graphs that are generated on the fly
9 weeks ago by sunpig
envision - demos
9 weeks ago by sunpig
Envision.js is a library for creating fast, dynamic and interactive HTML5 visualizations.
js
javascript
graph
chart
canvas
html
css
visualization
data
library
design
web
webdev
frontend
9 weeks ago by sunpig
How to work around the Mobile Safari image resource limit
10 weeks ago by sunpig
Because of the memory available on an iPad or iPhone, Mobile Safari has much stricter resource limits than most desktop browsers.
One of these limits is the total amount of image data that can be loaded on a single HTML page. When Mobile Safari has loaded between 8 to 10 MB of image data it will simply stop displaying any more images. It might even crash.
safari
mobile
ios
ipad
iphone
webkit
resource
limit
image
size
html
webdev
frontend
constraint
One of these limits is the total amount of image data that can be loaded on a single HTML page. When Mobile Safari has loaded between 8 to 10 MB of image data it will simply stop displaying any more images. It might even crash.
10 weeks ago by sunpig
WebKit Limit on Retina JPG Image Display - Duncan Davidson
10 weeks ago by sunpig
While doing some homework this evening on how to best display Retina-resolution photographs on the new iPad for future updates to both this and the Luma Labs sites, I ran into a frustrating problem. Relatively small high-resolution images—such as John Gruber’s Daring Fireball logo—work great. But 2000-pixel wide photographs failed miserably and ended up looking worse than the 1000-pixel wide images they were replacing in my test pages. Much worse, in fact.
webkit
retina
image
scale
jpg
png
limit
ios
safari
web
webdev
frontend
10 weeks ago by sunpig
Stop solving problems you don’t yet have | this is rachelandrew.co.uk
10 weeks ago by sunpig
"Stop solving problems you don't have" by @rachelandrew
rachelandrew
html
webdev
frontend
boilerplate
polyfill
framework
responsive
bloat
10 weeks ago by sunpig
About HTML semantics and front-end architecture – Nicolas Gallagher
11 weeks ago by sunpig
When you choose to author HTML and CSS in a way that seeks to reduce the amount of time you spend writing and editing CSS, it involves accepting that you must instead spend more time changing HTML classes on elements if you want to change their styles. This turns out to be fairly practical, both for front-end and back-end developers – anyone can rearrange pre-built “lego blocks”; it turns out that none can perform CSS-alchemy.
html
css
js
javascript
stack
webdev
frontend
semantics
oocss
architecture
structure
module
reuse
necolas
nicolasgallagher
from twitter
11 weeks ago by sunpig
Hear! Hear! the WURFL Cloud is finally here!
11 weeks ago by sunpig
WURFL has represented the de-facto Device Description Repository for 10 years. It predated virtually all initiatives in the DDR space, be they commercial or driven by some standard body. Many have asked about the availability of a WURFL Cloud over the years. The advent of ScientiaMobile has made this possible.
scientiamobile
lucapassani
ddr
device
description
repository
detection
ua
wurfl
mobile
detect
frontend
browser
cloud
http
service
saas
11 weeks ago by sunpig
Mobile First Design: Why It’s Great and Why It Sucks | Design Shack
11 weeks ago by sunpig
The reality of the situation is a little more complex though. When you start with the desktop platform, you tend want to take advantage of everything that platform has to offer. You build an amazing product that leverages lots of great technology, only to realize that none of it scales well down to mobile. This can and does lead to severely watered down mobile products that feel more like an afterthought than a polished, finished product. Does this happen with every project? Perhaps not, but the story is likely far more common than you’d like to believe.
mobilefirst
design
webdev
frontend
constraint
progressive
enhancement
graceful
degradation
approach
rwd
responsive
adaptive
mobile
11 weeks ago by sunpig
Greenbelt Festival - Where arts, faith and justice collide
11 weeks ago by sunpig
Lovely responsive design & implementation: designed & built by @rachelandrew, @drewm, @ratiotype
responsive
web
design
rwd
frontend
fluid
adaptive
art
culture
music
css
html
11 weeks ago by sunpig
Behind The Scenes Of Tourism New Zealand (Case Study) | Smashing Magazine
11 weeks ago by sunpig
RT @fschaap: Mind blowing website case study @smashingmag:
nz
newzealand
html5
js
javascript
flash
animation
scrollmation
photography
stopmotion
web
website
webdev
frontend
design
webdesign
casestudy
inspiration
tourism
11 weeks ago by sunpig
Fashionably flexible responsive web design (full day workshop) // Speaker Deck
11 weeks ago by sunpig
So many good examples of responsive (& mobile in general) web design in this deck by @malarkey:
andyclarke
malarkey
responsive
adaptive
web
design
mobile
development
frontend
device
size
dimension
11 weeks ago by sunpig
Responsive News - Cutting the mustard
12 weeks ago by sunpig
RT @brad_frost: Absolutely fantastic read about responsive web design and devices support: Related: ...
bbc
news
design
webdev
frontend
mustard
responsive
adaptive
layout
speed
js
javascript
amd
module
detect
browser
support
12 weeks ago by sunpig
Announcing jQuery Mobile 1.1.0 RC1 | jQuery Mobile
february 2012 by sunpig
Fixed position toolbars in jQuery Mobile 1.1 -- doing it right
jquery
mobile
jqm
js
javascript
webdev
frontend
layout
fixed
position
library
february 2012 by sunpig
Scope CSS classes with prefixes · Deep Thoughts by Mark Otto
february 2012 by sunpig
When building a CSS design system like Bootstrap, it’s important to keep things simple, durable, and flexible. This is no easy task, especially on larger teams and projects where the number of components can become quite high. To help improve this situation in a CSS design system, you might consider using prefixed classes instead of chained classes.
css
webdev
webdesign
markotto
twitter
bootstrap
class
naming
smacss
modular
frontend
february 2012 by sunpig
Responsive Navigation Patterns | Brad Frost Web
february 2012 by sunpig
RT @brad_frost: Responsive Navigation Patterns: an in-depth look into responsive web design navigation techniques
bradfrost
mobile
web
navigation
pattern
desktop
responsive
adaptive
width
mediaquery
adjust
webdev
frontend
february 2012 by sunpig
RESS, Server-Side Feature-Detection and the Evolution of Responsive Web Design – Mobile in Higher Ed
february 2012 by sunpig
RT @dmolsen: RESS, Server-Side Feature-Detection and the Evolution of Responsive Web Design
ress
responsive
server
css
adaptive
yiibu
design
webdev
frontend
mobile
wpo
february 2012 by sunpig
The bigger the box, the more you can do...
february 2012 by sunpig
Should you use padding or margin to create space between boxes?
padding
margin
spacing
box
css
context
html
frontend
browser
webdev
thierrykoblentz
february 2012 by sunpig
the Performance Golden Rule | High Performance Web Sites
february 2012 by sunpig
Steve Souders (@souders) revisits the web Performance Golden Rule: (TL,DR: FRONTEND)
souders
performance
wpo
optimization
frontend
dev
js
javascript
css
image
speed
february 2012 by sunpig
Performance Innumeracy & False Positives | Infrequently Noted
february 2011 by sunpig
RT @slightlylate: Every millisecond matters /cc @kurafire
alexrussell
browser
webdev
performance
frontend
web
cache
ua
useragent
detection
feature
from twitter
february 2011 by sunpig
The New Bulletproof Font-Face Syntax | Fontspring
february 2011 by sunpig
RT @AaronGustafson: suggests: The New Bulletproof Font-Face Syntax
font-face
css
typography
webfont
webdev
frontend
february 2011 by sunpig
related tags
#css ⊕ 3d ⊕ aaronrussell ⊕ accessibility ⊕ accordeon ⊕ adaptive ⊕ adjust ⊕ admin ⊕ adobe ⊕ after ⊕ ajax ⊕ ajaxian ⊕ ala ⊕ alexrussell ⊕ alias ⊕ alistapart ⊕ alpha ⊕ amd ⊕ android ⊕ andyclarke ⊕ animation ⊕ annadebenham ⊕ antialias ⊕ api ⊕ app ⊕ appcelerator ⊕ apple ⊕ approach ⊕ architecture ⊕ architeture ⊕ art ⊕ asp ⊕ aspect ⊕ aspnet ⊕ aspnetresources ⊕ automated ⊕ awesome ⊕ backbone ⊕ backgone ⊕ background ⊕ bbc ⊕ bdd ⊕ before ⊕ bem ⊕ bencherry ⊕ billscott ⊕ bind ⊕ bloat ⊕ block ⊕ blur ⊕ bocoup ⊕ body ⊕ boilerplate ⊕ book ⊕ bootstrap ⊕ box ⊕ bradfrost ⊕ breakpoint ⊕ browser ⊕ bubble ⊕ business ⊕ cache ⊕ canvas ⊕ career ⊕ caridypatiño ⊕ casestudy ⊕ chakernakhli ⊕ chart ⊕ cheatsheet ⊕ choice ⊕ chrismills ⊕ chrome ⊕ chuichuitan ⊕ chuisquared ⊕ class ⊕ click ⊕ client ⊕ clientside ⊕ cloud ⊕ cloudfour ⊕ code ⊕ codeplex ⊕ coding ⊕ collection ⊕ color ⊕ colour ⊕ comparison ⊕ component ⊕ compress ⊕ concat ⊕ concatenate ⊕ conference ⊕ console ⊕ constraint ⊕ container ⊕ content ⊕ context ⊕ crunch ⊕ css ⊕ css3 ⊕ csscience ⊕ cssembed ⊕ culture ⊕ custom ⊕ daneden ⊕ data ⊕ datauri ⊕ daveolsen ⊕ davidcalhoun ⊕ daviddesandso ⊕ ddr ⊕ debug ⊕ debugging ⊕ degradation ⊕ delay ⊕ delegate ⊕ delegation ⊕ delete ⊕ delicious ⊕ description ⊕ design ⊕ desktop ⊕ despair ⊕ detect ⊕ detection ⊕ dev ⊕ developer ⊕ development ⊕ developmnt ⊕ device ⊕ dimension ⊕ dmolsen ⊕ dns ⊕ document ⊕ dom ⊕ donut ⊕ download ⊕ dropdown ⊕ effect ⊕ element ⊕ em ⊕ ember ⊕ enhance ⊕ enhancement ⊕ enyo ⊕ equal ⊕ ericmeyer ⊕ error ⊕ eval ⊕ even ⊕ event ⊕ eventdelegation ⊕ execure ⊕ execute ⊕ execution ⊕ expression ⊕ failure ⊕ feature ⊕ field ⊕ filament ⊕ finger ⊕ firebug ⊕ firefox ⊕ fixed ⊕ flash ⊕ fluid ⊕ font ⊕ font-face ⊕ fonts ⊕ form ⊕ forms ⊕ fout ⊕ fragment ⊕ framework ⊕ free ⊕ freetext ⊕ friendly ⊕ fronteers ⊕ frontend ⊖ frontent ⊕ function ⊕ future ⊕ game ⊕ generated ⊕ global ⊕ google ⊕ graceful ⊕ graph ⊕ graphic ⊕ green ⊕ grid ⊕ group ⊕ guide ⊕ guidelines ⊕ h264 ⊕ hardware ⊕ hash ⊕ hashchange ⊕ hci ⊕ heading ⊕ headless ⊕ height ⊕ hide ⊕ hierarchy ⊕ highlight ⊕ hijax ⊕ hinting ⊕ history ⊕ hole ⊕ howto ⊕ ht ⊕ html ⊕ html5 ⊕ html5doctor ⊕ http ⊕ icon ⊕ id ⊕ identifier ⊕ iframe ⊕ image ⊕ imge ⊕ info ⊕ information ⊕ input ⊕ inspiration ⊕ interview ⊕ ios ⊕ ipad ⊕ iphone ⊕ jasmine ⊕ java ⊕ javascript ⊕ job ⊕ johnallsop ⊕ jpg ⊕ jqm ⊕ jquery ⊕ js ⊕ juriyzaytsev ⊕ kangax ⊕ label ⊕ labjs ⊕ language ⊕ layout ⊕ less ⊕ library ⊕ limit ⊕ linear ⊕ link ⊕ list ⊕ load ⊕ loader ⊕ localstorage ⊕ lookup ⊕ lucapassani ⊕ lukebrooker ⊕ lyzagardner ⊕ maintainability ⊕ malarkey ⊕ manifesto ⊕ margin ⊕ markotto ⊕ markup ⊕ measure ⊕ measurement ⊕ media ⊕ mediaquery ⊕ mega ⊕ merge ⊕ milannegovan ⊕ milli ⊕ minify ⊕ mobile ⊕ mobilefirst ⊕ mobilesafari ⊕ mocha ⊕ model ⊕ modernizr ⊕ modifier ⊕ modular ⊕ module ⊕ mozilla ⊕ music ⊕ mustard ⊕ mvc ⊕ naming ⊕ native ⊕ navigation ⊕ necolas ⊕ negation ⊕ nest ⊕ nettuts ⊕ network ⊕ news ⊕ newzealand ⊕ nicholaszakas ⊕ nicolasgallagher ⊕ nicolesullivan ⊕ node ⊕ nodejs ⊕ nope ⊕ normalize ⊕ nvda ⊕ nz ⊕ object ⊕ object-fit ⊕ objectoriented ⊕ odd ⊕ oocss ⊕ open ⊕ opera ⊕ operator ⊕ optimization ⊕ optimize ⊕ optmization ⊕ order ⊕ organization ⊕ organize ⊕ overview ⊕ padding ⊕ page ⊕ pagination ⊕ pamelafox ⊕ paragraph ⊕ path ⊕ pathchange ⊕ pattern ⊕ patterns ⊕ paulcarvill ⊕ performance ⊕ perspective ⊕ phone ⊕ photography ⊕ php ⊕ pixel ⊕ pjax ⊕ planning ⊕ plugin ⊕ png ⊕ polaroid ⊕ polyfill ⊕ popstate ⊕ position ⊕ positioning ⊕ prefetch ⊕ preload ⊕ prepare ⊕ preprocessor ⊕ presentation ⊕ presudoclass ⊕ process ⊕ professionalism ⊕ programming ⊕ progressive ⊕ property ⊕ proportion ⊕ proposal ⊕ pseudo ⊕ pseudo-element ⊕ pushstate ⊕ query ⊕ queryselectorall ⊕ rachelandrew ⊕ rails ⊕ range ⊕ ratio ⊕ recommendation ⊕ reference ⊕ render ⊕ replace ⊕ replacestate ⊕ repository ⊕ reset ⊕ resource ⊕ resources ⊕ responsive ⊕ ress ⊕ retina ⊕ reuse ⊕ review ⊕ rgba ⊕ routes ⊕ routing ⊕ rules ⊕ rwd ⊕ saas ⊕ safari ⊕ sass ⊕ scale ⊕ scientiamobile ⊕ scope ⊕ screen ⊕ script ⊕ scroll ⊕ scrollmation ⊕ search ⊕ selector ⊕ semantics ⊕ serialize ⊕ server ⊕ service ⊕ sharpness ⊕ shinkansen ⊕ show ⊕ SI ⊕ size ⊕ slide ⊕ slides ⊕ smacss ⊕ smooth ⊕ snook ⊕ software ⊕ souders ⊕ spacing ⊕ specificity ⊕ speed ⊕ spof ⊕ sprite ⊕ ssl ⊕ stack ⊕ standard ⊕ start ⊕ state ⊕ stevesouders ⊕ stopmotion ⊕ storage ⊕ stoyanstefanov ⊕ strategy ⊕ structure ⊕ style ⊕ styleguide ⊕ stylesguide ⊕ summary ⊕ support ⊕ svg ⊕ tab ⊕ tablet ⊕ tap ⊕ tdd ⊕ template ⊕ test ⊕ testing ⊕ text ⊕ theme ⊕ theora ⊕ theresaneill ⊕ thierrykoblentz ⊕ thirdparty ⊕ timkadlec ⊕ tip ⊕ titanium ⊕ toolkit ⊕ tools ⊕ touch ⊕ touchy ⊕ tourism ⊕ transform ⊕ transition ⊕ translate ⊕ tutorial ⊕ twitter ⊕ type ⊕ typekit ⊕ typography ⊕ ua ⊕ ui ⊕ uidesign ⊕ unit ⊕ url ⊕ useragent ⊕ ux ⊕ validation ⊕ variable ⊕ video ⊕ view ⊕ viewport ⊕ visual ⊕ visualization ⊕ w3c ⊕ web ⊕ webdesign ⊕ webdev ⊕ webdirections ⊕ webfont ⊕ webforms ⊕ webkit ⊕ webpage ⊕ website ⊕ webstandards ⊕ width ⊕ window ⊕ wireshark ⊕ wordpress ⊕ wpo ⊕ wurfl ⊕ xbrowser ⊕ yahoo ⊕ yandex ⊕ yep ⊕ yepnote ⊕ yiibu ⊕ yui ⊕ yui3 ⊕ zoom ⊕ zynga ⊕Copy this bookmark: