Home
Videos uploaded by user “Code Cascade”
INTRO to jQUERY's .getJSON() FUNCTION - Super Simple Javascript/jQuery Tutorials
 
04:23
FACEBOOK - http://facebook.com/codecascade TWITTER - http://twitter.com/codecascade Want to start building mobile user interfaces? More than likely you'll want to pull JSON data from popular sources like Facebook Graph, Twitter API, or Google Data Protocol. jQuery has the solution for retrieving JSON data with the getjson() function. This video covers the ABSOLUTE BASICS of using jQuery's getJSON() function to retrieve JSON formated data across domains from API endpoints like Facebook's Graph API to help you start building mobile user interfaces today! JS code from video: $(document).ready(function() { $.getJSON('https://graph.facebook.com/zombies', function(fbResults) { document.write(fbResults.name); }); } JSON examples in video: https://graph.facebook.com/zombies Additional Resources: "Facebook Graph API Reference" http://developers.facebook.com/docs/reference/api/ "Using JSON in the Google Data Protocol" https://developers.google.com/gdata/docs/json
Views: 38557 Code Cascade
(3/11) HTML5 Structure and Skeleton Broilerplate
 
03:50
Although Skeleton's index page only uses div elements to separate content, more semantically appropriate elements can be used instead. In this video the HTML5 header and article elements will be used. Additional Resources: http://www.getskeleton.com/
Views: 7261 Code Cascade
(4/11) Embedding Responsive Youtube Videos
 
05:55
In this will illustrate how to use a pure CSS technique to make embedded YouTube videos, iframe elements specifically, responsive to width of its parent element while preserving the video's aspect ratio. Additional Resources: http://tinyurl.com/responsive-youtube http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/
Views: 4998 Code Cascade
(1/11) Intro to Skeleton CSS Boilerplate
 
07:53
Looking to make a responsive website that will look just as good on mobile as it will on the desktop? A good start would a a responsive grid framework like Skeleton Boilerplate. In this video we'll look at Dave Gamache's Skeleton Boilerplate: a responsive CSS grid system, based on the non-responsive 960 grid system, that allows you to quickly and reliably build responsive websites that will look good on any screen size, from desktop to mobile! Skeleton can be downloaded here: http://www.getskeleton.com/ Additional Resources: "Building a Responsive Layout With Skeleton: Starting Out" http://webdesign.tutsplus.com/tutorials/complete-websites/building-a-responsive-layout-with-skeleton-starting-out/ "Build a Responsive, Mobile-Friendly Web Page With Skeleton" http://designshack.net/articles/css/build-a-responsive-mobile-friendly-web-page-with-skeleton/
Views: 32323 Code Cascade
(2/15) Basic jQuery Script to Retrieve JSON Data from Facebook Graph API
 
04:28
UPDATE (July 10, 2013) - Facebook now requires an access token to utilize the Graph Search API. REMEMBER To make this work in Internet Explorer you'll need to add &callback=? to the URL Old Format: http://graph.facebook.com/search?q=zombies&callback=? New Format: http://graph.facebook.com/search?q=value&access_token=app_id|app_secret&callback=? See documentation for details: Facebook Search API: https://developers.facebook.com/docs/reference/api/search/ Blog Post with Updated Changes: https://developers.facebook.com/blog/post/2013/04/03/platform-updates--operation-developer-love/ Facebook Access Tokens: https://developers.facebook.com/docs/facebook-login/access-tokens/ #################################################### Additional Resources: https://developers.facebook.com/ http://api.jquery.com/jQuery.getJSON/ http://api.jquery.com/jQuery.each/
Views: 10405 Code Cascade
(5/11) Adding Code Snippets with CODE and PRE Elements
 
03:39
If you find yourself needing to add a snippet of code to your webpage for visual purposes and not to be rendered by HTML, you'll want to use the CODE element to semantically denote that piece of content as computer code. If you want to retain invisible elements of the content, like white-space, indents and carriage returns, then you'll need to use the HTML PRE element for that purpose. Additional Resources: http://reference.sitepoint.com/html/code http://reference.sitepoint.com/html/pre
Views: 3115 Code Cascade
Making Embedded YouTube Videos Responsive - Responsive Web Design
 
