Web Development Frameworks

alan xie: hi, everyone. my name's alan xie, andtoday i'm going to be giving a cs50 seminar on meteor and react. we're also going to talkabout a lot of other things that are related to these topics. but before i get started, ijust wanted to link everyone to a github repository. so if you go to thislink and copy it down, this is going to be the linkto all of the source code

that we're going to be talkingabout in today's presentation. so while everyone'sgetting set up with that, let me just give you a brief explanationof what meteor and react are, and why they're reallyinteresting to use, especially for beginners, whenit comes to building a web application in javascript. meteor is a full stack frameworkthat allows you to rapidly prototype things straight out of the box becauseit takes so many different libraries and other frameworks and linksthem together in a way that

allows the developer tofocus more on building the actual code of your applicationrather than the framework and structure of the application template. and what that means is, you mightthink a regular application, if you were to build it, if you wantedto build in some kind of real time chat communication or some other type oflinkage between the client, which is what a user would see,and the server, which is where you run all of your operations,it would take a lot of effort to do that in a different framework.

but in meteor, a lot of these thingsare built straight out of the box. react is another javascript frameworkand it's developed by facebook. and react is usable witha lot of other frameworks, like meteor, mean, otherthings you may have heard of. and react is more of a paradigm thanit is an actual library or framework. and what that means is, reactoperates in a certain way by abstracting the functionality in yourapplication into individual components. and so if you had anapplication where you wanted to render somesort of information,

you would abstract that particulargraph into one component and that would simply be onemodule out of the other components in your application. when the data passedto that graph changes, react is smart enough to knowthat that graph should re-render or that component shouldre-render, and as a result your application isreactive or responsive, and is able to change itself giventhis type of new information. so, hopefully everyone has gottenthat github repository ready.

if you look at the readmeon that repository, it will have instructionsas to how to get set up. and while people get setup, i'm also going to dive a little deeper into what thesetechnologies are and how they operate. the final piece of the puzzle,i mentioned react and meteor, is going to be mongodb. mongodb is a relatively newnon-relational database. and what that means is that it doesn'tadhere to the normal row/column tabular format that you would expect froma traditional database like sql.

and it gives us a lot more robustnessin being able to store our data, because we can store datain a hierarchical manner. we can have one fieldthat then has subfields, and then those subfields canhave even more subfields. and this would makea lot of sense for us if we're trying to store data in a waythat is hierarchical or otherwise makes more logical sense to storein a non-relational format. mongodb might not be the bestsolution for you, however. and there's also someother caveats you might

want to consider when itcomes to meteor and react. the advantages, as i'vementioned, are that you can build fast and deploy fast. but there are a few caveats onthe scale of these technologies. the first thing is thatmeteor as a framework is usually overkill for whatyou might be trying to build. what does that mean? well, i mentioned meteor has all ofthese packages that come out of the box and has all of thisfunctionality built in.

if you want to build a realtime chat application where something that you say automaticallygets sent to someone else, there's a lot of linkingbehind the scenes that needs to get done for that to happen. and meteor allows you todo that relatively easily. but if you're justtrying to build a blog, or you're trying to build anotherstatic web page that just displays some sort of data, thenmaybe meteor is overkill because you'll have too manypackages running in the background

and you'll have a lotof inefficiencies when it comes to deploying your application. mongodb might also notbe right in the sense that non-relational structures likemongodb, which are hierarchical, are always going to be more inefficientthan the relational databases like sql when you're looking to makequeries on large amounts of data. and if you have millions and millionsof rows of data about say, movies, you might be more interested in tryingto store that data in a sql database. so now that we've hopefully gotten anintroduction to these technologies,

we're going to set up our actual codebase that we downloaded from github. luckily for us, meteorautomatically installs mongodb. and we can install reactas a bunch of libraries via the meteor or node packagemanagers at a later step. we can also install otherlibraries like jquery and d3, which we can use directly in ourmeteor application without much fuss. this looks like a typical meteoror node package manager command. don't actually runthese, but this is just an example of what you would typein to install a particular package.

so the first line, meteor npm installdash dash save react react-dom would install via thenode package manager, npm, the node packagesreact and react-dom, which are the base packagesfor react that we're going to want to use in our application. meteor add is the syntax forusing the meteor package manager, and all of the meteorpackages are stored online on a website called atmosphere. and when we add meteor packages,we identify the repository name--

in this case, mizzao-- and the actualpackage name, which in this case is jquery-ui. and if we type thisinto the command line at the directory whereour meteor project exists, we'll install this into our application. the meteor compiler will makesure that all of the linkages are made appropriately and ourapplication will rebuild itself and automatically reload in the browserwhere we currently have it running. and in this presentation, we'llbe running it on localhost 3000.

so if you type that into yourbrowser, it would be localhost:3000. well, we'll get there in a second. if you've downloaded theapplication from github, you'll see a file directorytree that looks like this. and at first, it's goingto look very daunting because if you wanted tobuild a very basic website, all you would reallyneed is one html file, one javascript file ifyou're feeling adventurous, maybe a css file todo some basic styling.

here, we've got a lotof different directories that span from clientto server to imports and it's very confusing because someof these even have the same name. so we'll just go throughvery briefly and try to figure out what's going onin each one of these folders. at the root directory,we have a client folder that's simply a boilerplatetemplate for the basic html for what your application will look like. you're not actually going to writeyour application logic in there,

but that's what's going to be actuallydisplayed initially in your browser before you import additional componentsor additional javascript functionality that lives in the startup folder. and we'll see that the client will makea call to imports/startup/client, which is a folder elsewhere in the tree, whichhas some startup logic that will run on the client side of the application. i mentioned earlier thatthere is a client side and there is a server sidewhen you create an application. and what that means ina more granular level

is that there is some kindof logic that you want to happen only on the side of the user. so on the user's computer whois using your application. but there's other logicthat you might only want to happen on your server side. if you're running sensitive dataor you're managing passwords or you have api keys thatare secret that you don't want to reveal toanyone, those are things you would want to operateon the server side.

and these are concepts that aregoing to be more useful to us as we move forward. we see here that there'salso a folder called dump, and this is simply a dump folder that'screated by the mongodump command, which i'll explain in a second. but essentially, this is what we getwhen we back up a mongodb database. and meteor as a web applicationruns with mongodb built in. and so when we want to backup our meteor database, we run mongodump in the command line,and we get a dump folder like this.

we can use this dump folderto then restore the database when we run the application. and that way in an instance like this,where we're sharing application source code files but we're notactually sharing the database, all the viewers at home canuse mongorestore to restore the database from this dumpand make the application work. the main bulk of your application isgoing to be in the imports folder. the imports folder hasseveral main components. there's the api folder, thestartup folder, and the ui folder.

what's most important to focus on arethe startup folder and the ui folder. the startup folder contains informationthat gets called by the client and by the server upon startup. so if you have information thatneeds to be figured out, such as you'll see accountsconfig.js, whichloads our account login management system for this application,you would want to make sure that lives in the client folder. if you have security measuresthat you want to take place, such as rate limiting thenumber of calls or requests

someone can make onyour application, that might live in your server folder,which has a security.js file. the ui folder is the mostimportant, because that's where each of the react componentsthat we create will live. we have an app.jsxfile in layouts, which is going to be ourmain body template that gets rendered into that main.html in theclient folder that we saw at the top. and then we have each one ofthese miniature components which performs one specificfunction and is rendered inside

of the layout app.jsx. so we have here actor_revchart,which in this example is going to be a graph thatvisualizes the historical revenue of an actor, given that they'rein our mongodb database. and that component is goingto be rendered in our app.jsx, and it's going to be rendereddynamically such that when we get different informationfrom the user about which actor they want to visualize,we'll be able to get new information into actor_revchart, andit will change itself when we call it.

you might be confused why someof these files have a .js suffix, and some of these fileshave a .jsx file extension. and the reason for that is thatwhen you use react components, when you use react in general, you haveto make sure that the file is .jsx. and the reason for that is that react isa very special form of javascript that allows you to dynamicallyrender and create html from within the javascript file. and as a result, we need to specifythat extension so that we know that it's not just plain javascript.

now let's get started with some actualwork on making our application run. assuming that you've downloadedthe zip from the github repository, one of the instructionson that repository is to potentially downloadsoftware called robomongo. robomongo is a graphicuser interface that allows you to interactwith the mongodb database instance that runs every time ameteor application is created. so what that means is when you downloadrobomongo, which is at this link, you can have an applicationthat looks like this

and that is able to show you in yourdatabase what types of information that you have. so you can see here in the dump thati've provided in the github repository, we're able to see that we have twoentries in this database of people. and in each one of these entries, wesee that they have name, a profession, and a list of films. and so the actor chris evans,we have a list of films that he's been in ranging from captainamerica all the way to snowpiercer. and we also have here annakendrick and a list of films

that she's been in, ranging frompitch perfect to scott pilgrim. and we'll see that this information isgoing to be in our meteor application, and when we query our applicationto ask for a visualization of one of these actors, this is the informationthat gets pulled in by meteor and then rendered in actor_revchart. so to set up robomongo,what we want to do is we want to downloadthe application, and then when you click new onrobomongo, you'll see that you have the option to createa new connection to a new database.

