Tag: linux

Posted on by

Putting the Finishing Touches on our Meteor Project

Click here to subscribe for more videos like this!

Alright guys, this is getting closer to done. We now have a new working way to insert posts and also, view the posts here. One thing you’ll notice is that we’ve got posts by two different people. So, how Meteor should handle this in React and Flow Router. We’re going to modify our home component a little bit to be able to use a different route, so I’m going to go on my router file here FlowRouter and let’s name the route posts-by and then user. So, the colon here basically means that while post is going to be the name of a variable, and we can use that variable by accessing params. So, what I’m going to do is name the route Posts and the action we’re going to pass Params to the action is going to be renderView I’m going to reuse the home component here, but I’m also going to pass it in with user property and that’s going to be equal to params.user and so now, I’m going to close this component and end that with semi colon. I actually need to that there It got a little displaced there. Silly issue. When we create new routes, we need to type Flow Router.route Alright. What we need to do now is we need to make this conditional if we’re on basically in the router, we’re passing a user property here, but we’re not here so we can use this to identify if we’re on this route. So, what we’re going to do here is when we get post method I’m going to say if this.props.user we’re going to return Posts.find where the user is equal to this.props.user we’re going to fetch those else, we’re just going to return all the posts. So, if I go back here, and refresh this, I’m going to see when I view posts by Nick, that these are the only results I get, and when I view posts by Pete, these are the only posts I get. And still accessing the home page I will get all of the posts. And you can see how you can really reuse components here to be able to serve conditional data. Now, that’s basically, all Meteor is. It’s very simple and straightforward. I use it with React and Flow Router, I really recommend it. It’s much faster, it’s basically quicker to do everything. It’s quicker to develop, It’s quicker to browse. It makes your app faster in general. I hope you guys found this tutorial informative. I know it’s a bit longer than the other ones. And so hopefully, you know, the next few videos will be shorter, I think they will. And I’m going to actually provide this code to you guys. through GitHub, so right now, we’re going to be combining a bit of what we’ve been doing. So, I’m going to GitHub.com I’m going to create a new repository here, and I’m going to call it Meteor React Tutorial. And let’s initialize it with a Readme file, and then all the usual stuff. So, right in the directory here git init, git remote, add origin, I need to paste that URL here. I’m going to close WebStorm, so that we can get rid of the .idea directory. So, we can just use the regular rm -rf .idea, there. And then we’re going to run git -ignore/* git add -A git commit -m the message is going to be Example meteor react stuff and git push origin master. Here we go, if I refresh this, we should see, here is the entire Meteor project that we just created. You can find it a GitHub.com/nickgermaine/meteor-react-tutorial Thanks for watching this video, I hope you guys found it informative, if a bit long, hopefully, the next set of videos should be a bit shorter.

Posted on by

Rendering the Posts in our Meteor Project Using React

Click here to subscribe for more videos like this!

So, let’s create a component to render the post. So, in the home directory under components, I’m going to create a new file and I’m going to call it Post.jsx So, as usual, Post = React.createClass and up here. And what we’re going to do at this point is something a little different. Because each post that’s rendered needs to be rendered with this single post. So, what we’re going to do is we’re going to pass the post id as a property to this function. So, let’s just render, and let postid = and then the post id. This.props.postId Now, something I like to do if we’re passing multiple properties and they’re always passed in as these props and then the name of it. What you can do, you can actually, do this. So, wrap your variables in these curly brackets. And let’s say I also had a post image and whatnot and this will say basically, each one of this is equal to this.props. whatever it is. So, it’s really useful when you’re using multiple ones. And right now, I’m going to console log post.id and then the post id return div There. So, what we’re going to do is we need to map the posts, actually let’s get to that after let’s add a couple tasks in here, so we can actually pull them out and see what we’re working with. Username Nick This is my first post Save. And I should set it to automatically reset this to default empty when we save it. This is another post and then something you’ll really enjoy. So now, I’ve got three posts. And I want to pull them out them down here. So now, to render posts we need to create a couple of methods here in the home file. So, one of them is going to be called getPosts We’re going to pass it an id and the other one is going to be called renderPosts So, what we’re going to do is the get posts is going to return all of the posts because I didn’t need to pass it an id. So, get posts, let’s just return Posts.find fetch and then from here, from render posts, we need to return this.getPosts and then we’re going to map and we’re going to call it post here, and put a little fancy arrow, to an object, we can end that with a semicolon and we’re going to return the post component with the post being sent as an attribute or a property. Let’s end that with a semicolon as well. And what we need to do is in here, in the main body, I’m going to put a line break there, and then I’m going to call this renderPosts Let me have a quick look over here, make sure it’s all good. Looks all good. So let’s go back here and what we need to do, is in post. Ah, see there we go! In post, I’m just returning this, so let’s do class name is card and then in here, let’s go with an h3 tag and here, see this property that’s what I’m expecting to get and so the post is the only property I am setting over here. So, I’m going to in curly brackets here, I’m going to put post.user and then in a paragraph tag, I’m going to put post.content and Save. And so to recap, what we are doing is we are mapping the results of this function to basically this, and this is a new way we can actually pass each item from these results, over as posts to this little block here, which returns the component and we pass the posts through with the property name of posts, so in the post component we can reference the entire post as this from this props. So, we go back here and refresh I’ve got through there and this is not working. What have I done wrong? So, I’m going to pass the id along as a key property here. Posts._id and the reason why it wasn’t rendering the post, which is because I forgot to add the brackets here, so that it runs this function. So, if I save that, go back here and refresh, I’m going to see this. Now, I’m going to, let’s say Add a few of these here. And the great thing about React is when something changes, it scans the document, and you’ll see over here React ids and it performs a div of the current content vs the new content and only rewrites the portions that need to get rewritten. So, it’s a lot faster, that’s why it’s better to scale using React than Blaze. Second post of mine, which will be a bit longer. So, I’m going to style this up a bit, I’ll be right back.

Posted on by

Getting in to the Programming of our Meteor Project

 

Click here to subscribe for more videos like this!

What we’re going to do next is get into the programming of this. So, I want to close this, because I no longer need them. And in server, I’m going to create a new directory called Collections. And in here, I’m going to create a new file and I’m going to call this collection, posts. And so, posts=new Mongo Collection posts. And then, I’m going to write Posts.allow insert: function return true: update: function return true: and remove: function. Function, return true. And this is going to allow us to insert update, remove from that collection. So the posts are going to let’s create a way to put the posts in first. So in the Home page, let’s actually I’m going to create a new component here called a InsertPost.jsx Insert Post is going to be the name. It’s going to be put to React.createClass And I’m going to basically render some html to put a post in to the database. So I’m going to form actually I don’t need that. Let’s just use a text area placeholder is going to be Type a post, name is going to be actually let’s just give it a className. And we’re going to put form-control and id of a post-body. The male tag has empty body, alright, and then a button. So, button className is going to be button, btn.info and it’s going to say, Save Post. Let’s save that in the home component, let’s render that. So let’s just InsertPost, there. Alright, I have to wrap it here. There, alright. Let’s indent this so it doesn’t look too bad. And if we refresh this, we’re going to see that our new component has been rendered. But if we type stuff, it doesn’t do anything right now. So let’s have an insert to that collection over here. And how we do that is we’re going to create a new function here called insertTo Collection it’s going to take event. So once you start getting more functions in React components, you need to separate them with comma. And what we’re going to do is we need to, say, onClick and in curly braces type this and then the function name. So this is going to be insert to collection. And we’re not passing anything to it so you could leave out the brackets here at the end. And the first thing we’re going to do is event.preventDefault And then we’re going to get the post body. So, content… Actually I need to var content= or we can just use straight up
Jquery here to get post body. I’m going to console.log content make sure we’re getting it. Didn’t mean to copy that, there. So let’s save that. Come back here, refresh this. There we go. And so we are getting that content into that function. So from this point, it’s a basically regular Meteor stuff, we’re going to type Post insert and then content just content. So, save that and refresh and actually to be able to I’m going to wrap this in a form element just because it’s so, that we can hit Enter, in the text area. And it will also submit it. So, onSubmit we’re going to call this .insertToCollection So, we can just actually change this to type =Submit and remove this part here and this button will also function as a means to insert it to the collection. So, to come back here and refresh let’s make sure that it gets into the collection,so This is a post to insert to the collection. I’m gonna hit Enter. Alright, this is a text area, nevermind. I’m gonna save that. And it logs it out, and If I want to make sure that it inserts it successfully, I’m going to in the console log here, I’m going to find and let’s just do that fetch, and it did put it into the database with content there as the key. So, let’s actually extend that a bit further by adding, date, added, it’s going to be new date. And if you want to be able to read it easier, you can do this, that’s what I usually do, and it’s going to make it easier if you get like huge objects that you are putting in to the collection. So, I’m going to delete that console log now. We do not need that. So, now, we’ve got this working, it’s a component to insert post. But how can we get them out of the database? So, over in our home component, I’m going to do a couple of things, First, it’s going to be, I’m going to add a property called mixins Put a colon and then, this. I’m going to type MeteorReact ReactMeteorData So, now we can create a new function and it’s going to connect MeteorData to the component and the function name is going to be getMeteorData We open it up, we do this. So, right now, I’m going to just get all the posts. And so, I’m going to variable posts, = posts, find fetch. And then in here, we’re going to return certain things to the render function. So, I’m going to just type return and then open up curly brackets here. I’m going to return posts as posts. We’re gonna save this. And now, what we can do is we can access that from the render function by for instance create a variable here called allPosts and is = to this.data.posts I’m going to console log all posts I’m going to save that I’m going to refresh this page, and it’s going to log all the posts, which right now, this is the only one we have. So, that’s awesome. How do we get it into here? Ah, well, let’s actually go back to insert posts here. I’m going to create an input field class name is going to be form-control The idea is going to be, user and the placeholder is just going to say, username. And that let’s put a line break there. I’m also going to put a line break down here. I’m going to also handle this: var user = just straight up JQuery from here, the idea of user .val I’m going to insert that to the collection as well. So, user = user and then a comma. So, we now have three fields that will get entered into the collection. I’m going to remove the current one we’ve got. Because, it doesn’t have this necessary information in it to render it. So, I’m just going to type posts find fetch, I’m going to get that ID, I’m going to say, posts.remove id that connector. Now, if I run post find fetch, it finds nothing because we’ve just removed them.

Posted on by

Continuing with our Meteor/React Project

Click here to subscribe for more videos like this!

So in Components, let’s create a new file. Let’s call this Header.jsx and I’m going to open it up by typing Header=React.createClass open up that up as usual. And in the render function here, I’m just going to return a bit of bootstrap and so, div class, actually, I’m just going to wrap up that in the div first. So in this render function you can’t just type div class= you know whatever, because class is use to java script so we actually need to type class name. And then we can get the class so I’m just going to call it Navbar Navbar-default and close that. And I’m just going to div class name=container put up a bootstrap container in there and then div className=navbar-brand. Actually this shouldn’t be an A element. And it’s just going to say My Site Name, like that. So if we save that, the header is now created. So now, I’m going to create the Footer. And the same thing would go for the Footer. But I’m not going to put anything in here. I’m just going to have a return a div, so, Footer=React.createClass I’m going to open that up. Going to open the render function and return div. Like that. So now we need to create the Home component. And the reason why is we’ve referenced Home, header and footer we’ve got footer and header created we still need this component which we’re passing in as Home. So we need to create the Home component. So I’m going to create a new directory here to keep things organized, I’m going to call it Home. And in that directory I’m going to create a file called Home.jsx snd I’m going to do the same thing I’m going to name the component Home=React.createClass Right now, I’m just going to render return div, actually h1 I’m just going to say Hello World and hit Save. So to come back here and refresh this page we’re going to start to see it take shape. Because we’ve created all the components that we’re referencing. And so, the first thing I’d like to draw your attention to is that it…we open this up. So in the, where was it, the main layout, I console.log(this.props.LogThis) which I passed into this class as a property. So that’s basically what’s happening we’re passing in components to the main layout components. So, I would reference header, content and footer in the very same way. Except, what we could do is if you want to render the content of a property, you put it in single curly brackets. So it’s like blaze except you’re not using two curly brackets, you’re just using one and you just type it. So let’s type this.props.header this.props. home or content rather we’re referencing that here, we’re setting it, the property is content, so we’re going to reference it like that. And then the footer is so, this,props.footer We’re going to save thisand this is our main layout. So the header, if I for instance made a route called FlowRouter.route/page and open up curly brackets here, let’s name it a Page and the action is going to be renderView and let’s say I had a component named ThisPage I would do that and it would render that component into the main layout with the header that component and then the footer enrolls in passing this just as a proof content. We’re not going to do that. So now, we’ve got this. But bootstrap does not appear to be working and I think maybe, I’ve forgotten to add bootstrap here. I don’t think I got added. Maybe in the last video I know I added it. Maybe I canceled that a bit for some reason, so. Let’s go ahead and get that added, so, control C here, meteor add twbs:bootstrap and hit Enter. Alright. I’m going to run Meteor again. And the page refreshes automatically because it’s Meteor.

Posted on by

How to use React with your next Meteor Project

Click here to subscribe for more videos like this!

Hey guys, welcome back! So, I’m going to be showing you guys how to use Meteor with React and Flow Router, and I find that there’s not too much information out there on this combination of tools and so it makes sense to give you guys that information. If you’re following along this course anyway you know, I think it’s quite reasonable to assume that some of you will at least are going to need this information. And even if you didn’t know you needed it, maybe you can go ahead and use Meteor in your next project. So in the last video, we created a project through terminal from Meteor. So what I’m going to do now is I’m going to open up a terminal, and I’m going to change directory to Projects, and into todo. And so, Meteor automatically creates a few files for you first. So let’s go ahead and open this up in Webstorm. I’m going to click Open, and down into Projects, to todo, hit okay, and Webstorm is going to open up the Project. And we’ve got the Project View on the left hand side. So the first thing we’re going to do is delete these files because we don’t need them. Now we’re going to start creating some directories because in Meteor, projects can get fairly large because you’re going to be working with a lot of files, and so organization is a huge benefit here. Let’s right click and create a directory called Client. I’m going to create another directory called Lib, and one more for Server. Now the Client’s directory is going to contain everything that is going to be available to the client. So this is where your templates and stuff are going to go. So in Client, I’m going to create a new directory called Components, and this is where we are going to store the React components. Now in Lib what I’m going to do is create a file called Router.jsx, and in the Router file, we’re going to be defining routes for Flow Router. So before we get to that, we actually need to add some Packages Project. So in the Directory here in terminal, just type “meteor add react kadira:react-layout and kadira:flow-router” and hit enter. There we go, so we’ve got everything added in here. I was having an issue with Jet Brains IDEs and basically it was a conflict with open JDK, and so in order to resolve those, I’ve installed Oracle Java. And basically what was happening was, when you start typing something, this auto suggestion box pops up and that was causing the program to hang. And so to resolve that, what I had to do was, add a repository to my system, and I’m just going to search “webupd8 java”, and you’re going to go to the launchpad.net page, and in here just copy this archive url there ppa:webupd8team/java, and in terminal you can run “sudo add-apt-repository and then the repository name. And you can actually start connecting multiple commands together. So sudo-apt-get update, and the way you connect commands together is by using two ampersands “&&” between the commands. Now it basically says run command one and when that’s done if it’s successful run command two, and if that’s done, run the next command, which is going to be “sudo apt-get install oracle-java8-installer”. And so you are going to run that and that should resolve the issues with Jet Brains IDEs if you’re having the same as I was. So let’s get back to in here. So let’s start making some routes.

Posted on by

Design & Build Your Own Personal Computer Coupon!

I have been building my own computers for nearly 10 years now, and it is both a valuable skill & extremely fun to do! Understanding the inner-workings of a computer will help you troubleshoot problems, build superior custom PC’s, save money selecting your own components, and elevate your technical skills!

If you work in an office or some other administrative job, chances are you spend most of your day using a computer. In fact, computers are typically the most used piece of equipment in both our personal & business lives. I have worked in corporations where administrators were often at the mercy of the IT department, because people in general know very little about how computers actually work. So, learn how to build your very own personal computer today, and level up your technical skills! Enroll on Udemy for only $10!

https://www.udemy.com/build-a-computer

This course will cover the following topics:

  • Choosing the proper computer components
  • Hardware unboxing
  • Putting the hardware together
  • Installing the necessary software
  • Programs to download for Windows 10
  • Linux Installation (dual boot & virtual machine)
  • Cleaning up a used computer

Thank you for taking the time to read this, and I hope to see you in the course!

build-a-pc

Click here to enroll in the course on Udemy!

 

 

Posted on by

The Complete Ethical Hacking Course for 2016/2017 Coupon!

If you want to get started as an ethical hacker, learn how network security professionals protect their systems, or take your IT career to the next level you are going to LOVE this course! This course is a sequel to The Complete Ethical Hacking Course: Beginner to Advanced! which over 50,000 students have taken, and was at one point the most popular ethical hacking course in the world! Join us now and receive over 80 lectures & 15 hours of HD video, and 1 on 1 assistance from experienced network security professionals! Enroll now for only $25!

https://www.udemy.com/hacking-complete

We will cover the following topics in this course:

  • Introduction to ethical hacking
  • Linux installation, terminal basics, and Wireshark Setup
  • Staying anonymous online, proxy servers, and accessing the dark side of the internet using TOR
  • Aircrack-ng, HashCat, and wifi hacking
  • Defending your own networks from attacks
  • Cloning websites
  • Arduino USB keylogger that works out of the box for Windows 7, 8, 8.1, and 10
  • Windows power shell scripting

This course will receive monthly updates based on students requests, and our goal is to make this the #1 network security course online!

DISCLAIMER The attacks demonstrated in this course can cause serious damage and are only shown for educational purposes. The intent of this course is to give you the tools to defend your own networks, share skills that are valuable to companies all over the world, and help you to better understand the challenges that information security professionals face on a daily basis.

English & Spanish subtitles available.

Thank you for taking the time to read this, and we hope to see you in the course!

hacking-25

Click here to enroll in the course on Udemy!