Posts

Showing posts from May, 2020

How to create step guides

Image
Flow to create step guide Screen annotation in Mac Flow to create step guide Most of the bloggers need to add stories to their blog posts. For tech bloggers, that is most probably the journey of clicks over browser, application and so on. However, the blogger has to capture the screen and record with the annotations. In this blog, I explain how to create step by step guide: graph TD A[Start walk through] --> B(Take screenshot) B --> C{more to go ?} C -->|Yes| B C -->|No| D[Annotate Screenshot] D --> E{more to annotate ?} E -->|Yes| D E -->|No| F[Create Guide] As shown in the above Flow chart, you have to annotate all the screenshots first, as explained in the below section. In the end, you have to add those screenshot to the editor like Typora Typora . You can use uPic integration of Typora to auto-upload pictures to cloud. You can write a complete step by step guide in the Typora. Screen annotation in Mac Step 1: Press Cmd
Post a Comment
Continue »

Toolbox for bloggers

Image
CONTENTS Animated GIF for terminal recording Diagrams and Charts Write a blog post Math notations Create step guides Animated GIF for terminal recording The LICECap is nice free little tool good to create animated gif show your terminal for example. Fig 1: Python version on terminal It is hard to find the similar Diagrams and Charts Although there are few diagrams types and charts, I am very happy with mermaid . The advantage of using mermaid is its dependency only on browser: no need to access outside services to create chart or diagram. pie title Top 5 COVID-19 (31/05/2020) "USA" : 1815856 "Brazil" : 498440 "Russia" : 396575 "Spain": 286308 "Rest of the world":2879467 It is hard to find similar free tools. If anyone knows, please don't forget to share with me. Write a blog post If you are interesting how I write my blog posts, please read the Markdown blog write
Post a Comment
Continue »

AngularJs Basics

Image
You can download the AngularJs to use via CDN. I am using doing my examples in Visual Studio Code (VSC) Live Server plugin for the VSC Angular application based on the model-view-controller pattern. The view is based on the DOM. The controllers are JavaScript classes and the model data is stored in object properties 1 . The model (line# 10) represent the current state of the application. view (line# 12) for display the data controllers manage the relationships of model and views. Here the simplest two way binding where UI is mapped to JavaScript properties. <!doctype html> <html ng-app> <head> <title>My AngularJS App</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script> </head> <body> Value : <input type="text" ng-model="val" placeholder="cost" /> <p> This is your value: {{val}} </
Post a Comment
Continue »