오픈소스 기여하기 - MDN 개발자 네트워크 문서 번역하기

요즘 하는 일 말고도 다른 재미있는일 뭐가 있을까해서
이것저것 해보고있습니다 ㅎㅎ

그 중에서도 오픈소스 기여해볼까 해서 간단하게 시작해보려 하는데
뭐가 있을까해서 찾아봤어요.

많은 글들이 많죠
- GitHub에서 맘에 드는 프로젝트 별찍기
- GitHub에서 맘에 드는 프로젝트 포크(fork)하기
- GitHub에서 사용하는 프로젝트에 이슈 등록하기

근데 별찍기나 포크는 쉽지만, 이슈 등록이나 포크하고나서
어떻게 소스를 만들지 막막할때가 많습니다.

그럴땐 그 프로젝트의 문서를 작성하는 것도 나쁘지 않습니다.
문서 쓰는것도 프로젝트의 이해를 필요로 하지만 소스코드를 짜는것 보다는
쉽습니다. (제 개인적인 생각으로는)

보통 큰 프로젝트 같은 경우는 영어로 Wiki가 있는 경우가 많습니다.
예를 들어,

코르도바(cordova) docs : https://github.com/apache/cordova-docs
Node.js 한국 커뮤니티: https://github.com/nodejs/nodejs-ko

위에 것은 나중에 해보도록하고
오늘 우리가 해볼건 모질라 개발자 네트워크 홈페이지에서
영어글을 한번 번역해볼까 합니다.
모질라 개발자 네트워크(MDN) : https://developer.mozilla.org/ko/



여기서 조금 내려가봅니다.



MDN 참여하기에 시작하기를 한번 볼까요?



설명이 있습니다.

MDN은 더 나은 웹을 위한 리소스를 만드는 오픈 커뮤니티입니다. 라고 되어있네요
우리가 할 수 있는 일도 한번 볼까요?



글을 쓰거나,
코드를 쓰거나
글, 코드를 함께 쓰거나
여러가지 방식이 있습니다.

그리고 4번



우리말로 MDN을 보고싶어요.
그래요 우리는 번역을 할 수 있습니다. (약간의 영어실력만 있다면 말이죠)

한번 그냥 해봅시다

https://developer.mozilla.org/ko/docs/Mozilla/%EC%95%A0%EB%93%9C%EC%98%A8%EB%93%A4

여기 들어가보시면 영어와 한글이 섞여있습니다.




여기서 한번 편집을 눌러보겠습니다.





오른쪽 에디터에서 수정하고 맨위에




게시 버튼을 누르면 게시가 됩니다.
게시를 누르고 나면 페이지가 이동 후에 이렇게 나타납니다.




번역 작업이 진행중입니다.
라고 노란색 박스가 생겼습니다.

저기 리스트에 "Firefox에 새로운 기능을 추가합니다."가 제가 추가한 내용입니다.

이렇게 번역을 시작하시면
뭔가 뿌듯한 기분이 약간씩 드는데 이런 작업들이 모이고 모여서
오픈소스, 오픈 커뮤니티를 만들어가고 있습니다.

여러분도 즐거운 오픈소스 활동 하시길 바라면서
다음에 또 오픈소스 기여하기에 대해 찾아오겠습니다.

고맙습니다~

Which Programming Language Should I Learn First - carlcheo.com

http://carlcheo.com/startcoding

Poster



Python



You can see this reference about Python, Java, C/C++, JavaScript, C#, Ruby, PHP, Objective-C.
In this site. http://carlcheo.com/startcoding

+CarlCheo

Cordova Docs Translate contribution

https://crowdin.com/project/cordova/ko#


When i use cordova project, i can't use enough because of docs.
so, i contribute to cordova docs project.

first, cordova docs page shows like this.

https://cordova.apache.org/docs/ko/6.x/guide/platforms/android/plugin.html



In my country, Korea. Ko docs.
this context not good grammar, so we can not read effectively.

I decide to translate contribution
2 ways of contribution



1. use GitHub - edit translte page.
2. use Crowdin - crowd translate service

I use Crowdin. (because It is simple service i think)

UI like this.



and edit mode




Do some Edit!

