4 tips

Hey all! in this article i will give you some great tips that applies to everyone not just coders or web developers. Hope you enjoy them and thanks for reading this article and supporting me.

Be passionate about what you are doing

If you don’t care about what you are doing there is no point in doing it. You have to be passionate about what you are doing and care about doing it well.

analyze your work

In order to improve, you have to critially analyze your work everday with an objective mindset. When you’re about to make a desicion ALWAYS stop and think, “Is there any better way i can do this”. And often there is. But many of us end up running in auto-pilot and never acctually think about about what we are doing and don’t ask our selves these critical questions.

Making excuses is useless

“it’s broken”, “it can’t be done”. these Are excuses we often tell ourselves. Before you give up and bother someone else stop and think about if the excuse sounds reasonable, or if it is stupid. Run through the conversation in your head. think about how the other person is going to respond. Do you think they will ask you “Have you considered this, or tried that”. And think about how you will respond. Before you go bother someone else is there any thing else you can try?

Responsibility

Be mature and take responsibility. Do not blame your mistakes on someone or something else. If you take a risk, and you know the consequenses if it fails. That is a descicion you made. and you should take responsibilty for that mistake.

AngularJS Introduction and examples

AngularJS

AngularJS is a MVC – Model View Controller framework i recommended in my previous post. Here i’,m going to go through the basics of Angular as well provide you with challenges and examples. Warning! this is not a full introduction to angular, here i just explain some nifty features to get you exited and show you some examples. Hope you enjoy! 

Angular, what is it?

Angular is framework used to write main table dynamic organized web applications. In your HTML you sprinkle what is called directives on your html tags. A directive is simply attributes Angular has defined that you place in your tags. The framework provides you with cool features that allow you to create structured web apps and single page applications(SPA). go to Angularjs.org to see how to get started and install it.

Directives

Directives and angular defined attributes that you place in your tags. Which your angular uses to manipulate the html page.There are many directives that come with angular like ng-app, ng-repeat, ng-model. you need ng-app to include this as some container element in your application in order for it to work with angular. later i will show you a simple example with ng-model.

Controllers

A controller is something you define in your JS files. you attach it to the DOM – Document Object Model by including the ng-controller directive on a container element. When you want to pass data to the DOM via the ng-controller directive you include the scope object in your controller.

Example

ng-model

This is a simple ng-model example. here the data getting retrieved from the input element is getting updated in real time and displayed in the h1 tag. all without even touching a javascript file. in angular you use something called expressions, they are composed of two curly braces on either side. you could do {{ 3 + 4 }} and it would display 7! This example will update the name in real time! the name expression all ways be equal to the value of the input field.

model

ng-controller

The $scope is what allows us to communicate data from the controller to the dom. in this example the myCtrl controller stores a greeting in $scope. The container element that carries the controller tag with a value of myCtrl now has access to the greeting variable.

ctrl

Challanges

a): What does MVC stand for?

b): What does the scope object do?

c): What is an expression?

d): what is a directive?

Thank you for reading! i hope you enjoyed this short intro. But this is by no means a comprehensive guide. I made this to get you exited about the cool features and get you interested in the framework. To read more go to their website.

Front end Web development – where to start & what i wish someone told me when i started web development

Where do i start?

There are many routes you can take when it comes to web development, Sometimes it can even be a bit confusing due to the giant variety of technologies you can learn, and in many ways you end up not knowing what to learn or invest your time in. And therefore end up being an advanced beginner because you learn a little bit of everything but you are not really an expert in anything. here i’m going to talk about some core components, tips & tricks in web development. i will also provide resources for further learning.

 

Basic Front-end

JavaScripti’m going to start off with a misconception about JavaScript, JavaScript is NOT Java. They are two completely separate languages. When you load up a page, the html and CSS gets downloaded. But without JavaScript, you have little to no interactivity to your page. When you’re on a webpage, and click a click a button, use an image slider. All of that interactivity is brought to you by JavaScript. definitely a necessity for ever web developers toolkit. Once you’ve got a good grasp of the concepts of JavaScript i urge you to learn jQuery, read more about it at their website.

 

