sunpig + frontend   103

Unit test JavaScript applications with Jasmine | Adobe Developer Connection
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
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
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 
5 weeks ago by sunpig
Responsive viewport units - destroy/dstorey
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 
6 weeks ago by sunpig
Stubbornella » Blog Archive » Scope donuts
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
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 
7 weeks ago by sunpig
» The EMs have it: Proportional Media Queries FTW! Cloud Four Blog
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
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
9 weeks ago by sunpig
Organizing Your Backbonejs Application With Modules - Bocoup
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
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
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 
9 weeks ago by sunpig
envision - demos
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
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 
10 weeks ago by sunpig
WebKit Limit on Retina JPG Image Display - Duncan Davidson
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
What is BEM?
Heard about the BEM methodology the other day; looks really interesting.
css  frontend  oocss  coding  design  development  patterns  bem  block  element  modifier  yandex  naming  object  standard  from twitter
11 weeks ago by sunpig
About HTML semantics and front-end architecture – Nicolas Gallagher
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!
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
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
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
Fashionably flexible responsive web design (full day workshop) // Speaker Deck
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
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
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
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
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
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...
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
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
(404) http://t.co/HRZG8B9%E2%80%9D
: Sniff my browser: The Modernizr inadequacy MUST-READ
frontend  from twitter
may 2011 by sunpig
The New Bulletproof Font-Face Syntax | Fontspring
RT @AaronGustafson: suggests: The New Bulletproof Font-Face Syntax
font-face  css  typography  webfont  webdev  frontend 
february 2011 by sunpig
« earlier      

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:



description:


tags: