Posted: November 15th, 2017 | Author: Julia | Filed under: Development, Tips and Tricks | Tags: angular, development, typescript | 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:
And it’s fixed by adding a magic line – to satisfy the Typescript compiler, you will need to tell it that System is an acceptable variable by declaring it:
declare var require: any;
Posted: July 20th, 2017 | Author: Julia | Filed under: Development | Tags: apple touch icon, iOS, MVC | 1 Comment »
‘Touch icons’ are the favicons for mobile devices. Adding them to your web page is easy:
<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).
Posted: January 4th, 2017 | Author: Julia | Filed under: Development, Mobile Design and Development | Tags: Android, background image, image, iOS, Label, mobile, RelativeLayout, Xamarin.Forms, XAML | No Comments »
RelativeLayout is used for creating adaptive layouts based on their parent’s and other views’ position and dimensions.
For me RelativeLayout is the solution to apply an image as the background for some components. Say, I have a Label on page and would like to overlay it with a background image:
Each element in the RelativeLayout can define a constraint (RelativeLayout.YConstraint, RelativeLayout.XConstraint, RelativeLayout.WidthConstraint, RelativeLayout.HeightConstraint) which defines how the element relates to other items.
Read the rest of this entry »
Posted: October 15th, 2016 | Author: Julia | Filed under: Development, Tips and Tricks | Tags: *.svg, animated svg, path, ScrollMagic, stroke, SVG for web, TweenMax, vector | No Comments »
Working with SVG consists of two parts: designing itself and development. They are tired very closely and depend each on another. The nature of SVG as both an image format and a XML format, every step taken in the graphics editor directly affects the resulting code.
I love to work with Adobe Illustrator, so I started with my design firstly. The final image should be:
Creating your *.svg image is the most critical step — if you have problems making it work, probably it’s because your SVG assets weren’t correctly produced.
1. The design stage: drawing vector image.
I decided to draw my picture using ‘path’.
*The ‘path’ element is the most powerful element in the SVG library of basic shapes (lines, curves, arcs, etc.). The shape of a path element is defined by one attribute – ‘d’ (‘d’ stands for data and it could just as well stand for directions.).
There are a number of stroke related properties within SVG that allow us to control the details of strokes, some of them are: stroke, stroke-width, stroke-linecap, stroke-dasharray, stroke-dashoffset.
Read the rest of this entry »
Posted: September 14th, 2016 | Author: Julia | Filed under: Creative Process | Tags: award winning website, CSS Light | No Comments »
My website is listed on CSSLight gallery, please vote for me for better result ;)