Creative Technocrayts

A Fantastic Year of Learning: Creative Technocrayts' 2018 Rewind Wow!! 2018 was a fantastic foundational year for us, Creative Technocrayts. The skills we mastered that year—like implementing **advanced CSS layout techniques (Flexbox)**, pioneering **Core Web Vitals concepts** via Google’s AMP, and streamlining UI design with **Font Awesome 5**—are still **critical for modern high-performance web development today.** We have discussed a lot, thanks to the constant support from the community. We have received both positive feedback and negative criticism as well. Keeping that in mind, we strive to improve and learn more and give back to the community. 2018 showed tremendous increasing readership from the Google+ community and Facebook page, apart from Twitter and LinkedIn, and we are so happy about that. Thank you guys :) It's time for us to look back at this awesome year, 2018!!! Daily UI ...

Daily UI practice Recently I had some time so checked for latest updates in design from awwwards.com I wanted to practice UI for the day. So I picked up a site from there. The reason I picked up that is i) I wanted to learn something new ii) I wanted to do something which I haven’t done before So the exercise was about, Creating a range slider and getting the value Added box-shadow to jumbotron component. Now placing input range elements inside the component, Following bootstrap 4 documentation I got the above screen as it looked like in bootstrap website. I can’t proceed further as I didn’t have any other elements to style. Then I read few tutorials from css-tricks.com What is Shadow DOM? Well, we all know that, when a HTML page is loaded in a browser DOM (Document Object Model) is created. Likewise browsers have capability to create sub tree to the already created DOM elements.   Now we have got two components and customize the styles. They are 1. Trac...

jQuery is a Javascript framework. When do we use Javascript, jQuery, jQuery UI DOM Manipulation in jQuery What jQuery does? jQuery is a JavaScript library that can: Access parts of a page Modify the appearance of the page Alter the content of the page Respond to user interaction with the page Add animation to a page Manipulating DOM with jQuery methods 1. To insert new elements inside every matched element, use: .append() .appendTo() .prependTo() .prepend() Example for .prepend() in jQuery HTML: <div class="productsContent one-box"> <div class="box"> <h4> Loreum ipsum1</h4> <p> Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit... </p> </div> </div> Prepending an element using jQuery: $('.productsContent').prepend('November, 2018'); New DOM: $(...

Websites we develop should always ensure better user experience keep in my mind the tough competition in the market by contemporary players How to solve browser issues in website How our website or web applications looks in different browsers and in different platforms matters the most. We are seeing increase in range of browsers and we may not know from which browser users visit our site. Every browsers have their own way of being an ideal browsers and they have their own features. Making our functions and UI across all the browsers should follow certain guidelines. By ensuring browser compatibility in our SDLC, it would be a safe game to play instead of going about things in the final end. To solve common browser compatible inconsistencies, we are discussing few effective points here. Browser compatibility for modern browsers Keeping in mind, the cost and time constraints, making sure our websites work for Chrome, M...

Flexbox CSS justify-content:space-* In modern web design, Flexbox has become one of the most powerful layout tools in CSS. The justify-content property plays a crucial role in aligning and distributing space between items within a container, especially in horizontal layouts. In this article, we'll explore how to use justify-content with various values like space-between, space-around, and space-evenly to achieve optimal alignment for your web designs. Flexbox CSS justify-content: space-* Flexbox layout and its properties are a set of properties which helps to align flex-items in a container. As we have discussed in detail in our previous articles: Flexbox is a set of properties. It helps to align grid elements in a container in many ways. It also helps to realign the way elements are arranged on mobile or responsive screens without writing too much code. What is justify-content in CSS Flexbox? The justify-content ...

What is the difference between Javascript, JQuery, JQuery UI, JQuery mobile? Javascript Javascript is a programming language with its own syntax, functions, data structures and loops. Javascript is the most popular language used in web development. According to Stack overflow 2018 survey results Javascript is the most popular programming language. It has become an ubiquitous in web development. What is the difference between JQuery and Javascript JQuery is a Javascript library. It is built on top of Javascript and makes use of its functions. Jquery carries the motto “write less; do more”. JQuery is an extensive library making use of Javascript features and function within its library. JQuery framework is useful for 1) Manipulating DOM elements 2) CSS Selectors manipulation 3) Handling AJAX data for communicating with servers perform actions on specific events. 4) AJAX communication with servers 5) Animation effects 6) HTTP requests JQuery is said to have poor backwar...

