Installed ngrok in Mac

Hey back again!! Take a little break from React js tutorials

Today show the most simple demostration your work in local host via Ngrok

why we talk about Ngrok, because as play around with React js you need your

server has node js environment, well, if you are using MAC then node js is quiet simple installed through Homebrew

Then pretty much work around with npm install to creat your first react js app

The problem is if you want to show your practice project from your local work?

Then it is come to complicated, that’s why we talk about Ngrok

what is Ngrok ? well it is secure tunnel to pass your localhost, and transfer it readable url, with this url you could show your local work without any deploy work such as to cloud or dedie server, never mention those tedious configuration work

Sounds good? let start the process:

1 installed Homebrew

2 installed ngrok from terminal, using this command:

$ brew cask install ngrok

3 $ ngrok http 3000 ( which is react js local host default port)

that’s all,

Then you will see the terminal running like this:

As you could see the http:// xxxx.ngrok.io   is the URL generated by ngrok which allowed show your local work directly

 

Is that Angular.JS could replace the native app?

1Well, since like to learn Angular.js could be the most chic trend for those frond-end hanker, or, even for those HTML5 lovers. Since like to say: for those app developer, angular.js could be the menace. It’s basic by HTML, CSS and Javascript. and it is fully extensible and works well with other libraries. Easy to follow up the function and quiet reduce the develop cost. And before using Angular.js, you could use  a  generator tool  like YEOMAN which could help you configure the libraries for you more easily!

2And here is cool framework for developing hybrid mobile apps with HTML5

3This does like the Jquery-mobile that you could just define your class in html which has been define by css library and javascript, make your app more clean and better performance.

and here are some app example that creat by IONIC:

3Is just still that issues: is this web base app performance could be run better then native app?

 

Cool videojs

2

cool plugin that you could insert completely to the web or any html5 website, just insert some script and css, then you could simply add some tag in html that you could eventually see your video in your website with dynamic control panels.!!

It’s good for Designers who want definitely desire the responsive view with simply css code, and for those developers you could use this open source and CDN hosted.

Well, I did try this cool stuff, and first it has been a little bite obstacle, cause I was insert all the js and css file, and then I found that the control panel was write in css, so I modify the div class=video-js. Then I won’t have the css compile problem. Well, have fun!!
Here is the github link!

Slack good for team work

1

Recently has new co-worker introduce this for us cooperate together, and as I had tried out, yes! It’s been real cool, that you could just create the company or team name to share and communicate with other directly. It’s also like in skype you could see who is exactly on line(0n board) that you could communicate directly. so in this case, you will not miss the work free time(which you could see that he/she is on line), and also this include the app that you could download that your co-worker barely miss your alarm, the app will send the notification for the telephone.

It simply and easy use, very user instinct that everyone could use it right away!

Here is the link!

The list of 6 css grid system framworks

Here again, I just want to introduce about the css grid system framworks, base on the css3 and html5 with could free-friendly use for the responsive websites. Here, I recommend 6 of them, but honestly, I only used 3 of those, which one is better? well, it depends what kind of your website need, mostly it easy your coding work.A well-built CSS framework or boilerplate can streamline the design process, save huge chunks of development time and ensure your website scales properly on all devices. That’s take a look as follow:

1. Foundation

1Foundation uses “box-sizing: border-box,” so that borders and padding do not affect the overall width of the columns, making the math dead simple. With the mobile-first approach, the content is automatically stacked by default. There is also access to a separate small grid up to the 768px breakpoint.

that’s view the example of the foundation website:

1-1

2.Boostrap

6Well, Bootstrap is a “sleek, intuitive and powerful front-end framework for faster and easier web development.” It uses a 12-column responsive grid system and features dozens of components, styles and JavaScript plugins, with basic global display, typography and link styles.
It’s real grid friendly using as easy as just define the div, well, our vacha-design website is certainly using boostrap.

3. lessframwork

2Of interest is Frameless, also built by Joni Korpi, which uses a fixed-width grid rather than a fluid grid. It is the “spiritual successor” to the Less Framework. It’s a much simpler, more flexible idea that can easily integrate into your workflow.

The example of using lessframwork website:

2-2

4. html5boilerplate

3This could be the most well-know framwork , which could be use for big-data website like  Australia PostEntertainment Weekly, or as small as presentation website. so the founction could be as the same as upper examples. You could read quick usage from githut.

and here is the example website with simply presentation site:

3-3

5. Responsive Grid System:

5

A quiet simple CSS framework for fast, intuitive website development, the Responsive Grid System is built using the mobile first approach, and is less than 1KB compressed. There’s no need to hack in any offsets or marginless final columns. It’s the last time you need to use .last and the end of .end.  And this is Content first, Instead of fitting your content to your grid, you can make your grid suit your content.

Here is the example website:

1

 6. Skeleton:

4

Skeleton is a small collection of CSS files that can help you rapidly develop sites that look beautiful at any size, be it a 17″ laptop screen or an iPhone. I had been touch this one by our project : fabbrica website. But this website, we had occurred serious cookies problem and java script conflict problem, so a polyfill like Respond.js would be required.

Here is the example by skeleton:

1