05:49
Want to make sure that your embedded YouTube videos look good on a mobile device? Looking to make your embedded YouTube video responsive? This pure CSS solution allows you to use the embed code straight from a YouTube video's share option and make it responsive by simply adding an extra div container around the video. Most importantly, this responsive technique will preserve your embedded video's aspect ratio. By using responsive website techniques, your pages will look good on a variety of screen sizes, including mobile devices. A responsive approach is an ideal way to create a single code base for both desktop, tablet and mobile experiences. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Use the following responsive CSS code on your embedded YouTube video responsive: .video-container { position: relative; /* keeps the aspect ratio */ padding-bottom: 56.25%; /* fine tunes the video positioning */ overflow: hidden; } .video-container iframe, .video-container object, .video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Additional Resources: "Creating Intrinsic Ratios for Video" @AListApart http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/ "Responsive YouTube Videos with CSS" @Avex http://avexdesigns.com/responsive-youtube-videos-with-css/ "Using Relative and Absolute Positioning - CSS Basics" @YouTube http://youtu.be/46SwU07oFHE
Views: 22269 Code Cascade
Using Relative and Absolute Positioning - CSS Basics
 
04:38
Still confused about CSS positioning? In this video we'll compare absolute positioning versus relative positioning. We'll also see how absolute positioning and relative positioning work together. For more information, check out the website: http://code-cascade.com/using-relative-and-absolute-positioning-css-basics/
Views: 54128 Code Cascade
(15/36) Applying Normalize.css Reset to Your Page
 
05:28
Normalize.css is a popular CSS reset that preserves some of the more useful default styles of HTML elements. Website like HTML5 Boilerplate, Twitter Bootstrap, Rdio, GOV.UK, and CSS Tricks utilize it to create more consistency across various default browser styles. http://necolas.github.com/normalize.css/
Views: 11719 Code Cascade
(20/25) Understanding the CSS Cascade
 
04:21
This video discusses how CSS attributes are applied in relation to their position in the CSS document. !important is also discussed as a mechanism to override the CSS cascade.
Views: 1563 Code Cascade
(3/15) Creating HTML Elements with jQuery
 
03:24
UPDATE (July 10, 2013) - Facebook now requires an access token to utilize the Graph Search API. See documentation for details: Facebook Search API: https://developers.facebook.com/docs/reference/api/search/ Blog Post with Updated Changes: https://developers.facebook.com/blog/post/2013/04/03/platform-updates--operation-developer-love/ Facebook Access Tokens: https://developers.facebook.com/docs/facebook-login/access-tokens/ This video will show how to derive the URL for a user's Facebook profile picture from the JSON data results received via Facebook's Graph API. Additional Resources: http://developers.facebook.com/docs/reference/api/#pictures
Views: 3764 Code Cascade
(11/11) Adding Box-Shadow
 
03:37
The box-shadow CSS attribute allows you to define a background shadow for various elements on your page. Subtly is key as this attribute can be easily abused! box-shadow: (Horizontal) (Vertical) (Blur) (Spread) (Color) Additional Resources: http://css-tricks.com/snippets/css/css-box-shadow/
Views: 1657 Code Cascade
(1/15) Intro to the JSON Data from Facebook's Graph API
 
04:31
UPDATE (July 10, 2013) - Facebook now requires an access token to utilize the Graph Search API. See documentation for details: Facebook Search API: https://developers.facebook.com/docs/reference/api/search/ Blog Post with Updated Changes: https://developers.facebook.com/blog/post/2013/04/03/platform-updates--operation-developer-love/ Facebook Access Tokens: https://developers.facebook.com/docs/facebook-login/access-tokens/ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ This video introduces the functional, Javascript, portion of the Facebook Search Interface project. In this stage of the project we'll be pull JSON data from Facebook's Graph API and converting it to POSH (plain old semantic HTML). Additional Resources: https://developers.facebook.com/
Views: 14337 Code Cascade
WHAT'S AN API? - Super Simple Javascript/jQuery Tutorials
 
07:00
This video covers the ABSOLUTE BASICS of an application programming interface, API for short. JSON examples in video: https://graph.facebook.com/zombies http://search.twitter.com/search.json?q=puppies Additional Resources: http://en.wikipedia.org/wiki/Application_programming_interface https://dev.twitter.com/docs/api http://developers.facebook.com/docs/reference/api/
Views: 49581 Code Cascade
(4/36) Adding HTML5 Layout Tags (article, section, header, footer)
 
