Edvinas Urbasius

@edvinasurbasius

Front-end developer. Interested in IT, history and economics. The life-long learner.

7,572 words

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

4 blogs I read about front-end development

Apart from listening to various podcasts about front-end development, I also try to read some blogs and other awesome development resources on the internet. MDN Web Docs (MDN), freeCodeCamp, CSS Tricks and Flavio Copes comes to mind.

I like the freeCodeCamp blog because it has a plethora of various articles for all levels and tastes. I especially like to read anything related to front-end development. The page design is very minimalistic, so it’s easy to scroll and just jump to the things I like.

Another great resource is MDN Web Docs. It’s like a bible for me. I configured my internet browser, so it always shows up on a start. It’s a handy tool when I am working or learning new things about web development. MDN Web Docs primary focuses on front-end technology.

CSS Tricks is my savior when things get though with CSS. On top of it, the page was updated from the design perspective, so it’s slick and easy to consume.

Flavio Copes is a new discovery for me. His ability to put complex topics into easily digestible pieces is amazing. He mainly covers JavaScript but also talks about other front-end technologies. He writes books and makes courses. His blog looks rad!

These are four pages I try to consume every day. They provide knowledge and practical tips. It's not always possible to read it due to the amount of work, but when I get a chance, I read. That's the best way to keep up the pace.

An update about my progress with Pi-hole

I wasn’t able to finish setting up Pi-hole with VPN capability. My ISP is blocking ports and port forwarding techniques doesn’t help. When you think about, tampering with your own router settings and opening things for the public is not the best idea, so I had to think about other ways of building Pi-hole setup instead.

I found a very detailed guide on GitHub made by Rajan Patel. The author explains how to run Pi-hole server with VPN capability on Google Cloud. What’s good about this setup, is that having Pi-hole instance there doesn’t cost you money (Google covers you with $300 credit for a year) and protects you on all of your devices.

The guide itself is very self-explanatory so I will not waste your time, but I just want to mention a few things about my setup. I chose the Split Tunnel VPN method because it doesn’t consume a lot of server resources. Data usage is low and the server CPU load is very low.

I use the Split Tunnel VPN on my desktop and phone. Split Tunnel VPN allows me to interact with other devices on my local network, so there is no hassle. For example, running a Visual Studio project and using a VPN at the same time. 

And what’s the incentive to use Pi-hole when you can have an ad block on a browser? Well, the biggest win for me is an ability to control and shape my internet traffic. I can block Google or Facebook tracking, I can block other pages and top of it, I get nice and detailed statistics.

Worth to try!

Blocking ads on a network level with Pi-hole

Last week I started experimenting with Raspberry Pi. It’s a credit card size computer from the UK that is able to run various operating systems. With Raspberry PI you can build awesome things.

I started with a need for my own cloud system (NextCloud) but failed badly due to network port problems. I know how to work with computer networking, but my ISP is blocking the ports by default, so I postponed a project and chose to install a Pi-hole instead.

Pi-hole is a network-level advertisement blocking system. It's like a black-hole that sucks out all of the ads literally. I was surprised by its speed and efficiency when I tried it for the first time.

Pi-hole installation is no hassle. It comes as a pre-made image that you burn into your microSD card and runs on a Raspberry Pi. The post-installation configuration menu is quite easy to understand and you have a working system in no time. After that, you see a very nice admin panel that helps to administer Pi-hole.

The trick to make Pi-hole to work is to point it as your DNS server on your router. You access its admin panel and find DNS section and change the IP addresses to Pi-hole IP address. After that, you restart the computer and from now own you have a system that deals with ads efficiently.

You can even extend Pi-hole by making it your primary DHCP server or building VPN server capability that helps you to reach Pi-hole remotely, thus enabling ad blocking in your phone or tablet.

I haven't tried this one, because it will require some time to set up the functionality, so, for now, ad blocking will be enough for my house.

And the last great thing about this project is its documentation. It's easy to digest and understand, so you will be running your Pi-hole instance in no time. I highly recommend to try it. It's a nice thing to have!

Using VueJS to Interact with the DOM


I decided to postpone learning Angular.js and chose Vue.js instead. Then, I bought Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex) course by Maximilian Schwarzmüller. Here are takeaways, notes from the course and my own code samples (CodePen).

