Videos uploaded by user “Code Cascade”
INTRO to jQUERY's .getJSON() FUNCTION - Super Simple Javascript/jQuery Tutorials
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: 39614 Code Cascade
(1/11) Intro to Skeleton CSS Boilerplate
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: 32506 Code Cascade
(4/11) Embedding Responsive Youtube Videos
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: 5009 Code Cascade
Making Embedded YouTube Videos Responsive - Responsive Web Design
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: 22376 Code Cascade
(2/15) Basic jQuery Script to Retrieve JSON Data from Facebook Graph API
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: 10488 Code Cascade
(15/36) Applying Normalize.css Reset to Your Page
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: 11989 Code Cascade
Using Relative and Absolute Positioning - CSS Basics
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: 55017 Code Cascade
(7/11) Customization Options with Google's prettify.js
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: 2526 Code Cascade
INTRO to jQUERY .EACH() FUNCTION - Super Simple Javascript/jQuery Tutorials
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: 4454 Code Cascade
(6/11) Using Google prettify.js to pre elements
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: 4147 Code Cascade
(20/25) Understanding the CSS Cascade
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: 1674 Code Cascade
Introduction to Using CodePen.io - Part 1
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: 18364 Code Cascade
Optimizing Images with ImageOptim
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: 1623 Code Cascade
(0/17) - Streaming Movie App Overview [Creating a streaming movie single page app]
Utilizing mobile-first responsive design techniques, this project walks you through creating a movie streaming single page app using HTML5, CSS3 and Javascript (including jQuery). To enhance the overall user experience, the project walks you through some optimization best practices including image optimization, code minification, lazy loading images, and much more. — Project files can be found here — https://code-cascade.com/projects/notflix/
Views: 1988 Code Cascade
(8/36) Adding MIME Type on Your Domain
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: 2854 Code Cascade
(18/36) Making Text Respond to Browser Width with fittext.js
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: 3210 Code Cascade
WHAT'S AN API? - Super Simple Javascript/jQuery Tutorials
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: 49843 Code Cascade
(2/11) Skeleton Broilplate Grid System Basics
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: 12238 Code Cascade
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: 8016 Code Cascade
(37/41) Embedding Wufoo Form in a Website
Once our form is complete, we can use the Wufoo HTML embed code to copy and paste the form into our webpage.
Views: 4189 Code Cascade
(11/11) Adding Box-Shadow
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: 1664 Code Cascade
(4/15) How to access the values inside the Facebook Graph API results
Using the this keyword, in this video we'll look at how to access the properties nested inside of the Facebook Graph API results Additional Resources: https://developers.facebook.com/ http://www.quirksmode.org/js/this.html
Views: 2530 Code Cascade
(21/44) Initializing and Using the jQuery Tablesorter Plug-in
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: 8642 Code Cascade
ACCESSING NESTED PROPERTIES in OBJECT LITERALS - Super Simple Javascript/Query Tutorials
Javascript objects can not only have properties, but their properties can have properties! The concept is not that complicated but worth getting familiar with if you plan on working with JSON data from sources like Twitter and Facebook. Additional Resources: JSON APIs Directory http://www.programmableweb.com/apis/directory/1?format=JSONP
Views: 3508 Code Cascade
(1/17) - HTML5 Scaffolding [Creating a streaming movie single page app]
— Project files can be found here — https://code-cascade.com/projects/notflix/
Views: 586 Code Cascade
(25/25) Styling blockquotes with CSS
In this video you will see how to style blockquote and cite HTML elements in your page.
Views: 843 Code Cascade
(5/8) Adding Search Components (HTML Input and Button Elements)
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: 3645 Code Cascade
STRING VARIABLES to HTML ELEMENTS - Super Simple Javascript/jQuery Tutorials
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: 14363 Code Cascade
(14/36) Internet Explorer and SVG Image Rendering
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: 1101 Code Cascade
(3/6) Creating a Button to Determine Geolocation Abilities - HTML5 Geolocation
Inside of having the code automatically execute when a browser it loaded, we'll create a button that initiates the functionality only after a visitor clicks on it. In order to do this we'll following these steps: 1) add jQuery 2) add $(document).ready(function() to the script 3) create a function with our if/else code 4) create a button 5) have jQuery execute the function once the button is clicked Source Code: http://dragosbogdan.net/html5/basic-geolocation Additional Resources: http://dev.w3.org/geo/api/spec-source.html
Views: 1268 Code Cascade
(35/35) Creating a Style for Printed Pages
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: 2615 Code Cascade
Introduction to Using CodePen.io - Part 3
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: 3650 Code Cascade
INTRO to VARIABLES - Super Simple Javascript/jQuery Tutorials
This video covers the ABSOLUTE BASICS of declaring variables in Javascript. JS code from video: var myPayCheck = 1000000; var myName = "Dragos Bogdan"; alert(myPayCheck+myPayCheck); Additional Resources: http://en.wikipedia.org/wiki/Variable_(computer_science)
Views: 2186 Code Cascade
(23/35) CSS Inheritance
HTML elements will inherit CSS attributes from their parent container. This is known as CSS inheritance and it is a fundamental concept to understand for CSS development.
Views: 510 Code Cascade
(03/11) HTML Redirect - CSS Online - Contact Form Website
Explains HTML redirects and how to implement it on your webpage.
Views: 917 Code Cascade
(11/11) Easy Ems to Pixels with 62.5% Font Sizing - Contact Form Website
Convert absolute fonts sizes to relative sizes the easy way with this common CSS typography trick. Since most modern browsers default to a 16 pixel font size, declaring a 62.5% CSS font sizing attribute for the body changes this value to 10 pixels (16 x .625 = 10). The result is that 1em=10px, 1.5em=15px, etc.
Views: 812 Code Cascade
(17/36) Making Elements Responsive While Maintaining Proportion
In this video we make our page elements respond to the browser's width by defining a percentage based width for our parent container, video and image element. Using the height:auto attribute, we allow the elements to be stretched relative to the user's browser while maintaining the proper dimensions for the image. Then we define a pixel-based max-width to our inherently unresponsive elements to make sure that they are not stretch behind their native dimensions, distorting their quality.
Views: 501 Code Cascade
(13/27) - Introduction to the Wikipedia API - TDI Project
This video provides an overview of accessing the Wikipedia API to pull information from Wikipedia in to your webpage. The article discussing the technique is listed here: http://www.bauer-power.net/2010/09/use-jquery-to-add-wikipedia-content-to.html
Views: 4354 Code Cascade
ADDING PARAMETERS to a FUNCTION - Super Simple Javascript/jQuery Tutorials
This video covers the ABSOLUTE BASICS of adding parameter to your own functions in Javascript. JS code in video: function matingCall(you,me) { alert("Hello " + you + " is it me you're looking for?"); alert("NO " + me + "!"); } onclick="matingCall('Devon', 'Dragos')"
Views: 2072 Code Cascade
(9/36) Adding Outside Content the Right Way via Blockquote
Since the webpage contains content that was created by an outside source, it's important on to present that information as though it were your own. HTML's block element along with the cite attribute allows you to embed the content while semantically presenting as NOT your own. Kind in mind that when you have a multi-paragraph quote, you can nest multiple paragraph elements within a parent block quote. http://css-tricks.com/blockquote-bulge/
Views: 292 Code Cascade
(43/44) Positioning the Background Image for the CSS Image Sprites
In this video I show how to use the background-position CSS attribute to position the background image to display different graphics in each individual cell.
Views: 1525 Code Cascade
(15/19) Media Querie Review - Mobile First Responsive Design
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: 306 Code Cascade
(5/10) Using Mustache.js to Template JSON to HTML - Graphing Data with HTML5 Animation
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: 4440 Code Cascade
(1/6) - Introduction to Geolocation Project - HTML5 Geolocation
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: 2422 Code Cascade
Introduction to HTML5 Canvas Animation - What's It All About?
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: 29231 Code Cascade
(15/15) Adding Dynamic Facebook Like Button on Search Results
Using an iframe, in this video we'll add dynamic Like buttons that connect to the shared Facebook element. Additional Resources: https://developers.facebook.com/ http://developers.facebook.com/docs/guides/web/
Views: 881 Code Cascade
(6/41) IE and DOCTYPE Declaration to Fix Positioning
Doing things "the right way" is important not just because it's the "right" way, but because the implications of taking shortcuts can cause unintended results! In this video you will see how a missing DOCTYPE declaration can affect your page's layout.
Views: 490 Code Cascade
(37/44) Equal Height Columns to the ALA Holy Grail Layout
This video explains how to implement equal height columns to the Holy Grail Layout as described by A List Apart. Article can be found here: http://www.alistapart.com/articles/holygrail
Views: 688 Code Cascade