05:32
This video will introduce to you to some of the new HTML5 tags that are specific to layout. The different between article and section will be discussed; header and footer will be introduced. Addendum: Refer to the W3C explanation of the subtle differences between nesting sections within an article versus nesting articles within a section: http://www.w3.org/wiki/HTML_structural_elements#.3Csection.3E https://www.google.com/search?q=article+versus+section
Views: 2909 Code Cascade
Introduction to Using CodePen.io - Part 1
 
11:43
CodePen is a great app for for playing and sharing front-end code created by Chris Coyier, Alex Vazquez and Tim Sabat created. In this video we add some basic HTML to a new Pen via CodePen.
Views: 17752 Code Cascade
(8/36) Adding MIME Type on Your Domain
 
06:04
In order for browsers to know how to handle non-HTML content that they may receive, the appropriate MIME type must be associated with the type. This video will cover 2 ways of adding the correct MIME types for your page. The first method is through cPanel, and the other is via an .htaccess file. http://www.htaccess-guide.com/adding-mime-types/
Views: 2713 Code Cascade
Optimizing Images with ImageOptim
 
04:27
If you don't about ImageOptim already... get it immediately! ImageOptim is an awesome free utility that allows you to quickly and easily optimize images for your website, decreasing bandwidth and increase user experience! https://imageoptim.com
Views: 1546 Code Cascade
(5/8) Adding Search Components (HTML Input and Button Elements)
 
02:15
In this video we'll add an input and button element to our HTML code in order to create a search interface for visitors. Additional Resources: http://www.quackit.com/html/codes/html_button.cfm
Views: 3578 Code Cascade
TEMPLATING JSON DATA from FACEBOOK - Using Facebook Graph API
 
10:27
This video will show how to query Facebook's Graph API with jQuery's getJSON() function for JSON data. Once the data is received, HTML elements will be added so the information can be rendered by a web browser and styled with CSS. JSON data feed (Facebook Graph API) http://graph.facebook.com/zombies Additional Resources: Graph API documentation: http://developers.facebook.com/docs/reference/api/ jQuery.getjson() documentation: http://api.jquery.com/jQuery.getJSON/
Views: 7943 Code Cascade
(1/6) - Introduction to Geolocation Project - HTML5 Geolocation
 
02:13
This video will present a brief overview of the geolocation project. Source Code: http://dragosbogdan.net/html5/basic-geolocation Additional Resources: http://dev.w3.org/geo/api/spec-source.html
Views: 2396 Code Cascade
(18/36) Making Text Respond to Browser Width with fittext.js
 
08:52
With only CSS, we cannot have our font size respond to the dimensions of our browser. But adding a little Javascript, specifically fittext.js, we can have our text respond to the values derived from the window.resize() function in Javascript. DOWNLOAD Fittext.js here: http://fittextjs.com/
Views: 3168 Code Cascade
(18/35) Using CSS Float and Clear
 
05:25
Float can be used to left or right align block level elements in your web page. Other elements would need to have clear applied to them in order to make sure that the fail underneath the floated element.
Views: 786 Code Cascade
(2/11) Skeleton Broilplate Grid System Basics
 
10:43
In this brief overview, we'll be looking at how Skeleton is implemented by investigating the documents that come with Skeleton. Skeleton can be downloaded here: http://www.getskeleton.com/ Additional Resources: http://webdesign.tutsplus.com/tutorials/complete-websites/building-a-responsive-layout-with-skeleton-starting-out/ http://designshack.net/articles/css/build-a-responsive-mobile-friendly-web-page-with-skeleton/
Views: 12216 Code Cascade
INTRO to jQUERY .EACH() FUNCTION - Super Simple Javascript/jQuery Tutorials
 
07:30
This video covers the ABSOLUTE BASICS of using jQuery's each() function to iterate over an array. function to add values to an array in Javascript. JS code from video: $(document).ready(function() { $.getJson('https://graph.facebook.com/zombies', function(fbResults) { document.write(fbResults.name); }); }); Additional Resources: http://en.wikipedia.org/wiki/Iteration#Computing http://api.jquery.com/jQuery.each/
Views: 4430 Code Cascade
(5/25) Using Notepad++ or TextWrangler with Cyberduck
 
