Skip to main content

Posts

New Site

Testing the new site! The focus will be on Project Portfolio Management and Software Development. Hope everyone's having a great day!
Recent posts

Checked Task Pro Instruction (BlackBerry 10)

  Checked Instruction I just started working on this page, please send me comments and suggestions that could improve this site. Please note that if you use the Android app, the instruction is similar to the BlackBerry app below. I will create a separate instruction page for Android app soon. Contents 1  Initial Set-up after Installation 2  SMART task system that combine the best of GTD (Getting Things Done) and MYN  3  Smart Add - natural language date parser 4  ***NEW*** Shortcuts 5  Back-up and Restore - How to Transfer data from one device to another 6  BES - Work Space - Add a public app from the BlackBerry World storefront 7  Settings options that will definitely increase your productivity 8  Automatically add email as task 9  Tips on improving performance 10  Add a category 11  Delete a category 12  Keep categories permanently 13  Add sub-task 14  Automatic Synchronize from remember 15  Sort options 16  How to add recurrent task and edit advance calendar detail 17  Outlook.com a

React Native + Javascript Date Time manipulation: moment and date-fns libraries

 There are multiple method to format and manipulate Date and Time. Generally speaking the most common libraries used to manipulate dates are Day.js, Luxon, Moment, and Date-fns. Moment developers have discouraged developers to use moments at this time due to not being built for modern JavaScript era. Day.js Installation: npm install dayjs --save Header import: import calendar from 'dayjs/plugin/calendar' import dayjs from "dayjs"; Usage example: dayjs.extend(calendar) dayjs().calendar(dayjs( '2008-01-01' )) dayjs().calendar( null , { sameDay : '[Today at] h:mm A' , // The same day ( Today at 2:30 AM ) nextDay : '[Tomorrow at] h:mm A' , // The next day ( Tomorrow at 2:30 AM ) nextWeek : 'dddd [at] h:mm A' , // The next week ( Sunday at 2:30 AM ) lastDay : '[Yesterday at] h:mm A' , // The day before ( Yesterday at 2:30 AM ) lastWeek : '[Last] dddd [at] h:mm A' , // Last week ( Last Monday at 2:30 AM ) sam

React Native - Global StyleSheet and Dark/Light Theme design approach

We use StyleSheet in almost all components. Generally there are three different approaches to changing component layout with React Native: Direct layout change in the component (e.g. text field) Create a StyleSheet section in each page Create a Global StyleSheet and reference in each component Personally speaking, I do not recommend the first 2 options due to: maintenance and inconsistency approach in design between different components harder to transfer to a new project. with GlobalStyles, you can put on a separate windows for easy view and update as you work on different component apply the dark/light theme to the component directly through GlobalStyles without having to customize it for each page Theme - Dark and Light theme with React Native with iOS, Android, Web, etc. Warning: if you use Expo Debugging, the system will default to Light theme (at least on iOS). Remove Remote Debugging if you want the Dark Theme to show up. In your Navigagor, apply the theme: const scheme = useCol

React Native + Javascript + Date Time + JSON.Stringify() + JSON.parse()

This page will capture all issues related to Date and React Native mobile app development. Will add more as I go through the development cycle.  I will play around with Javascript for a bit before switching to TypeScript.  Some of the information below might not be following the best practice as I just started the development process. Will update as I learn more about React Native + Javascript. Storing Date object in AsyncStorage You can store Date object directly into AsyncStorage. Generally in other programming language, you can store the Date object directly in a data storage. However, with React Native, you will get the the Debug Console warning on Expo Go if you do so. I recommend using JSON.stringify() command below to store the date object. Please follow the instruction below.  On the side note, you can also store millisecond and use the date toString option but it is not recommended. I would recommend using stringify command as it will store using the toISOString() which is the

Enable debugging with React Native + Visual Studio Code + iPhone device + Expo

Setup Debugging on Visual Studio Code Make sure you have expo-cli installed globally - if not, run: npm install -g expo-cli Open Visual Studio Code Click: Control + Shift + D to Open Run and Debug window If you have never set this up before, select the Create a launch.json file under Run and Debug button If you had a launch.json file before, select the option Add Config (your workspace name) Select React Native Click Debug Application Click Exponent Select Application in Direct mode Select Tunnel  Save the file launch.json file should be ready Start the debug session Note: if you are missing some library, Expo will remind you to install. Follow the instruction if required Re-open Run and Debug window if not yet opened (Control + Shift + D to open) Select "Debug in Exponent" on the drop down list box Click F5 to start the debugging session Expo QR Code window should show up on the right handside Open Expo Go (download if not yet installed Scan the code with your camera Select

Personal Finance with Google Sheet: current and historical net worth tracking with Script

You can build a simple historical net worth / investment tracking tool with Google Sheets without providing your private financial credential to online services. For the historical perspective, you will need to add some simple script to automatically copy the information to the Historical tab. Please note that I added light script below to help you get started. Level of complexity: Medium - need to add/modify script and how to use charts. Knowledge of spreadsheet: High Time: 3 hours High level structure Today tab This is your current financial picture view. An example structure is below. Date:                                        2022-07-23 Assets                                    Investment A                    100,000     // Auto Calculation based on the Investment tab - direct ref. is ok     Investment B                    100,000     // Auto Calculation based on the Investment tab - direct ref. is ok     House A                              500,000     // Manual input once in

Easy way to change image from 4:3 to 16:9 using Ms. Paint while respecting existing image aspect ratio

Assumptions: Height stays the same (only the width changes) Keep original image aspect ratio and keep the image in the middle of the new size image Add black boxes on the 2 sides to respect the exiting image perspective Calculation for the new 16:9 size New width = 16 / 9 multiply by the height (note: we are trying to keep same height) E.g.: original size is 3840 x 2880 (4:3) New width = 16 / 9 * 2880 = 5120 New image size = 5120 x 2880 (16:9) Instruction using Paint to add 2 black bars on the side of the image Goal: increase image size from 3840 x 2880 to 5120 x 2880 First increase image width to 4480 (File -> Image Properties) Rotate 180 degrees <- this is the main trick :) Increase width to 5120 Use Fill tool to fill the 2 sizes with Black (or whichever color you like) Rotate 180 degrees to get back to the original format ---------------------- Just another note for my future reference :).