Explore Free JavaScript Framework Tutorials – GameDev Academy

How to Build a Webpage with Next.js

Zenva — Fri, 01 Nov 2019 15:00:49 +0000

You can access the full course here: Project-Based Next.js – Games Website

Part 1

Our goal here is to create an app that contains a homepage and a game page. The home page displays the Zenva logo and a few games that we have “created” with an image, title, and description for each. The game page will showcase one of the games that the user has selected by retrieving information from the home page about the chosen game. Much of this project will be reapplying what we covered in the previous sections to our final project. The final homepage will look like this:

And the final game page will look like this for the Dragon Game:

Part 2

We will start by setting up a basic project (as outlined in the above tutorial: Installing Next.js and Running a Project) and adding some images to an images folder. The final directory system should look something like this:

Part 3

Note that I have added the Zenva logo and a few screenshots of games that I got from Zenva. Next, we have to install the next-images library in order to display images in our project. We do so by running the terminal command:

npm install --save next-images

Next, we need to create a ‘next.config.js’ file and add the code to it:

const withImages = require('next-images')
module.exports = withImages()

We will create some variables to represent the images that we need in “index.js”. We will put these at the top as imports:

import logoImage from '../images/logo.png';
import dragonImage from '../images/dragonImage.png';
import oasisImage from '../images/oasisImage.png';
import riverImage from '../images/riverImage.png';

Next, we will create the header which is just a grey bar with the Zenva logo and add a heading. We will also add styling. “Index.js” should now look something like this:

import logoImage from '../images/logo.png';
import dragonImage from '../images/dragonImage.png';
import oasisImage from '../images/oasisImage.png';
import riverImage from '../images/riverImage.png';

export default () => (

    
        
            
        
        My Games Page
        
    

)

With the output looking like this:

Transcript 1

What is up, everyone? Welcome to the second half of our intro to Next.js course. This will be focused entirely on the final project, which will be essentially a static webpage that displays some games that we have developed. So don’t necessarily have to have developed these games. It’s kind of like a mock webpage.

So, the steps we’ll take are gonna be to first create the project and add some images. We’ll then import the images into the project itself and we’ll work on how to display them. Then we’ll build some custom display blocks to display the image, title, and description of each of the games. We’ll then build up a second page that’ll be used to display the specifics of a single game. Then we’ll apply some Bootstrap and custom styling and finish up by masking the URL with server site support. So just to quickly recap, this is kind of what the game looks like.

We’ve got our games page here. Three different games to choose from. And if we click on each of them, it will take us to the game itself and we can just go home. It just kind of provides a better overview of that single game. Okay, so hope you guys are very excited. I’m really excited about this project. I thought it was actually really cool developing this with Next.js. It’s super easy and at this point, you have all the necessary tools to begin and finish off this project. So, thanks for watching. Let’s get started right away by setting our project up.

Transcript 2

What’s up everyone and welcome to the first section of our project. Here we’re just going to do some basic setup. We’ll start a new Next.js project and we’ll import some images to use.

So let’s head on over to our IDE right here. So I got again sublime text starts up at an empty instance. We will first need to turn to terminal or command prompt for you Windows users. And we’ll want to first decide where we want to save this. So I’ll show you in Finder where I want mine. It is – let’s actually just get rid of that second window. It’s just going to be under desktop again Zenva, Next.js, we’re gonna go into course, practice.

Actually we’ll not put in practice. We’ll start a new project right here. So, I’m going to do that now. I’ll just navigate to where I need to get to and next, okay, so if I do it in ‘ls’, I got course and samples put a cd into the courses itself and here I’ve just got my practice project. Okay, so I’m now going to make it a directory called Project and I’m going to work in here so you’ll want to work in whichever directory you just created it doesn’t really matter too much what you call it for now, just something that makes sense. We’re going to start by initializing NPM. So, we’re going to do NPM init-y. This will create our package.json file. So that’s cool.

We’ll then need to install the react and the next packages. So, we’ll NPM- in fact let me move that up for you guys. NPM install and then we’re going to save it. So, –save react-dom and then next like this. Okay, so this is the same basic setup that we performed when we were doing our practice setup initially. Okay, so this is going to install react functionality as well as react-dom functionality and of course the next package as well. So, after this we’ll need to create a pages directory and I think mine is just being a little bit slow because my internet is slow right now, but once that’s done again we’ll create a pages directory and then we’ll start by putting index file inside of that. Okay, good stuff.

So, we’ll make a directory now called pages. Okay, so if we do an ls this is what things should look like we’re going to I guess we could cd inter pages although it doesn’t really matter too much. So, we want to first open package.json before we create our index files. So let’s go on over to again Sublime Text. Were just going to go ahead and open something. This can be in our Next.js into course and again into that project and of course, we’re just going to open up package.json. Okay, so need to add a couple lines to our script section we’ll be modifying these as we go, but for starters we’ll need to add something to dev build and start. Okay, so development is simply going to be I believe just one next like so.

We want to enable the build command. That’s just going to be next build for now and then we’ll want to enable the start command that is going to be for next start like so. Okay, so we’ll definitely need to modify start and probably build at some point I think even dev as well but for now that’s going to be good enough to get our project up and running.

Okay so, the next thing we want is an index so- let’s just get rid of that untitled one an- index.json. So let’s create – or rather index.js – so let’s go ahead and save this right off the bat save that as index.js and we want to make sure again that it is in our pages directory. Okay, so for now we’ll just put something here. It doesn’t really matter too much because we’re going to be actually implementing the proper page in a bit but we’ll just export a default like this and then we can just put whatever we want in here.

We’ll I guess start off with just a basic div like so and then within that div we want a header at some point we can just do an h1 like this and it’s just going to say Game Page cause we know- or Games Page maybe because we know that this is exactly what it’s going to say at some point in time. In fact, I think we actually have the same My Games Page maybe that makes more sense. Okay, so we’ll give this a save that is good enough for now.

And the next step that we want to do is just select some images okay, and these we are going to be using throughout. So, if you remember back to when I showed you the demo we had the Zenva logo up top and then we had 3 different games images so we can really choose whichever images you want honestly if you’re just using it for your own personal project you can just pull them from google, you can use something that’s open-source or you can actually take some pictures of some games that you’ve developed and use those.

I would encourage the latter of those 3 options if you have actually built some games yourself because the idea of this is to be able to showcase your own games. So, I’ve got some games or some images picked out I think I’ve- actually I think they might still be under downloads. I got permission from Zenva to use these actually. So, we’ve got the Zenva logo and we’ve got a few different images to choose from I think in that demo I used this one, I used this one, and the oasis one. So, we’re just going to cop those.

So, we want this one and that one and then I think it’s this one and that one an I’m just going to go ahead and copy those and I’m going to pull them into my project there. So, that’s going to be again in Next.js we are going into the Course, into the Project. I’m going to create a new folder called images and I’m just going to place them right in there.

Now I’m not too happy with these names I want to make them more simple so I’m just going to call this something like oasisimage. Okay, this is going to be something like, I don’t know, drangonimage and we’re going to make sure that png is lower case and this one is just going to be like river image or something, it doesn’t matter again too much what we call these as long as we know what they’re referring to and so once you’ve done that once you’ve got some images I think we can actually leave this as is. So, lets just give this a quick test run to see if its working out, we’ll want to go into the terminal. Okay we’re going to do an npm run dev, okay this should hopefully compile everything okay and it will run the app as it stands right now on local host 3000.

Okay, so we’re just going to open up a new window okay and I’m just going to go to local host 3000 and as you can see My Games Page. So we know that its running fine and that is the basic project setup so just to quickly recap we’ve got an index.js and we also have this package.json we added the necessary scripts right here in our project we have 3 images in an images folder and of course index.js is in stuck in pages.

Okay, so the next section we’re going to be working on importing the images into our project we’ll actually need to install a special library to get access to the functionality that will display images and then we’ll work on displaying images in our project. Okay, so thanks for watching see you guys at the next one.

Transcript 3

What’s up everyone and welcome to the next section. This’ll be on importing images into our project. So we’ll just import the images that we added to that images folder and we’ll work on displaying them within our project itself. Okay?

So let’s head on over to the code. This is what it looks like, we’ve just got index dot JS packaged on JSON. This is what our project looks like. This is my games page. Really simple right now. Okay, so before we go any further we need to make sure we have all the images we want. I think I actually left one image out. Yeah, I did. That was the logo. So let me just grab that now. Okay, actually I believe this is in downloads for me. I do want this logo in my project so I’m actually just going to copy that and bring it over to. Okay, cool stuff.

So now we’ve got my four images. These are gonna be used to display the three games and then obviously the logo up top. So we’ll now need to add the library that will help us to import and use images in our project. So let’s just kill this command right now. We’re going to, oops. I’m not sure why that came up. We’re going to just clear that off. And we’re going to install the next images library.

So this’ll be an NPM install, dash, dash, save. Next dash images. So it should say actually, and some of you may be experiencing a bunch of problems, where if you try to install something it comes up with a bunch of errors here. Likely, that’s because you don’t have administrative privileges. So if you’re using windows, again, run the command prompt or power shell as an administrator. That’s one of the options you can do whenever you go to open it, you can right-click and run as an administrator. Or if you’re using mac or lennox then you can simply add sudo to the beginning of any of your commands and that should allow you all the necessary permissions.

Okay, so this will install that library. I think we should see some changes if we go to package dot J son. Yeah, we get next images there and we do need this library to be able to display images in our projects. All right, so before we can use our images there’s gonna be one more step we need to take. That is going to be adding our index dot config dot JS file and specifying that we’re using the images. This next images library.

So we’re going to go ahead and create a new file here. Let’s give this a save. That was command, shift, save, by the way. Or you can just save as. And this is just gonna go into the project root, okay? This is gonna be our next dot config dot JS file. So in here we’re going to say that we’re acquiring the next images library so we’re gonna do constant with images. This is going to be equal to require next dash images, like so. So that’s basically that library we just installed. And then we’ll do module dot exports. It’s going to be equal to with images and then that should be just that MT dictionary, there. So let’s just do that, okay.

