Cocos2d-x 3.12 is Comming!

https://madmimi.com/s/65cae7#

Cocos2d-x v3.12 coming soon!

Cocos2d-x v3.12 is coming out at the end of June. This release focuses on:

▪ Android performance fixes (You can already get these by pulling from our GitHub repo!)
▪ the web engine is receiving a big performance upgrade. The WebGL and Canvas renderers have been completely refactored from the ground up. This means improved rendering and a reduced memory footprint.
▪ experimental VR support! Initial support for Google Cardboard, Gear, Deepoon and Oculus. Read about how VR was implemented on our forums.
▪ and more bugs fixes

And Cocos2d-x 3.11.1 version released on May

Cocos2d-x v3.11.1 is out. This release is a bug fix release:

▪ support ipv6-only networks
▪ fixes for generating the pre-built libraries.
http://discuss.cocos2d-x.org/t/cocos2d-x-v3-11-released/29253

Android, iOS, Windows Phones Viewport size table

http://viewportsizes.com/



You can use this site when you need viewport size table for make cordova applications.

Filter can use like this.

Cordova 한글 깨짐, Cordova character broken issue

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

You just add this meta info.

이거 한줄만 추가해주시면 됩니다.

Octane, Javascript Benchmark

http://chromium.github.io/octane/



What is Octane : https://developers.google.com/octane/benchmark

Start Octane!



Running...




End!
My Macbook retina chrome Octane Score: 20984

if you want accurate result,
make new window OR anew browser.

Use Cordova application + Crosswalk (for performance, compatibility)

Cordova website: https://cordova.apache.org/
Crosswalk website: https://crosswalk-project.org/

in my project, i use to make app have more performace, compatibility.
Crosswalk project advantages are

The Crosswalk Project Advantage:

• Get consistent, predictable behavior by reducing Android device fragmentation.
• Use the latest web innovations and APIs. Provide a feature rich experience on all Android 4.0+ devices.
• Easily debug with Chrome DevTools.
• Improve the performance of your HTML, CSS, and JavaScript.

like that.

And I will use it in this time.

First, Install Cordova

$npm install cordova -g
(if you are not install npm, install nodejs or npm)


Second, Make Cordova app

$cordova create app com.pineoc.testapp app
$cordova platform add android


Third, Install Crosswalk plugin for Cordova

$cordova plugin add cordova-plugin-crosswalk-webview


Fourth, run android

$cordova run android


Reference post benchmark about crosswalk:
http://monaca.mobi/en/blog/crosswalk-performance/


*Crosswalk makes app good performance, but application dex size(apk file size)
bigger than not use crosswalk application.



left side info is "crosswalk + cordova"
right side info is "just cordova"

dex size added about 20MB
because of Crosswalk APIs, high performance rendering functions, Compatibility functions.

if not important about application size, use crosswalk for performance
but important about that, should be consider to use it.

Good coding day
Thanks

Boilerplate란 무엇일까? - 개념과 설치해보기

요즘 Front-end 쪽 프로젝트도 많이하고
공부도 많이 하고 있는 중에 HTML boilerplate 에 대해 보게되었다.

우선 boilerplate 란, 여기(텀즈)를 참고해서 이야기해보자면
"변경없이 재사용이 가능한 저작품"

원래 보일러 플레이트는 증기 보일러 내부에 있는 커다란 압연 강판을 말한다.

다른 의미로는 이렇게 표현할 수 있다.

"이 용어는 보일러 플레이트가 오랜 기간동안 시험되었으며, 
강철처럼 튼튼하다, 또는 반복적으로 재사용하기에 충분할 정도로 강력한 어떤 물건으로 만들어졌다는 등의
 여러 가지 함축적인 의미를 내포하고 있다."

보일러 플레이트에 대한 용어 설명은 이만하고
HTML Boilerplate에 대해서 한번 살펴보려고 한다.

HTML5 ★ BOILERPLATE

Link : https://html5boilerplate.com/



메인 페이지에서는
"보일러플레이트를 사용하면 사이트나 웹앱을 빠르고 튼튼하게
그리고 잘 적응할 수 있게(다른 컴포넌트와 잘 맞게) 만들 수 있다." 라고 되어있다.

