Edvinas Urbasius

@edvinasurbasius

Tutorials, reviews, and other articles about technology.

2,759 words

https://edvinasurbasius.com/ @edvinasurbasius
You'll only receive email when Edvinas Urbasius publishes a new post

The Notes from The ABC of Programming Chapter

The first chapter is divided into three parts:

  • What is a script and how do I create one?
  • How do computers fit in with the world around them?
  • How do I write a script for a web page?

A script is a Series of Instructions

Scripts can be compared to recipes, handbooks and manuals.

For example, a cook can create a dish by following the instructions in a recipe. For new cooks, there is a lot of terminologies, and the same happens for new programmers.

Employees get handbooks that contain procedures to follow in certain situations. However, they only have to follow certain steps in certain situations. Similarly, in a complex script, the browser might use only a small portion of code.

Mechanics use repair manuals to service cars they are not familiar with. Manuals contain a series of tests to check if the key functions of the car are working. This way a mechanic can pass tests and proceed further with the repairs. Similarly, the browser can perform only a set of steps.

Writing a Script

To write a script, you need to state your goal and the tasks that need to be completed in order to achieve it.

When learning something new, it’s a good idea to break it down into smaller tasks and learn one thing at the time.

The computer cannot perform like humans, it needs to follow instructions every time it performs the task. For a computer, every time is the first time.

  1. Define the Goal. First, you define a task you want to achieve.
  2. Design the Script. Split the goal out into a series of tasks.
  3. Code Each Step. Each of the steps needs to be written in a programming language that the computer understands. For us it’s JavaScript.

A good tip is to spend time designing your script before you start writing it.

Here is an example of tasks of a hotel cleaner:

  1. Remove used bedding
  2. Wipe all surfaces
  3. Vacuum floors
  4. Fit new bedding
  5. Remove used towels and soaps
  6. Clean toilet, bath, sink, surfaces
  7. Place new towels and soaps
  8. Wipe bathroom floor

Each individual task may be broken down into a sequence of steps. The steps then can be translated into individual lines of code.

Just like learning any new language, you need to get to grips with the:

  1. Vocabulary: The words that computers understand
  2. Syntax: How you put those words together to create instructions computers can follow

A programmatic approach to problem-solving.

We need to learn to “think” like a computer because they solve tasks in different ways than you or I might approach them.

How Do Computers Fit in With the World Around Them?

Computers Create Models of the World Using Data.

For example, a hotel is a real-world object for humans, but for a computer, a hotel doesn’t mean anything. It does not know what they are used for. To bridge the gap, programmers create a very different kind of model for computers and these models are made by using data.

Objects and Properties

In computer programming, each physical thing in the world can be represented as an object. For example, a car or a hotel.

Programmers say there is one instance of the car or hotel object.

Objects (Things)

Each object has its own:

  1. Properties
  2. Events
  3. Methods

Together it forms a working model of the object.

Properties (Characteristics)

Both of the cars share common characteristics. For example, all cars have a make, a color, and engine size. Programmers call these characteristics the properties of an object.

Each property has a name and a value.

One of the hotel properties can be its name, or rating, or rooms.

Events

In the real-world people interact with objects. These interactions can change the values of the properties in these objects.

What is an event?

We can interact with each type of object. For example, a car has at least two pedals. The car responds differently when the driver interacts with each of the different pedals.

  • The accelerator makes the car go faster
  • The brake slows it down

Similarly, programs are designed to do different things when users interact with the computer in different ways.

An event is the computer's way of sticking up its hand to say "Hey, this just happened!"

What does an event do?

Programmers choose which events they respond to. When a specific event happens, that event can be used to trigger a specific section of the code.

Scripts often use different events to trigger different types of functionality.

Methods

Methods represent things people need to do with objects. They can retrieve or update the values of an object's properties.

What is a method?

Methods typically represent how people (or other things) interact with an object in the real world.

What does a method do?

The code for a method can contain lots of instructions that together represent one task.

For example, hotels will commonly be asked if any rooms are free. A method can be written for this task.

Putting it all together

Computers use data to create models of things in the real world.

The events, methods, and properties of an object all relate to each other.

For example, when a reservation is made, the book event fires.

