はてなブックマーク

• あとで読む

  Hello WebMIDI

  3 users

  www.phpied.com

  Inspired by this talk by Jean-Philippe Côté I saw at Web Unleashed in Toronto last month, I thought I should dust off the old midi cable. MIDI? MIDI is a protocol that various music and lighting devices use to talk to each other. Believe it or not v1.0 of the spec from 1983 is still the one in use, remaining largely unchanged. In a world where we don't know if we're using JavaScript, ECMAScript7

  • テクノロジー
  • 2016/11/01 21:57

  • audio
  • JavaScript
• あとで読む

  Oversharing with the browser's autofill

  3 users

  www.phpied.com

  Auto-filling forms is cool. Unless, of course, you give away more data than you thought you were. The basics It's pretty simple, actually. You just add an autocomplete attribute to your <input> and give it one of the predefined values. And off you go. For example: <input type="text" autocomplete="given-name"> When the browser sees this, it offers to autofill the value for the user. Yup, the autoco

  • テクノロジー
  • 2016/10/13 15:13

  • ブラウザ
  • html
  • セキュリティ
• あとで読む

  Writing ES6 today with jstransform

  3 users

  www.phpied.com

  So there's this recent open-source project from Facebook called jstransform. It's also used by ReactJS. It lets you explore ES6 features and not only explore, but use them in production code. All you need to do is add the transformation to your static resource pipeline. (Of course you have one, right, for minification and so on) I took an example from the readme of the project, added all the avail

  • テクノロジー
  • 2014/04/22 21:34

  • library
  • JavaScript
• あとで読む

  Remarkable React

  3 users

  www.phpied.com

  I gave a talk about React at BrazilJS few days ago. The "slides" are here. In this post I'll go over what I said (more or less) at the beginning of the presentation. I hope to follow up with some more code. Disclaimer: I work at Facebook. But these are my thoughts. In fact, I may have gotten some things wrong. I was in no way involved in building React, these are opinions of a developer trying to

  • テクノロジー
  • 2013/08/28 13:24

  • development
  • *あとで
• あとで読む

  CSS animations off the UI thread

  3 users

  www.phpied.com

  This excellent Google I/O talk mentions that Chrome for Android moves the CSS animations off of the UI thread, which is, of course, a great idea. Playing around with it, here's what I found: Browser support: Desktop Safari, iOS Safari, Android Chrome. You need to use CSS transforms. Animating regular properties doesn't work. Update: (see comments) confirmed support in IE10. Reported support in Fir

  • テクノロジー
  • 2013/03/12 17:22

  • css
• あとで読む

  Non-onload-blocking async JS

  5 users

  www.phpied.com

  Update Oct 2013: for a more bulletproof version, tested in the wild, IE and all, check Philip's snippet at http://www.lognormal.com/blog/2012/12/12/the-script-loader-pattern/ Asynchronous JS is cool but it still blocks window.onload event (except in IE before 10). That's rarely a problem, because window.onload is increasingly less important, but still... At my Velocity conference talk today Philip

  • テクノロジー
  • 2012/06/28 22:32

  • js
  • javascript
• あとで読む

  3PO

  3 users

  www.phpied.com

  Say hello to the 3PO extension for YSlow. It checks your site for integration with popular 3rd parties, such as Facebook, Twitter widgets, Google Analytics and so on. 3PO (3rd party optimization) extension currently has 5 checks: two of them generic to all 3rd parties and three specific to Facebook plugins. I'm looking forward to adding more checks and more specific to a particular provider's best

  • テクノロジー
  • 2012/06/28 07:59

  • performance