These notes are from Section 2.

  • The {{ }} Syntax is also called "Interpolation" or "String Interpolation"
  • Vue.js creates a template based on our HTML code, stores that internally and uses it to create a real HTML code, which then it's rendered as a DOM.
  • To access data object properties, we don't need to use this keyword, just use the name of the property.
  • In Vue instance, we not only store data, but we can also store methods.
  • It's important to provide something in {{ }} that can be returned in DOM. For example, the string. No complex stuff.
  • Using this anywhere in Vue instance gives us the ability to access to properties, methods and so on.
  • We can't use curly braces in any HTML element attribute.
  • The v-bind directive tells Vue.js: Don't use a normal HTML attribute, instead bind it.
  • We pass arguments to v-bind directive like this v-bind:href. Where href is an argument.
  • Directives are instructions placed in code.
  • The v-once directive will render elements once.
  • By default, Vue.js escapes HTML.
  • The v-HTML directive allows passing a property that holds HTML.
  • https://codepen.io/edvinasurbasius1/pen/xeNbJY (Optional assignment code. Template syntax and how to output Data to the template).
  • The v-on directive allows listening to receive 'something' from our template. For example v-on:click, but there are more types of events.
  • We can pass our own arguments to a function. <button v-on:click="increase(2, $event)">Increase</button>
  • $event simply allows you to access the data dispatched by an event (e.g. the default event object for the built-in events or your custom data for your custom events) in the template. 
  • https://codepen.io/edvinasurbasius1/pen/mYdMOr (Another assigment code).
  • We can write a valid JavaScript code as long as it has one expression and does not contain if or else, or a loop.
  • What's reactivity?
  • Two-way binding.
  • The v-model directive tells Vue setup two-way binding for input and property.
  • Data is not reactive.
  • Reacting to Changes with Computer Properties
  • Everything stored in computed can be used just like you use the property in a data object.

I am finally building apps that are useful

Photo by Kelly Sikkema on Unsplash

I finally reached a stage where I can dedicate my free time for my own projects. You can’t just read tutorials and expect to become an awesome front-end developer. You have to take a leap and venture into the unknown. You have to build.

So, as a real developer, I went to freeCodeCamp and looked for some inspiration. I found an article written by Flavio Copes where he lists a sample of web apps you can build. I liked it and suddenly I was preparing to dive deep into building things.

Requirements

My first project was a weight tracking app and the requirements were:

  • It accepts a set of manual entries of weight measurements taken at different dates
  • It can plot a graph
  • It can allow tracking multiple entities, for example, more than one person weight
  • Store them somewhere

The app is very simple, but it's a great opportunity to practice JavaScript and the use of APIs.

The Process

I knew that my app will need a database to store weight records, so I designed a test database with SQL and ran it with MySQL. The reason why I did this, is that I wanted to verify the model before diving deep into coding.

When I had a working model, I started looking into client-side databases, Web Storage API just wasn't enough. I found Dexie.js which is minimalistic IndexedDB wrapper and IndexedDB itself is a database.

What's great about Dexie.js is that it's easy to interact with it. The tutorial and documentation are also easy to understand. For example, to create tables, you use this piece of code:

db.version(1).stores({
weight: '++id, weight, date'
});

To put values into the database you use this piece of code:

db.weight.put({weight: weight.value, date: date.value});

As for JavaScript code, the app has a bunch of functions and a few selectors. I tried to keep it as simple as possible.

function onSubmit(e) {
e.preventDefault();

db.weight.put({weight: weight.value, date: date.value})
.then(function() {
form.reset();
})
.then(returnWeight);
}

To show a graph I used Plotly.js API library. The range for results is one year. At first, it was hard-coded, but I used some JavaScript to detect the first and last day of the year and now it’s dynamic. I am still experimenting with it. At the moment my graph displays 6 months, 1 month and 'all' results.

Conclusion

Here is a link to a final product: https://github.com/edvinasurbasius/weightAppNoAuthentication It's still not finished. I need to add the design part and authentication. Improve the code itself. I am also planning to build a second version with Vue.js. Nevertheless, it was a fun process to build something useful, which I can use for myself. I will keep working on more apps because it's a great way to improve as a developer.

Notes from PhoneCat App Tutorial (AngularJS) - AngularJS Templates

Notes from AngularJS tutorial.

Reset the workspace to step 2.

git checkout -f step-2

View and Template

In AngularJS, the view is a project of the model through the HTML template

app/index.html

  • The ng-repeat tells AngularJS to create a <li> element for each phone in the list. 
  • {{phone.name}} and {{phone.snippet}} will be replaced by te values of the expressions.

ngController, attaches a PhoneListController to the <body> tag. 

ng-app="phonecatApp" is the name of our module. It will container PhoneListController.

Model and Controller

The data model is now instantiated within the PhoneListController.

  • The controller is simply a constructor function that takes a $scope parameter.
  • The controller allows us to establish data-binding between the model and the view.

