Build React Native App (4) - Redux, Jest, and NativeBase

Image
From this blog, typescript feature will be added. There are couple of ways to implement static type checking like; flow from facebook, PropTypes and Typescript. Typescript is well integrated with Visual Studio Code and supports better linter, error messages, and intellisense. Reference site Github Sample Ex4 Currnet version D:\GitRepo\reactnative>npm --version 6.3.0 D:\GitRepo\reactnative>react-native --version react-native-cli: 2.0.1 react-native: n/a - not inside a React Native project directory D:\GitRepo\reactnative>yarn --version 1.9.4 Creating React Native App $ react-native init ex4 If you want to specify the version, add "--version 0.57.3" at the end. Add NativeBase to React Native $ npm install native-base --save ... + native-base@2.8.1 added 71 packages from 42 contributors, removed 50 packages, updated 829 packages and audited 34989 packages in 138.542s found 0 vulnerabilities $ $ yarn yarn install v1.9.4 warning package-lock.json found. You
1 comment

Creating Blog for Google Blogger using Visual Studio Code, Markdown, and Syntax Highlighter

Introduction

I used StackEdit to convert a Markdown document to html and the format has some problem with recent template from Blogger. The steps I used were; 1. Create Markdown document from local computer using Visual Studio Code to store it to my Git Repository 2. Copy it to StackEdit to convert to HTML 3. Paste it to Blogger admin page. I wanted to simply to eliminate StackEdit process and tried to generate HTML document directly from Visual Studio Code, but had lots of problems.

The problem was that

  • No extension to generate proper HTML document. There is pandoc component, but not working well with Blogger
  • Set up Highlighter cdn to Blogger template

I wish this approach saves time to generate html document from Blogger

Prequistics

  • Nodejs: npm and markdown-it
  • Visual Studio Code
  • Markdown TOC extension if needed

Reference

Steps

1. Download markdown-it components

I assume that everyone has nodejs command line and "npm" program path is stored as part of "PATH" variable. To check it run c:> npm -v from Terminal.

CheckNPM

Once NPM is installed and the path is in the "PATH" variable, time to install "Markdown-it" javascript components Run following command npm install -g markdown-it from Terminal

InstallMarkdown-It

The execution command format it

markdown-it input_md_file -o output_html_file

ExecuteMarkdown-It

2. Add JS and CSS to google template

Go to template page and add following code between head section

    <link href='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.10.0/styles/default.min.css' rel='stylesheet'/>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.10.0/highlight.min.js'/>
 <script>hljs.initHighlightingOnLoad();</script>

BloggerTempalteSetting

3. Result

BloggerMarkdownResult

Summary

I spent couple of days to find out best way to generate HTML for markdown files and I believe this is best way to generate without any additional programs.

Comments

Post a Comment

Popular posts from this blog

Export folder structure to file on Windows, Mac, and Linux

Introduction Most time, I make screenshot to show folder structure, but whenever there is change, it is painful to make screen capture again and agian. This is how you can export folder structure to text file. Tree on Windows "tree.exe" is installed as default and you can run it from command prompt. d:\GitRepo\github\dockeransible>tree /? Graphically displays the folder structure of a drive or path. TREE [drive:][path] [/F] [/A] /F Display the names of the files in each folder. /A Use ASCII instead of extended characters. d:\GitRepo\github\dockeransible>tree d:\gitrepo\github\dockeransible /A /F > tree.txt d:\GitRepo\github\dockeransible>notepad tree.txt d:\GitRepo\github\dockeransible> Output from the command Folder PATH listing Volume serial number is D8A7-163B D:\GITREPO\GITHUB\DOCKERANSIBLE | README.md | tree.txt | +---2-CreateVM | CreateVM.yaml | +---4-AnsibleDebug | DisplayClonedVMInfo.yaml | +---5-Ad
Read more

Adding SOAP Header generated by JAXB(wsimport)

Adding SOAP Header generated by JAXB(wsimport) Introduction Recently, I've been working with Exact Web Service and needed to add SOAP header entry from the source files generated by wsimport tool. To access Globe database, I needed to add database server name and database name from SOAP Header. I tried to find out lots of article and this is the way to add headers into SOAP. Reference There was one excellent site, but I couldn't find it any more. If I find it, I will update here. The steps Add jaxws-api (2.2.12) to POM file Add jaxws-maven-plugin to POM file to generate java code from WSDL Add SOAPHanlder class to intercept during sending messages To add SOAPHandler, get handler from JAXB service Call Service 1. Add jaxws-api <dependencies> <dependency> <groupId>junit</groupId> <artifactId>junit</artifactId> <version>4.12</version> </dependency> <dependency> <groupId>com.fasterxm
Read more

Sample application for Active Directory SSO with Spring Security 4 and Waffle

Image
Introduction I've developed quotation program with Mybatis, Spring MVC, and SQL Server, but I had a request of integrating this module with Spring Security and Active Directory. I've researched about possible solutions and I've spent quite bit of time with Waffle and SAML. SAML is more ideal, but I found out that the entire implementation is too complicated and I decided to use Waffle for this purpose. One of drawback of Waffle is that the Tomcat server must be runned from Windows platform. I tried to find out spring security example with Waffle, but it is hard to find out the sample from Internet. It took so many hours to create this simple example. Tools Spring STS: 3.6.4 Spring Security : 4.0.1 Spring framework: 4.x.x Waffle: 1.7.4 Implementation Creating Spring MVC Project Create New Project -> Spring Project -> Spring MVC Updating POM To make easy of managing version, added two versions under "properties"        <
Read more