Edvinas Urbasius

@edvinasurbasius

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

4,593 words

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

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