Scope

A scope can be seen as the glue which allows the template, model, and controller to work together. 

Testing

The "AngularJS way" of separating the controller from the view makes it easy to test code as it is being developed. 

Experiments

Extra points: Try and make an 8x8 table using an additional ng-repeat.

No extra ng-repeat, but still works!

<table>
<tr><th>Row number</th></tr>
<tr ng-repeat="i in [1, 2, 3, 4, 5, 6, 7, 8]"><td>{{i}}</td><td>{{i * 8}}</td></tr>
</table>

Notes from PhoneCat App Tutorial (AngularJS) - Environment Setup and Bootstrapping

Notes from AngularJS tutorial.

Environment Setup

Installing dependencies

npm install

Starting up the server

npm start

Unit tests

  • We use unit tests to ensure that the JavaScript code in our application is operating correctly.
  • The app is configured to use Karma.
  • npm test will start the Karma unit test server.

npm test

E2E tests

  • We use E2E tests to ensure that the application as a whole operates as expected.
  • This app is configured to use Protractor.

npm run protractor

Protractor dependencies

  • Java Development Kit (JDK)

Check if Java installed

java --version

if it fails, Install Chrome browser.

0 - Bootstrapping

git checkout -f step-0

ng-app attribute

<html lang="en" ng-app>

The ng-app attribute represents an AngularJS directive, named ngApp. This directive is used to flag the HTML element that AngularJS should consider to be the root element of our application.

Double-curly binding with an expression

  • A binding, denoted by double-curlies
  • A simple expression used in this binding
<p>Nothing here {{'yet' + '!'}}</p>

This binding tells AngularJS that it should evaluate an expression and insert the result into the DOM in place of the binding.

AngularJS expressions are JavaScript-like code snippets that are evaluated by AngularJS in the context of the current model scope.

As expected, once this template is processed by AngularJS, the HTML page contains the text.

Bootstrapping AngularJS Applications

There are 3 important things that happen during the bootstrap phase:

  • The injector that will be used for dependency injection is created
  • The injector will then create the root scope that will become the context for the model of our application
  • AngularJS will then compile the DOM starting at the ngApp root element, processing any directives and bindings found along the way.

Front-end Development Podcasts I Recommend

Photo by Mohammad Metri on Unsplash

To work as a front-end developer is one thing, but to keep up with rapidly changing technology is another thing in itself. I try to keep up with the news by listening podcasts about front-end development. These small pieces of audio help me to learn, discover, and just feel the beat.

Here are my podcast recommendations for front-end developers.

Syntax – A Tasty Treats Podcast for Web Developers

Wes Bos and Scott Tolinski talk a lot about web development topics, their own professional experiences, and how they work in general. What I like about this podcast, that it’s thematic and doesn’t jump from one topic to another in one episode. Every podcast installment is a new trip, so there is plenty of opportunities to learn and broaden your knowledge on a particular thing. They cover JavaScript, its frameworks, work with clients, learning strategies, and much more. Co-hosts present topics in an easy manner, so it’s a pleasure to listen.

https://syntax.fm/

Front End Happy Hour

Bunch of engineers from Netflix, Evernote, Atlassian and Linked In talking about front-end development topics over drinks. It’s not that frequent like the Syntax podcast, but it has its own charm due to people on a panel being from big companies because they offer a different perspective and discussions over drinks are funny too.

https://frontendhappyhour.com/

the freeCodeCamp Podcast

This podcast was my entry to the programming world. I started to listen to it when I signed up for the freeCodeCamp platform. Every episode introduces a new guest and they talk about how they started in tech. The podcast was dead for some time (no new episodes). but it came back with fresh new content.

https://podcast.freecodecamp.org/

So that's my podcast recommendations. There is plenty of podcasts that talk about front-end development, but I focused only on a few. I believe quality beats quantity and there is no point to overwhelm yourself.

Lo and Behold, Reveries of the Connected World

Last week I saw a documentary, titled Lo and Behold. Thanks to Werner Herzog we get to see how the internet revolution unfolded, where did it start and who were key players in it. What I like about this documentary is openness. It not only shows the good sides of this revolution, but it also shows how it can be misused for nefarious reasons.

I don’t want to spoil it for you, but one segment got stuck in my mind. It shows a family who lost a child in a car accident and how random strangers on the internet still harass them to this day by sending hate email and making jokes of a dead girl (for example, “Dead girl walking. Woohoo, daddy, I’m still alive”).

Turns out, the first responder took photos of the nearly decapitated head of the girl and emailed it to some friends and it instantly were out on the internet. However, you can’t do anything about it, because there is no law for pictures of deceased people, so when they pass away, their privacy rights go with them.

