REMux: An Experimental Approach to Responsive Web Design. Menacing Cloud. The following code demonstrates a simple approach to getting the screen width, taking into account the current device orientation. I use the following code to get the orientation. The containing class will be demonstrated in future articles, so I kept this format. // Update viewport orientation //----------------------------- this.updateOrientation = function() { this.orientation = window.orientation; if(this.orientation === 0 || this.orientation === 180) this.orientation = 'portrait'; else if(this.orientation === 90 || this.orientation === -90) this.orientation = 'landscape'; else { // JavaScript orientation not supported.
Work it out. if(document.documentElement.clientWidth > document.documentElement.clientHeight) this.orientation = 'landscape'; else this.orientation = 'portrait'; } }; If orientation is not directly supported, we are taking an educated guess based on the viewport dimensions. This allows us to work out the corrected screen width. Comments Follow the author on Twitter. Wordpress_helpsheet.jpg (2560×1600) 30 Inspiring WebGL (Chrome) Experiments. Behold, for a great tool with great promises is coming to your eyes. It is fast and smooth. It renders 3D, and with integration it animates, guess what it is? HTML5?
CSS3? No, it’s called WebGL, a software library that extends the capability of the JavaScript to generate interactive 3D graphics, and yes, without any plugins! In this showcase, we don’t want to show you the regular things. More related posts: You are strongly recommended to view these demos using the latest version of Developer version of Google Chrome. 3 Dreams of Black Authored by Google Data Arts Team, 3 Dreams of Black brings you into 3 dream worlds constructed through a combination of rich 2D drawings and animations interwoven with interactive 3D sequences. Animated Volume Particles This one is really artistic – animated animals constructed by 3D particles using float textures and frame buffer objects. Aquarium Simulate an underwater environment? Azathioprine Probably the most epic WebGL demo, enough said. Attractors Trip. Snoopy | View-source bookmarklet for iPad, iPhone and other mobile devices.
How to Create an Awesome Scrolling Navigation using jQuery - thebeebs. I was looking over the .net award nominees this week and stumbled across the flipboard.com website. I loved the scrolling navigation so much I just had to open up visual studio and try and recreate it myself. DemoView Demo The main thing flipboard do differently is to have the logo and logo background elements move at different animation speeds from each other and the main content.
This effect is is similar to Parallex scrolling and gives the website more interest, depth and flair. I’ve documented the main steps to recreate my demo below: Step 1 First we need to make reference to the jQuery Library as we are going to use it alot. Step 2 Next we will want to add our HTML to the page this HTML will hold all of the layers and links that we will need to get the example running. The background triangle moves at a slightly different speed to the logo and so needs it’s own <div>. I have added the nav layer and placed 4 links into it so that the user can navigate between the different contentItems. Resizing images with PHP. The following script will easily allow you to resize images using PHP and the GD library. If you’re looking to resize uploaded images or easily generate thumbnails give it a try Update: Looking to resize transparent PNG’s and GIF’s?
We’ve updated our original code, take a look at Usage Save the code from the ‘the code’ section below as SimpleImage.php and take a look at the following examples of how to use the script. The first example below will load a file named picture.jpg resize it to 250 pixels wide and 400 pixels high and resave it as picture2.jpg If you want to resize to a specifed width but keep the dimensions ratio the same then the script can work out the required height for you, just use the resizeToWidth function. You may wish to scale an image to a specified percentage like the following which will resize the image to 50% of its original width and height The code Further Information. Initializr - Start an HTML5 Boilerplate project in 15 seconds! * { box-sizing: border-box } FTW. One of my least favorite parts about layout with CSS is the relationship of width and padding.
You’re busy defining widths to match your grid or general column proportions, then down the line you start to add in text, which necessitates defining padding for those boxes. And ‘lo and behold, you now are subtracting pixels from your original width so the box doesn’t expand. Ugh. If I say the width is 200px, gosh darn it, it’s gonna be a 200px wide box even if I have 20px of padding.
Anyway, I have a recommendation for your CSS going forward: This gives you the box model you want. Browser support Due to browser support, this recommendation is only for projects that support IE8 and up. Is it safe to use? Totally. jQuery works pretty great with it (except this). One of my favorite use-cases that border-box solves well is columns. Performance Lastly on @miketaylr’s inquiry, I also tested perf overhead.
You might get up in arms about the universal * selector. Apparently you’ve heard its slow. 10 super useful PHP snippets you probably haven’t seen. Text messaging with PHP using the TextMagic API If for some reason, you need to send text messages to your clients cell phones, you should definitely have a look to TextMagic. They provide an easy API which allow you to send SMS to cell phones. Please note that the TextMagic service isn’t free. The example below shows how easy it is to send a SMS to a cell phone using the TextMagic API: // Include the TextMagic PHP lib require('textmagic-sms-api-php/TextMagicAPI.php'); // Set the username and password information $username = 'myusername'; $password = 'mypassword'; // Create a new instance of TM $router = new TextMagicAPI(array( 'username' => $username, 'password' => $password )); // Send a text message to '999-123-4567' $result = $router->send('Wake up!
' Source: Detect location by IP Here is an useful code snippet to detect the location of a specific IP. Source: Check if server is HTTPS. Simplicity and JavaScript modules. All of us are looking for simplicity, but there are different levels to simplification. This is a story of what could be considered simple for modules in JavaScript. This post was prompted by the removal the optional AMD define() call in underscore. For a post on simplicity, it is a bit long, but I'm not a great writer, and I find I normally edit myself so much as to lose interest in posting, so then I end up not communicating.
Better to start communicating even if imperfect. I want to lay out why AMD modules are the simplest overall module solution for JavaScript at the moment, and where other approaches are not as simple as they may appear. Script Tags JavaScript does not have syntax for modules, but most programming languages do. JavaScript on the web has meant using script tags and manually ordering those script tags so that dependencies on global objects are worked out correctly. That sucks for the following reasons: CommonJS require('some/id') to reference a bit of code. Return value;