So this should be good to go. I think this shouldn’t give us errors. If we do get any errors or it’s not working then we’ll need to eliminate those curly braces. Otherwise it should be fine. So then probably what we’ll want to do in order to gain easy access to our images is just add them as imports up top. So this is where we need to know exactly where we’ve saved everything in our project. And where it is relative to our index dot JS file.

So index dot JS is here in pages but our images is up a directory, into images and then we get access to these ones here. So the way in which we import them is first saying import and then we’ll name a variable, for example, if I want my logo, I might call this my logo image. And then I’m going to say this is not equals. This should be – import this from and then the actual location itself. So, in this case, I need to go up or from pages I need to go up a directory so dot, dot, slash. That’ll bring me to here. Then I want to go into images. Slash. And then the name of that image. In this case it’s just logo dot PNG.

So you do wanna make sure that you have the correct extension PNG or JPG. And, in fact we might as well do the others right now. Okay, so we’ve got a logo images, we’ve called that one dragon image. Then oasis image. Oasis and finally river image.

And then, of course we’ll want to import the respect images. So in this case this is dragon image, then oasis image, and finally river image. Okay, good stuff. So we’ll give that a save. And now let’s just display the logo image for now. So within our header here, or rather within this div, not within the header, we’re going to create another div but this is actually gonna be a type header. So header acts very much like a regular div, in fact, it acts exactly the same as a regular div, it just communicates clearer. So this is just a div that’s going at the top of my page called header.

Okay, so within this I’m going to put my logo but we know that logo is kind of got a white background so let’s just take a quick look at it. So this logo, it actually says zenva here but it’s kinda hard to see. In fact, let’s display this first and then I’ll change the background color to gray so that we can actually see it.

So we want an image this time. Okay? We want to first provide a source equal to something, okay? And then we’ll provide an alternative equal to something just in case the image isn’t being displayed. And I’m gonna give this actually an idea as well because I’ll likely need to modify some of the aspects. So this is just gonna be my logo image here. Okay so the source is going to be one of these, specifically this one.

So I figure it’s probably best just to add the strings up top and then just simply add them in here like this. Okay? So then rather than a string, we can simply just put in our logo image variable. We’ll converse to the string and it’ll use that as a source. The alternative image can just be the logo. On alternative imagery, alternative text. The ID logo image for now that is fine. So let’s give this a save. And let’s get this guy up and running. So let’s go to terminal, NPM run dev again. Because we’re just running the development version. And so let’s go on back to a local host. Okay, so check that out.

So we’ve got our image displayed very clearly. In fact a little too clearly because it’s quite massive. Okay, so we’ll obviously need to make it a bit smaller and we want to just up top with that gray header background so I figure we might as well add the styles right now. It won’t take very long at all. So let’s add that style right now. It’s gonna be style JSX. Okay, and then we’ll close off that style tag. We’ll need to put these in curly braces. And we’ll need these kind of weird slanted quotes as well. Remember, regular quotes might cause you some problems.

Okay, so… Because we put our header within a header tag rather than a div tag, it’s nice that we can actually just call upon our header like so. And we can do what we want here. So I’m gonna set the background color to be equal to gray. And I’ll set the height equal to, I think 80 pixels should do it.

And I want to center the image within it so if I actually just do a text align center, that will center the image up horizontally. So let’s take a look at the image, itself. We’re gonna get it by its ID, so hashtag logo image like so. For this we’re actually just gonna add a height. Maybe we’ll try 60 pixels. That way it won’t take up the full height of this and the width will also adjust to that height as well. Try to maintain the same aspect ratio.

So if we give this a save now, let’s see if we get those nice changes being made. Okay, so check that out. That looks a lot better. We probably wanna bring it away from the top a little bit so I’m actually just gonna add a bit of padding to header. 10 pixels should do. Okay. So that just brings it down a bit. But now we have a bit too much space on the bottom so maybe let’s try 60 pixels. Okay. So that looks pretty good. We’ve got this logo centered, you can see it very clearly. We’ve got that gray bar up top. My gamed page obviously needs to be centered as well so we might as well just do that now. H1, oops, not like that.

We just want H1 like that. And we’re just gonna do text, align, center. Okay. And that should just bring it to the center of the page. All right, good stuff. So, that is how you add images to your project. So we learned how to install that next images library. We learned how to import images here. We have to, again create that next dot config file and add the requirements. And then we kinda just styled our page up a bit and displayed our logo in this header bar on top. Okay, so the next goal is going to be to work on those three boxes that we saw at the bottom that contain the game images and then the name and the description respectively.

And I think we should be able to get that all done in the next section but I don’t want to run it too long. So if we need to, we can break into two parts. Okay, as always, thanks for watching. We’ll see you in the next one.

Interested in continuing? Check out the full Project-Based Next.js – Games Website course, which is part of our Full-Stack Web Development Mini-Degree.

Getting Started with Next.js

Zenva — Fri, 18 Oct 2019 15:00:42 +0000

You can access the full course here: Intro to Next.js

Part 1

If you’re interested in building minimalist static web pages and web apps and have some experience with React, Next.js is the framework for you. It functions similar to react with very little setup required. Installing and running a project is as simple as running a few commands from the terminal and setting up a project with an index.js file. It works on the Node.js framework so installing extra libraries is a breeze and with the hot reload feature, you can update your web pages and see the changes instantaneously.

In this course, we will be exploring various aspects of the Next.js ecosystem. We will start with the basic installation and setup of a project and see how to run a Next.js app. We will then add an extra page and learn how to navigate using Next.js features and how to pass and retrieve data using a URL as well as some URL tips and tricks. Next, we will learn how to use CSS to style our pages and import and use Bootstrap. Finally we will export our app to static HTML and use ZEIT Now to host it. Once we are comfortable using these features of Next.js, we will build a final project, a website that will act as a home page, displaying some of our projects and navigating to a project page when a project is selected.

Part 2

First, we need to create a project folder and navigate into it. Open up an instance of terminal (command prompt or PowerShell if you are using Windows) and create and navigate to a folder named “practice” by typing the commands:

mkdir practice
cd practice

We then initialize the project and install Next.js. You must have Node.js installed for this. In terminal, type:

npm init -y
npm install --save react react-dom next

This sets the project up with the “package.json” file and the basic dependencies. We will modify this throughout directly or through terminal commands. Next we make a “pages” directory. This is where all of our code files will go. In terminal, type:

mkdir pages

Part 3

Within “pages”, create an “index.js” file. This must be the homepage for any Next.js project. Every different page in our projects will have its own “.js” file. Open “index.js” using any text editor and put some content in it like this:

const Index = () => (
 
   Hello Next.js
 
)
export default Index

This will just display “Hello Next.js” when the project is run. Speaking of starting the project, let’s run it for the first time. We have to modify the “scripts” portion of “package.json” to look like this:

"scripts": {                                                                        
   "test": "echo \"Error: no test specified\" && exit 1",
   "dev": "next",
   "build": "next build",
   "start": "next start"
}

Make sure you navigate to the project directory in the terminal and run the command:

npm run dev

This will compile and run the project on “http://localhost:3000” so if you open a browser and follow the link, you should see:

The project is now up and running! Go ahead and change the text inside of the

tag. As long as the session is still running in Terminal, whenever you save “index.js”, you should see the changes updated immediately.

Transcript 1

What’s up everyone? And welcome to our course on Next.js. My name is Nimish and I’ll be guiding you through the next two or so hours, which we’ll learn all about Next.js, how to build static web apps using Next.js.

So for starters, what is Next.js? Next.js is simply a framework for sever-rendered React apps. It’s based on Node.js and React frameworks. And it’s used to create static server-rendered apps. So we generally don’t use this to create anything super complex, it’s a really minimalist framework. So, why Next.js? First to some other frameworks. Well, for starters, it’s super, super easy to use. Especially for those who don’t have too much experience developing web apps. There are minimalist design principles applied to it. So if you’re all about pumping out the basic designs that look good and sleek, that is the Next.js in a nutshell.

It’s also very, very similar to React. So if you have experience using React, then Next.js will be a breeze to you. It’s also super easy to install and deploy. In fact, we don’t even have to download anything extra, we can do everything through npm. And deploying the app is as simple, it’s just running a few commands even to an actual static hosting service. So let’s get into the tutorial itself.

Who is this one for? Well, anyone who wants to develop static web apps with minimalist design, this is great for you. Anyone who’s looking for an easy to use a framework to develop web apps, this is great for you, too. We are expecting at this point you have some familiarity with React and basic HTML, CSS, and JavaScript. We’ll kinda be going through some of these principles fairly quickly and focusing more on the Next.js aspect of things. So what we’ll we going to be covering in this tutorial? Well we have a lot of topics, starting with first installing Next.js and running a project.

Then navigating between pages. Passing data into and receiving data from a URL. This allows us to pass data from one page to another. We’ll learn how to mask URLs, to hide unnecessary pieces of information. We’ll learn how to style pages with our own manual CSS, and also using external CSS libraries like bootstrap. We’ll learn how to then export an app into HTML and also how to deploy an app to a static hosting service we’ll be using right now.

Transcript 2

What’s up everyone, and welcome to our tutorial on installing Next.js. Before we can learn how to use it, we should probably obtain the software and get ourselves set up with a new practice project.

So what do we need to get started? We can think of these as being prerequisites. For starters, we’ll need a text editor. This is gonna be some way to write code. I’m gonna use Sublime Text, although feel free to use whichever one works best for you, that’s notepad or Notepad++ or sublime, either one works. We’ll need some way to run Unix commands as well. For those of you who using Mac or Linux, this’ll be the terminal and for you Windows users, this’ll be Command prompt or PowerShell. And we’ll also need Node.js functionality installed. So I’m kind of assuming you have all three of these things. If not, then please get yourself set up with them before continuing.

