Why does LINE run the Japanese Bootstrap5 site?

Masayuki Shiraishi
LINE Data Visualization Team Front-end Engineer
https://linedevday.linecorp.com/2020/ja/sessions/3215
https://linedevday.linecorp.com/2020/en/sessions/3215

Transcript

2. About me 2014 joined LINE as web director 2018 converted to front-end engineer Familiar Vue.js & Bootstrap Favorite Beer & Yokohama F Marinos
3. Agenda › LINE interacts with front-end OSS › Why does LINE run the documentation site? › How to build? › Trade-off › Looking back
4. LINE interacts with front-end OSS Publicly available source code Front-end meetup Front-end podcast Documentation site Contribution to source code etc.
5. LINE interacts with front-end OSS etc. Publicly available source code Front-end meetup Front-end podcast Documentation site Contribution to source code
6. Bootstrap Japanese site v5.getbootstrap.jp v5.getbootstrap.com
7. Monthly data Users 40,000 Sessions 100,000 Pageviews 400,000 As of 2020/09
8. Search results for “bootstrap”
9. Agenda › LINE interacts with front-end OSS › Why does LINE run the documentation site? › How to build? › Trade-off › Looking back
10. npm trends “Bootstrap”
11. Most frequently used CSS frameworks 2018 World 42% 35% https://ashleynolan.co.uk/ Bootstrap Bootstrap LINE
12. LINE CSS toolkit
13. LINE CSS toolkit › Based on Bootstrap4
14. LINE CSS toolkit › Based on Bootstrap4 › Deployed in 30+ services
15. LINE CSS toolkit › Based on Bootstrap4 › Deployed in 30+ services › Always follow the latest version
16. Information gathering
17. Translations
18. Pull request
19. Translations
20. Agenda › LINE interacts with front-end OSS › Why does LINE run the documentation site? › How to build? › Trade-off › Looking back
21. How to build？ Plan › Translation schedule
22. Translation schedule 10 mins × 60 pages ÷ 2 members
23. Translation schedule 5 hours 10 mins × 60 pages ÷ 2 members
24. Translation schedule 1 week 5 hours 10 mins × 60 pages ÷ 2 members
25. How to build？ › Build the site › Translation Do Plan › Translation schedule
26. Build the site Git clone from original repository
27. Build the site Git clone from original repository Translate markdown files
28. Build the site Git clone from original repository Translate markdown files Generate HTML files with Jekyll
29. Build the site Git clone from original repository Translate markdown files Generate HTML files with Jekyll Publish on GitHub pages
30. Translation
31. Translation Remains heading in English
32. Translation Remains heading in English English (日本語)
33. Translation 10 mins
34. Translation 30 mins 10 mins
35. Priority Won't Won't
36. How to build？ › Build the site › Translation Do Action › Access analysis › SEO Plan › Translation schedule
37. Pageview As of 2018/11
38. Pageview As of 2018/11
39. Pageview As of 2018/11
40. Pageview As of 2018/11
41. Referrer 84% Google search As of 2020/09
42. Search query
43. Search query 4.2 4.3
44. Search query 4.2 4.2 4.3
45. Search query
46. 2018/11 2019/1 2020/1 2020/9 User growth 40k
47. Agenda › LINE interacts with front-end OSS › Why does LINE run the documentation site? › How to build? › Trade-off › Looking back
48. Output first 70 % Completeness
49. Output first 70 % TTypo ! Completeness
50. Output first 70 % Typo Completeness
51. Focus on high priority v4.5 < v5.0
52. Focus on high priority Big impact or not? v4.5 < v5.0
53. Agenda › LINE interacts with front-end OSS › Why does LINE run the documentation site? › How to build? › Trade-off › Looking back
54. Looking back › Can do everything
55. Looking back › Can do everything › Get a lot of knowledges
56. Looking back › Can do everything › Get a lot of knowledges › Get a lot of good opportunities
57. Let’s try
58. Thank you