My First Post      My Facebook Profile      My MeOnShow Profile      W3LC Facebook Page      Learners Consortium Group      Job Portal      Shopping @Yeyhi.com









Saturday, January 12, 2019

Stylesheet Types : CSS, SaSS, SCSS - What do they mean

Ever wondered what is the difference between SCSS and Sass. More importantly, how are they different from CSS.

To start with let me point out that Sass is a language or a pre-processor that makes CSS more powerful with variable and math support. It provides syntax advancements. Style sheets in the advanced syntax are processed by the program, and turned into regular CSS style sheets. However, they do not extend the CSS standard itself. You can do operations like additions and introduce variables in CSS using Sass.


The SCSS is also called Sassy CSS. This is an extension of the syntax of CSS. This means that every valid CSS stylesheet is a valid SCSS file. Files using this syntax have the .scss extension.


The Saas format described earlier is also known as the indented syntax. It provides a more concise way of writing CSS. It uses indentation rather than brackets to indicate nesting of selectors, and newlines rather than semicolons to separate properties. Files using this syntax have the .sass extension. However, as already told that all this works only with the Sass pre-compiler. In the end what is created is simple CSS. It is not an extension to the CSS standard itself.



The Sass .sass file is visually different from .scss file, e.g.

Example.sass - sass is the older syntax

$color: red

=my-border($color)
  border: 1px solid $color

body
  background: $color
  +my-border(green)

Example.scss - sassy css is the new syntax as of Sass 3

$color: red;

@mixin my-border($color) {
  border: 1px solid $color;
}

body {
  background: $color;
  @include my-border(green);
}
Any valid CSS document can be converted to Sassy CSS (SCSS) simply by changing the extension from .css to .scss.

Thursday, January 3, 2019

Packing and unpacking tar/gzip files on Windows


A few years ago I wrote a similar blog for Linux. Refer https://www.w3lc.com/2011/06/tar-command-in-linux-to-archive-and.html. However, the question is again very relevant if your OS is Windows and its family. Hence this post.


Method 1: Using compression utility

First you compress it to tar with 7-zip and then to gzip with 7-zip.
You u can do using their UI or command line support provided by them.

Following is the example if you want to use 7z tool or its dll:

  • Create .tar.gz: 7z a -ttar -so dwt.tar dwt/ | 7z a -si dwt.tar.gz
  • Extract .tar.gz: 7z x dwt.tar.gz -so | 7z x -si -ttar



Method 2: Using bash shell on Windows like UnixUtils or any other Bash of Ubutu etc on Windows.

If installed, make a directory and proceed as follows:
cd /mnt/c/[path to folder to archive]
tar -pczf archive.tar.gz *
In fact, if you notice this approach is similar to my earlier blog for Windows.


Method 3: Write your own subroutine/function to generate a Zip file.

Yeah! you can do it. Thousands of companies do it. And you can find open source solutions as well. Because these formats are in any case open source! Pretty easy :)


Method 4: Extending method 1 more, you can use Gzip for Windows - GnuWin32. This utility has command line version as fell. Refer http://gnuwin32.sourceforge.net/packages/gzip.htm

Thursday, December 27, 2018

Assign different machine/ build agent in Teamcity - CICD server

Log on to the machine that you want to make as a build agent. Access your teamcity site (http://teamcity) through a browser from the target build agent machine eg windows server, and download the installer.
Also, do note that there are limitations on the number of agents you can have under you license so you may need to purchase an additional one, but I suspect in this case you'll be okay - TeamCity Licensing
The final step will be to run the build scripts using the build agents. For this detailed can be read on https://confluence.jetbrains.com/display/TCD18/Setting+up+and+Running+Additional+Build+Agents. This page also talks about pre-requisites and the installtion on build agents. However, for the sake of clarity, I have added those details in a simple manner as following:

Steps to install a build agent for Teamcity:
  1. Open the administration section and click on Install Build Agents. From here download the agentinstaller.exe
enter image description here
enter image description here
2.Start the installer and ensure you are installing a windows service
3. Enter your destination directory for the build agent - This is where the working directory and configuration will reside, and click next to perform the installation
4. Give details of you TeamCity server so the agent can communicate back to the server. Run the agent under the SYSTEM account for now, unless you have a dedicated network account (recommended) and start the build agent service. You will now need to enable the agent inside of the TeamCity UI (this may take a few minutes to appear). It might appear as unauthorized and you'll have to wait for it to upgrade and reconnect.
5. Once this has happened, you can authorize the agent by clicking the Authorize agent button. A dialog will popup where you can enter some notes if required.
From the Agent summary, you can note and crosscheck the IP of the machine and links to be used to refer later. TeamCity build agents can be started manually or configured to start automatically.

To start the agent manually, run the following script:
  • for Windows: \bin\agent.bat start
  • for Linux and macOS: \bin\agent.sh start

Refer: TeamCity Documentation - Installing via MS Windows Installer
Cheers :)

Sunday, July 29, 2018

Definition of Smart Devices by W3LC - World Wide Web Learners Consotium