now i mentioned that meteorruns mongodb by itself, and i mentioned earlier that meteorruns on port 3000 of your localhost. and what that means is yourcomputer has a local server that it can run applications on. and it has a different number ofports through which that can run. meteor runs on localhost port 3000,and meteor's version of robomongo runs on port 3001. so you always will know when yourun meteor in the command line that your database exists at this port.

so in robomongo, whatwe can do is we can create a new connectionvia this create button, and we can call it whatever we want. and we want it to point atthe address localhost 3001. and we click save and then we're ableto see something that looks like this. pay attention to the sidebar wherewe see that we have a database called meteor, and we havea number of collections, which are essentiallysub-databases within meteor that are organized based on the typeof information in each collection.

so we have one collectionwith people that we just saw, with chris evans and anna kendrick. we have one collectioncalled titles, which has information about all of themovies that these individuals are in. and we have another collectioncalled users, which actually stores user account login information. so what we can do if we followthe instructions on github after installing meteor, either viaos x or windows, what we need to do is first change to the directoryof cs50seminar-meteor-react, which

is the folder that you've downloaded. and you want to copy and paste thisset of code into your terminal. and what this does is it installsall of the react-based dependencies that you'll need for thisparticular repository to work and for your meteor applicationto have all of the functionality that we want relating to react. so as you can see, i typedit in here, i hit enter, and it installed this automatically. and now that it's finished installing,what i can do is run meteor.

and what you'll seehappen on your computer is that if you have meteor open alreadyon port 3000, it may give you an error and say that you are running two copiesof meteor you're at the same time. so you can specify meteor to run on adifferent port simply with the command, meteor--port3005, to pickan arbitrary port number. and note that if you dospecify another arbitrary port, that your database may end upliving on that port number plus 1. so here, if i specified port3007, what actually happens is my mongodb instance isstarted by meteor, and it runs,

it will run on port 3008. so, running a meteor application isas simple as typing in that command. and once you've typed in thatcommand, meteor will in the terminal, build all of the dependenciesthat are necessary, including the new librariesthat we installed previously, and as soon as it is done successfullycompiling your application and linking all of the new libraries orpackages that you may have installed, it will say something down here thatsays, app running on localhost colon the port number that yourapplication is running on.

so while that's running, we'll lookback at the github instructions and we'll see one final line. we'll see here that weneed to run mongorestore, as i mentioned earlier, also in thecommand line in this same directory, in order to make sure thatour meteor application has all of the data associated with itwhen you downloaded the application. on github, unfortunately, the meteorapplication that you downloaded doesn't come with afully populated database, because a database is essentiallysomething that has to run on a server.

and the informationon each database needs to be communicated back and forthbetween the individual people accessing it, or the clients. and as a result, the database mustbe saved in that dump directory that i mentioned earlier. and if we copy thiscommand, mongorestore, and we paste that into our terminal,we will be essentially restoring to our database the dump file that hadall of the titles, all of the people, and all of the users associatedwith our application.

and you'll see that this commandspecifically restores it to port 3001. now as we wait for our applicationto start we can run this. and if you've run thiscommand twice, you might get an error that says thatyour collection already exists. now we're assumingthat you're approaching this with a clean installation. but there's always the potentialthat on your version of meteor, that you may have runthis command twice. and so what we want to do is we wantto check in robomongo whether or not

these collections exist. and if they do, and we don'tthink that all of the information has been added correctly, wecan drop these collections, which is the equivalentof deleting our database. and we can re-restore these collectionsback to our database with this command. and now we can see herethat our application is running at localhost 3005. and as a result, wecan modify this command so that we restore to the database,which lives at 3005 plus 1, or 3006.

and now we see a lot of commandsthat have been executed, which took all of theinformation from our database and imported it to the databaseinstance running on that port. and now if we go to localhost3005 where our application lives, we'll see the meteor applicationthat we've downloaded. now, there's a couple of thingsthat are interesting for us to note. we can sign in with a default userlogin package that currently exists and is built into the source code. and you'll see that youcan create an account

or try to sign in with anexisting username and password. the database that i gave youshouldn't have any users in it, so what you want to dois create an account. and if i create an account with theusername alanx, password is test, i can create an account. it'll get mad at me ifmy password is too short. and now i have an account that'sauthenticated with this application. i can then sign out of myaccount and sign back in. and you'll notice that when i'msigned in and when i'm signed out,

i see two different things. and that's a featurethat in meteor, we simply can check whether or nota user is authenticated. and if they are, we canshow them different things. so in this version of theapplication we wanted to build, we wanted to visualizeinformation relating to a particular actor or actress. in particular, we wantedto visualize something about anna kendrick or chris pine.

we'll see here that if wetype in anna kendrick's name, we get a graph of herrevenue for all of the movies that she's been in overthe past six years. if we type in chris evans, we'llsee that the graph re-renders and we can view his filmography over aslightly longer period of time because he's made more moviesover the past couple of decades. and we'll see that this isa feature of that reactivity that i was mentioningearlier where we can pass new information into thiscomponent, which is the revenue chart.

and the revenue chart callsour database where we imported all of that title actor data just now. and then after calling ourdatabase, it receives some data that then we visualizeusing the d3 library, which is how we made this graph. so i want to go back to thepowerpoint for a second. and i want to draw yourattention to some code snippets that i've pulled out ofthe actual source code. i've bracketed all of the importantbits in a yellow rectangle

for your reference. so what we're looking athere is actually html, but it lives in a javascriptx file in app.jsx. and you'll remember whati mentioned earlier, that jsx is versatile inthat it can dynamically render html using javascript. so we'll notice that in the top ofthe first of the three yellow boxes, will see that there is aspecial type of comment. if you're familiar withcommenting in other languages,

you'll notice that this is unlike the// commenting that you might get in c or in javascript. but here, in order to make surethat your comments register, you have to wrap the /* commenting thatyou might see in html around side other curly brackets in order forthem to be properly formatted. you'll also notice in thesecond box that we have something called accounts-ui wrapper. and it's simply in these brackets,and there's a slash at the end. and it's clearly nota normal html element.

it's not a div, it's not aspan, it's not a paragraph. so what is it? an accounts-ui wrapperis actually something that we've defined in a separatefile called accounts-ui wrapper. and when we define areact component, all we have to do to call it or renderit inside of our main layout is to actually just call it the sameway we would a normal html element. so you'll notice that in thisslide, the second box shows a react component calledactor_revchart, and that's

the same acto_revchart from theactor revenue chart component. and all we have to do is simplycall it the same way that we would another html element. so one thing that'sinteresting is if you look at the comment on this page that'sright above the first yellow rectangle, we'll see another curly bracket. we'll see something calledthis.state.readytoviz and a question mark. and the code here isactually a ternary condition

that we use to conditionally render aparticular piece of our code, based on whether or not certaincriteria have been met or whether a certainstate has been achieved. so we have here a statecalled readytoviz. and what that means is,elsewhere in our code, we've kept track of whether or notwe've received the data from the mongodb database and whether or not we'veformatted it in a particular way such that we're ready to generate thegraph that we saw in the application. and if we don't have the datayet, we don't necessarily

want to generate a graph with no data. and so what this says is, ifthis.state.readytoviz is true, then we'll render everythingafter the question mark. but if it's false, if you lookat the bottom of the screen, we'll render everything after the colon. and here, we simply havea null string, which means that if we are not readytoviz,then we simply render nothing. but when we are, we render the graph. and this is the beauty of react, in thatwhen we change the state readytoviz,

react goes through all of thesedifferent types of conditions and re-renders things that aredependent on this particular condition. and as a result, we're able to get newdata passed into this revenue chart component. and we see the graph magicallyupdate with new information. now one thing that'sinteresting to look at here is after revchart has a couple ofwhat looked like input variables going into the actual component. and the way that this worksis we have one input component

called data and anotherinput property called actor. and we can store variablesin session variables, which i'll explain in a second. and we can pass the sessionvariables into this component from this parent component in app.jsx. and we will then render the revenuechart based on the different input property that it receives. so, you can imagine thatelsewhere in our code we have a function that preparesthe data by getting it from mongodb

and then formatting itin a particular way. and when we do that, wecan store that information in a session variable, which we canthen reference from inside of this call to the component viathose curly brackets. we can also store informationin a session variable about who is the actualperson that we're visualizing. and so these are informationthat we pass into this child component via what are called props. and props, or propertiesare essentially things

that we can change based on whatnew information or new state has been achieved elsewhereoutside of this child component. one other thing i wanted to bring toyour attention about how react works is that react has a series of specialfunctions in each component that are run and that relate to thelifecycle of a react component. we talked about state andwe talked about props, but what we also want to talk aboutis actually the mounting and updating of the component itself. and if you look at thegithub readme, on that page

there is a link to thereact life cycle where you can look at this informationin a little bit more detail. but essentially, thereis a function that's defined for every single reactcomponent called componentwillmount. and what that does is it allows you torun some sort of logic on your web app before the actual react componentis mounted onto the page. and here what we want to do is we wantto run something called meteor.call. i'll get to that in a second. but you'll see that just aswe have componentwillmount,

we also have component-did-mount. and component-did-mount isjust as self-explanatory. it's a chunk of code thatruns after your component has been mounted to the dom. and we also have additional functionssuch as shouldcomponentupdate, componentdidupdate, and so on. and so at each stageof the react lifecycle, we're able to run certain logic forour component should we need it. now, going back to meteor.call,this is a very interesting part