I will translte "Android Plugin Development Guide"



As you can see,
you can be supported by Microsoft Translator. And make your translation.
and "Save" it




You can see your suggestions on log.

this can help your opensource contribution
have a good coding :)

Google AR(Augmented Reality) Project Tango

https://get.google.com/tango/



Video>

more video here

https://youtu.be/pmXVMIRwuJQ

https://youtu.be/KxTLOXzhqzA

Apps:

https://play.google.com/store/apps/collection/promotion_3001310_project_tango_featured

And Developer page

https://developers.google.com/tango/

GitHub : 

https://github.com/googlesamples/?query=tango

Google I/O 2016 codelab

https://codelabs.developers.google.com/io2016



You can learn technique on this site.
I click one of lab, "Accerlerated Mobile Pages Advanced Concepts"



















10 step course.




Do each stap.
End.



I will use this codelab on my project.

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

	body{
	overflow-x: hidden;
	}
	/*navbar content*/
	.custom-navbar {
	background-color: transparent;
	border: 0;
	padding-top: 2.5%;
	padding-bottom: 10px;
	padding-left: 0;
	position: absolute;
	}
	.custom-navbar .navbar-toggle {
	float: left;
	margin-left: 20px;
	}
	.custom-navbar .navbar-toggle:focus {
	background-color: inherit;
	}
	.custom-navbar .navbar-header {
	float: left;
	width: auto !important;
	margin-left: 5%;
	padding: 0;
	}
	.custom-navbar .navbar-brand {
	display: block;
	margin-left: auto;
	margin-right: auto;
	color: white;
	}
	.custom-navbar .collapse {
	float: right;
	margin-right: 20%;
	font-size: 18px;
	}
	.custom-navbar .navbar-nav>li>a {
	color: white;
	}
	/*slider*/
	#myCarousel {}
	#myCarousel .carousel-control .icon-next,
	.carousel-control .icon-prev {
	width: 20%;
	height: auto;
	}
	.wrapper {
	width: 100%;
	margin: 0;
	padding: 0;
	overflow-x: hidden;
	}
	#content1 {
	background-color: #ffffff;
	padding-top: 5%;
	}
	#content2 {
	background-color: #ebebeb;
	padding: 5% 20%;
	}
	#content3 {
	background-color: #ffffff;
	padding: 5% 0;
	padding-bottom: 8%;
	border-bottom: 1px solid #d0d0d0;
	}
	#content4 {
	background-color: #ffffff;
	padding: 5% 0;
	padding-bottom: 8%;
	}
	#content5 {
	background-color: #ebebeb;
	padding-top: 5%;
	padding-bottom: 8%;
	}
	#content6 {
	background-color: #fc8f00;
	padding-top: 5%;
	padding-bottom: 8%;
	}
	#content7 {
	background-color: #6e6e6e;
	padding-top: 5%;
	padding-bottom: 3%;
	color: white;
	font-weight: 100;
	font-size: 1em;
	}
	/*phone*/
	@media (max-width: 767px) {
	#myCarousel {
	margin-top: 50px;
	}
	.custom-navbar {
	background-color: #ff8c00 !important;
	padding-top: 5px;
	padding-bottom: 5px;
	position: fixed;
	}
	.custom-navbar .navbar-toggle {
	float: left;
	margin-left: 20px;
	border: 0;
	}
	.custom-navbar .navbar-header {
	margin-left: -10px;
	}
	.custom-navbar .li {
	float: left;
	}
	.custom-navbar .collapse.in {
	margin-top: 50px;
	border: 0;
	color: white;
	float: left;
	}
	.custom-navbar .navbar-collapse {
	margin-top: 50px;
	border: 0;
	color: white;
	float: left;
	}
	.custom-navbar .navbar-nav>li>a {
	color: white;
	}
	.custom-navbar .navbar-brand {
	display: block;
	position: absolute;
	width: 110px;
	left: 0;
	right: 0;
	padding: 15px 15px;
	margin-left: auto;
	margin-right: auto;
	color: white;
	}
	#content2 {
	background-color: #ebebeb;
	padding: 4% 10%;
	}
	#content3 {
	padding-bottom: 12%;
	}
	#content4 {
	padding-bottom: 12%;
	}
	#content6 {
	padding-bottom: 12%;
	}
	#content7{
	padding-bottom: 10%;
	}
	}