The book event triggers the makeBooking() method, which increases the value of bookings property. The value of the bookings property is changed.

Web browsers are programs built using objects

Window Object

The browser presents each window or tab using a window object.

The location property of the window object will tell you the URL of the current page.

Document Object

The* current* web page loaded into each window is modeled using a document object.

The title property of the document object tells you what is between the opening and closing tag for that webpage.

The document object represents an HTML page.

Using the document object, you can access and change what content users see on the page and respond how they interact with it.

The document object has:

  • Properties. For example, the title of the page.
  • Methods. For example, getting information from a specified element or adding new content.
  • Events. For example, a user clicking or tapping on an element.

When the browser creates a model of a webpage, it not only creates a document object, but it also creates a new object for each element on the page.

How a browser sees a webpage:

  1. Receive a page as HTML code
  2. Create a model of the page and store it in memory
  3. Use a rendering engine to show the page on a screen

All major browsers use a JavaScript interpreter to translate your instructions (in JavaScript) into instructions the computer can follow.

How do I write a script for a web page?

How HTML, CSS, & JavaScript fit together

Three languages that are used to create web pages: HTML, CSS, and JavaScript.

Keep three languages in separate files.

Each language forms a separate layer with a different purpose.

Content Layer

.html files. The page structure and semantics.

Presentation Layer

.css files. The CSS enhances the HTML.

Behavior Layer

.js files. The page behavior and interactivity.

Progressive Enhancement

These three layers form the basis of a popular approach to building web pages called progressive enhancement.

HTML Only

Allows you to focus on its content.

HTML + CSS

The Content and design rules are kept in a separate stylesheet.

HTML + CSS + JAVASCRIPT

Enhances the usability of the page or the experience of interacting with this site. The page still works if the user cannot load or run the JavaScript.

How to use Objects & Methods

document.write('Good Write');

The document object represents the entire web page. All web browsers implement this object.

The write() method of the document object allows new content to be written on the page.

The dot is a member operator. The document object has several methods and properties. They are known as members of that object.

You can access them by using a dot.

Whenever a method requires some information in order to work, the data is given inside the parentheses.

Each piece of information is called a parameter of the method.

A Different Approach

I have been inactive for a few days. I haven’t tweeted anything for the #100DaysOfCode challenge, because I decided to change my approach once more. I am not quitting anything, it’s just don’t want to tweet useless things all over the place and instead I want to focus on my own blog where I could provide more value to other people.

So from now, I am planning to write more detailed logs about my work. Somehow Twitter 140 characters are limiting me. However, I will not stop tweeting, but I will try to give more specific details about my projects.

Today I started working on a calendar system. The ultimate goal is to build a full stack application. The user should be able to log in or sign up and then connect to the calendar itself which consists of calendar, agenda, and chat. Here is a link to my work so far.

The idea itself is not a unique one, I got it as a part of the test for potential front-end position in some company. The team provided me with mockups and documentation, so I just had to implement it. That time I was focusing only on a front-end part, but this time I am trying to do the whole thing.

I will update you with my progress via Twitter and I will post some journal logs here. I am also experimenting with videos, but I haven’t opened them for a public use. That can wait. What’s important now is to focus and work on a project every day consistently.

Password Security and Bitwarden

Let’s talk about passwords. Some of us hate it, but passwords are an important piece of our life. Without a password, we wouldn’t be able to access our bank account, connect to social networks or encrypt our hard drive. Even in the opening days of the Battle of Normandy, paratroopers used word flash as a challenge to which others responded with a password thunder.

As you see, passwords are everywhere, but we tend to neglect them. We make them weak, we reuse the same passwords everywhere, we leave notes filled with them in our offices, we just don’t care!

Strong password security is like a habit and it takes time to develop it. To ease up the process, we could use a password manager. This type of software gets a lot of criticism, due to its sensitive nature. It protects lots of passwords with one master password. If it's compromised – you are done. However, with 2FA and ability to inspect the software’s code, I think we can get some level of trust.

If I have convinced you to try a password manager, let me introduce you Bitwarden. It’s a free and open-source password management solution for individuals, teams, and businesses. I liked the software so much that I even bought a license. Here is why you should give it a try.

Sync all of your devices