Definition of Smart device.


"A smart device is any electronic computing device that has an ability to interact autonomously and yield information to its user and other smart devices."

© 2018, Mohd Anwar Jamal faiz


Some examples if Smart devices are:
  • Smartphones
  • Smart speakers like Alexa Echo Series, or Google Home
  • Smart Home systems like of Philips Hue and Samsung line
  • tablets
  • phablets
  • PDAs
  • Smart watches
  • Smart Fitness trackers
  • Smart Glasses
And, the list continues.

Wednesday, July 25, 2018

React Vs Angular in SPA: What they are, differences and the end of debate

As soon as you decide upon being SPA, the Single Page Application, the question pops up which Library. Here, I discuss between what I have learnt so far in this area,as a developer, tester and UX designer.


Let's start with a basic introduction. Angular is a TypeScript-based Javascript framework, developed and maintained by Google. Angular 1 released in 2010 is now called AngularJS. Angular 2 and above release after 2016 is simply called Angular. The latest version is Angular 7. It is being used by Google, Wix, weather.com, healthcare.gov and Forbes etc. React is described as “a JavaScript library for building user interfaces”. Released in March 2013, developed and is maintained by Facebook.
Facebook uses React components on several pages. It is said that React is used far more at Facebook than Angular is at Google. Anyways, React has also a good range of supporters cum users likeReact
Airbnb, Uber, Netflix, Twitter, Pinterest, Reddit, Udemy, Wix, Paypal, Imgur, Feedly, Stripe, Tumblr, Walmart etc. Additionally, Facebook is working on the release of React Fiber. Rendering is supposed to be much faster as a result.


The frameworks are component-based. A component gets an input, and after some internal behavior / computing, it returns a rendered UI template as output. Much appears like an MVC design pattern. The defined components should be easy to reuse on the webpage or within other components.


The differences start from the fact React focuses on the use of Javascript ES5 or ES6. Angular relies on TypeScript. Because of this Angular has more consistency. Also, Angular has hence, concepts like decorators and static types. Static types are useful for code intelligence tools, like automatic refactoring, jump to definitions, etc. However there is catch also that TypeScript may disappear over time. Additionally, TypeScript adds a lot of learning overhead to projects. And, for the type checking enthusiasts, there is something called Flow to enable type-checking within React. It’s a static type-checker developed by Facebook for JavaScript.


Then, lets remember that Angular is a full framework with all the tooling and best practices designed on top of it. React on the other hand is just a small view library that you
would need while making an app. React uses abstractions over simple Javascript. But learning Angular is bit time consuming as you should know everything else associated to it eg typescript, MVC. Plus Angular library in itself is huge. The Angular templates are enhanced HTML with special Angular language (Things like ngIf or ngFor). While React requires knowledge of JavaScript, Angular forces you to learn Angular-specific syntax.


On the Scalability issue, Angular is good at this time, 2018. However React is going to comeup with more in future. However, as of now Angular is easy to scale thanks to its design as well as a powerful CLI. React also claims to be good and testable and scalable. So, it won't be a bad idea to choose React.


Coming back to the programming style, I should assert here that Angular includes dependency injection, a pattern in which one object supplies the dependencies (a service) to another object (a client). This leads to more flexibility and cleaner code. Plus, the code becomes more testable. Angular's model-view-controller pattern (MVC) splits a project into three components: model, view and controller. Angular as an MVC-framework has MVC out of the box. React only has the V i.e View. You need to solve the M and C on your own.


But, there also lies a problem with Angular. This is already discussed above but the following idea will give you a new perspective as well. We’re now moving more towards microservices and microapps. React gives you more control to size an application by selecting only the things which are really necessary. They offer more flexibility to shift from an SPA to microservices using parts of a former application. Angular is too bloated to be used for microservices.


And, last but not the least, let me take you to a short discussion around native Apps creation. React with react native, react sketchapp and next.js, it is the best choice. Angular comes with ionic 2 and nativescript, but neither of those mobile frameworks allow angular to reach the performance of react native. React and Angular both support native development. Angular has NativeScript (backed by Telerik) for native apps and Ionic Framework for hybrid apps. With React, you can check out react-native-renderer to build cross-plattform iOS and Android apps, or react-native for native apps. A lot of apps (including Facebook; check the Showcase for more) are built with react-native.


Lets remember that definitely React has been the most popular when it comes to English frontend and full stack communities in 2016. It is also becoming a good choice for native JavaScript mobile and even desktop apps. React is fairly simple to understand. Angular is not so simple and code setup takes time. Also, Angular is way bigger, causing longer load times and performance issues on mobiles.


So, what I conclude that you should use Angular if you work at Google, if you love TypeScript, if you love object-orientated-programming (OOP), or if you work in a large team where there are guides, collaborators, scalability issues. You should use React if you work at Facebook, if you like flexibility, if you love big ecosystems and you like choosing among dozens of packages, or if you love JS & the “everything-is-Javascript-approach”.


Cheers ;)
Mohd Anwar Jamal Faiz