HTML: HTML Stands for Hyper Text Markup Language. your HTML is where all the content goes and where you link to your Style Sheets and scripts. You apply CSS to your html page to provide style, and JavaScript to provide interactivity. HTML provides the skeleton for your webpage. HTML is easy, it consists of many elements/ AKA Tags that provide different functionality. everything you do revolves around your html files And it is an absolute necessity to learn it.

 

CSS: CSS stands for Cascading Style Sheets. This language controls everything regarding the placement of elements, color, padding, margin And so on. CSS lets you personalize your page and add character to your page. CSS consists of key and value pairs you use to customize elements. for example. Body { background-color: black }. You don’t have to become a CSS ninja, but you should be comfortable with the language.

 

 

No Matter which route you take

Basic terminal usage: it doesn’t matter which operating system you are on. some basic knowledge of how to use and navigate the terminal of your OS is a valuable skill. 

Github: Github is a repository hosting service on the web, it offers all the SCM (Source Control management) utilities of git , but also adds its own handy features. While Git is strictly a command line tool, github provides a nice user Interface in the comfort of your browser. I would also recommend that you learn the basics of git to get a better understanding of the basic Source Control Management concepts. GitHub is wonderful community of sharing and collaboration and i  encourage you to leap into it.

Webservices: A webservice is essentially a way for two individual electronic devices to communicate over a network. An example of this is JSON (JavaScript Object Notation ). It is a format that uses text that we humans can read to communicate data composed of key – value pairs or also known as attribute – value pairs. You can recognize this format in CSS. There are many Webservices, JSON is just one of them.

 

Basic concepts of the web: If we break the web into 3 fundamental parts. There is the client side also known as the front end. and then there is the backend/Server. and also the database. The backend/Server serves information from the database to the client side. The client side is Chrome, Firefox, Iphone, Android Device or whatever device or browser that has access to the internet. It is the part that the user sees and interacts with. For example. When you enter YouTube.com in the browser. the server redirects you to the page, And fetches the recommended videos for your account from the database.

 

After the basics

Learn a MVC Javascript Framework: There are many MVC frameworks out there but the most popular and best to invest your time in learning is AngularJS, it is maintained by google and is a great framework. It helps you keep things organized and structured. There are lots of them out there. Do some research and find the one you like most. But i would personally recommend angular.

CSS Tools: This falls under 3 sub categories: precompilers, responsive design and CSS Frameworks. A precompiler is what you want when your styles sheet is getting longer and more complex. It will save you space and make it maintainable. It lets you take advantage of things that don’t exist in css, like variables and nesting. A prime example of a CSS precompiler is SASS. If you go on for example youtube, and you try to resize the page. you can see that the page changes according to the size of the browser window. This is what we call Responsive Web Design. It’s a valuable tool to be able to build responsive webpages, but there are great CSS frameworks that can help you with this. Bootstrap is the first one that comes to mind that i would recommend.

Front End Build Tools: Now what do i mean by Front End Build Tools? A Front End Build tool is something like Grunt. Grunt is what you call a JavaScript task runner. If i had to describe grunt in 1 word it would be automation. it takes care of repetitive tasks like minification. it is the process in which a program removes all the comments and shortens the variable names of file as well as removing all white spaces. it makes the file smaller and therefore saves bandwith and makes the site load faster. another useful framwork is bower, here is a quote from their website: “Web sites are made of lots of things — frameworks, libraries, assets, utilities, and rainbows. Bower manages all these things for you.”.

Where to go from here?

Thank you very much for reading and i hope this has been of help you, i will finish by listing some great resources:

 Mozilla Developer Network Is a great and vibrant community, this provides all the help you need for not only javascript but for html and css too!

W3Schools is the place if you want to learn anything about html , they cover loads of other things like AngularJS, jQuery, etc aswell.

Lynda.com Provides you with great video courses about anything you can imagine within web design and technology.

Tools:

Atom is an open source text editor with loads of features. it’s based on chromium and is hosted on github.

Webstorm is a very intelligent and heavy duty IDE. i recommend this if you are coming from something like eclipse and like the richly-featured development suite. Due to it’s

Plunkr is a handy tool for web developers, it let’s you make and share plunks. you can add libraries with just the click of a button. i use this when i have learned something new and i wanna try it out without starting up a whole new project

Books:

These Books are by far the best books you can by if you are starting out learning front end web development.

if you want to learn angular this book is for you.