of the meteor framework inthat we are able to define things called methods that live onthe server side of our application. and you'll recall what i mentionedabout the distinction between client, which is what the user sees, and server,which is what your application runs. and on the server, we can havea function called get_names, and we can call it via meteor.calland the name of the function that we've defined. and the server function looks like this. it's in a file underimports/startup/server/films.js.

and here we're able to define insomething called meteor.methods, a function calledget_names that simply takes in no arguments but loads ina local csv file of names, presumably actor names, that arein our local project directory. and by running meteor.callget_names, what we're able to do is we're able to conceal all of thelogic in this function get_names onto a server method that the clientwill never see or be able to access. and so you can imagine if we wantedto do some secret stuff here, we could and no onewould be able to know.

and our intellectual propertyor our sensitive information or our secret keys would be saved herewithout anyone being able to see them. and after we callget_names, we have what's called a callback, which is when wecall a function on the server side, it's not going to returna result instantly. and so we can't expect code thathappens underneath meteor.call to happen before the return result of get_names. and so we can pass anotherargument into meteor.call, which is simply an anonymous functionthat has two arguments-- error and res.

and what that means is that ifmeteor.call fails and get_names somehow does not succeed, the result of thaterror will be returned in error. if meteor.call succeeds, the resultof that will be returned in res, or result. and so we'll see here that when we getthe list of names from meteor.call, we process it via res. and then we actually storeit via session variable. and that allows us to accessit in other components or to pass it into othercomponents as props.

now the final piece of the puzzlethat i want to draw your attention to is the actualactor_revchart file itself. so this particular component, as yousaw on the previous slide with app.jsx, is rendered in thatlayout and it's given a set of props that allow it todetermine what particular information it should visualize. so here we have the dataprop and the actor prop. and these are both props thatare required by the component, and they're even specifiedas to the right type of prop.

so if someone tries topass into this component an actor prop that's not a string,this component will get mad at you and it will fail to render. now we'll see that there area couple of specific functions that are defined foractor_revchart on top of the ones that are defined elsewherethat we've seen in the react lifecycle. componentdidmount we've seen before, andthat's standard to the react lifecycle. shouldcomponentupdate is somethingi've mentioned before that's also specific to the react lifecycle.

but we have two of our own functionshere called drawchart and updatechart. and these are defined here as a meansof drawing the actual graph that is this component. and the way that we drawthis graph is using something called d3, which is ajavascript library that allows you to create graphs andversatile visualizations that are interactive and can also bedynamically changed and be reactive, depending on the data that you pass in. so here what we're doing inthe logic of these functions

is initially we draw the chartwhen the component is mounted using the props that we are initiallygiven about who the actor is and what their name is. then, shouldcomponentupdatewhen we get new props, we have to compare thenew props to the old props to make sure that we'regetting a different actor. and if we are, we call updatechart,which then redraws and transitions the original d3 graphinto a new d3 graph. and we'll see a lotof the logic in here,

which i've minimized for your clarity isgoing to be d3-specific graphing logic. so if you're interested ind3 as a visualization library to generate your own graphs, youcan be very hands-on with it. and the code that you woulduse would be something that looks like the code in those functions. so now that we've gone over allof the individual major components of this application, let's go backto the application just for a second and try to abstractsome of those concepts that we talked about into theactual execution of the application.

so if we want to graph annakendrick, what we have here is the user has some inputthat they've passed in. and in this app.jsx, weget that information and we pass that informationinto actor_revchart, which is now conditionallyrendered here based on whether or not it received thecorrect props, which it did. and you can see that ifwe type in something else for an actor that doesn't exist inour database, like leonardo dicaprio, we're not going to get anything.

in fact, we're going to getan error on the back end because this query doesn'tcorrespond to any people that our database recognizes. but if we type inchris evans, then we're able to once again regenerate thegraph and have a new visualization be reactive to the user's response. so before i wrap up, i want to talkabout some of the additional things that you might be able todo with these technologies. as i mentioned at thebeginning, meteor and react

are very useful because of theincredible amount of developer support behind these communities,and also because they're so easy to use out of the box relativeto other javascript full stack and framework solutions where youmight have to do a lot of extra linking or a lot of extra work to make a lot ofthese functions happen by themselves. what you can do on topof meteor and react is to build additional functionalityexclusive to what you're actually trying to work on. and for me, that came in the processof taking that application that we saw,

the demo that we saw, and actuallybuilding out a software as a service platform for film studiosand investors to use as a means of trying to better gaugetheir investments on entertainment properties. and the way that i wasable to do that was to build on that particular demo,which is actually the earliest version of the product thati worked on, and to then extend it with a numberof other technologies that you can use side byside with meteor, react, d3,

mongodb, all the stuff thatwe've talked about today. so jupyter, for one, is avery, very strong and powerful scientific computing and dataanalysis version of python where there is a lot oflibraries that come bundled into the jupyter such as numpy,scipy, pandas, scikit-learn, that allow your average user to,with very limited experience, begin to do very, very sophisticatedand very high-level data processing and machine learning in python. now if you were to analyze moviedata, thousands and thousands

of different movies and the actorsinvolved and the revenues involved, and you performed somesort of machine learning in jupyter, what youcould do next is actually try to take that machine learningand abstract that into a service where you could construct a flaskapi, flask being a mini-framework that is built in python. and you can take all of the machinelearning that you did in jupyter and you can serve thatas an api via flask. and if you remember what i mentionedearlier about meteor.methods

where we can call apis and we can haveserver side logic that the user doesn't see, you can have a meteor applicationsend requests to a flask api. and at a high level, what you can dois have a user submit certain data and then perform sophisticatedmachine learning via the flask api that then returns data backto meteor for the user to see and for the user to getvia a visualization. the final piece of thepuzzle that glues all of this together in a production environmentis aws, or amazon web services, among other web solutionsthat you might use.

for my project development,i was able to use aws to link flask and meteor andmongodb and to appropriately install all of the servers i deployedon aws with all of the libraries that i needed. and then i had the meteorapplication in react in mongodb communicating with flask. and so if we go back to that veryearly first version of the application, something that looked like this. if you take this technology,meteor and react,

and you build on it over thecourse of several months, there's so much out ofthe box that saves you time that within months, what you cango from is this all the way to something that's much more robust andsophisticated like this. and so that's somethingthat you can accomplish using this suite of technologies. and i hope that my talk todaywas informative and useful. and again, if you haveany questions, please feel free to mark them on the githubrepository or send them my way as well.

i'm a teaching fellowon the website for cs50. so i hope everyone had a great timeand that they learned something new.

4 Best WYSIWYG HTML Editor for Bootstrap 3.0 and Jquery

Web Development For Dummies

vsauce, i’m jake and my parents have leftme…home...alone. which is scary because i’m only 8 yearsold but the silver lining is, that being 8, i have an incredibly intuitive understandingof thermal dynamics, mechanical engineering, and physics in general. which is good because there have been a lot of robberies in my neighborhood. so to protect myself i've recreated some of the traps from the movie home alone. now, there have been videos and articles about this before, about how damaging the traps would be. but nobody has recreated them, physically,and tested them on the human body…or in our case, a ballistic dummy.

so we will be testing two traps that alwaysstood out to me as being the most fascinating: the red hot door handle, and paint can tothe face. as a bonus, even though it isn’t a trap,the crowbar to the chest because that just has to be dangerous, that is if you even madeit past those first two. oh…i think i hear the bandits coming towardsthe house, i’m gonna go get ready. hey, we’re the threadbanger bandits andwe are robbing all these empty houses, right corinne? that's right rob. we're gonna knock off this little 8 yearold kid cus it’s not like he has a bunch of intricate traps set up that could seriouslyhurt us.

exactly. corinne, you check the front door and i’lltry the back. now we need to heat up a door handle to sucha, literal, degree that it glows red, becomes incandescent, that is the emission of electromagneticradiation from a hot body that makes it visible. in the film they use an electric bbq lighterplaced on the interior side of the door, and the heat then transfers from the brass knob,through the steel spindle into the exterior knob. one thing to consider before we test: theobject that is holding this hot door handle. the door is metal but the interior of it iswood and foam…so if i had to hypothesis

what’d happen, if we heat the knob closeto 1000â°f, the temperature at which it will glow, then the metal door will start to warpand the foam and wood inside it will combust into flame…which wouldn’t be good. but there’s only one way to know for sure. after 30 minutes the interior door handlegot to around 900 degrees f. the exterior door knob, only about 65 degrees f. it’staking a very long time so to speed things up we are going to use this map gas torchto get things a little bit hotter a little bit more quickly. the exterior door knob only got to about 115degrees f which still wouldn’t be that pleasant

to touch but wouldn’t do that much damage. the interior door knob we got to a total temperatureof 1400 degrees f. which is incredibly hot. to test how badly it would burn instead ofusing a hand we used pork belly, which has similar skin thickness. and held it on the door handle for 3 secondslike in the film. and the burn results were pretty similar tothe movie and pretty severe. but more importantly what did happen whichi thought would, the interior of the door lit on fire. the wood, the foam burned.

the metal right here warped, we could actuallysee some fire coming out of the door knob. over hours you could probably get the exteriordoor knob to heat up not hot enough to glow, to be incandescent. but the interior door knob would get thereover a long enough period of time. let’s move on. and it should be noted that with this goingfor hours the door would most likely, totally light on fire which defeats the purpose becausethe villains could just walk right in. so...ya know. the hot door knob is very similar to the blowtorchto the head trap from the film which my friend

