Dump Links #4 - Preparing the Presentation Layer

in Backend, Frontend by Kamil on November 1st, 2015

The next edition of „Dump Links” includes a lot of articles and tools for creating a basic layer of application - HTML & CSS.

In each application we can distinguish a few layers - content, semantic markup, presentation and behaviour. This layer has a name: Progressive Enhancement. I also know a second article about PE, but it is in Polish

Anyone who has had to return to a project after some time and couldn’t remember where everything was located, knows how important it is to create a legible code and a thought out architecture. Some time ago, I had the opportunity to read the article „Semantic Markup with Foundation 5 and Sass”. I also recommend it to you, because the author shows how we can create elements of our application in a semantic and readable way for us and other developers who will have to edit our code.

Let's focus on the presentation - usually it is based on CSS. In each project we try to use something new. At the beginning, when we have little code, we haven't any problems with navigation between files. The problem increases in direct proportion to the amount of code that has been written. The CSS code can also be object oriented, readable and orderly. What I like most is the section „The Namespaces”. In a simple way they have highlighted and described the most important parts of the application that are used by other people from the team who work on the project.

CSS combined with SVG and JavaScript offers powerful abilities. We can create nice animation of border, motion blur of object or blend of image. This last option is very well known to Adobe Photoshop users. If you already use SVG extensively, you should think how you can optimize your application. We use localStorage for caching our resources for this purpose.

Unfortunately, the support for background-blend-mode is still incomplete, so we cannot ensure that all users will see exactly the same thing. We can use CamanJS. It's a library that allows you to manipulate the images. You can see some examples in the article „Manipulating Images on Web Pages with CamanJS”.

I assume that all of us are already using preprocessors to create CSS. If not, you should check out the directives of SASS. By the way, you can also see the CSS directives.

I hope that after reading this note, your knowledge of application programming increased a little. I encourage you to leave your feedback and read the previous parts of “Dump Links” (if you haven’t already).

See you soon!

PS: Have you ever had a problem with positioning icons in relation to the text? I know the solution ;)

← back to the blog

You May Also Like

5 Mistakes Most B2B Startups Do in SALES and How to Fix them

by Damian in on October 18th, 2015

B2B sales is hard, but with the right mentoring you can become a hero and increase your business results. Read 5 tips that will push you beyond boundaries and make a better salesman.

Is Price the Main Factor in Software Development?

by Damian in on January 7th, 2017

Estimating the software development is not an easy job. Clients expect a good price for a good service. Does it happen often? Let’s find out.

MVP Is NOT Your Final Product

by Damian in on January 6th, 2017

Many people want to build an MVP, but in reality they have a final product in mind. What MVP really means and why the purpose of it is to learn rather than sell?

Interested in Creating a Successful Project?

Contact us and together we'll bring your ideas to life!