Topal Admission

Hi. We all want to excel at something. Whether it is painting, writing, math or in my case developing for the web. Ever since i was a little boy i was fascinated by technology. I loved tinkering around with it and just see what i could do with it. And didn’t only want to understand how i could use it. But why it works.

 

My love for technology and inventing
When we went traveling i brought a little notebook with me. I took notes and drew ideas and used the environment around me as inspiration. When i was 7 i came up with a hang glider like contraption that had thin solar panels mounted to the top of the wings. The energy obtained would then be used to power a small electrical motor. As unrealistic as it was it was great fun, and i haven’t lost that spark til this day.

So enough reminiscing, what about the admission
When i found out that programming and web development was a thing. I was ecstatic. I would sit for hours on end reading books and testing ideas, and i still do. The reason i want to join the toptal Web freelancers community is to explore a new platform where i can work with clients of all backgrounds and build my expertise and creativity. thank you if you read so far.
 

 

Regular expressions 

hello! in this article i will be giving an introduction to regular expressions. note that regular expressions is quite a big subject and i won’t be able to cover everything in this article but i will cover enough to give you fundemental knowledge in the topic. thus i will provide links to various resources with broad coverage on the topic. 

now, what are regular expressions?

Regular expressions, sometimes shortend as regexp or regex. In the most general sense it Is a set of characters that make up a search pattern. They are implemented in almost all serious programming languages and they are a very powerfull tool. At first gaze they might look a little frightning, but if you break it up it isn’t that hard to wrap your mind around it.

Implementing regular expressions

Regular expressions consist of a set of core components. We will look at implementing the most basic ones in the language javascript. An easy way to test these examples is to open the console in the devloper tools in a browser of your choise, i’m using chrome. Another option is to use the node.js environment. you define a regular expression by using two backslashes or by using the regular expression constructor. Though i reccomend the use of backslash defined regular expressions, because the regex constructor requires cumbersome syntax in some cases. Regular expressions have a set of methods, the simplest of which is myRegex.test('a test'). Which is the one we will be using. it returns true when it finds a match and false when it does not. The following is a series of examples, i will explain each of them and cover some fundemental concepts

matching a series of digits:
var regex = /[0-9]+/;
console.log(regex.test(3153));
//=> true

matching cat, rat or hat
var regex = /(c|r|h)at/;
console.log(regex.test('hat'));
//=> true

matching an absolute url
var regex = /https?:\/\/(www\.)?\w+\./;
console.log(regex.test('http://www.maxlloyd.no'));
//=> true

matching top, pop and prop
var regex = /(t|p)r?op/;
console.log(regex.test('prop'));
//=> true

Explaining examples

digits example:

in this example we declare a range and we also use one of the repetition operators. the square brackets lets us do a few things, one of them is letting us define a range by using the dash character. The range is ordered by the characters unicode position. In this case we declare a range from 0-9. And since all the digits unicode position is right next to each other we get a range from 0-9. Which are all the digits. The pluss sign you see at the end is a repetition operator. What it means is that can be repeated one or more times. so this regular expression means, match any series of digits.

cat, rat or hat example:

the first thing that appears in this example is an opening parathesis. this means we are declaring a group. this can be a very usefull tool. With this we can do things like applying operators to a set of characters. like var regex = /bo(hoo)+/; . indicating that we want to allow ‘hoo’ to be repeated. In this case our group contains c, r and h, seperated by the pipe character, which means or. The group is then followed by ‘at’. This regular expression means c or r or h followed by at. This makes cat, rat and hat all
evaluate to true.

absolute url example:

this is probablly the most complicated one so we’ll step through it
slowly. the frist part of this regular expression is ‘http’ then followed by an s followed by a question mark. The question mark in the realm of regular expressions means that the previous character or group is optional (can apear 0 or 1 time). So that means it can be http or https. This is then followed by a colon and two sets of forward and backslashes. The forward slash is used when we want to escape the character following it (remove its possible special meaning). Here we escape both the backslashes because they they mean the start or end of a regular expression. At this point our regular expression resembles that of a http(s) request, which is what we want. This is then followed by a group containing ‘www\.’. We have to escape the because in regular expressions it means any character but a new line. Following the group is a question mark (which we covered earlier) making it optional. we do this because things like browsers let you omit ‘www’ from the request. And then we se an escaped w character? but w doesn’t have a special meaning. Well no, but the forward slash is used to escape characters AND for short hands. Short hands are commonly used patterns represendted by a forward slash and whatever the character the short hand is represendted by. In the first example instead of using [0-9]+ we could have used \d+ . d standing for digit. In this example we use the short hand \w+ . Meaning any word character, and it may be repeated one or more times. After the short hand all that is left of the regular expression is an escaped dot character. This regular expression will match anthing beggining with http or https followed by an optional www. and then any amount of word characters followed by a dot character. This would allow an infinitly long url, which obviously isn’t optimal but i have chosen to keep it like this for the sake of simplicity.