08:02
In this video you will be introduced to Notepad++ and TextWrangle. Both programs can be used to create and edit web pages and be integrated with Cyberduck.
Views: 1729 Code Cascade
(5/10) Using Mustache.js to Template JSON to HTML - Graphing Data with HTML5 Animation
 
04:39
In this video we create a new variable called jsonHtml that will be assigned to the JSON to HTML converted data. At this point we'll have actually have converted data although but we will still need to display it on the page. Tutorial: HTML Templates with Mustache.js http://coenraets.org/blog/2011/12/tutorial-html-templates-with-mustache-js/ Get Mustache.js: https://github.com/janl/mustache.js
Views: 4278 Code Cascade
(6/11) Using Google prettify.js to pre elements
 
07:54
A quick and easy way to make the code snippets on your page stand out his by using something like Google Code Prettify, which will do syntax highlighting on pre or code elements. Download Google Prettify here: http://code.google.com/p/google-code-prettify/
Views: 4108 Code Cascade
(21/41) Downloading Lightbox2 and Linking Javascript Files
 
07:08
The first step to getting Lightbox2 working on your page is to download the files and link them to your page. Related links - http://lokeshdhakar.com/projects/lightbox2
Views: 2035 Code Cascade
INTRO to OBJECT LITERALS - Super Simple Javascript/Query Tutorials
 
03:39
In Javascript, an object literal is a way for you to package a dataset in a very clean way. The of the greatest values you'll get from learning about object literals is that JSON data in formatted in object literal notion. Additional Resources: JSON in JavaScript http://www.json.org/js.html Literal (computer programming) http://en.wikipedia.org/wiki/Literal_(computer_programming)
Views: 1612 Code Cascade
STRING VARIABLES to HTML ELEMENTS - Super Simple Javascript/jQuery Tutorials
 
03:15
This video covers the ABSOLUTE BASICS of what is known as string templating. String templating refers to a process of adding semantic value (e.g. HTML tags) to string variables in Javascript.
Views: 13278 Code Cascade
(21/44) Initializing and Using the jQuery Tablesorter Plug-in
 
07:18
This video explains how to initialize and use the Tablesorter jQuery plug-in into your webpage. Plug-in can be found here: http://tablesorter.com/docs/
Views: 8451 Code Cascade
(19/19) Dealing with Images - Mobile First Responsive Design
 
06:58
Target different screen size including wearables, phones, tablets, desktops, game consoles, TVs, and more. Ethan Marcotte in A List Apart originally redefined responsive design: layout that changes based on size via media queries and capabilities by progressive enhancement.
Views: 716 Code Cascade
(37/41) Embedding Wufoo Form in a Website
 
05:09
Once our form is complete, we can use the Wufoo HTML embed code to copy and paste the form into our webpage.
Views: 4056 Code Cascade
(7/11) Customization Options with Google's prettify.js
 
05:27
Google Prettify offers some extra options to expand its functionality allowing you to explicitly declare the language of your code snippet, as well as add line numbering to the code. The theme gallery allows you to change the cosmetic options of how the syntax highlighting will affect the code. Gallery of themes for code prettify: http://google-code-prettify.googlecode.com/svn/trunk/styles/index.html Download Google Prettify here: http://code.google.com/p/google-code-prettify/
Views: 2509 Code Cascade
(27/44) Style Adjustments for Internet Explorer and jQuery Corner
 
07:59
This video explains how to main IE specific CSS adjusts to the jQuery Corner plug-in to account for some browser anomalies. Plug-in can be found here: http://www.malsup.com/jquery/corner/
Views: 705 Code Cascade
(35/35) Creating a Style for Printed Pages
 
08:14
This video will introduce the concept of a CSS printer style sheet which allows you to define a separate style for your webpage when it is printed.
Views: 2580 Code Cascade
ITERATIVE TEMPLATING of JSON DATA from FACEBOOK - Using Facebook Graph API
 
08:57
This video will show how to query Facebook's Graph API with jQuery's getJSON() function for JSON data. Once the data is received, HTML elements will be added by iterating through the data using jQUery's each() function. JSON data feed (Facebook Graph API) http://graph.facebook.com/search?q=zombies Additional Resources: Graph API documentation: http://developers.facebook.com/docs/reference/api/ jQuery.each() documentation: http://api.jquery.com/jQuery.each/ jQuery.getjson() documentation: http://api.jquery.com/jQuery.getJSON/
Views: 1407 Code Cascade
(0/19) Intro to Yummy Recipe Project - Mobile First Responsive Design
 