This article deals with an example to demonstrate how to background-color, background-image and background shorthand property in CSS. You may read this article How to add box-shadow in CSS? How to add Background image to the div     .div1{ background-image: url(../images/bg.jpg); } How to add Background color to the div .div2{ background-color: #0085c2; }     How to add background image and background gradient to the same div? .div2{ background: linear-gradient( rgba(253,29,29,0.6), rgba(252,176,69,0.6) ),url(../images/slide2.jpg); } Instead of background-image or background-color property we have to use background property which is the shorthand rule. Background-gradient and image are separated by comma. The resultant output Also read next article - Is your site mobile friendly?

Boostrap 4 menu align right side in navbar In Boostrap 3 menubar, .navbar-right class is used to bring the menu to the right side.Now .navbar-right class is deprecated. How to align menu to right side using Bootstrap 4 As we already discussed that Bootstrap 4 is built on Flexbox layout , there is change in implementation accordingly. Following code-snippet will highlight the changes in HTML code <nav class="navbar navbar-expand-lg navbar-light fixed-top justify-content-between"> <a class="navbar-brand" href="#">Cafe Express</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class=...

Last time we had a very detailed discussion on Font Awesome 5 and how it stands different from Font Awesome 4.There were three methods to add Font Awesome 5 into our project. Font Awesome 5 can also be downloaded as Web Fonts and used in our local.      style="display:block"      data-ad-format="fluid"      data-ad-layout-key="-bw+m-2t-1d4+2yh"      data-ad-client="ca-pub-9980434921650127"      data-ad-slot="6489306790"> Now Font awesome, has got its new release FontAwesome 5.1.0 with three more categories, 1. Travel 2. Design 3. Emoji We felt awesome after seeing release of Font awesome 5.1 Emoji icons and can’t wait to use in our next project. Font awesome continues to stand apart with large icon base with much better compatibility. All Javascript component packages are now stable. Font awesome 5.1 can be used for React, Angular, Vue and Ember projects. Know the implementation of Font Aweso...

CSS Flexbox Order CSS Flexbox is a powerful tool for creating responsive web layouts. We have discussed CSS Flexbox layout and its related properties with examples in our previous post. In this article, we’ll focus on the order property in Flexbox, which allows you to rearrange the order of elements without changing the source code. This makes Flexbox even more versatile for modern web design. Right from the initial stages, ordering the elements has been quite tricky. CSS Flexbox ordering emphasizes how useful it is for responsive design. For example, when designing a mobile version of a website, you might want the sidebar to appear below the content instead of beside it. Using the order property allows you to achieve this reordering without modifying the HTML structure. When attempting to visually order the elements differently from the source code order, the flexbox order of the elements is very useful. Cross Browser compatibili...

CSS Flexbox Layout – Complete Guide with Examples Before diving in, make sure to read our guide on CSS Display Property . Traditionally, web layouts like the above were created using CSS floats . However, with CSS Flexbox , you can achieve the same results more efficiently and responsively. Why Use CSS Flexbox? ✅ Flexbox is a modern alternative to CSS floats and table layouts. ✅ It gives control over alignment, direction, order, and size of elements within a container. Let’s explore each concept of Flexbox step by step. Basic Components of CSS Flexbox a) Flex Container b) Flex Items Browser Compatibility CSS Flexbox is supported by all modern browsers including Chrome, Firefox, Safari, iOS Safari, and Opera. Internet Explorer 11 supports an older version of the specification with some limitations. ...

You may read the previous article What is Responsive web design? Like Mobile usability , mobile performance also matters when it comes to appear first in Google search results. Page speed is important Google has announced that from July 2018, Page speed as mobile ranking factor. The announcement has been come in advance so that website owners can revamp their sites accordingly and make sure that their website is performing well. Google business logic behind AMP There are many ad-blockers in usage and many potential players switch from website to web apps. So web advertising revenue of Google might be at threat. So AMP is devised so ads are integral part of the HTML itself. Nowadays, people use apps to search content and apps are comparatively performing faster to web . Google’s main business is based on crawling and indexing of websites and searching content from web and producing it in a readable format. It is also noted that web pages have a drawback of loading speed. Since ap...

Mobile usability of websites Web is pervasive and the way we access to web is constantly changing and change is happening for the better. People are increasingly using smartphones to access sites than desktops and laptops as once they did. So keeping our websites mobile friendly is essential. Mobile usability of websites If you are new to web development how to make websites responsive will give a better idea. Early 2018, Google has announced that websites which are mobile friendly will be ranked for better results in search engine. So it is always better to make sure you have optimized mobile performance to be there in the show! Mobile usability and Responsiveness Websites and content management systems should also be mobile oriented and make users feel ease while accessing. Mobile usability on the whole is a broad concept which includes responsiveness of the site and both are not the same. Responsive site means how well our sites adapt to the width and orientation of the mobi...

Font awesome 5 is an icon set and toolkit making it easy for web designers to add vector icons and social icons to website. We had been using font awesome since 3 version and we have explored version 5 soon after its release. For any websites, Fonts in Websites play an impact in UI / UX. Font awesome is just awesome!! The main reason of Font awesome5 doing great is it is been a popular repository and yet to find a competitor of its par. They provide wide range of icons set. None of the other icon packs provide such versatility and compatibility. Styles of FontAwesome 5 1) Solid 2) Regular 3) Light 4) Brands Font awesome 5 icons Font Awesome 5 comes in two versions : 1) Free 2) Pro Font Awesome5 official documentation states that we may get a Pro license of $60 with 1,718 more icons to the free version of 989 icons. Icons of light styles comes with Pro version Font awesome 5 comes in two formats 1) Web fonts for embedding in our project file. 2) Desktop fonts as ...