top, pop and prop example:

with the knowledge you have gained from the previous examples this one shouldn’t be too hard to digest. Here we start off by defining a group that allows for t or p. This is the followed by an optional r. The finally ended with op. This allows for both top and pop. Since we have allowed an optional r prop also evaluates to true.

Summary

regular expressions, a powerfull weapon with a sometimes wonky handle. If you learn to use them will serve you well. A wide array of things can be done with them, write parsers, strip comments from files, match urls, etc. Hope this helped or started your journey into the realm of regular expressions. Some helpful resources are linked bellow. Have a good rest of your day where ever you are in the world.

Resources

Chapter 9 in eloquent javascript breaks it up in digestible parts that are easy to understand, it also provides exercises.
The wikipedia article covers everything you’ll need to know about regular expressions

My favorite tools

Hello! i’m sorry for my extended absence. I hope this article is compensation enough. This article will cover some of my favorite tools that i use on a day to day basis in my projects. Of-course this is just my preference. this will not include any pre-processors, libraries etc 

Atom

My favorite editor and the one i always end up coming back to is Atom, i love the customiziblility of it and the well thought out user interface. The editor has it’s own built in package manager that you can access via the editor itself or via the command line by typing ‘amp’. amp stands for Atom Package Manager, as you might have expected

2015-06-28_21-11-49

Adobe Kuler

This is by far the best tool for picking colour, it comes packed with features. It may be a little bit intimidating if you haven’t read anything about how colour theory but i promise it isn’t as intimidating as it looks. This web app lets you create colour pallets that you can synchronize with your adobe account! Which lets you access them inside Photoshop or illustrator. even though i use neither of those programs it is a really neat feature. 2015-06-28_21-16-05

Git

If you don’t know what git is then get out! no i’m just kidding :). If you don’t know what git is, it is a Distributed revision control system. I use it daily and it has really been a life saver. i strongly reccomend you set of some time to learn it. you won’t regret it git-logo

Trello

i found this a couple of months ago and it is has been such an amazing tool. it lets you organize all of your ideas easily, on all of your devices. you can create something called a ‘board’ that contain ‘columns’ which in contains card like notes which you can move from column to column. for example you could have a board named ‘Things i need to do’. And then have columns named. Todo, doing and done. And when you’re done with one task you can move it from doing to done. in addition to that you can add things like labels and due dates to these cards

JiszgZdZ

Resources

Colour Theory
Adobe Kuler
Git
Trello

Conclusion

Of course i use more tools than this but these are some of my favorities :-). Hope you enjoyed this article and thanks for reading.

Is using a framework bad?

I’ve seen this question pop up on various websites and blogs. Here i’m going to address this question and say what i think about the idea of using frameworks. Thank you for reading this and supporting me 🙂

What is a framework?

In the most general sence a framework is a set of rules and or tools we use to guide and help us in the process of building something. This also holds true when we talk about a framework in the coding world. For example, angularJS helps us structure our websites in an efficient manner and also provides loads of other helpful features. So fundemantally, it helps us in the process of building something, in this case it is a website/web app.

So, should i use one

My answer this is both yes and no, let me explain. When i have been on development communities and scrolled through the problems people present. I see people answering with for example jQuery when the user was writing in plain javascript. What i mean by this is that a lot of people become so reliant on a framework that they forget the language the framework is operating on or even confuse it with the core language! Frameworks are wonderful tools. But it can be very damaging if you have no clue what’s going on behind the scenes. Because this makes you reliant on this given framework if you cannot recreate the effect needed without it. Most clients probably don’t want an extra file eating of the bandwidth because you don’t know how to make a simple grid system. So my answer is, it depends on what the clients needs. you should use it because it allows for faster development and suites the project, not because you do not know how to recreate the functionality you would find in this framework.

conclusion

don’t get me wrong, i like frameworks. And i use them from time to time. but if you want to become a professional developer you should understand why the framework works the way it works. Well that is about it on what i think about frameworks. thank you for reading.

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.