02:46
Target different screen size including wearables, phones, tablets, desktops, game consoles, TVs, and more. Ethan Marcotte in A List Apart originally redefined responsive design: layout that changes based on size via media queries and capabilities by progressive enhancement.
Views: 2203 Code Cascade
Sticky Navigation Menu with HTML, CSS & Javascript
 
12:45
A fixed, or sticky navigation menu is when you apply the position:fixed CSS value on a navigation menu to make it stick to the top of the browser's chrome. This technique insures that the navigation menu is always visible of how low the visit is down a page. To implement the sticky navigation menu you need to have at least a basic understanding of Javascript and selecting elements with jQuery, as well as working knowledge of HTML and CSS, specifically CSS positioning. Code from video available at: http://bit.ly/1Op5jBy
Views: 28292 Code Cascade
Introduction to Using CodePen.io - Part 2
 
07:28
CodePen is a great app for for playing and sharing front-end code created by Chris Coyier, Alex Vazquez and Tim Sabat created. In this video we add some basic CSS to a new Pen via CodePen.
Views: 4852 Code Cascade
(9/14) Positioning the Facebook Like button resultsDescription Section
 
05:37
By absolutely positioning the iframe element to the bottom of the relatively positioned article container, we can make the Facebook Like button site at the very bottom of each Facebook search result. Link to example code provided here: http://dragosbogdan.net/html5/resources/example-code-facebook-search-interface-project.zip
Views: 340 Code Cascade
(0/10) Intro to Our Objective - Graphing Data with HTML5 Animation
 
03:58
In the next series of videos we'll look at converting tabular data in a HTML5 canvas graph using the Filament Group's enhance.js library. Provided script: http://dragosbogdan.net/html5/resources/facebookShares.html "Update to jQuery Visualize: Accessible Charts with HTML5 from Designing with Progressive Enhancement" http://www.filamentgroup.com/lab/update_to_jquery_visualize_accessible_charts_with_html5_from_designing_with/
Views: 6313 Code Cascade
(39/44) Creating An Image Sprite in Photoshop
 
05:11
In order for image sprites to work you need to position graphic elements precisely in the document.
Views: 6231 Code Cascade
Configuring 000webhost in Dreamweaver
 
11:48
In this video you will see how to configure the FTP settings in Dreamweaver to access the 000webhost.com Web hosting servers.
Views: 8880 Code Cascade
(23/25) The LoVe-HAte Rule for Styling Links
 
09:20
There is a special order that you need to define link styles with in CSS. This order can be easily remembered by using the LoVe HAte rule. Related links - http://css-tricks.com/135-remember-selectors-with-love-and-hate/ http://www.webdesigncreare.co.uk/blog/videos/styling-links.html
Views: 247 Code Cascade
Introduction to HTML5 Canvas Animation - What's It All About?
 
15:39
In this video we'll look at HTML5 canvas and its practical implementation with a variety of tools including javascript, Raphael drawing library, D3 (Data Driven Documents), Highcharts JS, Adobe Edge, Hippo Animator, and more.
Views: 29000 Code Cascade
(14/36) Internet Explorer and SVG Image Rendering
 
07:40
IE9's interpretation of the SVG specification seems to handle svg images embedded via the image element differently than other browsers. To resolve this discrepancy you can simply use an IE conditional statement to serve up a gif image instead.
Views: 990 Code Cascade
(13/36) Chrome's SVG Image Anti-Aliasing Rendering Issue
 
02:46
Google Chrome's browser has a known issue rendering SVG images. The issue stems around it's anti-aliasing treatment of the edges of SVG files, making the edges blurry. http://code.google.com/p/chromium/issues/detail?id=119693 https://www.google.com/search?q=anti-alaising+chrome+SVG
Views: 2497 Code Cascade
Introduction to Using CodePen.io - Part 3
 
05:05
CodePen is a great app for for playing and sharing front-end code created by Chris Coyier, Alex Vazquez and Tim Sabat created. In this video we add some basic Javascript to a new Pen via CodePen.
Views: 3630 Code Cascade