mark rober and i tested over on his channel. and speaking of heads and mark rober, let’sfind out what happens when a full can of paint hits you there. to help explain, the star of my favorite b&w gangster film “angles with filthy physics”, mechanical engineer mark rober. i’m gonna give you to the count of 10 to get yourugly, yella, no good - oh, vsauce! it’s you. let’s talk paint can to the face physics. a standard 1 gallon can of paint has a massof about 13lbs. in the film the can is

dropped from the top of the stairs with thebandits roughly in the middle. this means, as it falls, it gains speed becauseof the conversion of gravitation potential energy to kinetic, which works out to 17 mph. this is the speed of the can as if it werejust released, but you add in a swing before release meaning you have a 13lb paint cancoming towards your head at 20mph. now if we assume your face crumples a bitand stops this paint can in about 3/4 of an inch of travel, that puts the impact forceat 12kn. that is like getting bare knuckle punchedby mike tyson twice at one time. 12kn is 6 times more force than is requiredto break your nose.

then, if we take that force and divide bythe mass of your head that means your head snaps back at 266g’s. that means there is virtually a 100% chanceyou will be knocked out and a 42% chance your skull would actually crack. now where was i? oh yeah! i'm gonna give you 10 seconds to get no good, yella belly, ugly, dirty rotten keester outta here. as mark was saying, your skull cracking is not good. also, because of the way the head is struck,the bandits are likely to suffer an unhealthy dose of whiplash – causing even more damageto the brain. after this trap, your burgling days are most likely over. hey!

he’s at the top of the stairs! i think i need to go to the hospital, my handis pretty burned. get him! time to test the trap! so a paint can to the face would be incredibly devastating...which i feel is an understatement. but luckily for us, threadbangerbandits are very, very tough so this brings us to the last test: the crowbar to the chest. i just need one thing...oh. here it is! ahhhhhhhhh!

why is this happening to me? rob...what are you doing? corinne…don’t move. the crowbars weighs about 5lbs. and is swinging through the air ataround 35 mph it will deliver a total force of 15,000n. about 4.5 times the amount of force neededto break an average human rib. it broke through the skin, 7ribs, and in this test actually punctured a lung and the heart. ok, so after doing this tests, what did we find out? well, the hot door handle would get very, very, very hot give enough time, a very long time.

you'd get 3rd degree burns on your hand and you would probably have to go to a hospital. you wouldn't be able to use this baby for the rest of the night then we get to paint can to the head. which is devastating, really cool, but really devastating. that would be the end of your robbing career and you probably wouldn't walk away from it. but you do, some how, and we get to crowbar to the chest. which not only breaks your ribs but punctures your internal organs. and that's not good and you should really go see a doctor at this point if this happens to you. please this is just a psa from me to you. so could you survive the home alone traps? most likely probably, pretty much, no you couldn't.

which makes me think i should check on rob and corinne... and, as always, thanks for watching.

5 Best Bootstrap Template for Portfolio and Company Profile

Web Development Exercises

today i am fired up because we've got a killerhamstring workout that i want to share with you guys. hamstrings are so important because the majorityof your body's fast-twitch muscle fibers are located in your hamstrings. and on top of that a ton of guys have muscularimbalances when it comes to their lower body. so if your quads are really developed andyour hamstrings aren't very developed, you're going to have muscular imbalances which isgoing to lead to a lot of injuries. back in the day, i played basketball and iwould pull the shit out of my hamstring all the time.

i remember one time my senior year duringbasketball, i pulled it so bad during the season; i couldn't play basketball for threeweeks. i couldn't go to parties, couldn't hang outwith girls, couldn't do anything. i was bed-ridden for three weeks because ididn't prioritize my hamstrings. so this workout is meant to throw on top ofyour existing leg work out or it could be its own individual workout, so i can't stressenough how important hamstrings are, so i'm going to head to the gym and show you guysmy favorite hamstring routine for mass and aesthetics and overall preventing injury. all right guys, we've got the stiff-leg kettlebell deadlift.

what we're going to do here - and you canalso do this with a dumbbell - what you're going to do here is start off on one leg,keep your chest up, and you're going to keep a stiff leg all the way down and you're goingto drive through your heel, back up. get big stretch, back up. i'll show you from the other angle. so i would recommend keeping it out to yourside like this. so that is the stiff-leg kettle bell deadlift. so just make sure you keep a good center ofbalance. try to keep your chest up.

and as you're coming down try not to bendyour knee. and then what you're going to do, you're drivingall through your heels, so you're coming up all through your heel. keep the tension on those hamstrings. getting ready to load up on the smith machine. so this exercise is fairly similar to a stiff-legdeadlift, although you are going to be on the smith machine and what this allows youto do is focus all of the tension, all of your mind-muscle connection directly ontoyour hamstrings and your glutes, as opposed to feeling it a lot in your lower back.

i know on stiff-leg deadlift if you go tooheavy, you tend to feel it a lot in your lower back and it's tough to really channel thatmind-muscle connection right in your hamstrings, this exercise allows you to achieve that. so i wanted to show you guys one more. i went a little bit heavier on this just toshow you the proper form one more time. so your hands are a little inside shoulderwidth apart. and then you're pushing your butt back, you'redriving through your heels. make sure that the weight is coming off ofyour heels and not your toes and once again, so crucial, just channel that mind muscleconnection in your hamstrings.

you should feel 100% of the tension directlyin your hamstrings. try to keep your chest up throughout the movementand you guys will have some killer hamstrings. getting into one of my favorite supersetsof all time. i know starting off it just looks like theprone hamstring curl, and that's exactly what the first part of the superset is. so i like to go fairly heavy right aroundmy 10 to 12 rep max for the first part of the superset, really focusing on squeezingthose hamstrings. then what i'm going to do here is i'm goingto drop the weight to about 40% of what i just did and i don't know what you call this,but it puts a ton of pressure on your hamstrings

in a different angle. we'll call it the - we'll call it the kangaroohamstring superset. as you can see, i don't know how to explainmy form here, but just try this guys, it works so well on focusing on your hamstrings. all right guys, last but not least, we'vegot the hamstring ball curls. this is my favorite hamstring exercise becauseyou get an awesome burnout. i want you guys to go really high rep on this. go completely to failure because it's thelast exercise on the workout. so i remember back when i first started doingthis when i was like 16 - 17, i could only

do 5 or 6 of them, so if you can't do thatmany starting off, don't worry about it. just try to continually improve upon it. so i'm going to go to failure here. hamstrings are pretty warn out right now. so let's see how many i got. what you want to do too, you kind of liftyour body up. so the starting position obviously isn't likethis. so you're going to lift your body up. just try to brace yourself with your upperbody.

i'm starting to slide. this is killer. i'm going to stop there. i got leg day in three days. it's wednesday today. i'm going to do leg day saturday, so i don'twant to kill myself. i think i got 45, so feel free to challengeyourself. let me know in the comments below if you guyscan beat that score. and that is a wrap.

i've got a gorilla that i've had on my backfor the last couple of years and i just want to be 110% transparent with you guys and ijust want to be real and authentic and not hide behind a lie. so a couple of years ago -- first of all iwas like working out in california at the time and i would always see this guy at thegym. this guy was straight out of germany. this guy's name was magnus. and i always see him at the gym. really big, strong dude.

and we get talking one day and we kind ofstarted hanging out. it's funny because we met - he shows me thiscrazy, funny cat video and we just started like talking since then. the guy like loves funny cat videos. but that's neither here nor there. let's get back to the story. so i started hanging out with magnus and westarted working out together and he starts asking me if i'm natural or not, if i've evertaken steroids. i'm like, "no man, i do youtube videos.

i try to teach skinny guys how to bulk upand gain lean muscle mass the right way." and he's like, "yeah, man. i used to try to do it the all-natural wayand i started taking steroids. i get them from my friends in germany. they ship them down." and i was like holy shit, this guy's likeon steroids. he's on this like crazy german steroids. so long story short, i decided to try them. magnus and i would pin out butt cheeks inthe bathroom together and we'd take steroids.

that's when i made some really crazy gains,like i'm up to 195/200 pounds, 8% body fat and without magnus and without the germanneedle, i definitely would not have been able to make it happen. just want to be real with you guys. it's tough for me to say. i'm kidding guys. holy shit, i hope none of you guys believedthat. guys, like you guys in the comments sectionthat think i'm on steroids, i'm not even that big.

i haven't even known what the hell i was doingin the gym up until more than like a couple years ago. i have good aesthetics and i know what musclegroups to develop that makes me look good and look a certain way, but guys i've got17 inch arms, not even 17 inch arms. i'm 195/200 pounds at the very, very moston a good day. i'm almost 6 foot 1, so i'm like 6 foot andone-half inch, almost 200 pounds. my squats under 400 pounds. my bench press is well under 350 pounds. these are not the stats of someone on steroidswho's been working out for ten-plus years.

the thing is guys, my genetics are like afive or a six out of ten. any one of you young guys - if you're 17 or18 and you apply everything i'm telling you in these videos and all of the outside thebox tips we give you guys on the mass-gaining recipes and the really advanced training techniques- you could look like - if you're 17 or 18 right now and you've got average geneticsthere's no reason that you can't look like me by the time you're like 23 - 24. and you guys are so impatient. you guys want to look - you go on instagram- and honestly i blame social media because you go on instagram and you see pictures ofguys who have been training for ten-plus years,

