Category Archives: Front-End

How and what front-end developers actually do at LINE?

Hello to the world! I’m Yeon-Eui Hong from Developer Relations Team. I’d like to take this opportunity to share the story of the LINE Developers Meetup held for the second time in Korea, on April 16, 2019. The theme of this meetup was “LINE front-end developers, what do they actually do and how?” I was proud to …

VueConf TO 2018 Recap

VueConf TO is North America’s biggest Vue conference with attendees from all around the world, including Vue.js core team members, Nuxt.js, Vuetify.js and main library authors, along with expert speakers from the community. Vue is an open-source JavaScript framework for building user interfaces and single-page applications, which lower the barrier and complexity of frontend development. It’s one of the most popular framework nowadays …

Synchronizing largely geographically distributed teams with Lint

It’s well known that as a team grows, the communication overhead increases geometrically until it takes up most of the time of the members. Static analysis can help us reduce the time cost, streamline the code review process, as well as to keep big teams synchronized. As you can imagine, in LINE we face challenging …

LIFF + TIC-80

Hello, this is Seisuke. I work at LINE Fukuoka as an engineer for LINE app for Android. Our office held a hackathon for LINERs in November 2018, at which I had a chance to try out TIC-80, a fantasy console, with LIFF. I wanted to share some of the lessons I learned through the event. …

Introducing Flex Message, a new message type for LINE Messaging API

A new type of message has been added to the LINE Messaging API, Flex Message. We’ve been using a template-typed message in which you could place plain text, stickers, images, media types like videos, buttons and URLs. This type is quite useful for where the user had to select an option from available options, but there were restrictions such as the maximum number of buttons allowed, which is 4, for the button template, or the order in which you had to arrange the elements for a layout — title, content, and buttons.

What is Flex Message?

The Flex Message type frees you from the old restrictions and enables you to arrange layouts as desired. There is a display frame, but you can change the layout as you do with HTML code, and each component is neatly displayed. Here are a few of the layouts you can compose with Flex Message.

Adding an HTML Component on AMP

Hello, this is Kyo, a front-end engineer at LINE. I’d like to share my story on AMP Project, Google’s open source project. While you work on markup with AMP HTML, haven’t you ever felt an urge to make a component yourself, or to add a feature to it? I hope my post will give you a little push on your back if you are still hesitating.

V8 Hidden class

As a frontend engineer, I feel I still need to know more about the structure of JavaScript and web browsers, in order to provide quality UX to our users. Thankfully, we are given an access to peak through JavaScript’s thoughts, thanks to Google and Mozilla for making their engine code available to public, along with nicely prepared documentation. The availability of various means for tracing and profiling code surely helps too.

LIFF, our latest product for third party developers

What is LIFF?

LIFF is one of our latest products out for LINE Messaging API users. So, what is LIFF? LIFF stands for the LINE Front-end Framework, a web app platform that runs inside the LINE app. LIFF apps running on the LINE app can obtain LINE user ID or tokens needed to use the LIFF API. With the information obtained, LIFF apps can provide features using user information, such as sending messages on behalf of the user.

LINE Animation Sticker Checker on Web browser

Great to meet you all. This is ha1f from LINE Fukuoka, I develop iOS apps at LINE. Back when I was as a part timer at LINE, I was involved in making in-house tools for LINE. To share a little bit of my background, I was hired as a part timer with a confirmed offer to a full time position. Anyway, today, I’d like to show you a tool I developed during my time as a part timer, the Animation Sticker Checker.

What is APNG?

Before we get into the details of the tool, let’s discover what APNG is. APNG (Animated Portable Network Graphics) is a specification for animated image, consisting of images each numbered with a sequence number. LINE animation stickers use APNG. Unlike GIF, APNG supports full color, alpha channel and has a high compression rate. APNG is compatible with PNG, and is displayed as a still image for image viewers that do not support APNG. If you have the right tool, you can convert a sequence of PNG files into an APNG file.

apng

‘Let’s Contribute OSS!’ for LINE’s frontend engineers

Hi there you all, this is Kawasako from Frontend Standardization team in LINE. Our team is in charge of developing tools that are commonly required by the frontend development team, for developing products. Also we seek ways to boost information sharing and communication between developers. I’d like to take this opportunity to introduce our work and our recent workshop.