A seasoned Internet veteran would say nothing new to a story like that, but it still makes me sick to my stomach that people can be so cruel. Yes, there is Reddit and 4chan, but how we arrived at this place, it’s beyond my understanding. The hate, mockery, depravity, and lack of accountability are of the charts these days. Sad!

Throughout the documentary, Werner Herzog meets with various people and talks about internet technology from various angles, so you can have a holistic picture of the issue and form your own opinion. Because, in the end, the internet can be used for good and bad, it’s for us to decide.

Give a try. You will learn something new. It’s on Netflix. Enjoy.

CSS Refactoring

Photo by Chris Ried on Unsplash

Just wanted to share a pro-tip about how to refactor CSS. So, my project consists of Bootstrap and my own custom classes. There is so much stuff there, that I feel overwhelmed sometimes. Refactoring helps because it cleans up the waste.

I started the cleanup process yesterday by analyzing the code and found multiple places where it duplicates.

At the beginning of the project, I made a lot of weird class names, for example, custom-form-border-no-radius or custom-control-no-border-radius. Looking back, it was a very stupid thing to do. It’s a chaos of random names!

However, the Bootstrap framework already has rounded-0 class, so I just used Ctrl + R, R command in Rider IDE (remember guys, I’m using Linux!) and renamed custom-form-border-no-radius to rounded-0 where it’s used. I did that in other places, where the border-radius needs to be removed. Why write a custom code, when you can use the already made code?

I like Ctrl + R, R, because it’s a powerful command. Targets all instances of a selected element, but be careful, with great power, comes great responsibility. You don’t want to mess up your files!

Another cleanup strategy is to remove inline styles and replace them with classes or use what Bootstrap provides.

I am also planning to split a huge file of CSS we are having right now to smaller files, so it’s a more modular approach. Different buttons get their own CSS file and so on.

Refactoring will take some time, but I am ready for it. With each new commit, our code gets better and better.

Why I recommend Standard Notes



Last year I was on a mission to find a note-taking app that does not track its users (or is at least utter transparent about it), provides encryption, is an open-source product. And it didn’t take me long to discover Standard Notes

This note-taking app is a great alternative to corporate products like Google Keep, Microsoft OneNote or Evernote. Standard Notes has a very simple, but beautiful design, 29 additional extensions, is available for Desktop, Mobile and Web, keeps you 100% private and secure.

Listed

But for me, personally, the best feature of Standard Notes is Listed. It’s a new kind of publishing platform where author and reader has a more direct line of communication. I publish my articles directly from my Standard Notes app. Plus, I also connected my custom domain name with Listed, but I don’t need to worry about SSL certificate, because it’s provided by default. How convenient!

I also use Standard Notes to gather my thoughts and ideas. At the moment I have only 23 notes because I am very selective of what I write. I don’t want to over clutter my experience with random bits of nothing.

Encryption

Th encryption aspect is also a big seller. When you type text in Google Docs, all that information is scanned by Google. When I work with Standard Notes, I know that I own the data and it’s mine. It makes a huge difference and allows me to be myself.

Simplicity

Standard Notes design is not overwhelming. The options are easy to spot and the layout itself is very simple. If you get bored by default design choices, you can change the way the app looks. For now, I am using Titanium theme and it looks a solid pick.

Extended Account

You can start with a free version and limited features or contribute to this great project and pay monthly, annually or more. A 5-year plan is interesting because it’s related to a longevity aspect. The creators of Standard Notes believe that our notes should be ready for the 22nd century and by supporting them, together we can build a long-term product.

Conclusion

Overall a great app with a lot of potential. Cares about user's privacy and safety. Has a simple and yet beautiful design. A true winner.

Why I quit Windows 10 and chose Ubuntu instead

7th of March is a remarkable day for me. You see, I am no longer using Windows 10 Professional in my front-end development job. Thanks to Microsoft and JetBrains support, I am able to do my work efficiently with Ubuntu instead. Here are a few reasons why stopped using Windows 10.

Windows 10 is a bloatware

From random ads in Edge browser, News and other Microsoft's products to a bunch of apps I don’t need, that comes preloaded with no minimal installation option whatsoever, thanks, but no thanks! I would love to get rid of this “junk”, but as said, there is no choice. 

Ubuntu does it better because, during the installation process, I can choose the type of installation I want. Minimal installation option gives me a minimal desktop environment with a browser and utilities. The rest is for me to decide, so at least I have some freedom. Thanks, Linux.

Windows 10 is a spyware