who have a perfect diet, who've trained theirass off and also have some pretty good genetics and a good proportion of them have also takensteroids. and you see guys like - i don't know, likelazar angelov and you see all these big mainstream fitness models on instagram and it makes youwant to get there even quicker. it's like an emotional response, it's likean impulse that you have to social media, but guys, do not fall prey to that bullshit,just stay consistent. there's no shortcuts to any success in life. if you want long-term success in fitness,in business, with banging tons of chicks, put in the fucking work and just stay withit.

stay consistent. focus on incremental improvements each andevery single day. and that's what this shit is all about you'regoing to feel so much better about yourself and you're not going to go through an emotionalrollercoaster when you're taking the shortcut. i just wanted to illustrate my point witha crazy little story about magnus. all right guys, that is a wrap with the hamstringworkout. i'm about to watch some week two nfl action. got my fanduel team queued up, ready to go. hopefully, make some money today.

and i just want to ask you guys, what do youwant to see going forward. what type of content most interests you. just throwing out a few ideas, i have a tonof experience with athlete training. i know in particular how certain nfl playershave trained in the off season. i went to a sports academy back in the day,so maybe showing you guys some nba style or nfl training. do you guys like the crazy 3,000 and 4,000calorie meal videos. if you guys have any questions as far as certainsupplements definitely leave it in the comments below, as well as any type of fad in the fitnessindustry.

like i know we covered a video on intermittentfasting. any type of training style that you guys arecoming across that you want me to go over. so don't be afraid to interact with me inthe comments. i'm going to try to do a really good job ofanswering each and every single one of you guys' questions. let me know what type of videos you want tosee going forward and looking forward to seeing your guys' responses.

New 3 Raspberry PI Creative and Inspiration Febuary 2014

Web Development Examples

okay, let's do a quick demo, remember when we played around on telnet in unit one to, to manipulate web servers directly? i'm going to go ahead and do that here, and we can look at some more http headers. so, if i were to telnet to google.com, you know, port 80, as we've been doing. so, we do our http request to get the front page remember our host header. we see our results, we scroll up to the top of this, we can our our header. so here's the request i made, and here are the headers and here are a couple set cookie

headers. so in this one, this sets a cookie named pref, to this value and it's actually google's doing a very typical google thing, and storing multiple pieces of data in one cookie. so this is the equal sign that's part of the cookie header, and this equal sign is actually part of the cookie value. this is the end of the cookie value here, we've got a semicolon and then we have some extra parameters that we haven't talked about yet. we have an expires time, and this is when the cookie expires. so after this date, april 19th, 2014, this cookie will no longer be

sent and this cookie is relative or relevant to the path slash so you can restrict cookies to specific paths and this cookie is specific to google.com. so this basically means that anybody at google.com will receive this cookie. here is a, another, another cookie this one's called nid. and you know, you can see the value comes all the way down here, to the first semicolon. expires time of its own a path, a domain, some extra constraints. this cookie's only and relevant to http which, which, is, is just another, another cookie option

you have at your disposal. i want to show you one quick thing while we're in the terminal here. if you're on a mac or linux you can use the curl cmd which is pretty cool. say, curl -i, which basically says, get me the headers. curl -i google.com, and that'll just run the headers. i'm not going to quiz you on that, but if you're on a unix machine, you can use curl instead of telnet, and you don't have to type so fast and type so much stuff. so anyway, curl -i, handy little tool for

viewing http headers. i'll show you one last way to inspect cookies this may not work for everybody, but it's another neat experiment. your on in chrome i'm in you know special private browsing mode which is what all this is talking about. basically i'm in the private browsing mode because i'd, i don't want to have any cookies, and that's generally what this private browsing modes do, is they throw away all your cookies. so i'm going to, i'm going to do something here, i've open up to the bug tools in chrome, this are in developer tools that are built in the chrome, you

can google around for, how to show this in chrome or you know safari and internet explorer also have, a similar feature so you can kind of watch requests. and i'm going to go to google.com and on here i can see all of the requests we made at google.com and one thing i can do is i can actually view the headers. we can actually view the request header i made for google.com and you can see we, we sent some various headers. we didn't send any cookies, cause we don't have any. and if we scroll down a little bit, we can see you

know one of the cookies that got set, right here. this is one of the cookie headers, so that cookie. if we were to reload this page now, our browser, chrome here, has stored this cookie. if we were to load this page, we should see a new request header, i will do that now. i have reloaded the page and now we see the request we made for the google.com the request has a cookie header and this says the exact same context as the sec cookie. well at least the name here, and the value is the

same. you don't have to resend path and domain and all those other options, those are just for the browser to know when to send the cookie. if, if, if you're feeling adventurous, you can find a, a debug mode in your browser and experiment with this sort of stuff. it's kind of, it's kind of neat to see what's there.

New 3 Raspberry PI Creative and Inspiration Febuary 2014

Web Development Environment

hello everyone my name is josh cummingsand today i'm going to talk about docker and wordpress. a little bit about myself,i'm a developer at grizzly. we're a full-service creative agency in sandiego. we focus on anything from web design and development to brand, strategy,identity, and all sorts of fun creative projects for awesome companies. so, docker.what is it, why would you use it, and how can it make wordpress development better? well, before we can really answer any ofthese questions, we need to take a look at why docker. exists in the first place. soit used to be that we would write our code and deploy it to a server and thatserver was most likely, in the beginning

phases of our development, some sort ofblack box that was just hosted somewhere and we were able to push your code to itand it would all just magically work. when you take a deeper look at the server, yourealize that there's a lot of dependencies that live on that serverand each one of those dependencies has their own version. now, a lot of timesyou're not even just dealing with one server you're dealing with three or moreif you're doing your local or development server one place you'll haveanother staging environment and then a production environment etc etc and allof those server environments have their own dependencies on them and usually wecontrol this right so we'll have a local

in a staging server that we set up andwe control we make sure it's running properly but let's say your productionserver is run by the client and they're using let's say a different version oflinux than what's on our staging server well then we go to deploy, it might workon staging, but we might run into issues on on production that really get in the way of our workflow and slow us down and cause problems and when we are troubleshooting let's say databaseerrors or php errors that can really take time away from what we're doing andmake coding very very frustrating and the deployment process really really

frustrating. so, how do we fix this? oneway of fixing this is configuration management because with configurationmanagement you write one file that lives in your code base that tells the serverwhat dependencies to install and how to sort of configure itself so you may haveheard of vagrant or ansible or some of these configuration management tools the problem with these tools is thatthey run on virtual machines and virtual machines can be very expensive meaningthey use a lot of cpu, memory, take up a lot of storage on your system,and these virtual machines run on guest operating systems that can't really talkto each other. so what we really need are

applications that can talk to each otherthat share the same os kernel. so, meet the container the container is a reallya complete file system that is created with all your dependencies of all of thetools that you need to run that can live in an image somewhere and then thatimage can be run anywhere we go on any environment. so, if you take a look atthis picture you'll see we have a busybox image and a debian image and thoseare both living in their separate containers but they can still talk toeach other because they're sharing the same os kernel. so, what is an image? theway that i like to think about images is the same way i think about images insomething like digitalocean. so if you

wanted to spin up a new server indigitalocean you would choose your ubuntu 16.04 image and then that imagewould spin up onto a server. it's the same way with containers. you create animage with all your configuration in it and then that image can run inside of acontainer. going the other way, because we're running a full network stackinside of a container, we need to actually expose port back to our host so so for example if i'm working on mylocal machine and i spin up a container that container might have port 80exposed inside of it but i'm not going to be able to get to it from my browserunless i expose port 80 outside of the

container to my host and we'll take alook at how what this means in just a minute going back in the other way, or ratherboth ways, are volumes. now, if i want to write code on my local machine thatinteracts with my container i can actually mount of volume and that volumewill allow me to work locally on my machine and make changes inside thecontainer so it sort of takes one of your directories directories and mountsthat as a volume inside your container will also take a look at that docker hubis similar to github where you can store all of your images and access themfrom one repository that lives in the

cloud and so workflow for this for dockermight look like you pulling a wordpress image from docker hub and thenrunning it inside a container on your local environment or staging or developmentand production or wherever. the cool thing about this, is it's guaranteed towork on any environment as long as the docker engine is running. so this is reallysolving that problem of not having a server parity and just really makingsure you're running the exact same application everywhere you go and thatincludes the dependencies, the network stack, the operating system, everything isgoing to be the same because docker is controlling that for us

you can also integrate this into acontinuous integration workflow so what you're seeing here isus pushing to github, docker is seeing that push and then startinga container based on that push inside of each one of ourdevelopment environments. it's a bit more complicated than that, but just to give you a high-level overview you can actually trigger pushes to docker huband pulls and all of that through a continuous integration workflow and thatmakes for a really really nice workflow where you're already pushing code to githubyou might as well have it spin up some containers for you and deployautomatically. alright, so let's take a

look at some examples. the first example i'm going to do is dockerrun. docker run tells docker to run a container from an image and the image i'm going to use is alpine. alpine is a really small linux distribution it'sabout five megabytes in size so we're going to run that container from thealpine image and we're going to run the command ping and i'm just gonna ping mylocalhost let's say five times. when i press enter here, it's going to grab analpine image from the repository start a container and run the ping commandinside the container. so let's see that happen. so it can't find it locally soit's going to pull it down from the repo