How do we then go about installing Next.js? Well, one of the best things about this is that there’s actually no need to download any bulky packages. We simply start a new npm project, install react functionality through a couple of command line commands, and then we add a script to package.json and then finally, create a pages directory and that will be the project fully set up. So what are we going to do in this tutorial here? Well, we’ll actually just install our Next.js functionality and get ourselves set up. We’ll first create a new project directory, install that react to next on functionality, and then create the pages directory.

So let’s head on over to terminal right now. Make sure you have this up and running. This is again for you Windows users, gonna be Command prompt or PowerShell. You’ll probably want to run that as an administrator. And for those of you who are using Macs or Linux, if you are running into difficulties with your commands, just try running sudo in front of them. Okay, so for starters, we need to make a project directory. I’m gonna show you in Finder where I’ll put mine. There’s gonna be under desktop Zenva, Next.js under course and I’m gonna pass it right here. It’ll just be called something like practice because we’ll be using this just over the next few sections to learn about Next.js.

So I’m gonna first navigate to that location here. Zenva … Then I want to go to next, then I want to go to courses or course. Okay, ls should confirm that there’s nothing in here. So let’s just clear that off. Okay. So the first thing we want to do is make a directory. I’m gonna call mine again Practice and I’m going to cd to that Practice and then I’m going to initialize npm. So I’m gonna do npm in it with the white tag and that will just create a package.json folder.

Okay. So we’re gonna be modifying this script’s portion in a couple of minutes here and in fact, this is what it should look like. Now we have our practice projects and it just has the package.json. Okay, so from here we’re gonna … let me just bump that up. We’re gonna install some react functionality along with the next package. So we’ll do npm, install dash, dash save. That’s a double dash there. We’ll do react, react, dash dom, and then next.

Okay, this will download and install all of the necessary packages because this kind of runs hand in hand with react, we’ll need to get react in there. We’ll need the react dom and we’ll need the next package. So this’ll be all of the downloading and installing that we really need to do. Otherwise, we just modify our package.json scripts and then, of course, add that pages directory with the necessary files inside of that. All right. So good stuff. If you’re getting a bunch of red errors along the side, again, try running it with sudo in front, or if you’re using Windows, then it’ll be the Command prompt or PowerShell. Run that as an administrator. Okay, good stuff. So let’s bump that up.

And now we want to open up our package.json, so you can do open up package.json like this, or if you want to have more control over which program, you can just do so through the Finder, if that makes things easier for you. I’m gonna use Sublime Text for mine. So this is what it looks like right now. This is also what Sublime Text looks like, for those of you who have never used it before. And it’s nice that it detects it as a json file where you’d just gonna add some stuff inside of the script’s tag here. So just put the comma there.

We’re going to start with a dev. We want to say that we’re developing with next. We want to add an a build option. We want to build with next. So we’re going to do the next build. And then finally we want to say that when we start up, we’re going to use next start like so.

So basically, just specify that we’re using next.js functionality at every component. So we’ll go ahead and save this command s and that’s it for this file. So we can actually go back to terminal now. Okay. And we do an ls. You’ll note there’s actually something missing here. So remember in the intro, I said there’s gonna be one final step we’ll need to do that’s gonna be to create a pages directory. So we’re going to make that right now. Make directory pages, okay. And then we’re going to cd, to pages. Oops, there should be nothing in pages and that definitely isn’t right now.

All right, so that is it for now. Our project is set up and almost ready for us to use. Well, it’s set up, but it was not quite ready to run. We’ll need to create our index file first and then add some of the code to it. But right now, it should look like this. We have the project directory, we’ve got node modules, package-lock json, package.json and then an empty pages folder, okay.

In the next section, we’ll create that index.js file. We’ll add the code, we’ll run it, and then we can start learning about it. So thanks for watching and we’ll see you in the next one.

Transcript 3

What’s up everyone and welcome to our tutorial on running a project. Here we’re going to create an index.js file and then we’re actually gonna run the project to be able to explore how easy it is with Next.js. So how do we go about running a project? We first start by obviously setting the project up.

We’ve completed that part at this point. We are then going to create that index.js file. Put some code that outputs HTML to a page. And then we’ll use the terminal or the command prompts to run one command which’ll get things up and running. At least this will run it locally. It won’t actually run on the server but will be able to simulate a client server relationship. So the steps for this tutorial are gonna be to set up our index.js file. We’ll create it, put it in pages and put in the necessary code. We’ll then run the project again through command prompt or terminal. And then we’ll examine the output in a browser. We’ll also get a chance to explore the hot reload feature.

So let’s head on back to our terminal or command prompt. Again, this is what our project looks like right now. It’s got these four items in it. We’re gonna go right into pages if we’re not there already. As you can see I am, that’s where we ended last time. And we’re gonna go ahead and create an index.js file. So this is easier I think through the text editor itself. I’m just gonna go up here. Create a new file and I’m gonna save this right away as index.js. So make sure you have the .js extension, which will automatically make it a JavaScript file.

I wanna put this in pages not node_modules. So let’s give that a save. We can see that this is JavaScript, index.js. And we’re going to just put a few lines of code in here. So the way that this works is we create these constants which will output some kind of HTML and then we run them by exporting them.

So we’ll create a constant called Index, we’re going to set this equal to, sum, closure which is going to output this code, oop, actually, this shouldn’t be curly braces I think, this is just supposed to be regular braces like this. And let’s just give ourselves some room there. So from here we’re going to, I guess create a div. And this div is just gonna contain some Hello World text or something. So just put that on a couple of lines. And within this, let’s just create a paragraph, like so. It’s just gonna say our classic hello world like this.

All right, so now we’ve got Index set up. We need to export it, just export the default value of Index like so. We can give this a save and we’re ready to run it. So if you’re not familiar with this syntax, we’re basically just creating this constant Index. This constant Index holds this functionality, which is basically just a way to output this to the screen. In short, all this will do is display this HTML text and then exporting it actually runs the constant. So look, again, give that a save.

We’ll now go to our command prompt or terminal. We’re going to run the command npm run dev. Actually let’s navigate out of pages, I mean it shouldn’t really matter too much but let’s just make sure we’re in the main project root. And then we’re going to do again npm run dev like so. And that will start up our project. So as you can see it’s saying Ready on http://localhost:3000. That’s how we’re going to be running things. The client and the server are successfully compiled. And you can see that’s again done in this many seconds, it’s super fast and at that time.

So now at this point it should be up and running. We simply need to open up a browser, navigate to localhost:3000. And we can see that’s up and running. So that’s really cool stuff, it’s just that easy. Again, this isn’t published to an actual server or anything, this is just kind of running a client and server locally on our systems. But we now know how to build and run a next.js project.

So I said also we’d get a chance to showcase the hot reload feature. What this does is essentially compiles and reoutputs everything in the project without having to stop running it and completely reload it. So this is one of the latest things I’ve noticed with some of the latest frameworks. They’re really focusing on this idea of hot reloading which allows us to make changes and see them really really quickly. Because kinda stopping the project, compile it, compiling it and then rerunning it is kind of a slow process.

So let’s say for example, we are back to our code editor. Let’s say we want to say hello world and everyone else. Watch that, nothing’s changed. But as soon as I save this, so I’m just gonna do Command + S or else you can go File, Save. This hot reloads it, we can see that on our web page. We see the change instantly and we can also see in terminal that we have recompiled the client and the server. So remember it ended up here. We have to recompile it, client, recompile the server and as you can see it’s done again down there. So that’s the great thing about hot reloading, is it happens almost instantly. Again let’s just quickly delete this. We’ll make sure that will navigate right back there so give it a save and you can see that it’s almost instantaneous.

So that’s fantastic stuff, all right? So that’s it for this tutorial, now that you know how to build and run project, we’ll be able to explore the different components of next.js in greater detail. Right, so thanks for watching, we’ll see you in the next one.

Interested in continuing? Check out the full Intro to Next.js course, which is part of our Full-Stack Web Development Mini-Degree.

How to Get Started with Vue.js

Lindsay Schardon — Fri, 09 Aug 2019 15:00:56 +0000

You can access the full course here: Build JavaScript Applications with Vue.js

Part 1

Hello everyone and welcome to our course on Vue.js! Here we will learn how to use the framework Vue.js to enrich our experience with web development. We will go through the basics of what it is and how to use it while exploring different components of the Vue.js ecosystem. We will then finish by creating a small blog post site that allows you to view previous posts and create new posts with real time updates.

What is Vue.js?

Vue.js is a Javascript framework that helps to compartmentalize and organize web page source codes. It’s an approachable, versatile, and performant framework to help create a more maintainable and testable codebase. Essentially, it allows for fine control over what happens within different parts of a page and shares the responsibility of maintaining functionality to both the HTML elements and the Javascript code, instead of leaving all the responsibility to the Javascript code to handle. This follows a more object oriented approach and follows the MVVM design pattern. Vue.js can easily be integrated into old pages with existing Javascript code and applied to specific parts of the page.

Essentially, Vue.js provides a means to assert fine control over each part of your page at a time rather than managing it all at once. Let’s take a look at some of the benefits.

Why use Vue.js?

Vue.js is great for a few reasons, namely: automatic updates upon data changes, logic within HTML elements, compartmentalization, and scalability. Anywhere that data is loaded dynamically updates the display in real time whenever the underlying data changes. This bypasses the need for update functions as it is handled automatically. By integrating some of the logic right into HTML elements, you can reduce the amount Javascript code necessary and more easily pair the page logic with the corresponding parts of the web page. This allows you to manage one part of a page at a time. This also makes Vue.js extremely scalable as you can incorporate the logic right into the appropriate parts of the page rather than changing the entire page structure.

Hopefully you are convinced that Vue.js is an awesome framework and are willing to give it a try! If you’re not convinced now, I guarantee that you will love it by the end of this tutorial. Let’s get started by learning how to install it and integrate it into our projects.

Part 2

Installing and starting Vue.js

Vue.js is very easy to install; you just need to use npm to add the dependencies to our project and include a but replace the “2.6.10” with the version of your choice

