[Report] Hiroshima Frontend Meetup Vol. 35

Introduction

I attended Hiroshima Frontend Study Group Vol. 35.

https://hfe.connpass.com/event/330736/

I'd like to leave a brief report on my participation.

What is Hiroshima Frontend Study Group?

https://hfe.connpass.com/

https://hirofuro.org/

Hiroshima Frontend Study Group is a study group with an 8-year history, starting in September 2016. Although the frequency of events had decreased around 2023, it has restarted with a new concept: "short study sessions you can easily participate in."

They welcome presentations on a wide range of topics, not limited to frontend, but also backend, design, direction, infrastructure, and more.

The hashtag on X is #hirofuro.

Notes from Each Presentation

LT1 "HiroFuro Restart"

Taku Inoue (Fanafect Co., Ltd.)

• 8 years have passed since the first event (!)
• It had been held 35 times but had been intermittent for a while
  • There was a sense of stagnation
  • Also felt like running out of topics
• Restarting
  • Aiming for a sustainable study group, one hour per session
  • Concept of a study group you can easily participate in

LT2 "Absolutely No! 10 Terrible Design Recipes!"

Masubesana (Hiroshima Creators Guild / Designer)

• Rounded corners are too large
• Shadows are almost unnecessary
• Is line spacing not default?
  • Too narrow
• Don't place images as they are
  • Detach appropriately

LT3 "SE and Designer: Their Respective Design Circuits"

Yanko (Designer)

• Is engineer's design uncool?
• There was an interesting article on Qiita
  • https://qiita.com/mskmiki/items/544149987475719e417b
• Engineers
  • They make the screen first, then think about the design.
  • Screen design -> Design
• Designers
  • They think before making the screen.
  • How will it be used?
  • And they consider what means to use to achieve it (card or table).
  • Design = Planning
• Key points
  • Don't start by creating tables immediately
  • Remove unnecessary elements
  • Add emphasis
  • Don't shy away from data processing
  • Express what it is through decoration
  • Don't draw a line between planning and design

LT4 "Generated Code with Figma Plugin"

Mie Mitsui (Taupe Inc.)

• Anima plugin
  • Easy environment setup
  • High design fidelity
  • Supports both HTML and React components
• Actual generated code
  • Select the layer of the page you want to generate
  • Break point
  • Does the width of the created page become the minimum width?
  • Font spacing is relatively faithful
  • Container is not centered and aligns to the left
• "The source code must be messy, right?"
• HTML
  • Several difficulties
  • Responsive, but each pattern is output
  • Poor at semantic markup
    • All divs?
    • Actually, it can be set in Figma
    • It seems faster to change manually
• CSS
  • Includes reset CSS
  • Automatically imports Google Fonts
  • Generates CSS variables as a style guide
  • All elements have display: flex;
    • Manual correction is needed if you want grid
  • All elements have position: relative;
    • Manually remove unnecessary ones
• Conclusion
  • Automation for responsive design cannot be expected
  • Semantic markup needs to be supplemented by the coder
  • It seems effective for simple layouts

LT5 "Authentication Service Connecting Frontend and Backend, Amazon Cognito"

Satoshi Kaneyasu (Serverworks Co., Ltd.)

• I want to build a SPA and implement authentication using Amazon Cognito.
• ID management, user authentication
• What does it mean to connect frontend and backend?
  • In the case of SPA, the system is split into frontend and backend.
  • From the user's perspective, it appears as one.
  • A third system: authentication and authorization system.
• Example: Next.js + APIGW + Cognito + Lambda
• Disadvantages
  • User data is stored in Cognito, so joining with RDB data becomes impossible.
  • How to solve this is where backend engineers show their skill.

LT6 "Notion API Use Cases"

Fumiya Nagaoka (GoQSystem)

• Has anyone used Notion?
  • About 90% raised hands.
• How about Notion API?
  • About 1 person raised hand.
• Architecture
  • Notion API + Lambda + S3 + CloudFront
  • Store JSON files containing data fetched from Notion API in S3.
  • Clients fetch content from CloudFront + S3.
• Reasons not to call Notion API directly from the client
  • To avoid Notion API rate limits.
  • Real-time performance is not highly required.
  • To allow use even if Notion is down.
  • For security considerations.
    • Handling Notion API secrets directly is risky due to leakage concerns.
    • Access restrictions are implemented with S3 + CloudFront.

LT7 "I want to become a director who is good at making Genki Dama!!"

Deutsche (Phonogram Co., Ltd.)

• About 1 year as a director
• Used to work as a website designer, etc.
• BTC Triangle = Genki Dama?
  • Business
  • Technology
  • Creative
• It's also important to delegate to those who are more capable.

LT8 "10256 lines of app.ts"

k2works (Programmer at an e-commerce company)

• Replaced core business system developed 10 years ago.
  • It was a Rails full-stack application.
• Wanted to move away from full-stack, separate frontend and backend.
• Frontend technology selection is difficult.
  • Tried with vanilla JS + one file.
• Even then, it functions without breaking down because class division is performed within that one file.
  • Design is important.
• Currently, it has been further replaced with React.

Conclusion

I gained insights into development and design from various perspectives.

I was particularly impressed by the practical content, such as the differences in design approach between engineers and designers, the real-world application of code generation using Figma plugins, and use cases for the Notion API.

I hope to participate again whenever my schedule permits. Many thanks to the speakers and the operating staff.