and there's my ping command five times.so let's try another example. let's say docker run and this time i'm going to rundebian and let's say we actually want to get command line access inside of debianand run commands that way i'm all you have to do is pass the -it flag and thenthe the shell that you want to use so i'm going to use just a regular shell. soyou'll see that it doesn't have debian installed locally, but you'll also seehere that it says already exists. that's because debian and alpine bothuse busybox so it already had busybox installed from the first alpineinstallation it doesn't need to install that again. it caches it locally. so, here iam inside of the shell inside of debian

and i can run something as simple asecho "hello world" and there we go! so, two different operatingsystems completely running locally on my mac and i didn't have to do anything butinstall docker and run a couple simple commands. pretty sweet! so,i'm gonna go ahead and exit that and now let's go ahead and try to get wordpressrunning. so if we go to the official repository for both wordpress and mariadb, we can start to piece together how to run these containers. i'm going to usemariadb and actually link it to wordpress so that we can use wordpresswith mariadb here using docker. so, first let's start at mariadb the thecommand is sort of intimidating-looking

but don't don't fret, i will walk youthrough how it works so the command looks something like this.we're doing a doctor run here and we're giving our container a name i'm actually just going to call it...youcan call it whatever you want, i'll just say coolmysql we're passing anenvironment variable here with this -e flag and we're just going to use "wp" asthe mysql root password. the -d flag tells it to run in detached so it'llactually run in the background and the last argument here is the image that iwant to use and i'm actually going to use the exact tag here. so, i want to use...10.1.17 is the version i want to

use so let's add that. and then thelast thing we'll need to do is expose a port. so let's go ahead and expose port... let's map port 8081 to 3306 inside thecontainer and again remember because mysql is running inside the container, weneed a way to access that container through a port. so i'm justexposing an arbitrary port here (8081) to get inside of that container. so, let's goahead and run this. and you'll see how lightning fast that was, and if i run docker images, it's becausei i already have mariadb installed fromanother project i was working on and

we'll see i already have wordpressinstalled from another project i was working on. so, you can start to see asyou get these containers running its really really fast to spin up new newcontainers from these images that you already have so, if we run docker ps, we can see ourrunning containers and i can see that mariadb is running on port 8081 on mylocalhost its mapping to port 3306 in my container. that all looks good! so let'sgo ahead and link wordpress to it. so going back to wordpress in docker hub,we can see how to use this image. we'll grab this command here paste it on in.and let's just modify it slightly. so we

have docker run, we're going to create aname for our wordpress container. let's just call it coolwordpress (again thatcan be anything you want just to remember which container is which). we're going to link this to our other container we haverunning which is called coolmysql again we're running it in detached andwe're going to expose port 8080, we're going to basically map port 80 insidethe container to 8080 on my localhost. now, we're going again use an exact versionhere so i'm going to be using 4.6.1-apache so let's type that in. and then the last thing we need to do if you remember we set a mysql root password. we need to actually

pass that environment variable here towordpress and the environment variable we use is called wordpress_db_password and we calledthat "wp" so we'll keep it the same. there we go! and that's all running. so if i do docker ps again, you can seethat both of these containers are running. wordpress is on port 8080 and mysql ison port 8081. so now if i go to my localhost port 8080...tada! there's ourwordpress install running inside these containers. i didn't have to installanything. i didn't have to do anything but run these commands inside of dockerand docker is taking care of all of that for me

now you might be thinking to yourself "doi really have to run these crazy commands every single time i want tospin up wordpress?" and the answer is no docker has a solution for this called dockercompose. so if we head on back to the official wordpress repositoryon docker hub, we can see an example docker compose file. now gettingback to our configuration management, we want to have a file that sits in ourcode base that allows us to spin up the containers exactly with that we wantusing configuration management best practices. so i've actually created asample docker-compose.yml file, so let's just open that up.

so, what's happening here is prettymuch exactly the same as what was happening in the commands that we ran. soinstead of running a big long string of commands in the command line, let's justwrite one docker-composed.yml file that does the exact same thing. so youcan see i'm grabbing the images for each of these containers i'm exposing ports, i'm linking and i'msetting environment variables, all the same stuff we just looked at you'll see this volumes section whichis new. so what this is saying is in my current directory mount a folder calledwp-content to the wp-content folder

inside my container. so this is how i'mable to work locally on my machine but still have changes be made inside mycontainer, and you can see i'm doing the same thing here with mysql. so, this all looks good i'm just going tochange the ports here so we don't have any conflicts. so i'm going to say runthis on let's just say 82 and 83 (why not) so now all we have to do is run fromthis directory docker-compose up and i'm going to pass it the -d flag to againrun as a daemon here in the background. so you'll see a couple things happen itcreated the containers so if i say docker ps

i can see now that it spun up a couplenew containers for me that are running on those ports i specified, and then youcan also see inside my project it "automagically" pulled in the wp-contentfolder and mysql folder for me so i can go ahead and start working on myproject. so if i jump back over and go to port 8082 on my localhost..tada! there's mywordpress installation! this is the way that i love to work, and i hope you'reseeing the value of docker and how great this is. so, as you can see once we havethese docker-compose.yml files, our speed of development is going to increasebecause we're able to start up as many containers as we want using thesefiles and we don't have to worry about

dependencies, they're all managed for uswith docker. and i can run these containers on any server environment. aslong as a docker engie is running, it's guaranteed to work. it's veryeasy and it's also easy to get new team members on board because you don'thave to worry about having the same configuration as long as they have dockeron their machine and you have docker on yours, you're on the same page, you cansay here you go here's the project get going, and it's also extremely scalablebecause you're able to use tools like docker machine and docker swarm to scale theseapplications and use other tools to load balance them, so it's it's very scalableand you're able to start small and build

as your application grows. if you want to learn moreabout docker, docker has really great self-paced training. it's three videos asof now and they're really in-depth and really great for learning docker, andthere's also some other great resources that i will post in the link below. alright everyone thanks so much! i hopeyou really got something out of this video and you're starting to see how touse docker in your workflow. if you have a workflow that you really like to use,please share it. and as always, i'm here to answer questions and have a great one!

happy coding!

10 Best Logo Design Inspiration Febuary 2014

Web Development Environment Windows

[music] welcome, to dr. piercy's downloading and installing eclipse. ths video was made under a creative commons, attribution, non-commercial license. in this video: you're going to learn what eclipse is and what it can be used for. you'll see how to download and install eclipse. and, we'll take a brief look at eclipse to see that it is working on your computer. so, you may be asking: "what is eclipse?" eclipse is a development environment.

a software application with lots of tools that you can use to create stuff. eclipse is integrated. this means that all tools provided by eclipse are collected in one software package that works together. you can also think of integrated as meaning that the diverse components that you create are integrated to perform a complete package. so, finally eclipse is known as an integrated development environment.

or ide. to find eclipse, simply search for eclipse.org in the google search page. typically, the latest version of eclipse will be the first entry in the search results. here we see mars eclipse. go ahead and click on mars eclipse. and it should take you to the eclipse project homepage at eclipse.org. this site has everything that you need for eclipse for our purposes, click on the

large download button that you see in the upper right corner of the page. this should take you to the download page. a number of different eclipse packages are listed here. the one we would like is called eclipse ide for java ee developers. this one will allow us to build networked web applications. so, let's click on that one. this page provides a description of the package for eclipse ide for java ee developers. take a moment to look through that page once you are there.

note, in the upper right corner there are a list of download links for various types of operating systems. from this point be sure to choose your operating system. i'm working on a mac. so, i'm going to choose mac os x download link. this will take us to the eclipse download page. you can select various sites. there's a primary download indicated by the orange button, but some of the others are faster. i'm going to select the ibm download site to get a faster download. here i see a new page with some options

i'm simply going to select the "download eclipse ide for java developers" the mac coco option. this will start to download. once you click the download link you can select the location on your hard drive where you want your installation file to be stored. i created an eclipse folder earlier so that i would have a place to put this install file. i'll break here until my download is complete. my installation is complete. note that my file tar.gz

this is a common compression type for mac downloads. i'm going to click on the button in my browser. this decompress the file and then show it to me in a finder window. we now see the eclipse application and the downloaded tar file. i don't need the tar file anymore since i decompressed it, but i like to keep it until after i've tested the application. the actual application is listed as eclipse.app with an eclipse icon. typically, you'll need another component,

namely the java jdk, for eclipse to run. starting again from the main download page, let's find the link shown as "install guide." click on that. this will take you to a page where you can find other information about eclipse and its installation. what i would like to show you had to do with installing the jre/jdk sources. note that there are three possibilities here. i'm going to select oracle jdk, just to get it from the source.

i open that in a new tab. here, i'll click on "java platform jdk" to get the program i need. in the list, i can see that they have a version of this for mac os x. first, i need to accept the license agreement. once, i've accepted the license agreement, i can click on the jdk version that i need for my mac. be sure to adjust to your operating system. i'm going to store the jdk dmg file in a special folder i created on my hard drive called "java."

here, you can see that the file has been downloaded. i double-click the dmg file to run the install package. from the install package, i follow the directions and double-click the icon to install my jdk. at this point, i have the jdk installed. plus, i also have the eclipse app ready to use. let's double-click the eclipse app just to test that my installation seems to be working. this is a good sign, i see the eclipse splash screen. eclipse loads.