• あとで読む

  CSS and the critical path

  3 users

  www.phpied.com

  Back when I was still actively into speaking at public events (way, way back, something like year and a half ago (which strangely roughly coincides with the time I joined Facebook, hmmm (hmm? (huh? what's with the parentheses? sure all of them are closed at this point?)))) I remember showing this slide: The reason I'm bringing it up now is this experiment I saw today by Scott Jehl. media="nonsense

  • テクノロジー
  • 2012/06/08 09:54

  • *あとで
• あとで読む

  JavaScript-style object literals in PHP

  6 users

  www.phpied.com

  var fido = {}; fido.name = "Fido"; fido.barks = true;

  • テクノロジー
  • 2011/11/30 20:24

  • javascript
  • PHP
• あとで読む

  Social button BFFs

  3 users

  www.phpied.com

  TL;DR: Loading JavaScript asynchronously is critical for the performance of your web app. Below is an idea how to do it for the most common social buttons out there so you can make sure these don't interfere with the loading of the rest of your content. After all people need to see your content first, then decide if it's share-worthy. Japanese translation by Koji Ishimoto is here Facebook now offe

  • テクノロジー
  • 2011/10/14 09:42

  • performance
  • javascript
• あとで読む

  Location, location

  8 users

  www.phpied.com

  location = location ... and a gazillion other ways to reload the page with JavaScript

  • テクノロジー
  • 2011/08/10 16:49

  • JavaScript
  • tips
• あとで読む

  When is a stylesheet really loaded?

  7 users

  www.phpied.com

  Often we want to load a CSS file on-demand by inserting a link node. And we want to know when the file finished loading in order to call a callback function for example. Long story short: turns out this is harder than it should be and really unnecessary hard in Firefox. I hereby beg on behalf of many frustrated developers: please, Firefox 4, please fire a load event when a stylesheet loads. Update

  • テクノロジー
  • 2011/03/18 16:08

  • CSS
  • JavaScript
  • *あとで
• あとで読む

  Command-line CSS spriting

  6 users

  www.phpied.com

  (In Russian) OK, CSS sprite tools exist. I'm pretty confident I actually made the very first one 🙂 But they break from time to time (like mine currently). And then the command line is cool (as opposed to scary) and oh-so-quick. And imagemagick is cool and oh-so-powerful. So let's see how we can create CSS sprites from the command line alone. Creating the image Starting with a list of separate ima

  • 暮らし
  • 2011/02/20 00:11

  • sprite
  • css
  • Tools
• あとで読む

  MHTML - when you need data: URIs in IE7 and under

  9 users

  www.phpied.com

  UPDATE: It's very important to have a closing separator in the MHTML document, otherwise there are known issues in IE7 on Vista or Windows 7. The details are here. In the previous post I described what data: URIs are and how they are useful to reduce the number of HTTP requests. Now, the problem with data: URIs is that they are not supported by IE < 8. But, thanks to this article (in Russian), her

  • テクノロジー
  • 2011/01/13 13:23

  • mhtml
  • ie
  • browser
  • html
  • web
  • dataURI
• あとで読む

  cssmin.js

  5 users

  www.phpied.com

  cssmin.js is a JavaScript port of YUICompressor's CSS minifier. The motivation Minifying CSS helps reduce file sizes and makes your pages faster and your users happier. YUICompressor is cool but is written in Java, which can be a blocker for some folks - you know JVM, command line, classpaths... No more excuses, now you have a simple light JavaScript version. And as you know, JavaScript is everywh

  • テクノロジー
  • 2010/12/31 04:58

  • mysql
  • css
  • JavaScript
• あとで読む

  phpied.com

  3 users

  www.phpied.com

  “Your app crashes my browser” talk Today I gave a talk on memory leaks in web apps at the wonderful dotJS conference in Paris’ Folies Bergère theater. It was only 5 minutes, so not much time for links and such. Here’s more or less what I said including the links. Bonjour à toutes et à tous, who’s excited about… Memory Leaks!? […] Chrome extension: Open in this tab Do you hate it when sites open ne

  • テクノロジー
  • 2010/12/02 23:29

  • PHP
  • JavaScript
  • ブログ
• あとで読む

  3 ways to define a JavaScript class

  5 users

  www.phpied.com

  Introduction JavaScript is a very flexible object-oriented language when it comes to syntax. In this article you can find three ways of defining and instantiating an object. Even if you have already picked your favorite way of doing it, it helps to know some alternatives in order to read other people's code. It's important to note that there are no classes in JavaScript. Functions can be used to s

  • テクノロジー
  • 2010/11/11 19:01

  • JS
  • language
  • javascript
• あとで読む

  Conditional comments block downloads

  3 users

  www.phpied.com

  I came across this blog post (via @pornelski and @souders) where Markus has stumbled upon a case where an IE6-only stylesheet included with a conditional comment blocks the downloads in IE8. Whaaat? I had to dig in. To give you a summary: turned out that any conditional comment, not only for an extra CSS, will block further downloads until the main CSS file arrives. Also the solution offered on th

  • テクノロジー
  • 2010/09/22 14:24

  • IE
  • *
  • css
• あとで読む

  Preload CSS/JavaScript without execution

  4 users

  www.phpied.com

  Preloading components in advance is good for performance. There are several ways to do it. But even the cleanest solution (open up an iframe and go crazy there) comes at a price - the price of the iframe and the price of parsing and executing the preloaded CSS and JavaScript. There's also a relatively high risk of potential JavaScript errors if the script you preload assumes it's loaded in a page

  • テクノロジー
  • 2010/04/26 09:57

  • performance
  • *あとで
  • javascript
• あとで読む

  The performance business pitch

  3 users

  www.phpied.com

  2010 update: Lo, the Web Performance Advent Calendar hath moved Dec 24 This post is the last article in the 2009 performance advent calendar experiment. The idea for this post actually came from the awesome Jeremy Hubert. I met him after a tech talk at Yahoo! I co-delivered and we talked about the presentation. The talk contained an opening part with the various business stats that were presented

  • テクノロジー
  • 2010/03/23 18:37
• あとで読む

  Rendering: repaint, reflow/relayout, restyle

  16 users

  www.phpied.com

  2010 update: Lo, the Web Performance Advent Calendar hath moved Dec 17 This post is part of the 2009 performance advent calendar experiment. Stay tuned for the articles to come. UPDATE: Ukraine translation here. Nice 5 "R" words in the title, eh? Let's talk about rendering - a phase that comes in the Life of Page 2.0 after, and sometimes during, the waterfall of downloading components. So how does

  • テクノロジー
  • 2009/12/17 21:14

  • performance
  • browser
  • JavaScript
  • HTML
  • CSS
  • *あとで読む
• あとで読む

  JavaScript shell scripting

  13 users

  www.phpied.com

  As you probably know, JavaScript is not limited to the browser. There's server-side JavaScript, JS for various extensions, you can script Photoshop operations with JavaScript if you feel like it. Or compile Windows executables. You see where I'm going with this. JavaScript is everywhere 🙂 And yes, you can do shell scripting in JavaScript. On any platform you can use Rhino to run your scripts. On

  • テクノロジー
  • 2009/09/03 23:31

  • javascript
  • shell
  • Performance
  • mac
  • tips
  • *あとで読む
  • あとで読む
• あとで読む

  Simultaneuos HTTP requests in PHP with cURL

  23 users

  www.phpied.com

  The basic idea of a Web 2.0-style "mashup" is that you consume data from several services, often from different providers and combine them in interesting ways. This means you often need to do more than one HTTP request to a service or services. In PHP if you use something like file_get_contents() this means all the requests will be synchronous: a new one is fired only after the previous has comple

  • 世の中
  • 2008/02/22 10:53

  • php
  • curl
  • HTTP
  • API
• あとで読む

  Canvas pie

  3 users

  www.phpied.com

  UPDATE: Translation in Brazilian Portuguese here, thanks Maujor! OK, so you have an HTML table. Let's turn it into a pie chart with a bit of javascript. We'll be using the canvas tag, so the browser has to support it. For IE - well, you still have the table. That's why we'll call it progressive enhancement. Unobtrusive too. Here's a screenshot: » The demo is here (refresh for new colors) Here are

  • テクノロジー
  • 2008/02/06 13:22

  • graph
  • javascript
  • html
• あとで読む

  JS includes - the saga continues...

  6 users

  www.phpied.com

  The problem in question is how to find out a dynamically included JavaScript file is actually loaded. The concept of JavaScript includes is here, the IE-only solution is here. The IE solution is to use the onreadystatechange event that is fired when a new script is included. It also works for dynamically loaded CSS files using a new link DOM element. Thanks to the comment from Björn Graf, I tried

  • テクノロジー
  • 2007/12/02 23:02

  • javascript
  • event
  • Programming
• あとで読む

  Image fun with PHP - part 2

  3 users

  www.phpied.com

  This post is a demo of what the imagefilter() PHP function can do for you. The Original imagefilter() called with different filter constants Filter: IMG_FILTER_BRIGHTNESS Code to reproduce: <?php $image = imagecreatefrompng('nathalie.png'); imagefilter($image, IMG_FILTER_BRIGHTNESS, 5); imagepng($image, 'img_filter_brightness_5.png'); imagedestroy($image); ?> Filter: IMG_FILTER_BRIGHTNESS Code to

  • テクノロジー
  • 2007/11/13 23:44

  • PHP
  • image
  • -
  • Web制作
  • webデザイン
  • プログラミング
  • 画像
• あとで読む

  Make your javascript a Windows .exe

  4 users

  www.phpied.com

  These days an average web developer needs to have a broad matrix of skills in order to do his/her job. HTML, CSS, JavaScript, AJAX, XML, some server side language, some linux skills, some apache, some database skills, standards, accessibility, SEO, the list goes on. Parts of the list are also multiplied by (or raised to the power of?) the number of browsers you want to support. Crazy, isn't it? We

  • テクノロジー
  • 2007/09/02 00:44

  • .NET
  • JavaScript
  • microsoft
  • Windows
  • programming
• あとで読む

  RGB color parser in JavaScript

  10 users

  www.phpied.com

  What is it A JavaScript class that accepts a string and tries to figure out a valid color out of it. Some accepted inputs are for example: rgb(0, 23, 255) #336699 ffee66 fb0 red darkblue cadet blue For more accepted inputs - see the demo. Here's the javascript class - rgbcolor.js. Some history / motivation I was playing around with an idea (will post later) and I needed to get color information us

  • テクノロジー
  • 2007/05/29 16:36

  • color
  • javascript
  • jQuery
  • Library

次のページ