In the past six months, I spent a lot of time spearheading and experimenting with Flutter, and finally implemented a multi-platform Application for data tracking which is used within LINE company. Then I took this opportunity to give a talk inside the company that introduced and promoted Flutter. Here’s the slide of the presentation.

https://slides.com/yanggong/flutter-intro/

Recently I’m making a company-wide Web Component library. Here are some notes regarding styling. I’m going to use <l-header-bar> component as an example.

Note 1: The Shadow DOM boundary (shadow root) prevents styling coming in or going out

Web components can isolate styles via the Shadow DOM, which is called scoped CSS:

• CSS selectors from the outer page don’t apply inside your component.
• Styles defined inside don’t bleed out. They’re scoped to the host element.

CSS selectors used inside shadow DOM apply locally to your component. In practice, this means we can use common id/class names again, without worrying about conflicts elsewhere on the page. Simpler CSS selectors are a best practice inside Shadow DOM. They’re also good for performance.

Meanwhile, outside CSS selectors are not able to access the HTML element inside Shadow DOM. The following code won’t work.

1
2
3
4
5
6
7
8
9

<!-- l-header-bar template -->
<header>
...
</header>
<style>
header {
    background: red;
}
</style>

1
2
3
4
5
6
7

<!-- user's HTML -->
<l-header-bar></l-header-bar>
<style>
l-header-bar > header {    /* No Way! */
    background: blue;
}
</style>

Product Positioning

WeChat Mini Programs are a new way of connecting users and services. They are easy to access and share on WeChat, delivering an excellent user experience.

What are the differences between WeChat js-sdk, weui, and Mini Program.

WeChat js-sdk is a web development kit based on WeChat provided by WeChat public platform for web developers. By using WeChat js-sdk, web developers can effectively use the capabilities of WeChat to take photos, select pictures, voice, location and other mobile phone systems, and directly use WeChat sharing, scan, card coupons, payment and other WeChat-specific capabilities to provide better web experience for WeChat users. You can think of WeChat js-sdk as our LIFF.

weui is a UI library by WeChat official design team. weui has an ordinary web (HTML/CSS/JS) version and a Mini Program version. Basically, it contains only styles and has no functionality of WeChat js-sdk.

Mini Program is a more advanced solution, which takes one step forward from an ordinary mobile Web page. As you know, Mini Program provides a set of languages to let developers build more powerful apps within WeChat platform. The merits(from the user and developer perspective) are:

• Fast loading
• More powerful capabilities
• Native experience
• Easy and secure WeChat data exposure
• Efficient and simple development

For more details – About Mini Programs

This October I attended the Intersection Conference EU in Milan, Italy. The Conf covers everything from product design to front-end development. The first day we had full-day workshops. I took part in the class The Web In Motion taught by Val, whose way of teaching was very helpful and attractive. There were only 6 people in this workshop, but I did made new engineer friends in Italy. The next day we had the Conference presentations in two venues, which were fairly rich in content. The most impressive speeches for me were NATIVE WEB APPS and AN SVG’S TALE.

Here are the notes I took.

https://slides.com/yanggong/intersection-conf

2017最喜欢的电影
奇跡
入围：海よりもまだ深く，Manchester by the Sea，Dangal，ゴールデンスランバー，Begin Again

2017最喜欢的电视剧
ごめんね青春！
入围：カルテット，ロングバケーション，This Is Us Season 1

出行海参崴是在国庆期间。到达时是当地的清晨，我乘坐了当日第一班从机场到市区的express train，路过了树林、草地、乡村房屋和海边。在秋日的明媚阳光下，植被蒙上了层次不同的暖色调，窗外移动的景色成为了心中最心仪的风景。

This article is about the CSS Architecture. Writing modular CSS is always the most important, but also difficult thing. I believe in ideas that a good CSS Architecture should be predictable, reusable, maintainable, and scalable. The way how we structure our CSS has evolved over the years. We can write powerful and maintainable CSS nowadays with the power of open source community. I have tried several different approaches, The following are some of them.

Rexxar is a mobile development solution for cross-platform application. We design Rexxar to be non-intrusive and lightweight. It is now open source with three libraries.

• Rexxar iOS Container
• Rexxar Android Container
• Rexxar Web SDK

The word Rexxar is originally from Warcraft. Rexxar is one of the warriors who had been formed from a union between orcs and ogres.

2016上半年报名参加了吉他班，每天晚上回家都会练琴，因为进步很快得到了奖励，和小伙伴一起弹琴的感觉是新鲜的，那是迷恋民谣的一段时期。五月份的时候妈妈来北京给我过生日，带着老妈玩了三天，虽然很累但是非常开心，过了一个温馨的生日，留下了很多照片纪念。作为生日礼物妈妈给我织了两双袜子，超感动。上半年工作中Rexxar稍有成果，在雪球和滴滴分别做了分享，总体来说都很生涩，但第二场比第一场感觉更良好。