Secure cloud syncing gives you the ability to access Bitwarden from any device. For example, I have two laptops, a phone, and a tablet, so I use Bitwarden with all of my devices. And if you are wondering about how secure is cloud syncing, Bitwarden uses AES 256 bit encryption. It's been adopted by the US government and used worldwide ever since.

Bitwarden app for every platform

Native desktop application for Windows, macOS, and Linux.

The browser extension for Google Chrome, Mozilla Firefox, Opera, Microsoft Edge, Safari, Vivaldi, Brave, and Tor Browser.

App for iOS and Android.

Open Source

Bitwarden is open source software. The code is hosted on GitHub and everybody can audit. That's so different from a typical proprietary software model where only one entity can edit the code and others are kept in the dark. Due to Bitwarden's sensitive nature, it's important that code is in public. There is a greater chance that someone will discover a bug or vulnerability.

Two-step login (2FA)

To increase your account security, you can use 2FA which is available for free and premium users. What 2FA does, it gives you an additional step of protection. Let’s say your master password for Bitwarden vault is compromised, the attacker would have the difficulty of logging in without an access to the second step.

I use the authentication app and YubiKey. When I was a free user, I relied only on the app, but having a license gives me more flexibility!

Self-hosting

If you are super paranoid and do not trust Bitwarden's servers, you can self-host entire infrastructure stack on the platform of your choice. At the moment I do not have the means to do it, but it's a tempting option to try!

Conclusion

Bitwarden is very easy to use. I tried plenty of password managers before, but I always go back to it. Cloud syncing, two-set verification, open source are the most important features for me and I highly recommend others to try Bitwarden. If you like the software, do not hesitate to buy a license. It costs $10 and it’s valid for a year. Give it a try!

Things To Do After Installing Debian 9.5 (Strech)

A month ago I decided to switch from Ubuntu to Debian. It was a strange thing to do because for the past two years my main distro was Ubuntu and I got used to it. I am not a distro hopper per say, but people's comments about how Debian is created by people (not a corporation) and consists of free software made me think about a possibility of trying Debian for the first time! An hour later I was already preparing a USB stick with Debian 9.5 (Stretch) and getting ready to install it. In this article, I want to share with you what I did after I successfully installed Debian to my laptop.

sudo apt-get update && sudo apt-get upgrade

This command ensures that your local list of software packages are up to date and if there are outdated packages, upgrades them.

Install AMD/ATI Open Source Drivers (if you have these graphic cards)

I am not going to list the commands here, I think it's better if you checked Debian documentation yourself. Here is a link.

sudo apt-get install ufw && sudo apt-get install gufw

This command installs Uncomplicated Firewall and its graphical user interface. Make sure Incoming is set to Deny and status is set to On.

sudo nano /etc/apt/sources.list

Some packages are not available by default, due to Debian having DFSG. In order to get them, we have to add non-free repositories in the sources.list file. Here is how it looks on my laptop.

deb http://ftp.dk.debian.org/debian/ stretch main non-free contrib
deb-src http://ftp.dk.debian.org/debian/ stretch main non-free contrib
deb http://security.debian.org/debian-security stretch/updates main contrib non-free
deb-src http://security.debian.org/debian-security stretch/updates main contrib non-free

And it's pretty much it for now. I haven't had a chance to tinker with the system a lot, as it comes with pre-installed software. I am trying to be minimalistic as possible, so I don't install a lot of software. My needs are basic!

I hope this short article helps. In the future, I will update it with new commands as I am just starting my journey with Debian.

Introduction

You are probably wondering what this blog is all about? Well, I bought the .tech domain with an intention to write about all things related to various technologies. You see, I am a Web Developer and IT-technologist, but not with five years experience on my belt. I am just a recent graduate who wants to advance in his IT career, so I created this blog to solidify my technical know-how and share the things I learned with all of you!

At the moment, I am interested in Linux, front-end, open-source, IT security and privacy, so expect lots of tutorials, reviews, and other articles. I am not a great writer, nor do I am the coding star, but there is a drive in me to become a better developer every day thanks to #100DaysOfCode and #freeCodeCamp projects.

And that's pretty much it for now. I already started writing a short article about things to do after you install Debian (that's the distro I use) and I hope to publish it at the end of this week!

See you soon!

Edvinas