The Federal Office for Information Security (BSI) has released a report detailing how Windows 10 collects telemetry data on users. The biggest takeaway of this document is that the only way to get rid of this constant ‘surveillance’ is to use the enterprise version of Windows and choose the ‘Security’ telemetry level. 

Good luck getting that version of Windows, because it’s usually used by big companies. The normal person is left with ‘Basic’, ‘Enhanced’, and ‘Full’ telemetry levels on Windows 10, which log you anyway.

On the other hand, Canonical, the company behind Ubuntu, allows you to opt-out from the telemetry with no stupid levels, but just simple ‘Yes’ or ‘No’. That’s a very convenient option and doesn’t abuse your privacy.

Windows 10 is plain boring

Windows 10 comes and stays the same. These Spring and Autumn updates are just cosmetics. On Ubuntu, I can change icons, themes, and the desktop environment. Every day I can start fresh and play with the way my system looks. All of a sudden computing becomes fun again.

Conclusion

There is a choice. You can opt-out from Windows 10. You can say no to bloatware and spyware. Are you willing to try?

Why you should use Are.na?



I felt overwhelmed lately on the internet. The information flow is staggering and I feel like my ability to somehow hold ‘this’ information in my mind is weakening. However, I started researching how to organize and deal with all of ‘this’ digital clutter and I think I found a decent solution to my problem. Let me introduce Are.na!

What is Are.na?

It’s a visual organization tool that helps you to build collections (channels) of various ideas. Each collection consists of blocks and in those blocks, you can put images, links, files, texts, and more.  

Are.na it’s not only a tool but is also an online social network community used by artists, architects, and designers. I haven’t tried the social aspect of Are.na yet. 

Are.na is also an ad-free network with no ‘favorites’, ‘likes’, or ‘comments’ like Facebook, Twitter, or any other ‘crap’ ridden social network. It’s only you and your thoughts. 

How do I use Are.na?

Right now, I have five channels dedicated to various topics. All of them are private because I don’t want my channels to be seen on search engines. I haven’t tried the social aspect and never opened my channels for public use. However, I am planning to do that in the future with some of them.

I am also experimenting with Are.na tools. Bookmarklet ‘plugin’ helps me to add content to Are.na while surfing the web. Add via email ‘function’ allows me to send content to Are.na from my email address.

What do I miss in Are.na?

As I mentioned previously, the Android app would be great. The team behind Are.na says it’s in works. I hope they deliver before 2019 ends.

Dark mode should be available in settings, not by pressing ctrl + shift + I command. It’s not very user-friendly. 

Conclusion

Are.na is a great tool to organize your digital life. You don't need to be an artist to use it. Everybody can find a use case, you just need to try.

Guess who's back?



It's time to start a new year, 2019! Ever since 13th of December, I was away from blogging, because of the workload at Swap Language. We have been very busy, working on a new platform and developing new features. I am so excited about project completion because the end is near. And that's how much I can talk about it right now. Everything is hush-hush :) 

But let's talk about other things. I want to share what I been up to for the past few months. A lot of things changed. I am no longer using Twitter because I stopped #100DaysOfCode challenge. I was lucky to get a front-end development job and simply had no time to continue. I wouldn't say that I got defeated, I just changed my priorities. Here is a list of things (or habits) I am pursuing these days:

  • Reading books
  • Coding
  • Writing
  • Exercise

These are my daily habits. I am not perfect. I fail sometimes. Somedays I manage to do all of them, sometimes not. It's not about perfection, but trying to do your best every day. 

Right now I am especially interested in Economics, so I am reading Thomas Sowell's "Basic Economics".  The book gives a great introduction to the subject. A lot of us are necessarily ignorant of many complex fields, and that's totally fine, but when it comes to voting and economic decisions, understanding economics becomes very important. 

As Thomas Sowell writes in his book, our only options are to be informed, uninformed, or misinformed, and I choose to be informed. 

As for the coding part, I am working on "JavaScript and jQuery" book by Jon Duckett. It's like my go-to bible. I work on code samples and new concepts. This activity perfectly compliments my work at Swap Language. I believe this book can help me to consolidate my knowledge about JavaScript. As soon as I am done with it, I will start learning React.JS

Writing is the hardest habit to build. Disorganized thoughts, spelling and grammar mistakes, perfection. So many obstacles. And yet I try to write. I believe you get better at anything you choose to do thanks to many years of practice. 

What about exercise? I stopped going to the gym due to lack of time, but I bought a yoga mat instead. I do some pushups and crunches at home. Every morning I go for a long walk. That's not very impressive but still keeps me active.

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