view raw index.css hosted with ❤ by GitHub

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, height=device-height">
	<meta name="description" content="">
	<meta name="author" content="">
	<title>test</title>
	<!-- Bootstrap Core CSS -->
	<link href="css/bootstrap.min.css" rel="stylesheet">
	<!-- Custom CSS -->
	<link href="css/full-slider.css" rel="stylesheet">
	<link href="css/index.css" rel="stylesheet">
	<link href="css/contents.css" rel="stylesheet">
	<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
	<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
	<!--[if lt IE 9]>
	<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
	<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
	<![endif]-->
	</head>
	<body>
	<!-- Navigation -->
	<nav class="navbar navbar-inverse navbar-fixed-top custom-navbar" role="navigation">
	<div class="container" style="width:100%;">
	<!-- Brand and toggle get grouped for better mobile display -->
	<div class="navbar-header">
	<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
	<span class="sr-only">Toggle navigation</span>
	<span class="icon-bar"></span>
	<span class="icon-bar"></span>
	<span class="icon-bar"></span>
	</button>
	<a class="navbar-brand" href="#">
	<img id="brand-img" src="img/logo.png" />
	</a>
	</div>
	<!-- Collect the nav links, forms, and other content for toggling -->
	<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
	<ul class="nav navbar-nav">
	<li>
	<a href="#">li1</a>
	</li>
	</ul>
	</div>
	<!-- /.navbar-collapse -->
	</div>
	<!-- /.container -->
	</nav>
	<!-- Full Page Image Background Carousel Header -->
	<header id="myCarousel" class="carousel slide">
	<!-- Indicators -->
	<ol class="carousel-indicators">
	<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
	<li data-target="#myCarousel" data-slide-to="1"></li>
	<li data-target="#myCarousel" data-slide-to="2"></li>
	</ol>
	<!-- Wrapper for Slides -->
	<div class="carousel-inner">
	<div class="item active">
	<!-- Set the first background image using inline CSS below. -->
	<div class="fill">
	<img id="s1-img" src="img/s1.jpg">
	</div>
	</div>
	<div class="item">
	<!-- Set the second background image using inline CSS below. -->
	<div class="fill">
	<img id="s2-img" src="img/s2.jpg">
	</div>
	</div>
	<div class="item">
	<!-- Set the third background image using inline CSS below. -->
	<div class="fill">
	<img id="s3-img" src="img/s3.jpg">
	</div>
	</div>
	</div>
	<!-- Controls -->
	<a class="left carousel-control" href="#myCarousel" data-slide="prev">
	<img class="icon-prev" src="img/arrow1-prev.png">
	</a>
	<a class="right carousel-control" href="#myCarousel" data-slide="next">
	<img class="icon-next" src="img/arrow1-next.png">
	</a>
	</header>
	<!-- Page Content -->
	<div class="wrapper">
	<div class="row" id="content1">
	<div class="col-lg-12"></div>
	</div>
	<div class="row" id="content2">
	<div class="col-lg-12"></div>
	</div>
	<div class="row" id="content3" name="how-to-use">
	<div class="col-lg-12"></div>
	</div>
	<div class="row" id="content4">
	<div class="col-lg-12"></div>
	</div>
	<div class="row" id="content5">
	<div class="col-xs-12 col-lg-12"></div>
	</div>
	<div class="row" id="content6">
	<div class="col-lg-12"></div>
	</div>
	<!-- Footer -->
	<footer>
	<div class="row" id="content7"></div>
	<!-- /.row -->
	</footer>
	</div>
	<!-- /.container -->
	<!-- jQuery -->
	<script src="js/jquery.js"></script>
	<!-- Bootstrap Core JavaScript -->
	<script src="js/bootstrap.min.js"></script>
	<!-- Script to Activate the Carousel -->
	<script>
	//carousel interval settings
	$('#myCarousel').carousel({
	interval: 5000 //changes the speed
	});
	</script>
	</body>
	</html>

view raw index.html hosted with ❤ by GitHub

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!