밑으로 내려서 사이트 내용을 더보자.



좋은 내용만 있는거 같다.
1. 모바일에 친화적이고, 구글 아날리틱스도 잘 쓸 수 있음.
2. Normalize.css 를 이용해서 잘 만들 수 있음.
3. jQuery, Modernizr 을 이용해서 빠른 라이브러리 호출을 할 수 있다.
4. 좋은 성능 : 아파치 서버 세팅을 통해서 빠르게.

Modernizr 에 대한 내용은 따로 공부해보는 것도 좋아보인다.
https://modernizr.com/

다시 보일러 플레이트로 돌아가서,
이러한 좋은점이 있으니 사용해라인데, 일단 다운받아봤다.
다운 받는 방법은 세 가지가 있는데

1. 사이트에서 다운받기
2. http://www.initializr.com/ 이 사이트에서 조건 설정해서 다운받기
3. git clone을 통해서 다운받기

일단은 1의 방법으로 다운받았다.

다운받아서 그 안에 내용을 봤더니


이렇게 구성되어 있었다.

여기서 index.html을 켜보면,
아래와 같은 페이지가 보인다.


(역시 시작은 Hello world!)

보일러 플레이트를 이용한 다른 사이트들을 볼 수 있는곳은
http://h5bp.net/

많은 사이트들이 있는데
기본적으로 반응형으로 제작되어있었고
페이지 로딩이라던지, 다른 부분에 있어서 퍼포먼스는 좋았다.

실제로 개발해보면서 자세히 들여다보고 분석해보는게 좋을 것 같다는 생각이 들었다.

Megaboilerplate - starter project generator

http://megaboilerplate.com/



Github link: https://github.com/sahat/megaboilerplate/

This service
make starter project.

it can be used like this.






pick the stack you want.
and download




Download file packed,

You can use just
$npm install
$npm start

And you can see this page



Amazing service!

I will use this for my personal project some time.

Developer Github link: https://github.com/sahat
I follow him.

Bootstrap safari right side empty white space

When i use bootstrap full slider,
(http://startbootstrap.com/template-overviews/full-slider/)

I have some issue. Like this.

As you can see, this image shows white space at right side.

in my code,

1. use wrapper class

2. wrapper > row, row, row

i just add to wrapper class
overflow-x: hidden;
and removed empty white space.

thats all.
Daily save the day post.

Google Web PageSpeed tool

About Page: https://developers.google.com/speed/pagespeed/

Do Page: https://developers.google.com/speed/pagespeed/insights/

Enter a web page URL
In my case, i enter my blog.

Pagespeed insight shows result like this.

I will fix some issues for my blog. :)

good service of webpage

Google blogger custom template settings, More custom template flexibility

https://blogger.googleblog.com/2016/05/more-custom-template-flexibility.html

More custom template flexibility

Last May, we added some expressions to our templating language to make it easier for you to customize your blog’s look and feel. These new expressions proved popular with those of you who enjoy advanced blogging tools, so we wanted to offer you even more flexibility. 

Starting today, we’re introducing a new set of operators, which we’re calling lambda expressions, that allow you to apply rules to whole sets of data (think posts, comments, or labels), rather than just individual instances. 

Let’s say you wanted to add a flower image to all posts with the label “Flower,” for example. With lambda expressions, simply define a variable name that each item in the set will take, and then refer to the variable name as though it were each item.

<!-- Show a Flower image if the post has the label flower -->

<b:if cond='data:post.labels any (l => l.name == "Flower")'>

 <img src=’/img/flower.jpg’ />

<b:if/>

This code will show if label is "Flower"

Like this below.

Help this Lambda expression,

https://productforums.google.com/forum/#!topic/blogger/l3phi8bscGY

Follow this blogger +Blogger
inform this informations

Google data visualize tool - Google data studio

Homepage: http://www.google.com/analytics/data-studio/

I click the "TRY IT FOR FREE".

if you click first menu, "Welcome Data Studio"

more examples in this page.

[Sample] YouTube Channel Report

Google Data Studio make data visual awesome!