and, here i see the eclipse ide everything looks good, so far. let's create a very quick "hello, world" java application just to see that eclipse is working and that it's connecting to the jdk. click on file|new|java project. here, we'll see a dialog box. we'll learn more about those in later videos. for now, just type in a name into the project name field. i'm going to call it "testing123." then, i'll hit finish. here, i see that a project has been created.

if i expand it, i see a src folder and i see the jave jre files attached to this project. i'm going to right-click on the "src" source folder and select new. at this point, i'm going to pick "class" to create a java class. here, i see another dialog box. i'm going to set a few things on this one. i'll make sure that the option "public static void main(string[] args)" is selected so that i'll have a "main" method this class. i'm going to give the class the name "test." after that, i'll click "finish" and it will create a file. note, the file shows up in the project explorer window, under the source folder.

and, that a file is generated in the editor. this file includes the stub for the main() method. so, if i want to run this project, i can simply put some code in this main() method and run it to see if it works. let's just simply print out the phrase "hello, world!" to the eclipse console. to do this, i only need one line. i'll type "system.out.println()..." in parentheses, i'll provide the literal string "hello, world!"

i'll remember to add a semi-colon at the end of my statement. there are several ways that i can run this program, but, let me simply just right-click on the project name in the project explorer window select "run as..." java application after a moment, it runs. and, now in the console at the bottom of the ide i see the phrase "hello, world!" so, with this simple test, it looks like my eclipse and my java jdk installation are working.

check out other videos to see how to fully use eclipse. the primary reference for this video and the content found here is the eclipse foundation web site at eclipse.org. this is your go to source for all things concerning eclipse. if you want to know about eclipse, need some help, or just want to look at the eclipse documentation, then, this is where you should start. you can find information about java and the jdk at

the oracle technology network at the url shown here. this video was written, narrated and produced by dr. craig a. piercy under creative commons license. background music is "locally sourced" by jason farnham, from the youtube audio collection. this, has been a piercy production.

10+ Inspired Digital Work Desk Febuary 2014

Web Development Environment Mac

[intro music] cisco: hi, i'm cisco with acrobotic. and today we're gonna be talking about how to get started with the esp8266 development board. we're gonna be using the arduino ide to write custom firmware that is gonna be downloaded onto the board and execute. the materials that we're gonna need for this tutorial are the development board itself. it's optional, but nice to have a solderless breadboard and just a micro b usb cable. we've taken the esp-12e module, mounted it on

our development board, in order to make things even easier. we include a few additional components like a usb to serial uart translator chip by silicon labs. and a few other, like a voltage regulator a few other components, so that you can just plug it into your computer use the arduino ide and just get started with developing software or firmware that would run on the esp8266 itself. there are a few different options that you can use for developing firmware that

would run on the esp8266. and we're gonna be using today the arduino ide, but i wanted to mention the two more popular ones are using at commands. this is where you hook up the esp8266 to a micro-controller typically. that micro-controller will send these at commands via serial aserial uart interface. and again you can read a little bit more in the links included in the description. but then the esp8266 device is just listening to at commands, and

you tell it using an at sequence "hey, connect to wi-fi" "this is my ssid, etc. etc.". we are not gonna be using that we are going to write custom firmware that will get uploaded to the esp8266 and the esp8266 is just going to run that custom firmware. the other one that is really really popular is the node mcu firmware. that's a little bit similar to the at commands. you can actually use it a few different ways, but for the most part you end up using the lua programing language to have this sort of live interaction with the esp8266 itself.

you can read more about it again in the links included in the description, but in order to get started with the arduino ide, we're gonna jump to the arduino.cc website. and we are gonna go to the download section. and this is in case you don't have the arduino ide already installed. for those of you who are not familiar, ide stands for integrated development environment. so we are gonna look for the latest version, which is at the day of this recording 1.6.7. i'm gonna be using a mac, so i'm gonna click on the link for mac osx.

and then, you know, i encourage you to contribute to the project, they are really, they are doing really great work. i'm just for now gonna click just download. and it should take a few, a couple of minutes to download depending on your internet connection. the second piece of software that we gonna need is actually the drivers for talking to the iec that is on our development board that does the usb to serial uart translation. and for that we're gonna go to the link from silabs, silicon labs

included in the description of this video, and for me again, i am running this on a mac. i am running osx so i'm gonna scroll down and i'm gonna download the vcp drivers for mac osx. depending on your operating system, you'll need to download the corresponding drivers. once you've downloaded the vcp drivers from the silicon labs website go ahead and double click on the file. then go to the mounted image and double click on the package file to go through the installation process. go ahead and click 'continue'.

if you want to read the software license agreement, once you agree with it, then click 'agree', if you agree. and then just click on the 'install'. it'll ask you to enter your password as you are going through the process. this is again just installing the drivers that you'll need in order to communicate with the development board. and it takes a few seconds to install. at the same time we can go through the process of installing the arduino development environment. so i'm gonna go back to my downloads

which is where i downloaded the file. i'm gonna go ahead and unzip it. and that process should take a little bit. once the application is unzipped, go ahead and drag it to your applications folder. i had a previous installation. i'm just gonna go ahead and replace that one. once the vcp drivers are installed, you are pretty much ready to go. you can go ahead and open the arduino ide. then we want to go through the file menu for windows users and through the preferences menu for mac users.

there's gonna be an 'additional boards manager url's' entry. go ahead and enter the url included in the description of this video. and if you already have urls in there then just go ahead and add a comma and a space, before adding the one for the esp8266 family of boards. you click ok. the reason we did that is in order to have the board recognized automatically by the ide without installing anything additional. then we can go through the 'tools' menu. go to boards and 'boards manager'

we wanna search for esp8266. click on the entry and click on 'install'. it'll download a few things and install a few others, so it'll take some time. once that's completed we want to close down the arduino app, or the arduino ide app and restart it. once all of this is done, you can go ahead and connect your development board, your esp8266 development board to the usb port of your computer. from the 'tools' menu, we are going to select board

and the node mcu 1.0 entry. and for the port we're going to select, for mac, it looks like the one i'm showing on screen is forward slash dev, forward slash cu dot slab for silicon labs usb to uart. on windows it would be com and a number. so you just go ahead and select the entry and then finally we can go through the file menu. examples, basics, and we're gonna open the program 'blink'. then we're gonna make a few modifications so that it works

with the esp8266 board. instead of the number 13 for the pin that we're going to be using, we're gonna be changing it to pin number 16. then we can go ahead and click the 'upload' button. and your board should start blinking, once the program is uploaded to the esp8266. so that's it. you are ready to get started writing your own firmware to the esp8266. thank you for watching.

10 Best Logo Design Inspiration Febuary 2014

Web Development Engineer

i'm here with heather from artisan talentand we're talking about back-end developers we talked about this a second ago what's thedifference between back-end developers and front-end developers well the back-end is a little bit more technicalso it's really i would say the foundation is a good way of looking at it for what's to come with maybe a designer anidea that you will visually eventually see so this is the very intricate framework tobuild upon to make something visual okay cool and what kind of skill sets areyou looking for you obviously have lots of freelance projectslots of full-time positions run past your

desk what kind of skills are you looking for withback-end web development well someone has to be very passionate aboutthis someone that really understands i would saythe whole process so maybe they have a background in engineering or web development or somethinglike that and they have kind of found that they really do enjoy the back-end side whichcould be working in ruby on rails which is something we see quite a bit php they understand sequel maybe they've connectedwith you know the c++ we don't touch that too much but that's importantto know but understands that through the html

and css and javascript and jquery libraries so someone who understands all of that togive to a designer is really really really important and if they're efficient and quickand clean with their code hands down they will be definitely very happy person they'll be snapped up by your clients yes tell me what kind of projects can a back-enddeveloper expect and you know what kind of back-end programming what kind of back-enddatabase work what kind of back-end coding could they expect through you know throughtheir career

you know every once in a while we see somethingmaybe it's like a full-stack developer so that's someone that understands back-end developmentwith the front-end so those are occasional usually companies split it or projects aresplit between a front-end person and a back-end person too do maybe someone that's reallygood at ruby on rails or ruby developer those are the ones that we see a lot of becausesomeone has to really really be passionate about that and they might have to understand php howit's integrated into a database that they use with the company or a cms tool or something so understanding how to connect all the dotslike that is really really really important

you'll see sometimes like a sequel be thrownin there or maybe they need to understand angular copy script a little bit more on thefront-end just to be able to communicate with the front-endperson okay cool so let's say you have a person whohas got that kind of skills who has that kind of passion is interested in those kind ofprojects what kind of money what kind of salary whether it's freelance or full-time coulda back-end developer expect this is an area that if you're really seriousabout you can do very well so you know i would say you know currentlywe're working on some ruby positions you know and as far as an hourly rate range goes forthey're looking for someone in that four to

six years so anywhere from like forty to seventyan hour so four to six years experience yes exactly but then there has been full-time roles thathave rolled through and maybe they're more in that one-twenty to one-fifty range that's pretty serious for a programmer yes but if you think about it and this digitalage we're in wouldn't you want your foundation you know handled by somebody that's an expertin that area and i feel like we connect with those people

you know they we talk to them about what makesthem tick why they got into development why they're good at backend and here we are and my understanding wrapping this littlething up here is that you're talking about someone who is more so left-brained logicalanalytical less so right-brained which is sort of moreif you will communication emotional connected so i can see how and this is a bias bias bias question it's okay i can see how having a talent agency mightbe an advantage tell me what for a back-end

