Videos uploaded by user “Steve Griffith”
JavaScript Array forEach Method
There is a fairly new method which has been added to the Array object in JavaScript. It is known as the forEach( ) method. It will call a function once for each element in the array. The function will have direct access to the array element, the index number, and the entire array.
Views: 23602 Steve Griffith
JavaScript Array map method
All Arrays in JavaScript have a map method which allows us to loop through every element in the original array, perform some action and then generate a new Array based on our actions. The map method has very similar syntax to the forEach method. https://www.youtube.com/watch?v=159EAISAxwg The primary difference is that the map function needs a return statement in order to create the new Array.
Views: 9546 Steve Griffith
CSS position sticky
The CSS position property has been around since the start of CSS. In the beginning it only had 3 values - static, absolute, and relative. Then in CSS 2 they added position fixed, which was great for menus, media players, and advertisements. In CSS 3, we now have the new value sticky. Code GIST: https://gist.github.com/prof3ssorSt3v3/98fb4d2d731815192f0c23c03cb75dcb Basics of CSS Position property : https://www.youtube.com/watch?v=hYJTyff1JzM
Views: 6062 Steve Griffith
Understanding the CSS Display Property
The CSS display property controls whether elements are inline or block elements, or something else. You can use CSS to change the way any element behaves in its positioning relative to other elements. Code GIST: https://gist.github.com/prof3ssorSt3v3/7d60f07ea61d7fc7bda8e2d2c8726ceb
Views: 6933 Steve Griffith
Get Started with Postman Mock Servers
This video covers the other side of creating APIs - when you are ready to test your client-side calls to an API but the server-side code is not ready yet. Postman allows you to create Mock Servers that you can use to create documentation as well as to generate test data for your client-side AJAX calls. Code GIST: https://gist.github.com/prof3ssorSt3v3/e3c12f131133ba1e2003d1f4a394bb7b First Postman video: https://www.youtube.com/watch?v=t5n07Ybz7yI
Views: 9749 Steve Griffith
Understanding Synchronous vs  Asynchronous JavaScript
Most of what you write in JavaScript is Synchronous procedural code read from top to bottom and executed in the single main thread of the JavaScript process. However, that doesn't mean that JavaScript can't run code in an Asynchronous way. The video discusses the differences and how that can unexpectedly impact the code that you write. Promises Playlist: https://www.youtube.com/watch?v=SmPouEFKOBg&list=PLyuRouwmQCjngZXVn48vYmPK_1yAF-fLw Code GIST: https://gist.github.com/prof3ssorSt3v3/c95822670b6a707dbcf8cf55b2c57160
Views: 18613 Steve Griffith
Object keys, values, and entries methods
This video covers three Object methods - keys( ), values( ) and entries( ). All three methods will create an iterable Array from the Object that you can then use in conjunction with other Array and iterable methods. Code GIST: https://gist.github.com/prof3ssorSt3v3/b3779e85e74ecd8b2ba0dec1e7dd6ae6 MDN Object.keys ref: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys MDN Object.values ref: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/values MDN Object.entries ref: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries
Views: 4378 Steve Griffith
JS Event target versus currentTarget
Whenever you add an event listener to an object in the DOM there are two different but similar properties that you can access. target and currentTarget both refer to an element that is listening for the event. This video explains with examples how these two properties differ. Thanks to Jordan M. for the question that prompted this video. Code GIST: https://gist.github.com/prof3ssorSt3v3/14d3aa4d187de8a1da073c931a66d702
Views: 5688 Steve Griffith
Intro to JavaScript Symbols
ES6 introduced a new type of Primitive value - Symbols. This tutorial covers what exactly Symbols are and how you can manage them. Code GIST: https://gist.github.com/prof3ssorSt3v3/c84cdc27b2cea971b313c1b0a8c8fb2d
Views: 2110 Steve Griffith
The Basics of Using Postman for API Testing
Postman is a great tool for testing APIs. Wether you are writing the client-side or server-side of an API, use Postman to test that your API is accepting and responding with the appropriate Headers, Methods, and Data. https://www.getpostman.com/ You can download and install the Postman application directly on Windows, OSX and Linux OR you can install and use the Chrome Extension version.
Views: 242287 Steve Griffith
Managing Environmental (ENV) variables on Mac OSX
This video covers how you can create temporary ENVIRONMENTAL variables in the terminal as well as how you can use the .bash_profile file to create permanent ENV variables. Also covered is how to open the .bash_profile file in the editor of your choice. Also how to use ENV variables inside the values of other ENV variables.
Views: 7101 Steve Griffith
JavaScript for..in Loops
Another common type of loop in JavaScript is the for..in loop. When working with Arrays the for loop is the most common type of loop. When working with Objects, the for..in loop is usually the best choice.
Views: 2461 Steve Griffith
Iterable vs Enumerable in JavaScript
Iterable and Enumerable are different things in JavaScript. When you add properties to an object they can be defined as enumerable or not. Some object types like Arrays, Strings, Maps, Sets, and NodeLists also have Iterators which are objects that let you access certain values from the object. This video discusses the difference between the two and how the for...in and for...of loops take advantage of the difference.
Views: 2190 Steve Griffith
Content Security Policy meta tags
To improve the security of your websites and hybrid mobile apps you should always include a content-security-policy meta tag. This video covers the different possible values that you can include as the content of your meta tag. Code GIST: https://gist.github.com/prof3ssorSt3v3/a28a0b105225954b0505b231128c5b84
Views: 3254 Steve Griffith
AngularJS using $broadcast, $emit, and $on
AngularJS version 1.x Using named views, nested views, and the built-in $broadcast, $emit, and $on methods to pass data around inside of an Angular JS application.
Views: 7382 Steve Griffith
CSS Clearfix
There is an old CSS technique called "clearfix". This was a technique used to solve the problem where an element that is floated has no height. If you want the content following the floated items to always sit below the floated elements then you could either add some CSS to the following element or use the clearfix technique. Code GIST: https://gist.github.com/prof3ssorSt3v3/e99bd761becbde99a0c0b9cf5f38b800
Views: 1135 Steve Griffith
CSS Layouts - Flexbox vs Grid vs Float
This tutorial discusses the differences and similarities between using CSS Flexbox, CSS Grids, and CSS Floats for building layouts. Live Codepen sample: https://codepen.io/mad-d/pen/pxrpKJ?editors=1100
Views: 2206 Steve Griffith
Intro to Mobile App Development with Cordova 7
Apache Cordova is a fantastic framework for building mobile apps with HTML, CSS, and JavaScript. Version 7 has recently been released with support for using package.json to manage platforms, plugins, and the build process. CORDOVA video playlist - https://www.youtube.com/watch?v=CDY1fRZycGk&list=PLyuRouwmQCjkLnfGRHMosenaxPq9PqH0n CORDOVA CHEATSHEET - https://codepen.io/mad-d/pen/OPPyOw Apache Cordova - http://cordova.apache.org/ Adobe PhoneGap - https://phonegap.com/ NodeJS - https://nodejs.org/en/
Views: 86454 Steve Griffith
JavaScript Object create method
When you want to create a new Object and have it inherit properties from another Object or series of prototype linked objects then Object.create( ) is the thing you need. Code GIST: https://gist.github.com/prof3ssorSt3v3/80210a736bf2f0cf799afd7488e1d099 Object.assign method video: https://www.youtube.com/watch?v=UkGsRyGeI2g
Views: 1867 Steve Griffith
Intro to Async and Await
A new feature added in ES6 was the ability to convert a function into a Promise by adding the keyword async in front of it. This also allowed us to use the keyword await to pause the function and wait for the result of some Asynchronous code. Code GIST: https://gist.github.com/prof3ssorSt3v3/caffa5a40d1f68c7182bf44610aed3e4
Views: 791 Steve Griffith
Intro to Typed Arrays in JavaScript
Typed Arrays are an efficient way to store arrays of numbers that are of the same type - 8-bit integer, unsigned 16-bit integers, 32-bit floats, etc. This tutorial explains the basic idea behind them and provides a very basic code sample on how to create one and access it's values. The code gist includes links to the MDN documentation pages for all the main types and objects discussed. Code GIST: https://gist.github.com/prof3ssorSt3v3/8f879e711aee27d00cbc89d7c89f6668
Views: 1249 Steve Griffith
ES5 Custom Object Methods, Getters, and Setters
There is a new shorter syntax for adding methods and properties to Objects in ES6. This video covers that new syntax as well as how you can add getter and setter methods for your object properties. Code GIST: https://gist.github.com/prof3ssorSt3v3/83e87325cb9775cd9a5030c2f244abf4
Views: 3373 Steve Griffith
CSS min-width, max-width, and width
This tutorial explains the differences between the min-width, max-width, width, min-height, max-height, and height properties in CSS. Code GIST: https://gist.github.com/prof3ssorSt3v3/e6b8440ad36093ccc831ecf88bb9e57f
Views: 2017 Steve Griffith
JS Touch Events on Mobile Devices
Beyond Mouse Events we have Touch events on mobile devices. Unfortunately, there is NO tap, doubletap, swipe, swipeleft, swiperight, pan, panleft, panright, rotate, pinch, or zoom events. We DO have touchstart, touchend, touchcancel, and touchmove. These events give us lots of information about where the touches are taking place. We can use this information to write functions that will mimic those other events. Code GIST: https://gist.github.com/prof3ssorSt3v3/946bf0ce9c8544e7795ce9962975d2f6
Views: 11533 Steve Griffith
JavaScript Nested Loops with Arrays and Objects
How to use nested loops to access all the elements and properties inside multi-dimensional Arrays and Objects. These are the skills you need to be able to properly access data inside. Code GIST: https://gist.github.com/prof3ssorSt3v3/203f8887ce15e558ffda9abe50bfb2a7 Any questions, please ask below.
Views: 20849 Steve Griffith
Getting Started with Babel
Want to write JavaScript with the coolest latest features but you need to keep your websites backward compatible? Babel is the answer. This tutorial shows you everything you need to get started with Babel. GIST with all the commands used in the video and the links - https://gist.github.com/prof3ssorSt3v3/c5fc4a1790645f1db97c3f167d19db42
Views: 2164 Steve Griffith
HTML5 JavaScript Web Storage using localStorage and sessionStorage
What is the difference between localStorage and sessionStorage? How can I save complex objects and arrays in localStorage if all it will hold are Strings? How to use the JSON object. Code GIST: https://gist.github.com/prof3ssorSt3v3/ff50d41496473cfc7755dd747578462f MDN reference: https://developer.mozilla.org/en-US/docs/Web/API/Storage
Views: 11739 Steve Griffith
ES6 Iterator & Generator Fundamentals
This tutorial covers all the basics of how iterators and generators work. The connection with for...of loops is explained. How to use built-in iterators is demonstrated. How to build custom iterators for objects is explained and demonstrated. Code GIST: https://gist.github.com/prof3ssorSt3v3/ec8fe7f28ecaa94bef793709d1b83b2f Iterables vs Enumerables video: https://www.youtube.com/watch?v=HZjvoftRvGE
Views: 1862 Steve Griffith
Finding HTML Elements
How to use JavaScript to locate specific HTML Elements inside your webpage. Some useful references NodeList - https://developer.mozilla.org/en-US/docs/Web/API/NodeList querySelector - https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector querySelectorAll - https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll getElementById - https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById textContent - https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent
Views: 1132 Steve Griffith
Resolving CORS AJAX fetch problems
Trying to make an AJAX call and fetch data from your web server but you keep getting CORS issues? Keep getting Access-Control-Allow-Origin errors in the browser console? This video explains how to resolve those problems by adding an Access-Control-Allow-Origin header through your Apache .htaccess file. HTML/JS Code GIST: https://gist.github.com/prof3ssorSt3v3/1a77ea13d4c7a278061adf6f89bf1e51 .htaccess Code GIST: https://gist.github.com/prof3ssorSt3v3/6bff66af31611960107666ac7aba1d69 AJAX Fetch playlist: https://www.youtube.com/watch?v=7EKebb4VUYQ&list=PLyuRouwmQCjkWu63mHksI9EA4fN-vwGs7
Views: 5973 Steve Griffith
JavaScript Promise race method
Similar to the JavaScript Promise.all( ) syntax, the Promise.race( ) method allows you to provide a series of Promises and only work with the result of the first one to Resolve. Code GIST: https://gist.github.com/prof3ssorSt3v3/c4eea8742fd3a082d1e119b30acf5be6 Basic Promise video: https://www.youtube.com/watch?v=SmPouEFKOBg setTimeout video: https://www.youtube.com/watch?v=0VVJSvlUgtg Promise.all( ) video: https://www.youtube.com/watch?v=0jcEluMNy5A MDN Promise.race( ) reference page: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/race
Views: 1414 Steve Griffith
JavaScript Promises all Method
How to use the JavaScript Promise.all( ) method to handle multiple simultaneous Promises. For example, multiple AJAX calls can be made using the fetch( ) method, each of which will return a Promise. Code GIST: https://gist.github.com/prof3ssorSt3v3/a808cb3136c7ccb94104905296930370 MDN Promise.all reference: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all Basic Promises video: https://www.youtube.com/watch?v=SmPouEFKOBg Promise.race( ) video: https://www.youtube.com/watch?v=1cFl7WQDYYo
Views: 3865 Steve Griffith
Using Object assign( )  to Copy or Merge Objects
An efficient way to do a shallow copy of an Object or merge multiple objects is to use the Object.assign method. The copying will be a shallow copy which means that it does not copy the prototype chain of the source objects. Code Gist: https://gist.github.com/prof3ssorSt3v3/22b080dcef57dc404184316b95ad0b8c MDN reference: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign
Views: 2020 Steve Griffith
Learning GitHub - Gists
This video is the third video in the series on Learning GitHub. It covers what Gists are and how you can create and use them. Code GIST: https://gist.github.com/prof3ssorSt3v3/5b8f2beb23aef85770ed1577e7418c32
Views: 1134 Steve Griffith
Array from Method
JavaScript has an Array method called from( ) which will allow us to quickly and easily create a shallow copy of an Array. Code GIST: https://gist.github.com/prof3ssorSt3v3/24f55de9cd39f65620cec9846f0a6153
Views: 634 Steve Griffith
JavaScript Array reduce method
How to use the JavaScript Array reduce method. Similar to the map, filter, and forEach methods in how it is written, the main difference with this method is that it wants to return a single value that represents some aspect of the values in the original Array. Code Gist: https://gist.github.com/prof3ssorSt3v3/01b880467abc7e0ac2d02bfdfba6e1e6 MDN reference: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce
Views: 2318 Steve Griffith
Fetch in Under Five
How to use the new ES6 fetch( ) method for AJAX calls in under five minutes. You can use the code gist to follow along. Code GIST: https://gist.github.com/prof3ssorSt3v3/fba962e5ca90e6613a4ad75343b991c2
Views: 683 Steve Griffith
Combining fetch and the Promise all Method
When you use fetch( ) to make your AJAX calls, you will be returned a Promise object. That is why we use then( ) and catch( ) with fetch( ). That means we can use Promise.all( ) and wait for all the data files to be returned before doing anything with any of the data. This video covers the process of how to make your page wait for all the files to be returned. Code GIST: https://gist.github.com/prof3ssorSt3v3/03d8359f126b300e010748819f991b9b
Views: 1592 Steve Griffith
React Native - LifeCycle Methods - Episode 11
This is the 11th video in the Learning React Native Series. This episode focuses on understanding the React Lifecycle Methods and how they impact the construction of your Components and the rendering of your Components. Code GIST: https://gist.github.com/prof3ssorSt3v3/a427feff064ff03a7f42dfd0e3db62c6 LifeCycle Image: http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/ React LifeCycle Reference: https://reactjs.org/docs/react-component.html#the-component-lifecycle
Views: 1221 Steve Griffith
Capture DOM Changes with MutationObservers
MutationObservers allow us a way to track the changes that happen in the DOM based on other code. If you need to trigger functions that run when changes have been made to your webpages then Mutation Observers are what you need. Code GIST: https://gist.github.com/prof3ssorSt3v3/3146ce1a727861edd05dfc6523e969ea
Views: 1636 Steve Griffith
Viewport Meta Tag and Media Queries
The tutorial explains the relationship between the viewport meta tag and your CSS media queries. Demonstrations are shown in a laptop browser as well as a mobile device browser. Code GIST: https://gist.github.com/prof3ssorSt3v3/88254b334b90f3deca7d8cbf4b278b50 More Reading about the ViewPort https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag https://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html
Views: 1002 Steve Griffith
Composition vs Inheritance in JavaScript
This is more of an intermediate topic in JavaScript. Understanding the implications of how you architect your applications will help you down the road as your application becomes more mature and requires updates. Inheritance and Composition are two approaches to designing your Objects to be maintainable. This video focuses on the weakness of Inheritance when your objects start to morph in the future. The examples in this video are built without Classes. They use Object.create and Object.assign to show the more standard JavaScript syntax. Code GIST: https://gist.github.com/prof3ssorSt3v3/14e0432af3add454f59d7ffcc0e18ee4 If you want more information about how to use Object.create( ) or Object.assign( ) watch these: Object.assign: https://www.youtube.com/watch?v=UkGsRyGeI2g Object.create: https://www.youtube.com/watch?v=qqyZn8X9M3I
Views: 2930 Steve Griffith
Truthy & Falsy Values in JavaScript
Booleans are TRUE and FALSE. That's a simple concept. But what other things would be considered "Falsy"? Are there other things that would never return true in an if statement. Code GIST: https://gist.github.com/prof3ssorSt3v3/8acd2837126f9c68231b0bb014982620 MDN Falsy reference: https://developer.mozilla.org/en-US/docs/Glossary/Falsy
Views: 1153 Steve Griffith
ES6 JavaScript Arrow Functions
Examining the differences between standard JavaScript functions and the new ES6 Arrow functions. Basically a condensed and efficient way to write functions under certain conditions. Arrow functions are well suited to be used for callback functions. Code Gist: https://gist.github.com/prof3ssorSt3v3/36d4e5c84616dfbd9e5bd27b514fd06e MDN reference: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions
Views: 2295 Steve Griffith
React Router - Link vs NavLink - Episode 16
This video discusses the difference between using Link and NavLink inside of React Router. There are a couple other attributes that you can add into NavLink as well, which are not discussed in this video. You can find them at the link below. Official documentation - https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/docs/api/NavLink.md
Views: 1156 Steve Griffith
Pseudo-Classes vs Pseudo-Elements in CSS
In CSS there are Pseudo-Classes as well as Pseudo-Elements. The difference between them is whether or not the content you want to style is actually an existing tag/element. This video talks about all the different available pseudo classes and elements with examples. Code GIST: https://gist.github.com/prof3ssorSt3v3/cf602011d29bef5002959efc54a37b28
Views: 1298 Steve Griffith
Private Variables in JavaScript
Many programming languages have the concept of public and private methods and properties. Private methods and properties are ones that cannot be seen or accessed from outside their containing class or file. While JavaScript does not officially have access modifiers that let you mark something as public or private there is a way that we can create Private variables and methods. That is the topic for this video. Code GIST: https://gist.github.com/prof3ssorSt3v3/83fb4270f6ac6d39f53dfb9be6e5f6da IIFE video: https://www.youtube.com/watch?v=Xd7zgPFwVX8
Views: 1743 Steve Griffith
Nodes Versus Elements in the DOM
When you are using JavaScript to traverse or manipulate the DOM it is very important to understand the difference between Nodes and Elements. There are many methods available in JavaScript which can fetch lists or individual Elements or Nodes. You need to know which one you are getting so you can handle it appropriately. The Node Types 1 - Element Node 3 - Text Node 8 - Comment Nodes 9 - Document Node 10 - Document Type Node 11 - Document Fragment Node
Views: 2883 Steve Griffith
JavaScript IIFE (Immediately Invoked Function Expressions)
A brief explanation about Immediately Invoked Function Expressions (IIFE). The video also discusses the difference between function declarations and function expressions and a limited explanation of how you could use an IIFE.
Views: 954 Steve Griffith
Creating and Dispatching Custom JS Events
Did you know that, even though the browser comes with a long list of built-in events, you can create your own custom events and have them dispatched whenever you want? Code GIST: https://gist.github.com/prof3ssorSt3v3/c44404e79d3421723c2a192b0049dc0a
Views: 3480 Steve Griffith