Now you are all set up and ready to use Vue.js! Some Vue display code will go inside of the HTML elements themselves but most of the functionality will go inside of a tag in the of your page, after the HTML skeleton.

Part 3

Vue instances and pairing with HTML elements

Vue instances are used to communicate with HTML elements. They can attach data, manage lifecycle events, and attach functionality to HTML elements. Vue instances, or Vues, are created inside of a tag inside the of an HTML page via the code:

var vue = new Vue({ //options })

“options” is a Javascript object that contains information about the Vue such as which HTML element it is attached to and which data and functions the Vue has access to. The options object acts like a dictionary with key-value pairs: the key is the variable name and the value is the variable value. Some values are methods or entire objects themselves. Some of the members of such objects are “instance members” meaning they belong to every instance of a Vue; others are custom variables, functions, and objects.

Vues should be attached to HTML elements to give the elements access to the functionality the Vue can provide. Simply create an HTML element with an ID and assign the ID under the “el” key in the Vue like this:





var attachedVue = new Vue({

el: ‘#divID’

})

This allows the div and all of its children access to anything that vue provides. Throughout the tutorial, we will add more data and functionality into the vues and see how we can use them in the attached HTML elements.

Transcript 1

What’s up guys? And welcome to our course on Vue.js. My name is Nimish, and I’ll be guiding you through the next hour to two hours, in which we’ll be learning about the exciting and innovative new framework Vue.js.

So, what is Vue.js then? For starters, it’s a framework that is used to help organize JavaScript functionality. Now that in itself doesn’t sound terribly exciting, but I, personally, am super excited about this framework. I love using it and will absolutely use it in all of my JavaScript applications. I’m an object-oriented kind of person, so this ability to help organize things, and access just different parts of the page, focus on those, really helps.

And that’s what Vue.js specializes in. It compartmentalizes pages to allow for easy web page maintenance. This is pretty huge as instead of maintaining the entire page and updating the entire page at a time, Vue.js allows you to focus on just individual parts of the page. This allows us to implement new features or just maintain and update features with ease. It’s based on Node.js and is actually very similar to React frameworks. So if you have experience working with React, you’ll fit right in into the Vue.js ecosystem.

And finally, Vue.js, in general, provides an approachable, versatile, and performant experience. It’s really quite a fantastic framework and if you’re big into organization, if you find your JavaScript files look messy and are horrendous to maintain, then Vue.js may very well be your solution.

So, why Vue.js versus some other frameworks out there? Well for starters, Vue.js is super easy to use. That’s a good starting point. It really is super, super easy to install and to use. I found it completely intuitive, and I hope you guys do as well. It’s very similar to React, so if you have experience with React, Vue.js will be fairly straightforward.

The data in Vue.js updates in real-time in all the appropriate places. This is one of my favorite things about it. And no need to call special update functions, that will re-render the page, or basically, update all your variable values. You simply change the value of the variable and in all the appropriate places, it changes just like that. We can actually build logic right into HTML elements as well. This is this whole concept of compartmentalization. It’s a fact that we can maintain one single part of the page at once. And a lot of this is moving some of the functionality from JavaScript into the HTML elements. As well, it’s highly scalable, and it’s perfectly easy to integrate into projects that are already kind of half-finished.

So who is this tutorial for – or who’s this course for? We’re assuming that you’re looking for an easy to use a JavaScript framework, as that’s exactly what Vue.js is. We’re assuming that you want to write easily maintainable JavaScript code. Of course, who wouldn’t? If you’re working on a project, or even just working on your own versus in a group setting, you do want to be able to go back to your code and maintain it and improve upon it. If you like the idea of compartmentalized pages, this might just be for you. That means if you’re coming from an object-oriented background or you like the organization, then Vue.js is the right framework.

We are expecting that you are familiar with basic HTML, CSS, and JavaScript, as well as just npm and how to use Node.js. We will be kind of assuming that you understand the basics of those.

Now, what topics will we be covering? We’re going to start with installing Vue.js and starting a new project. Because it’s just so easy to install, we can actually do two in one. We’ll then be creating and using Vue instances. We’ll get to exactly what those are in that section. Then we’ll learn how to pass data into Vue instances and use it in the HTML portions those are attached to. We’ll talk about Vue instance variables and functions. Then move on to using conditionals, such as if statements and loops in Vue. Then we’ll talk about handling user interactions and inputs such as button presses or text inputs. Then finish up with Vue components.

And finally, build together, a final project. That final project will be just a very simple blog site, which is a perfect application for Vue.js just because it’s so good at these real-time updates.

So that’s it for our project intro. I hope you guys are really excited about Vue.js, I’m so excited to teach it to you guys. Ever since I learned about it, I’ve been using it as much as possible in my web applications. So I hope you guys are of the same mind-set. Otherwise, thanks for signing up. Let’s get started by learning how to install Vue.js and start a new project.

Transcript 2

What’s up, guys? Welcome to the first part of our Vue.js tutorial series. Here we’re going to work on installing Vue.js and setting up a new project, and this will just serve as a starting point for the future tutorials.

So what do we need to get started? We’ll need some kind of a text editor. I’ll personally use Sublime Text, although feel free to use whichever one you want. You can even use simple Notepad or TextEdit if you want. Just as long as you have a way to write your JavaScript code. We’ll also need a Terminal or Command Prompt or PowerShell. This depends on which environment you’re using. I think Mac and Linux are Terminal and Windows is Command Prompt or PowerShell. You just need to be able to run some basic Linux commands.

And we’ll need a browser. I’m assuming if you’re watching this tutorial, you do have a browser set up. I think Vue.js has some troubles with Internet Explorer, so it’s a good idea to use Chrome or Firefox or Safari. I think there’s also support for Opera, although I’ll be using Chrome as well.

We’ll also need Node.js. I’m assuming that you have some experience with Node.js and using the npm to set up a project, and it’ll also install packages as well.

So in this tutorial, we’ll start by setting up a new npm project. We’ll then install Vue through this command: npm install vue. It’s gonna be very simple. And then we just need to add a script tag in the HTML head and that’s it. After we have our HTML file set up with a script tag, we’ve run the install vue, then we’re good to go. Now there are some options in the script tag. We can either specify a specific version or we can just use the latest version available. I think it’s probably a good idea to specify which version you’re using, as once you release your product into an actually usable environment, a production environment, it’s always a good idea to actually specify the version just so that you don’t get any crashes or incompatibility issues.

So let’s head on over to Terminal, actually. And what we’re gonna do is start with an npm project setup. So I have one set up on desktop already. I’m kind of assuming you know basic Linux commands. cd will just change your current directory. I’m gonna change mine to the Desktop. I can do an ls to display everything here. I’m just going to cd into a Zenva folder, an ls cd into Vue directory. There should be nothing in there. It’s just an empty folder right now. Again ls, there’s nothing there. I’m going to actually start a new directory it’s just gonna be practice so, make directory Practice, and I’m going to cd into Practice, so ls nothing there.

Then we’re just going to do the npm in it. Okay. So I’m just gonna start with the default stuff here. So it’s fine. Okay, this is okay. Yup, it’s good to go. Okay, so we do the ls. We should see owl/package.json file. Right now I’ll just have the basic dependencies, however we need a specific one. We need the Vue one. So we’re gonna do npm install vue like so, and this will make sure that we are downloading and installing Vue. If you need to provide administrative privileges, if you’re using Windows you can run the Command Prompt as an administrator. If you’re using Linux or Mac, you just add sudo in front of your commands and that will make sure it gives you any kind of writing and reading privileges that you need.

Otherwise, we should have that item in package.json. I would think we have, yup, node_modules and a package-lock.json. What we’ll want to do is that should just open up package.json and create also a file which is gonna be our index.html. I think the default entry point is in x.js, but we do want to work it in HTML file. So for this amount you’re going to use just Finder. I find it much easier to just use Finder and this Windows Explorer if you’re using Windows. And we’re just gonna go ahead and open up this package.json file.

So I’m gonna open mine with Sublime Text, that’s just a text editor I personally like using. It’s a bit small. I’m gonna make it a bit bigger. We’re gonna change this main to index.html, html like so. Oka,y we’ll give this a save. Also, note how under dependencies we have vue. This is a current version, 2.6.10. If you are watching this later on than when I recorded it, then this version may change. Okay, otherwise that’s good to go.

We are going to start up a new file here. Again, feel free to choose whichever text editor you want. I’m again using Sublime Text. Atom’s a really good text editor if you like that. You can even use a full ITE like Visual Studio Code or something. This is just kind of what I’m going with.

Now this new file is just gonna be our index.html, so we might as well save it right now. Just gonna go to save as index.html. Make sure it’s in the same directory that we just initialized. I just want to make sure, yup, Vue in Practice. Okay, good to go. Okay, cool, note how it is an HTML file now, because we added that extension.

So we’re just gonna start with a really basic setup. I’m just gonna set the DOCTYPE to html. We’re gonna start with the HTML tag. Okay, here we go, actually set up– oops I guess we didn’t need that. Sets up the head and the body as well. We give this a title if we want. It’s just gonna be Practice. You don’t always have to be specific, it’s just gonna be Vue Practice. Nothing fancy, again this is just to kind of practice some of the concepts. When it comes to our projects, we’ll start an actual project folder for that.

Okay. So then the head, that’s good. We can leave this guy alone. We’re actually only gonna add the one more item for now, and that’s going to be a script. Okay. So we’re not gonna add a type. I’m just going to manually type out the source. Now it’s kind of annoying to manually type out the source. You can actually go to Vue.js website and copy it from there. But I’m just gonna type out manually for you guys. Okay, so this will be actually specifying a specific version of Vue.js. Like I said, that’s a better idea when you’re actually releasing a product to do that, because otherwise you may run into incompatibility issues later on.

So this is going to be https. Again just getting the version. It’s gonna be cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js. Okay, and I just need to take a second to make sure I spelled that right. Okay, looks good to me. So we are good to go.

All right, so the way that this works is essentially we build our HTML elements as usual in our body, and we’ll put all of the Vue functionality in a script. Now Vue interacts directly with HTML elements, so technically speaking we’re putting some of the Vue functionality in the body here outside of the script, but all of the instances and stuff that we create will be inside of the script tags, so we may as well get that started right now. I’m actually gonna get rid of that, okay. So all of our Vue stuff is gonna go in here. All of our regular HTML stuff is gonna go in here. And we’re good to go.

So that’s it for now. We just wanted to get install and a new project set up. In the next section, we’re going to be exploring what the Vue instance is and how to use it to interact with HTML elements. Right, so thanks watching. We’ll see you guys in the next one.

Transcript 3

Well, what’s up everyone? Welcome to Part Two in our Vue.js tutorial series. Here we’re going to be covering Vue instances. We’re gonna learn about what they are and how to use them effectively to interact with HTML elements.

So what is a Vue instance? This is a way to attach Vue functionality to an HTML element. So this kind of allows for fine control over specific parts of a page. One of the main benefits to using Vue.js is that you can kind of, piece by piece, build up the page and attach specific functionality to each of those components. That means you’re not trying to control the whole page, you’re actually just controlling one part of the page at the time. Well by attaching Vue functionality to each individual HTML element or each component of the page, you can get a fine control over what goes on there.

So the idea here stems from the MVVM design pattern – if you have any familiarity with that. Essentially the model Vue, Vue model design pattern kind of brings an almost object-oriented approach to JavaScript programming. So essentially what we do is we attach the HTML element after we, of course, create the Vue instance. We parse in data, functions, lifecycle events, et cetera to the Vue element, or Vue instance rather, and then that communicates directly with the HTML element.

What we need to do is attach an id. So here we’re gonna start by creating an HTML element. It will just be a simple div (we’re not building anything fancy here). We’re then gonna create our Vue instance, and we’re going to essentially attach the two. So we won’t worry about populating the Vue instance with data or using that data at all. Here we’re just basically performing the basic setup. So let’s head on over to our code, if you remember, this is where we left off last time.

I am also going to start a new window here, okay. And this is just to ensure that when I go to run my file, I can just kind of run it and it will display here. So what I’m going to do in the body is just start off with a basic div, pretty simple stuff. For now it can just say, “Hello, world!” We’ll put the classic there. And if we go to actually run this, we make sure we save it, so it’s just a command S to save, we can go to save here. Windows I think is control S, instead of command S. We’re gonna go back to Chrome, or actually we’re going to go to Finder. We’re just going to run this index.html, and this is essentially all it is, just says, Hello, World!” Cool stuff, so let’s go back to our text editer.

Okay, so it’s a good idea when we’re using Vue.js to be specific about each file text. For example, if I am managing some text here, I might want to put this in a span element or in a paragraph element. I’m actually just gonna put this in a paragraph element, like so. Again, the difference is paragraphs will go one on top each other, span will kind of put things all in one line; it’s more an inline versus a block idea. Okay, so we’ve got this down.

We should, however, give this div an id. This is the div that we want to be communicating with a Vue.js in the Vue instances. So I’m gonna give this an id, this is just gonna be our firstDiv. Okay, cool stuff.

So within script, this is where we’re going to be placing our Vue functionality. Now to create a new Vue instance is very similar to how we would create objects in a language like Java, for example. So we would create our variable, let’s just call this our firstDivVue, you know, let’s just call this firstVue, actually. And we’re gonna set this equal to a new instance of Vue, like so. So this is now creating a Vue instance, stored in firstVue and within this Vue instance, it’s where we put all of the data, all of the functionalities, where we attach the HTML element. Essentially, it’s where we put all of the body of this instance.

This is treated like an object, and its innards are treated like a dictionary or like a JavaScript object. So it’s essentially a bunch of key-value pairs. Or you can think that it’s like variables and their values. So this is essentially called the options object, and it is just a way to kind of build up the Vue and specify with different bits and pieces.

So we’re actually just gonna work with a really simple component of this, which is going to be the element. Now this is what’s called an instance variable, because el, or element, is common to all instances of Vues. We’re going to talk more about that concept in some of the later tutorials. Just note for each of the Vues you build, it’s pretty common starting point to attach the HTML element. So in our case all we need to do is actually provide the id, just like we would access in CSS, we do the pound sign, or the number sign, and then the id, so in this case, firstDiv. You could also do it by class name, like this, but obviously we’re using elements here or rather we’re using id’s in this case.

Okay, so that’s pretty much all we want to do for now, because we’re going to be talking more about parsing and data and variables in the next section. I do quickly want to just refresh the structure of how Vue is formatted. So, again, this is kind of like an object, this is kind of called the options. Everything that goes in here is the options object. You can create your options object outside, for example, you can create it here, say options is equal to this and then start out that way. I find it just better to put the options right in here; there’s no point in creating it outside. And they’re all gonna be kind of this key-value pairing kind of format, just like a dictionary or a map or a general JavaScript object.

So element is one of the attributes, or one of the keys. Another key which we’ll be exploring in the next section is going to be data. This is how we basically parse in all of the variables and all of the data that this Vue might need. As well, this gives us a chance to parse in functions, although, this would be under something different than data, but you get the basic picture. So all of the attributes of Vue are set according to these keys, and there are a lot of built-in stuff that’s called the instance variables and instance functions. We’ll talk more about that in a couple of sections. However, for now, just take note of the fact that our firstVue is attached to our firstDiv. There’s nothing really to display right now, but that’s what we’re going to be focusing on in the next section.

Okay, so that’s it for now. In the next part, we’ll be parsing in data and using that data in our HTML element. So thanks for watching, we’ll see you guys in the next one.

Interested in continuing? Check out the full Build JavaScript Applications with Vue.js course, which is part of our Full-Stack Web Development Mini-Degree.

An Introduction to WebVR

Zenva — Fri, 01 Feb 2019 05:00:27 +0000

You can access the full course here: WebVR for Beginners – Build VR Websites with A-Frame

Part 1

Rotation Scaling Parenting

Learning Goals

Rotation transform
Scale transform
Parent/children objects
Intro to 3D modelling concepts

Go to https://aframe.io/community to get access to the documentation and Github repository of the A-Frame Library. You can also sign up for the A-Frame Slack to join the support network.

In this lesson, we will continue on exploring A-Frame’s core foundations, using the same file created in the previous lesson.

Rotation transform

A 3D object (a mesh or a model) is made out of the 3 elements: vertices, edges, and faces.

A vertex is a point in space. A vertex has coordinates x, y, and z. Connecting two vertices creates an edge. If you connect three or more vertices in a loop, you’ve created a face.

In 3D modelling, every object in a Scene has a Transform. It is used to manipulate the position, rotation, and scale of the object. You can transform these properties for the x, y, and z axis and the default values are set as such:

Position: 0, 0, 0
Rotation: 0, 0, 0
Scale: 1, 1, 1

Since A-Frame is a right-handed coordinate system, the rotation value can be defined by the direction your right-hand curls into, when your thumb is pointing at the positive direction of the chosen axis. In this example below, the thumb is pointing at the positive y-axis and thus the direction of the positive y-axis is indicated by the other fingers.

To rotate the box in our scene, simply assign rotation = “x y z”.

Scale transform

By setting a scale value, an object gets multiplied by the value to increase and decrease its size. For example, setting a scale value of 2 will double the size of the object.

This applies to each axis separately. For example, an x-scale value of 1.5 stretches the object to 150% of its original width. A y-scale value of 0.5 halves the height of the object.

A scale transform can be applied by adding: scale=”x y z”

Parent/children objects

There is also an additional option in Transform which is to parent an object to another. When an object is a parent of another object, changing the parent’s transform will affect the child’s transform as well.

To show an example, we will create an Entity in order to make it a parent of our box.

An Entity is like an empty state of an object that does not have a geometry, yet can store Transform values.

To make an entity store an object, simply create an object before closing with .

Any object created within this entity will take the position of the parent (entity) as the origin.

A green box is created at the parent entity’s position of -2, 0, -1

Summary

Meshes/3D models are made of vertices, edges and faces
In a right-handed coordinate system, rotation value can be defined by the direction your right-hand curls into, when your thumb is pointing at the positive direction of the chosen axis.
Scale multiplies the size on an axis by a number.
- Scale of 1 = no changes (default)
- Scale >1 = increase in size
- Scale <1 = decrease in size
Objects in A-Frame can have children objects
Behind the scenes, objects in A-Frame are entities with other behaviours such as geometry
Transforms of the parent are applied to the children
Children’s origin for coordinates is that of the parent

Part 2

Learning Goals

Loading a 360-degree photo
Adding a reticle
Making a box disappear when you ‘click’ on it with the reticle

A-Frame makes turning a 2D image into a 3D visualization incredibly easy. First, we need an image that has an Equirectangular projection.

Equirectangular projection maps a 3D scene onto a 2D image by conveying the scene visible in all directions, except for right above the viewer’s head and under their feet.

Such images can be captured with most 360-degree cameras as well as smartphones. Alternatively, you can acquire an image from the A-Frame 360 image gallery: https://aframe-gallery.glitch.me/

Loading a 360-degree photo

To create a 360-degree scene, import the image into your project:

We can simply use the element to contain the image:

The scene is created with an image wrapping around the camera.

Adding a reticule

Let’s have a look at this scene in the visual inspector (Ctrl+Alt+I)

You can add a camera to the scene using , then take control of the camera using a look-controls element.

To add a cursor to our camera, add attribute within :

A cursor now appears at the centre of the screen.

For more information on A-Frame cursor, refer to the documentation:

https://aframe.io/docs/1.0.0/components/cursor.html

Interactive behaviour

We’ll implement a basic interaction so that when you click on a box, it disappears. Let’s start by creating a simple box:

Within , you can add to allow interactive behaviour.

attribute=” “> can be used to specify which property value is to animate. For example, to make a box disappear, we can set the ‘visible’ attribute to ‘false’. We can also use begin=” ” to set an event condition that triggers the animation.

This will allow us to click on the box and have the box change its visibility property to false.

Summary

Load asset (same as any image)
Assign it as a src to a element
360-degree photos can be taken with any smartphone
Must be on an equirectangular projection
- Aspect ratio 2:1 for a full sphere
Reticule
- ‘Mouse cursor’ in VR
- Must add a camera entity and place an a-cursor element inside
- A-Frame is compatible with most VR platforms in the market
Animation
- Allows us to change a property value to a different state
- ‘attribute‘ specifies the property to be changed
- ‘to‘ specifies the end value
- ‘begin‘ specifies the condition of the animation
- Documentation: https://aframe.io/docs/1.0.0/components/animation.html

Transcript 1

Hello and welcome to the course. My name is Pablo Farias Navarro and I’ll be your instructor. In this course, we are going to create simple virtual reality website using the A-Frame Library. Now the A-Frame Library works on WebVR. WebVR is an open standard to bring virtual reality to the browser. This works in all current browsers and with all current VR platforms, mobile or desktop. So if you open this website, for example, from a phone that has Google Cardboard, you can see virtual reality or if you connect a virtual reality headset, you can see the virtual reality and if you don’t have a virtual reality headset or you’re not interested in getting something for virtual reality, you can still feel these experiences that are just a website.

So they can be embedded on a webpage or they can be pulled on the web. So that is quite amazing because we are in this course, we’re only using HTML to build this website. So we are creating some interactions here in this page so we can see them all. So we can have some animations and make an object disappear or make an object react to whether you are looking at them or not with the reticle which is the cursor. So we can have different types of things happening here and also we are gonna see how to import existing 3D models into this virtual reality experience.

Now our main learning goals here. So by the end of this course, you’ll learn to create simple and virtual reality websites like what you saw. We’ll be doing a couple of other small demos as well. So you’ll learn the basics of the A-Frame library. You’ll be working with the primitive shapes like cubes and spheres, triangles, cylinders, cones. We’ll learn about the coordinate systems and also how to bring in the 360 photos. What are 360 photos? How to load them into a website and we’ll add the reticle which is like the mouse cursor that we saw and do some basic things with animations and bringing those 3D value as well.

Now the requirements of this course and the only requirement of this course is basic knowledge of HTML. If you have never done any HTML before, you can find a free course in all e-learning platforms, you can find it and you will need a code editor for which I will be using Atom and you’ll need also a local web server but that is, we’ll cover how to install one in the course so don’t worry about that. Now you don’t need to know any Javascript because we’re not going to be doing Javascript in this course. So we’re only going to be using the clarity of HTML aspect of this A-Frame library.

Now everything you learn here is applicable to all different areas. You can create experiences like this for training, for education purposes. You can use this for tourism or for real estate, for all industries really. There is space to innovate in virtual reality and the fact that you are interested in this course does mean you are someone who is an innovator and if you take this course or if you complete this course, I’m sure you will get some good takeaways that will give you a better idea of what can be done with virtual reality on the web which is a very new thing that is actively being developed.

We’ve been creating courses and teaching people how to code and create games and different types of applications since 2012 with over 200,000 enrollments and something that we’ve learned over the years is that we are, the best way in how we can do our job is to encourage people to pursue their own learning style. So we don’t try to impose a particular learning style in our students. Some people like to watch the entire course, like watch watch a Netflix show, they will watch everything in a couple of days. Some other people will watch it little by little. They will download the source code. They will ask questions. Some people will just go through the topics they’re interested in so it’s really up to you how you want to access the material.

You can watch the lessons as many times as you want and what we’ve seen that really helps a lot of people is when they work on their own projects on the side. So they are completing the course and they’re also creating something and of course, we recommend people to plan ahead when they will be watching the course so some people allocate a couple of days a week where they spend say an hour watching a couple of lessons and playing with the source code so there are different ways on how to get the most out of this course and we want all of you to succeed so see what’s best for you and use this course in whichever way you find suitable for your own learning style.

Alright well thanks for watching this introduction. Now let’s get started and let’s go and have a look at the A-Frame Library.

Transcript 2

In this lesson we’ll continue exploring A-Frame and you’ll keep on learning core foundations so that you can build any sort of project with this library. But before we move any further, I wanted to show you a couple websites here that I didn’t mention before. So in here on the home page if you go to Community, you’ll get access to a few pages here that are very important. So, there is the Documentation which we’ll be using in this particular lesson.

And there are two sites here that are important to check out as well. So one of them is the GitHub repository that is in case you are interested in following the library even on a day to day basis because there are updates here daily in terms of the code. And you can always join a site collaborator as well. If that’s something you want to do.

And then there is also the Slack channel which is a great way to get real time interaction with developers that are working with this library. So if you go here, Slack, it is a, basically an online chatting tool that is free to join and then you can talk to other people in real time that are using this library. So that is their basic support network basically. They also have social accounts and a mailing list if you want to learn more about that.

Alright, so let’s continue exploring what can be done here. So I’m going to go back to my project. And what I’ve done here is put what we did before in a folder named 01. So that’s what we did before. And I created a new folder, 02, and I have that same file in there. I’ve also loaded second file on my local web browser. And so for that I simply change the folder here that we were at, that we are at. And I’ve opened that in my code editor as well. So, what I want to talk about here are two other transforms that we can apply to a model here or a mesh. So I’m using a lot of words here, right?

So let’s start from the beginning. When I talk about position, what we are really doing is applying a translation transformation. So we are transforming a box by moving its position to this place because by default the position is zero, zero, zero. So we are applying what’s called a transform and this is a concept commonly used in 3D modeling, 3D tools. Now when I talk about a model or a mesh, I’m talking about a 3D objects that are represented by vertices.

Let’s bring up the drawing application here. So a, a mesh or a model is, let’s write it down, is represented by vertices or points in space and then each, these are vertices. They all have coordinates, X, Y, Z, and then the vertices are joined by what’s called edges, so that’s an edge. And these terms are common to all 3D applications. So you can have something like that. And once you have three or more edges that are joined together, you can have what’s called a face, which is basically that. So, in 3D modeling you can have what’s called transforms and that can be a position transform transformation.

But you can also have a rotation. And scaling, scale. Whoops, scale. Let’s improve this a little bit. So let’s talk about rotation. Well, you can have rotation about all three axes. So you can have a rotation about X, about Y, about Z. So those are three different numbers. By default, all these models you create have a rotation of zero. Now when is a rotation positive and when is a rotation negative? Since we are on a right hand coordinate system, a positive rotation is when you use your thumb to point at the positive direction of your axis, so that could be Z, or it could be X, or it could be Y, and then you use your other fingers to close that rotation to make that movement so that will define a positive rotation.

And that is specified in angles that go from zero to 360 to do a full circle. So that is the rotation transform. And I’ll talk about scale in a minute, let’s first do something with rotation here. So let’s rotate our box about the y-axis, so that is, we are going to literally rotate it in this way so that y-axis points up, so we are going to be rotating about the axis that points up. So we going type here, rotation, and then we have to enter the values for X, Y, and Z. So for X, we’re going to leave that at zero. For Y, we’re going to rotate this about, we’re going to rotate this 45 degrees. And no rotation on Z.

So I’m going to save that and I’m going to go back here and I’m going to press F5 to refresh page, or press refresh here, reload the page, and we should see that rotation taking place. So, let’s try a different value here, like 90, for example. And we can see how it’s rotating about the y-axis. And if we set this back to zero, we should have the initial figure. And when we enter 90, it looks the same as now because it’s basically a cube that looks the same in all directions, so they will look the same from all different sides.

Okay so, that is rotation and you can of course combine rotations on different, on all the different axes. So you can have a rotation that is something like so. And then you will see that it is rotated about all three axes in different angles. Now, what about the other transform that I mentioned, scaling? So let’s take a look at that. We can also scale a model, for example a cube, in this case. We can scale it on all different axes as well. And what that means, is that you are basically multiplying the size by a certain number.

So by default, the scale is one, which means that whatever size this has we’re not changing that size. So if you set a scale, for example, a scale on, in this case on X, if you set a scale of two, and this is the X, this is the X-axis, then our cube will be, will be twice the size on that particular axis. So the new cube will look like so. The new end’s no longer going to be a cube, it’s going to be a box. So you can increase the size by changing the scale. And you can also decrease the size by entering a value that is less than one. So if you say, for example, 0.5, that will reduce the size by half on whichever axis you specify. So let’s go and do that to our box. So let’s, we’re going to keep that rotation there just to, to leave it, so you can play with that value.

But I can go here and change the scale. So let’s say that I don’t, actually let’s set the scale and the rotation just to zero so that we don’t get distracted by that. So let’s say that I want my cube to be twice the size in X and I want to be the same size on Y, so it’s the same height. And it’s going to be half the size on Z. And we can actually go here and have a second cube so that we can compare both cubes. So we’ll position this, let’s position this on two here or on three so there’s more separation between them. They have a, a width of 1 in all directions by default by the way.

So this one is not going to have the scale modify so that’s it’s easy to compare both of them. So let’s go back here and refresh this page. And you can see that this one is the one we’ve modified. So on X, which is this axis, it is twice the size. And it is the same height as the other one, but the depth has been reduced by half. So those are the three basic transforms that you can have. And now something else that I want to specify to talk about is that you can have elements of our children of other elements in here.

For example, you can have an element that is positioned on, let’s say a certain point, and then inside of that element, you can have other elements, other objects, other cubes, or anything else. And then if you change the coordinate of the parent object, it will move all the children object as well. And if you scale the parent object, it will also scale all the children objects. So let’s see how we can do that. So for that, I’m going to add another element here. And I’m going to make this an empty element, if you will. An element that doesn’t really have a geometry of a cube or a sphere or anything like that. So that is going to be called an entity. That is like a neutral type of element. Which you can then transform. You can then make a cube or make a sphere.

So an entity will be, in this case, a containing object. So let’s go and add a containing object and let’s position it somewhere. Let’s position it on X, let’s do minus two here, position it on zero, and minus the, minus one, so it’s a little bit closer to us. So if we go and open this, we’re not going to see anything because there’s no geometry there. So we don’t see anything new in our scene. So we want to put things inside of this. So if we go and we add a box, the position of that box, whichever number we enter here, is taking the position of the parent as the origin. So if we say zero, zero, zero, the position of the box is not going to be zero in the world in scene coordinates, it’s going to be zero on the parent’s. It’s going to be in this position. So let’s go and do that.

Let’s give this a color. And by the way for color picking, I’ve installed here a color picking plugin for Atom. So go to File, if you are using Atom. I’ve done this by going to File, Settings, and then here Install, and I just searched for color picker. And I found one here and I clicked Install. I think it’s not going to show now. Oh yeah, there it is. I’ve already installed it so it will show here. And you can click Install, and then you have the buttons you need to press on a Mac or a PC to open it. So on a PC use Control, Alt, C, it gives me a color picker. So I’m going to go and pick a color. Let’s pick this blue. So I’m going to click here.

And actually I want the hexadecimal value, so I’m going to go here again, pick some other blue. And, actually I want to pick like a dark green. And click here, Hex, so I’m going to click here and that gives me the hex color. And I’m going to close my a-box element. So let’s go and see what we get in the browser. Press refresh the page. So we’ve got our box there, that is our box. And we can go and add something else. Or let’s move this up a little bit, let’s move this to two. And I’m going to add another box. And this box will go underneath that previous box, it will go on one. And for this I’m going to pick a certain brown color. So let’s find some color here that we want to use and save this and press refresh. So we’ve got both of them there.

And, I will show you now is if I go and I scaled the parent, that one. So I go to the parent object and I give it a scale of 0.5, 0.5, 0.5, we are applying that transform to all the children. So now it looks much smaller. And the children can also have their own transforms. And those will be applied on top of which everything you applied before.

So we can say that the parent object there, that this was something like the top of the foliage of a tree and this is a trunk of a tree. So this could be a scale of 0.2. And we could keep the same height, 0.2 here. And all of a sudden, we can have a simple low poly tree in a very easy way. And then you basically created a tree in this matter so then you can create more trees and you can place them in other parts of your scenes. We can place trees everywhere that we want, really. And we have something like that.

Now, where exactly, why exactly sticking a position here? The position is the center of the mesh, of the cube. So the position here is the center of the cube. And so if you give your cube a certain coordinate, if that is the position you are giving the cube, that will be the center of the cube. And that will be the position, basically, if you have the inside of the cube, something like that. This, the point that you put in the middle, is in the middle. Let’s do this again.

So the position of the center of this cube, will be in the middle on all the coordinates. So it will be half of the, it will be X. This will be position X. This will be the position Z. And this will be the position Y. So the point I guess will be somewhere inside there. So if we bring this down, did something like that, and this is like sort of half of the height. So in the case of the tree, they both by default have a size of one. So we positioned one in Y equals two, and we positioned the other one in Y equals one. So that is why they are like that. And so if we reduce the Y on a scale of 0.5, the new cube will be more in the, still the center of the cube will still be in the middle. The center of the box, I mean, because we want the cube.

So let me go and do that just to show you. Here’s our tree. If I go and I reduce the size of the Y here, we will have that floating in there. So as you can see, there is a difference between both of them. And so if we wanted to do that, then we would also have to adjust the position in Y. But I will leave this as one. Basically the takeaway here is that the point that you specify for position is the center of the box. And that the point is not going to change if you scale the box up or down. So if you scale your box, you need to adjust the position if you want the center of the box to be at a different place. Well, that is all for this lesson.

In the next lesson, we will be introducing more primitive shapes. So we’ll be looking at spheres, at cones, at cylinders, and we’ll be looking at more things that this amazing framework has to offer.

Transcript 3

In this lesson, we will add a 360 photo to our scene, so we’ll be using that instead of plain color. And we are also going to learn how to create a reticle, which is like a mouse cursor in virtual reality. It’s like a pointer. And how to do some very, very simple things when we click on some object or when we look at some object in our scene. So let’s get started and let’s start by talking about 360 photos. So when I first heard about 360 degree photos a while back, I didn’t know how they were stored, like I thought there was a different file format for those photos. But, so how can we store something that is a sphere as a normal image?

But if you think about it, we are all familiar with the world map, of course. And the world map is a rectangular representation of something that is a sphere, or approximately a sphere. So the way to bring a sphere into a rectangle, one way of doing it is what is called the equirectangular projection. And for us to use 360 photos in a frame, we need a 360 photo that has a equirectangular projection. And it turns out that most photos you can take with a 360 cameras have that option.

So I’ve taken a photo with my, in this case with the Samsung camera app. And this photo that I took just near my house. And it has the same projection that the world map has. And basically the ratio between the width and the height is two. So if the width is two, then the height is one. So this is the image that we will be using here. Okay, so we’ve got the image already and that is present in my folder, in my images folder. So what I will do now is import that image into my project. So I’ve created a new project here, this is folder number five.

And I already set up the basic scene and I opened up the assets tag so that we don’t have to tag that again. So I’m going to go and I’m going to load my 360 photo, so the name of that file was a little bit long, so I’m going to copy the name of the file and just paste it here. So we’re going to give this an ID of 360 photo, like so. And close this tag. So in our scene, we will be using the same elements that we used to create the plain color sky but instead of using a color, we’re going to use a source and we’re going to set the ID of our photo, so that’s 360 photo. And we need to make sure that we close that tag. So that should be enough. Let’s go and see if that works.

Let’s go to the browser here and we need to make sure to load this (mumbles) five. Yep, it’s all good, so I’m going to press enter. And here we go. So we got the 360 photo in, I don’t know, two lines of code or not even that, so this is an extremely simple way to bring in a 360 photo. It’s almost too simple to be true. So we got the photo now. And there are some imperfections in this photo. It’s not a professionally taken photo but it will do the job for us. So that is how we can bring in a photo. So now that we have this 360 photos, we’ll do the other part of this lesson, which I mentioned before, which is adding this reticle.

So if we go to the inspector, you will see that the ID photo have this camera object. We never really created a camera, we never really gave this camera a position or a rotation. And we can even see the position that has the height of 1.6, which is the number I mentioned when we said that the layer by default was at 1.6. You cast a certain rotation now because I have been moving around, I have been looking around. But this here has an camera component, so that is something that we should be interested in. It also has a looks control, and that is what allows us to drag that around.

And then there’s also this other component that is so that you can move in the scene using the arrow keys in your keyboard. So that is added by default as well. Although in my opinion, in virtual reality experience is that it’s not as helpful because it’s more like for the computer. But if you are, say, on your headset you’re not going to have those keys. I find that this could be more useful for when you are developing, if you want to be able to move around. Or maybe if you are building a VR experience. That is just something that you can have as well. But in a 360 photo environment, because you can’t really move, the photo is just taken in one position, this would definitely not have any use.

But what I wanted to show you is that there is a camera by default when you don’t add a camera. But when you add a camera, you can have more control as to what will happen in your scene. So let’s go and do that. Let’s go and add our own camera. So in our scene this time, we will be adding an entity. And this entity will have this camera attribute as camera component, so we’re going to give it the camera component. And it’s also going to have this look controls component, which is the one we used to drag with the mouse to look around. So if we just add that, we should end up with pretty much the same that we had before because there’s no really any change. These things are added by default.

So let’s go back to our project here. Let’s reload this page. So we have what we had before, but now we have been explicit about it. So what else I can do here, I can, and in fact if we go here, and select the camera now, you’ll see that the position is now zero because we didn’t set the position. And since we are setting the camera, now we are in control of the position of the camera. And also we no longer have that added element. So we just have the very basics, the very default values. I will give that height to my camera, so position equals zero and 1.6 and zero, just so that we can have elements that are say, underneath of us, or above us.

But since we are on a 360 photo, it doesn’t matter because the photo is always the same. So that is for the camera. Now why is it that we added the camera? It is so that we can add things inside of the camera. And whatever you are inside the camera follows the camera around because it’s a child object. And what we want to have here is a cursor. So it’s a cursor. And that is what is for the reticle. So if you just add a cursor and slash a cursor, that will give us a reticle and that is what we can use to select things. So you can see that ring there. So you can change the color of your reticle, so we can say color equals cyan, like a more shiny color.

And we’ve got something that looks better now. It kind of looks like the loading indicator on Windows Vista or something. But anyway, feel free to change it. You can also learn more about the cursor in the documentation here. So if we go scroll down, we’ll find the a cursor element. And there aren’t that many options, really, but you’ve got some more stuff in there. Like the maximum distance, how far elements can be before they, when they interact with cursors. If something is too far away, the cursor won’t be able to interact with it.

Now that we have the cursor, we can start using some events. So what I want to show you here in the documentation as well, if we go to events, that is somewhere in here, I think I’m gonna have to find it, like so. It’s not that part. There is one part that has the events of the, oh no no, sorry, it’s my bad. It is in cursor.

And then if you go to events here, so here we have different events that we can have with our cursor. So we can have, for example, when the cursor interacts with the entity, or when the cursor no, intersects with the entity, or when no longer intersects with an entity, and the ones that are related to the mouse, if that is when you are pressing on an entity, or when you stop pressing on an entity, and the click is a click, basically. But the click will also work on, for example, the Google cardboard or some other headsets that have a clicker button or a single button that’s like a trigger button that can be used for that event.

Let’s now implement something interactive, something simple with our reticle. What we’ll do is be able to make a box disappear when we click on it. We’ll be using an animation for that. And then in the next lesson we’ll look at animations in a more depth and we’ll cover more properties of animations. But for now we’ll just implement the very basic, the most basic animation that we can think of. So I’m going to start by creating a box, which I will make of color red, and I will give this box a certain position, let’s say two minus four and one. This will be a box that we should be able to get in our scene.

So let’s go back to our project here. Where is this box? I’m not seeing it anywhere, let’s see if I made some mistake here. So we’ve got the color red, position. Oh, so this should be one, this should be minus four. I keep on getting those confused. Okay, so now we should see this box right from the start. All right, so now we want to be able to click on the box and have the box disappear. So inside of the box component we’ll be adding an A dash animation element. And this will allow us to change a certain property of the box.

So the property will be changed and this will be specified under attribute. So the property is called visible. That is what you use to make things appear or disappear. So you can add the visible property, for example if you add visible equals false to our sky, our sky should no longer be there.

So that is something that you can use for any element. So this could be a position, it could be scale, it could be color, but we’re going to use visible. So now then, we need to specify what is going to be the end value at the end of the animation. So it is a property called to. The end value at the end of the animation is going to be false. And now we need to enter what event will make this animation start. So it’s a property called begin. And the property here will be that this will be the name of the event, which is click. So this should give us a very basic behavior, interactive behavior. So if I go and save that, I should now be able to click on the box and have the box change its visibility property to false. Let’s try that. Let’s go over and refresh the page.

And bring our cursor there, and now if I click, my box is disappeared. It’s still there, but it’s just invisible so we can no longer click on it again. It’s basically gone from the scene. All right, so we’ve got that basic thing working and you have learned in this lesson how to load a 360 photo, which on its own is something that can be quite useful. We have also learned that in order for us to have a cursor, we need to place that inside the camera, and for that we need to take control of our camera and create our own camera.

Look controls is what gives us this nice way of looking around with the mouse. And since we created our camera, we now have to basically take ownership of the position of the camera. We can create a reticle in this manner, and then if you want something to react to an event, you can simply create an animation, specify the attribute, and then you can set its value, what you will change it towards, and you can specify which event will trigger this animation. So that is all for this lesson. I will see you in the next video.

Interested in continuing? Check out the full WebVR for Beginners – Build VR Websites with A-Frame course, which is part of our HTML5 Game Development Mini-Degree.

Full-Stack Web Development Mini-Degree

Pablo Farias — Sat, 17 Nov 2018 00:30:58 +0000

Go from Zero to Full-Stack Engineer as you build web apps with HTML5, JavaScript, NodeJS, MongoDB, React, GraphQL, Angular, Git, AWS, and Azure.

This project-oriented curriculum begins by covering the foundations of programming and web development. You’ll learn to create responsive and interactive websites as you get familiar with the basics. We’ll then move on to the server-side and introduce Node.js, Express, Mongo and other frameworks. You’ll be building webapps, REST API’s and scripts.

Following the server-side, we’ll delve further into front-end, this time covering modern frameworks for creating robust applications such as React and Angular. You’ll learn how to integrate these projects with Node.js back-ends and API’s. Finally, you’ll be shown how to use important tools such as Git and Github, and the deployment process to popular platforms such as AWS, Azure and Heroku.

Access this Mini-Degree on Zenva Academy

Learn Web Development by Creating a Social Network

Zenva — Fri, 20 May 2016 03:25:31 +0000

Even if you have never written a line of code before you can learn the basics of web development while building a real world, fully functional social network. You will use JavaScript to build that network with real-time capabilities and then you will learn how to place that network on the web.

The main goal of the course is to give you a quick exposure to the full development stack, using JavaScript, as opposed to the usual approach of learning one thing at a time and never getting a “big picture” view.

Access this course on Zenva Academy

The Complete Web Application Development Course with Meteor.js

Zenva — Fri, 20 May 2016 03:08:07 +0000

You don’t need server-side or database programing experience to learn to create impressive web applications with real-time capabilities. With just basic to intermediate JavaScript skills, you can get started learning how to create highly interactive, real-time webapps with Meteor.js.

Meteor.js, is a full-stack JavaScript framework designed to drastically simplify development time and complexity. You will be creating full-stack JavaScript applications in a fraction of the time.

Access this course on Zenva Academy

Famo.us Tutorial – Fundamentals

Ashley Menhennett — Mon, 29 Jun 2015 06:47:13 +0000

Famo.us Fundamentals

You can download the tutorial source code here.

Getting Ready

In this tutorial we are going to be taking a look at the JavaScript framework, Famo.us. Before we start, we should take a quick look at our directory structure:

As you can see, we are working with only a single JavaScript file (we will be importing the famo.us JavaScript framework inside of our HTML5 file) and a single HTML file.

Let’s take a look at our HTML5 file:

So, once you have created your ‘index.html’ file and saved it, it’s time to create our ‘js’ directory and create our ‘main.js’ file inside the directory.

The Render Tree

Before we get started coding in JavaScript, let’s talk about The Render Tree. In famo.us, we rarely work directly with the HTML DOM. Instead, we have something called The Render Tree, which bypasses several performance issues associated with working directly with the DOM. The Render Tree is a JavaScript representation of the DOM.

The body element in the DOM is referred to as the root of The Render Tree and this is a context, we create the context via the Famo.us Engine. Let’s take a look at this in code (this will go at the top of your JavaScript file):

					/* import dependencies */
					var Engine = famous.core.Engine;
					var Surface = famous.core.Surface;

					/* creating the main context, using the famo.us Engine	*/
					var context = Engine.createContext();

When the above code is executed (the HTML5 file is loaded into the browser) we can see the DOM and it will look something like this:

Notice the class that was added to the body element and the div with the class of ‘famous-container’ that was added to the DOM.

Creating a Surface

In famo.us we represent and present an element in our HTML DOM with something called a Surface. Surfaces are instantiated from the Surface class, then added to the Context. Add the following code to your JavaScript:

					/* create a new Surface-- instantiated from the Surface class */
					var circle = new Surface();

					/* add the surface to the context */
					context.add(circle);

If we take a look at our DOM now, we see something like this:

The Options Object

When we instantiate our Surface, we can pass in an Options object, this will allow us to add sizes, content, classes and CSS properties to our Surface. Let’s replace our current instantiation of the Surface with the following code:

					/* creating a new Surface-- instantiated from the Surface class */
					var circle = new Surface({
						/* passing in an 'options' object that defines the content for the surface */
						size: [300, 300],
						content: "

My Surface

“,
classes: [‘my-circle’],
properties: {
/*
instead of using dashes, like we would in CSS- we use camel casing
*/
textAlign: “center”,
color: “white”,
backgroundColor: “#1abc9c”,
fontSize: “40px”,
padding: “40px”,
borderRadius: “50%”
}
});
As you can see, we have given our Surface a size, some content, a class and some properties (which is also an object).

State Modifiers

In famo.us, we use something called a StateModifier (and add it to the Context) to manipulate a Surface’s position (in conjunction with a Transform object). Let’s take a look at instantiating a StateModifier and adding it to the Context:

Firstly, we must import the dependencies (Transform will be used to manipulate the Surface’s position):

					/* Transform is used in the stateModifier, for the transform property */
					var Transform = famous.core.Transform;
					/* used to translate or move a surface */
					var StateModifier = famous.modifiers.StateModifier;

Now, let’s instantiate the StateModifier and manipulate the Surface’s position:

					var stateModifier = new StateModifier();
					stateModifier.setTransform(
						Transform.translate(100, 400, 0)
						/* starts at top left, so our circle will be 100px from the left and 400px from the top of the document */
					);

Where we were adding the Surface to the Context, let’s replace it with the following code:

					/* adding the StateModifier to the Context */
					context.add(stateModifier).add(circle);

We should end up with our circle down the bottom left of the browser:

Animations

To get ready for working with animations, we must import the Easing dependency:

					var Easing = famous.transitions.Easing;

After we have our import included into the top of our JavaScript file, we can add some animation code into our setTransform() method of the StateModifier Object that we have. So, replace the first setTransform() method that we have so far and add the rest of the code that follows:

					stateModifier.setTransform(
						Transform.translate(100, 400, 0),
						{duration: 2000, curve: 'easeInOut'}
						/* starts at top left and animates to the translate properties position */
					);
					stateModifier.setTransform(
						Transform.translate(400, 200, 0),
						{duration: 4000, curve: Easing.inOutSine},
						/* starts at top left and animates to the translate properties position */
						function(){
							circle.setContent("DONE");
						}
					);

As we can see, we are using two different ‘curve’ properties for our animation. The duration property is in milliseconds. We are also adding a callback function to our second animation (the animations will execute in the order they are in, in the JavaScript file) to set the content of the circle to “DONE” when the animation is complete.

Screen 1:

Screen 2:

Events

Let’s duplicate our working directory (the directory containing our HTML5 and JavaScript) and then empty the JavaScript duplicate, so we can start fresh for the Events section of this tutorial.

Let’s import our dependencies and create our main context like we did previously:

					/* import dependencies */
					var Engine = famous.core.Engine;
					var Surface = famous.core.Surface;
					/* creating the main context, using the famo.us Engine	*/
					var context = Engine.createContext();

Now let’s create our Surface and add it to the context:

					/* create a new Surface-- instantiated from the Surface class */
					var box = new Surface({
						/* passing in an 'options' object that defines the content for the surface */
						size: [400, 400],
						content: "

My Surface

“,
/*
can pass in a string, HTML or a DOM element.
can also use setContent() method of surface to set content
*/
properties: {
/*
instead of using dashes, like we would in CSS- we use camel casing
*/
textAlign: “center”,
color: “white”,
backgroundColor: “#3498db”,
fontSize: “30px”,
padding: “30px”,
}
});

/* add the surface to the context */
context.add(box);
Now, let’s handle a ‘mouseover’ event, using the on() method of our Surface. When the user ‘mouses-over’ the surface we are simply changing the text color on the Surface, I have also listed some other events within the famo.us framework:

					/* Adding an event handler for the 'mouseover' event */
					box.on('mouseover', function(){

						box.setProperties({
							color: "#000000"
						});

						/*
							===
							Other Events
							===
							click
							mousedown
							mousemove
							mouseup
							mouseover
							mouseout
							touchstart
							touchmove
							touchend
							touchcancel
							keydown
							keyup
							keypress
						*/

					});

When you ‘mouseover’ the surface, the color of the text should change to black:

I hope you have enjoyed this starter tutorial on the famo.us framework. Let us know how you went, by leaving a comment below.