developer what kind of advantage would therebe in listing with a talent agency like artisan it helps them kind of get out of their shelland not to you know kind of go off on that someone they can trust i like to talk to developers because i loveto hear that analytical side about them and what they've put together is amazing to meand how they're putting code together but being a voice for them maybe giving themsome confidence giving them some coaching tips like hey this is the type of sampleswe need this is what you're going to expect when yougo on an interview this is the type of projects so it gives them kind of a heads up and iknow someone that's very methodical and maybe

very analytical likes to be kind of excitedto know what's to come so really helping them feel confident in thatspace is another sort of i guess advocate are we can be part of alright cool so if someone wants to reach out as a back-enddeveloper as a back-end coder to maybe get some work through you guys oran agency like you what's the best way to reach artisan i know you guys are kind of everywhere right yes we are but you can pick up the phone youcan find us online you can go through linkedin

you can find us at an event don't hesitate to come up and talk to us alright thanks so much for your help

How to Give Permission for User to Submit Content to Your Blog Without Become Member?

Web Development Education

- [voiceover] in thisvideo, i'd like to recommend some websites that you can use to support your learning process and to learn more about htmland the web technologies. my favorite site for api reference is the mozilla developer network. this is maintained bythe mozilla foundation and in here you'll find information about basically all html tags,

what their attributes are, which attributes you should no longer use because they're beingdeprecated and things like that. normally, if you searchon google for any html tag and you add mdn or mozilla, it'll take you to theircorresponding page. i've never really used thissearch engine they have, i just search through google, but this is a great place to find

standard compliant information. another good website is caniuse.com. there are some features in html that are not fullysupported by all browsers, they are newer features. an example of those newer features, which are by the wayvery exciting features and i'm really hoping that they'll soon be supported by all browsers,

one of them for example is the input date, which is an input field that you can have to ask a date for the user, so it will show a calendar, and it just works outof the box, pure html. so this website, in here youcan search for any html tag and it'll show you whichbrowsers support this technology and which ones are in theprocess of supporting it and which ones simply do not support it.

so before using any cutting-edgefeature of the language, make sure to check on caniuse.com to see if it's supported or not. on zenva, we have a few different blogs and one of them is the html5 hive, which contains a lot of freetutorials on web development, other materials on html5 and javascript, and in here you canalso find a free e-book, which covers similar contentas this course, as this module,

but there are a few thingsthat we cover in the course that are not here and theother way around as well. and there's also a freeonline course on html and css, which is a simplified version of what you've been learning here, but there might be some contentthat's not repeated in both. there's actually a fair amount of stuff that's in one course, not the other. and lastly, we've got our youtube channel,

which contains a lot of videos that you can obviously watch for free, so if you go to our youtube channel, the zenva youtube channel, and then you go to the playlists section, you'll see all of thevideos sorted by topic, so you'll find a bunch of videos on, there's a lot more than those playlists. you'll find videos onhtml, videos on javascript,

videos on all sorts of web technologies and also other topics like web development andmobile app development. so there's another websitethat is very popular with people that are learning to code, which is the w3 schools, so that one shows up on google usually. the w3 schools is awebsite to be taken with a little bit of care

because it does have very goodexplanations for beginnings, but they're not always standard compliant. that's why i actually preferthe mozilla developer network, because they do a great effort into enforcing these standards and teaching you thecorrect way to do things, but having said so, i have to recognize that iuse this website sometimes, everybody does, so itcontains a lot of good,

quick explanations for things, but just don't forgetthat there might be things that are not fully updated, or that are not fully standard compliant.

10 Best Logo Design Inspiration Febuary 2014

Web Development Editor

[music] hi, i'm lisa catalano, and i'm a webdeveloper and designer. today, i want to talk about my mostimportant development tool and that's my favoritecode editor, brackets. brackets is a free, open source codeeditor led by a team from adobe. it's been around for about two years now. it started with a few great features thatwere unique and new, like the quick edit andlive preview. however, it took some time for it tobecome

the robust and powerful code editor thatit is today. in this video i am going to show you someof those unique features and the ways it can compete withany other code editor out there. one of the reasons i love bracket so muchis that it was created for front end developers and designers, it has avery attractive interface that's clean andsimple, yet powerful. it appeals to my design sensibility andbecause i spend all day in my code editor that makes mehappy. the first special thing that brackets hasis a

live preview which you can access byclicking here. it allows to see changes to your html and cssimmediately in the browser. the second special thing brackets givesyou is the quick edit feature. if i'm in an html tag i can quickly editthe css. when i go into quick edit, it will allow me to edit any existing rules that targetthat selector. it's finding a body tag in normalized css,but i want to create a new rule so i'll choosethat.

then i get to decide where i want the ruleto go, and i'll choose main.css. when i add some css properties, you cansee that the code hinting works great inside ofquick edit mode. notice, i have not saved anything yet. the circle is indicating that it needs tobe saved. but, the changes are showing in thepreview anyway. when you have multiple rules that would beapplied to your current selector, you can switchbetween them on the right or by hitting alt+arrowkeys.

to get out of quick edit, i can hit esc. if i'm on the ul tag and i hit cmd orctrl+e i see all the ul tags in css. but, if i move my cursor to the class nameinstead, i can create a new rule for the class ofy. you can see that the code hinting usesfuzzy logic, and you can skip letters when typingproperties and values. one feature of brackets that doesn't getas much attention, is something that i can't live without now,and it's the image preview. if we go into the sidebar to look at thefiles in our project, we can see

in the image folder, we get to actuallysee the image and its dimensions in the editorarea. this is one reason this code editor is agreat choice for web designers. if i add that image, the html, notice hownicely it let's me find the image in the directoryand add it. i barely had to type anything. now if i look at the html and hover overthe image tag, i can actually see a preview of the imageright there, i love that. another part of the quick edit that'sgreat

is the ability to get the color pickerwhen your on a color and a bezier curve editorwhen your editing something like a transition. i do need to go into the css file to dothat. if i go to a color and start up click at it, i can pick a newcolor with the color picker. if i add a change to the image on hover. and then add a transition.

i can create custom easing with quickedit. i just drag the handles to make thetransition that i want. if i need some help with a css property, ican use the quick docs feature. let's say i can't remember how to add aninside box shadow. i can type box shadow, then get to somehelp by either right clicking for the menu ortyping cmd or ctrl+k. i can see the word i want is inset so ican add it now. quick docs doesn't work with javascriptout of the box but there are extensions that will make thiswork with javascript and php.

when brackets first came out it had someof these wow features that made it specialbut, it didn't have all the powerful code editingfeatures that developers have come to expect in a codeeditor. but within the past year all of that haschanged and you can do most of the things you reallywant in brackets. for example, you can use multiple cursors. one way is to hold the alt key down anddrag the mouse. this works on both mac and windowsmachines.

now i can type once and it goes everywheremy cursor is. another way is to select a word with cmdor ctrl+b and then hit that again and again, to find andselect the next words. you can also move code around easily, whenyou learn the shortcuts. i'm going to open a larger project filenow. brackets uses fuzzy logic for code hintingand for quick open. i can hit cmd or ctrl+shift+o to get toquick open. it does a great job of moving to the top the files you are more likely to want toopen.

i don't have to type all the letters tofind something. it also has great find and replacefeatures to use across a large code base. i can easily exclude folders and fileshere, and it tells me how many files it will searchthrough down here. i can preview the changes it will make anddeselect places i don't want to make the change, either byfile or by line. brackets isn't just good for html and css,it does a great job with javascript, and you can useit for any language. it will lint your code automatically andtell you your errors.

this linting can be configured to yourpersonal preferences. and the quick edit feature works withjavascript as well. i'll add some quick jquery here in themain js file. notice that nothing is changing in thelive preview right now. however, as soon as i save this file, youcan see the change in the browser. i can click at it to take me to the function definition in the actualj-query source. and if you're working with a largejavascript code base, it will find your functionsanywhere.

if i want to take this further and see theshow hide function, i can click on the file name to open it in the correctspot, and then click edit again. and it will take me right to thatfunction. so i have two parts of the jquery sourceopen in one window at the same time. brackets does not have split view but thisquick edit feature means you need it a littleless often. split view is coming in a future releasehowever. the newest version of brackets lets youcustomize your workspace with themes, it only comes withtwo themes

out of the box, however there are lots of themes you can choose from in theextension manager. if i go to the extension manager, i can typetheme and it will show me lots of options. speaking of the extension manager, this is animportant part of brackets. brackets is an open source project and hasa lot of community involvement, especiallyin the area of extension. they allow you to add functionality tobrackets that isn't part of the core.

sometimes these extensions get pulled intothe core which is what happened with the themesfunctionality. there are too many great extensions tomention, but if you find brackets missing some functionality youwant, do a search in the extension manager and you might find it there, this was justa quick high level view at some of the greatfeatures of brackets. if you looked at brackets int he past andliked the quick edit concept but didn't think it was a powerfulenough editor for you yet. i would encourage you to try it again,it's come a

long way from the initial concept andworks great for your everyday editor now, thanks for watching, if youhave any questions about anything i've discussed here, you can askme on twitter at @lcatdesigns.

Download Top 5 Powerpoint Presentation Template for Free