About design and nearby

Using a custom web fonts in *.svg

Posted: November 2nd, 2018 | Author: | Filed under: Development, Tips and Tricks | Tags: , , , | No Comments »

Like any vector graphic, SVG file can contain text. To declare your font just use a simple font-family attribute:

  1. <text fill="#51BBE3" font-family="'Your font-family'" font-size="60">‘Meow’ means ‘Woof’ in cat</text>

Everything is fine if you set a system font, but how to deal with custom fonts? Even if you have loaded your required font-family into the project and use

  1. <text fill="#51BBE3" font-family="'Your custom font-family'" font-size="60">‘Meow’ means ‘Woof’ in cat</text>

– this does not always work. For example, if your SVG file is embed in a html file – check it yourself:

HTML page with *.svg
Read the rest of this entry »

Share Button

How to bundle an Angular app for production to non-root path

Posted: March 14th, 2018 | Author: | Filed under: Development, Tips and Tricks | Tags: , , , , , | No Comments »

Bundling steps are pretty easy.. till you do it yourself for the first time :)

1. Start with the development build:

ng build ––prod

2. By default files will be placed in the ‘dist’folder of your angular project:

angular files
Read the rest of this entry »

Share Button

How to change another element styling on a CSS hover event

Posted: February 21st, 2018 | Author: | Filed under: Development, Tips and Tricks | Tags: , , , , | No Comments »

Pretty simple question, isn’t it?
What I want to do is affect the properties of one element when another element is hovered:

Hover over screen

My HTML looks as below:
Read the rest of this entry »

Share Button

Working with Angular: how to fix “Cannot find name ‘require'” issue

Posted: November 15th, 2017 | Author: | Filed under: Development, Tips and Tricks | Tags: , , | No Comments »

Sometimes building an app with Angular 4.. after including file in component and compiling, you can get such type of error:

Cannot find name ‘require’.

I have the following in one of my components:

angular component error issue
Read the rest of this entry »

Share Button

ASPNET MVC: Getting rid of ‘Apple touch icon’ errors

Posted: July 20th, 2017 | Author: | Filed under: Development | Tags: , , | 1 Comment »

‘Touch icons’ are the favicons for mobile devices. Adding them to your web page is easy:

  1. <link rel="apple-touch-icon" href="apple-touch-icon.png">

It’s possible to use one high-resolution icon for all devices. Devices with smaller screens or lower display resolutions automatically resize the icon. If no icons are specified in the HTML, iOS will search the website’s root directory for icons with the apple-touch-icon or apple-touch-icon-precomposed prefix.

So if you do not include this icon at all, you can get such error message in web log file:
‘The controller for path ‘/apple-touch-icon.png’ could not be found’.

What you should do to fix that is create and add those images (I produce apple-touch-icon.png and apple-touch-icon-precomposed.png, 180*180 px, usually). This will improve your user experience also – if a user added your website on his home screen, he got your nice predefined icon (a thumbnail screenshot of the page will be used, if you haven’t provided a custom touch icon).

Share Button

Looking for a Freelance UX & UI designer for your project? I’m ready to jump onboard!

Let's discuss your project now