Monthly notes 35

December is just around the corner but before that here’s monthly notes for November. More about leadership and stories, something about software development.

Issue 35, 13.11.2018

Frontend

CSS and Network Performance
What are best network performance practices when it comes to loading CSS? How can we get to Start Render most quickly? Good article of how your page will only render as quickly as your slowest stylesheet. And what to do about it. tl;dr; “Lazyload any CSS not needed for Start Render”, “Avoid @import”, “Be wary of synchronous CSS and JavaScript order”, “Load CSS as the DOM needs it”. (from @csswizardy)

A React job interview — recruiter perspective
Good questions if you’re doing React interviews or being the interviewee, “A React job interview — recruiter perspective”. (from @walokra)

Tools of the trade

jp – Command line interface to JMESPath
I’ve been using jq for manipulating JSON on commandline but there’s better, more logical, alternative. jp is a cli interface to JMESPath expression language for manipulating JSON. And there’s tutorial. (from @walokra)

Bash-it
Bash-it is a collection of community Bash commands and scripts for Bash 3.2+. (And a shameless ripoff of oh-my-zsh😃). Includes autocompletion, themes, aliases, custom functions, a few stolen pieces from Steve Losh, and more.

Detecting Memory Leaks From a JVM Heap Dump (with JXRay)
Good article of learning about detecting memory leaks from a JVM heap dump and Garbage Collection. Unfortunately the tool used for analyzing heap dump is commercial and not open-source tools like Eclipse MAT or VisualVM. (from @java)

Security

Can’t approve payroll? Blackhat sysadmin when my paycheck is on the line!
Interesting story from the trenches of how and what happened when infosec guy found vulnerabilities on Basware Banking software (from 2015. tl;dr; Multiple unresolved vulnerabilities in Basware Banking/Maksuliikenne. Unbelievable story especially how it was handled by vendor and related parties
(from @walokra)

Leadership

Managing with the Brain in Mind
“Treat people fairly, draw people together to solve problems, promote entrepreneurship and autonomy, foster certainty wherever possible, and find ways to raise the perceived status of everyone”. Good read about SCARF. (from @walokra)

On Being A Senior Engineer
What makes for a good senior engineer? tl;dr; Be mature engineer. Good read for everyone regardless of the line of business.

  • Seek out constructive criticism of their designs.
  • Understand the non-technical areas of how they are perceived.
  • Do not shy away from making estimates, and are always trying to get better at it.
  • Have an innate sense of anticipation, even if they don’t know they do.
  • Understand that not all of their projects are filled with rockstar-on-stage work.
  • Lift the skills and expertise of those around them.
  • Make their trade-offs explicit when making judgements and decisions.
  • Don’t practice CYAE (“Cover Your Ass Engineering”)
  • Be empathetic.
  • Don’t make empty complaints.
  • Be aware of cognitive biases

The Ten Commandments of Egoless Programming
The Ten Commandments of Egoless Programming, as originally established in Jerry Weinberg’s book The Psychology of Computer Programming.

Something different

You work to live, not live to work
Remember, your job is not your life. You work to live, not live to work. Work on what makes you happy and not burn yourself out. Thread has good tips to recognize it and take control. (from @jevakallio)

Former CIA Chief Explains How Spies Use Disguises
Cool run down on the use of disguises by a former CIA Chief of Disguise.(from @TinkerSec)

Notes from OWASP Helsinki chapter meeting 35: Bug Bounty programs

Have you ever wondered how to become a bug bounty hunter or wanted to organize a bug bounty program? OWASP Helsinki chapter meeting number 35 told all about bug bounty programs from hacker and organizer point of views. The event was held 6.11.2018 at Second Nature Security (2NS) premises in Keilaniemi. Here’s my short notes.

Notes from OWASP Helsinki chapter meeting #35

“Hunting for bounties in a web browser” by Juho Nurminen from 2NS started the event talks and told about how to approach the issue and showed some findings in details. For the usual of understanding the technology and focusing on what you know, it’s beneficial to read up prior art. Is it repeatable bug? Reproduce it in other context. The talk presented cve-2018-6033 (extension code can execute downloaded files), cve-2018-6039 (XSS in DevTools, privileged API can be overwritten) and cve-2011-2800 (data leak across origins). tl;dr; pwn things, submit crbug.com, profit.

“#OWASPHelsinki 35 started by @jupenur hunting bounties in web browsers. Understand the tech (web, js, extensions, plugin API, devtools, NaCI, WebAssembly, etc.). Focus on what you know. Read up prior art. Nice examples of bugs found. @OWASPHelsinki meetup hosted by @2NS_fi.” – @walokra

Why web browsers?
Why web browsers?

CVE-2018-6033
CVE-2018-6033

In “How to become a bug bounty hunter” Iiro Uusitalo from Solita talked about bug bounty platforms and tips to be succesful. In short: POC or GTFO, recon, stay on scope, automate all the things, focus, report, wait, profit, join the community.

“How to become a bug bounty hunter, told by @iiuusit at @OWASPHelsinki meetup. Tips: poc or gtfo, recon, stay on scope, automate all the things, focus, report, wait, profit, join the community. #OWASPHelsinki” – @walokra

Bug bounty programs in Finland
Bug bounty programs in Finland

Tips for recon
Tips for recon
How to report
How to report

tl;dr;
tl;dr;

“Running a successful bug bounty program” by Thomas Malmberg from Hackrfi bug bounty program covered the topic from the “random dude from the other side of the table” point of view. “What really matters is finding bugs” but there’s a lot of things to manage. It comes to managing expectations of hackers and program owners. And remembering that hackers work for you (program owners) but they are not your employees.

Expectation management
Expectation management

“What really matters is finding bugs.” @tsmalmbe from @hackrfi told how to run a successful bug bounty program at @OWASPHelsinki meetup. Managing expectations of hackers and program owners. Remember: hackers work for you; hackers are not your employees. #OWASPHelsinki” – @walokra

The evening ended with a panel & discussion about bug bounty with Juho, Iiro and Thomas. There was lots of interesting questions asked and here’s some of them in short.

  • Hardware bug bounties, how to do if device not publicly available?
    • On premises hack days -> not so successful, too little time, concentrate on low hanging fruits.
  • How to choose [bug bounty] program?
    • Wide scope -> low hanging fruits.
  • What kind of reports of findings
    • OWASP Top 10 covers almost everything.
    • Everyone is scared of finding remote code execution.
    • Business impact findings.
    • Recon: who we are, what we do -> what has big business impact. Also where’s the legacy code?
  • Impact of how hacker and product owner sees findings? Owner will set the impact, how it should happen at both ends? how to define the final impact corresponding the value?
    • Always estimate, run some CVSS estimator.
    • Use Google’s approach.
    • Fairness and trust. Programs task is to create trust.
  • Awfraid of reporting found bugs when there’s no bug bounty program?
    • Program has rules which covers legal matters. Read the rules, ask.
  • Top 3 negative things?
    • Program runner went public, lots of bugs, hackers pwned whole system.
    • Communication issues.
    • Program runner: call on Friday night, database lost. bug bounty program to blame.
  • Bug bounty programs role, client and customer: public programs. -> ncss, cert-fi.
  • Pentesting vs. bug bounty?
    • Not competing.
    • You shouldn’t do bug bounty if you don’t have enough security maturity. Too many reports at start (duplicates, cost much, etc.), then nothing if you don’t pay.
    • Low hanging fruits are not interesting for good hackers
    • Pentesting last 30 days and result is report covering certain things.
    • Bug bounty concentrates on specific aspect.
  • Bug bounty and threat model? When program open, easier for black market to find vulnerabilities?
    • Threat model for users? Depends on product / service you are providing.
    • 0-day on some Finnish site selling on USA black market -> not much interest.
    • Pentesting should be done first.
  • How to improve process?
    • Educating the bottom of the pyramid. Hammer and nails.
    • Public programs generate lots of noice vs. private
  • Bug bounty in 5 years?
    • More automated things, scripts to detectivive things, AI
    • Bug hunter side: more professional all around the pyramid, more spam

Notes from GraphQL Finland 2018

GraphQL Finland 2018 conference was held last week (18-19.10.2018) at Paasitorni and the first of its kind event in Finland brought a day of workshops and a day of talks around GraphQL. The event was organized by the same people as React Finland and it showed, in good ways. The talks were interesting, venue was appropriate, atmosphere was cosy and after party was bookie. Here’s my notes from the event.

All of the talks were live streamed and they’re available on Youtube. I was lucky to get a ticket to the event and be able to enjoy the talks live. In overall most of talks were easy to comprehend although I only had some experience with GraphQL through experiments and what I had learnt couple of months ago at React Finland 2018 conference (my notes from day 1 and day 2).

“GraphQL is an open source data query and manipulation language, and a runtime for fulfilling queries with existing data. It was developed internally by Facebook in 2012 before being publicly released in 2015. It provides a more efficient, powerful and flexible alternative to REST and ad-hoc web service architectures. It allows clients to define the structure of the data required, and exactly the same structure of the data is returned from the server, therefore preventing excessively large amounts of data from being returned. – Wikipedia

Read also the organizer’s summary of the event and check out the photos.

Life is hard, GraphQL is easy
Life is hard, GraphQL is easy

Notes from the talks

(titles are links on Youtube to particular talk)

Adopting GraphQL in Large Codebases – Adam Miskiewicz
The event started with Adam Miskiewicz’s story from Airbnb and incrementally adopting GraphQL. It’s simple to start using GraphQL in your project but adding it incrementally and carefully in huge codebases powering large distributed systems is not quite as straightforward. The talk dived into how Airbnb is tackling this challenge, what they’ve learned so far, and how they plan to continue evolving their GraphQL infrastructure in the future. Towards GraphQL Native!

Going offline first with GraphQL — Kadi Kraman
Kadi Kraman from Formidable Labs talked about going offline first with GraphQL. She did a nice interactive demo with React Native and Apollo 2. Users expect your mobile app to work offline and the tooling in GraphQL makes it reasonably straightforward to get your React Native app working offline. Slides

“Do this as you go and offline comes almost as a side-effect”

Life is hard and so is learning GraphQL — Carolyn Stransky
Life is hard, without documentation. Carolyn Stransky presented her story of ups and downs when learning GraphQL and documentation’s role in it. The problem with GraphQL is that – because there’s no “vanilla” GraphQL – there’s no central hub for all of the information and tooling necessary to learn. It’s underutilized and scattered throughout our community. The talk touched on how to better enable GraphQL docs for learning and comprehension and slides pointed to good resources.

Database-first GraphQL Development — Benjie Gillam
Benjie Gillam from PostGraphile teached how database-centric approach to GraphQL API development can give your engineers more time to focus on the important parts of your application. Adhere to GraphQL best practices, embrace the power of PostgreSQL, and avoid common pitfalls. Interesting slides.

graphql-php — Christoffer Niska
Christoffer Niska gave some good tips for software development: Don’t over-abstract, test everything, use static type checking, follow best practices, don’t prematurely optimize.

(Un)expected use of GraphQL — Helen Zhukova
(Un)expected use of GraphQL talk by Helen Zhukova showed the benefit of single code base on client and server side. Partly live coded with i.a. CodeSandbox. The any DB in this case was MongoDB.

Mysterious closing keynote — Dan Schafer
The mysterious closing keynote was Dan Schafer talking about GraphQL history, present and future. “Strive for single sources of truth”. Still lots of things to do in the ecosystem. Slides.

Talks from the deep end

Some of the GraphQL Finland talks were quite deep in the content and as most of the talks were around 15 minutes, the pace was quite demanding. At the event I concentrated on topics which seemed most relevant and saved the rest for later. The sponsor’s lounge by Gofore and Digia provided nice relaxing space to get your thoughts together. Here are the topics I saved for later.

All work no play
All work no play (photo: Juho Vepsäläinen)
Makes you a dull boy
Makes you a dull boy (photo: Juho Vepsäläinen)

Emerging uses of GraphQL for rapid application development — Ellie Day
Many schemas simply mirror their RESTful counterparts, limiting their overall usefulness. The talk covers emerging patterns that enable rapid GraphQL-powered application development.

Building efficient, waterfall-free GraphQL applications — Jimmy Jia
Jia showed how in larger projects it’s easy to run into situations where requests wait on each other regardless of using GraphQL, to the detriment of user experience. He explored how these problems arise, and looked at strategies for mitigating these problems.

Building tools for GraphQL — Glenn Reyes
Using the right tooling helps development and Reyes talked about what can we do to improve DX and supercharge our GraphQL development.

End-to-end type-safety with GraphQL — Johannes Schickling
Talk dived deep into one of the most powerful features of GraphQL – its type-system. GraphQL can be used to enable end-to-end type-safety across any language, making your application architecture more resilient and easier to evolve.

Real-time GraphQL with Event Sourcing — Andrew Rhyne
Thirty-thousand foot overview of event sourcing and how naturally it fits with GraphQL and subscriptions. And what it enables at Gatsby.

Hidden gems of GraphQL query — Ivan Goncharov
GraphQL has a few useful features that are typically overlooked. The talk contained spoilers from GraphQL Specification.

Reason and GraphQL — Nik Graf
Using Reason’s type inference you can create GraphQL servers with 100% type coverage. And Reason shines even more so on the client. Send one quick introspection request and you get full autocompletion on your schema right in the browser.

Writing a realtime GraphQL backend as a compiler in Haskell — Tanmai Gopal
The talk went over the key architectural decisions, programming constructs and the unforeseen implementation pitfalls Hasura ran into while building a high-performance GraphQL backend. It also covered tools from the Haskell ecosystem that made this possible.

Where art thou, my error? — Eloy Durán
Error metadata.

Afterwords

The last chance to practice your Finnish was the Afterparty 🎉 at Gofore office!

Monthly notes 34

Autumn is well on it’s way and winds are bringing rains and clouds to the sky. Autumn also means that meetups are awaken and interesting stories from the field are presented. Here’s monthly notes for September. Start with writing readable code, continue to build React app with TypeScript, read how hacker puzzles can be solved and improve your designs with tactics instead of talent. Also use smarted command line tools and listen a Kubernetes security journey.

Issue 34, 29.9.2018

Software Development

10 practices for writing readable code
Writing readable code may seem subjective but there are core elements within all code which make it readable. Follow these 10 practices. Although I don’t quite agree with removing comments 😅
(from @walokra)

Software disenchantment
“As engineers, we can, and should, and will do better. Have better tools, build better apps, faster, more predictable, more reliable, using fewer resources”. But on the other hand people won’t pay for efficiency. They buy solutions to their problems. (from @walokra)

JavaScript

Fullstack Express-React App With TypeScript
Have you thought about starting a React app with TypeScript and integrating it with Travis CI and Heroku? Read this definitive guide and check the source of a starter kit for a full stack express-react app. (from @walokra)

Solving the Disobey 2018 puzzle
Great writeup of solving the Disobey.fi 2019 hacker ticket puzzle. Shows you some tools and techniques you can use to progress with these kind of puzzles. Contains spoilers, so steer clear if you want the fulfilment and bliss that comes from solving it. (from @walokra)

This talk is about you [React Native Developer] (video)
Life of a React Native developer? Jani Eväkallio talks about you at React Native EU 2018. When building software products we’re focused on “how” but should ask also “what” and “why”. Not just be happy when tickets move from left to right side of the screen. (from @walokra)

Microservices

Kubernetes Security Journey (video)
Jerry Jalava talked at Kubernetes Finland about Kubernetes and security. (from @walokra)

Design

7 Practical Tips for Cheating at Design
“Improving your designs with tactics instead of talent.” Every web developer inevitably runs into situations where they need to make visual design decisions, whether they like it or not. There are a ton of tricks you can use to level up your work that don’t require a background in graphic design. Here are seven simple ideas you can use to improve your designs today.

Tools of the trade

CLI: improved
Command line is powerful tool but the common tools can be improved. Remy Sharp wrote his current list of improved CLI tools.

Jaeger
Open source, end-to-end distributed tracing to monitor and troubleshoot transactions in complex distributed systems.

Something different

How-To: Reduce iPhone screen brightness beyond stock levels (video)
Looking to reduce iPhone screen brightness beyond stock levels without resorting to jailbreaking? This handy accessibility tip will cause your eyes to thank you when reading in dark places.

How to Design for the Modern Web
Best Practices of Modern Web Development. “You are now also certified and ready to apply for top ranking sites like Reddit and Medium”. (from @walokra)

Notes from Red Hat Forum Finland 2018: Ideas worth exploring

Red Hat Forum Finland 2018 was held 11.9.2018 at Finlandia-talo and it’s mainline was “Ideas worth exploring. Come with questions. Leave with ideas.” The event was divided to keynote and to four breakout sessions. The four breakout sessions were: 1. Automation – Ansible 2. Journey to Cloud-Native Applications with OpenShift 3. Business & Solution track 4. Half day Executive discussions and round tables. I chose to get hands-on with OpenShift but also Ansible would’ve been interesting. Here’s my notes from the event.

Red Hat Forum Finland 2018: Ideas worth exploring

Red Hat Forum 2018 Helsinki started with keynote session by Michel Isnard from Red Hat and in “Digital transformation & the open organization” he talked about open source and how Red Hat embraces it. “Open source is collaborative curiosity, a culture with a desire to connect and the technologies to do it. Yet what draws our attention isn’t the technology alone; it’s what we can do with it. It gives us the platform for imagination, a focal point to collectively push for new possibilities.”

Be courageous, be open and innovate in the open.

Keynote: Ideas worth exploring
Keynote: Ideas worth exploring (@walokra)

Next there was customer reference by Markku Reinikainen from SOS International. He told us about their open innovation platform and how they have modernized their applications and moved to the mobile world.

SOS International: Open innovation platform
SOS International: Open innovation platform

Journey to Cloud-Native Applications with OpenShift

The main content of the Red Hat Forum event were the breakout sessions. I chose the full day hands-on workshop which showed how to modernize an existing legacy monolithic application by applying microservice architecture principles, using modern lightweight runtimes like WildFly Swarm (Thorntail.io) and Spring Boot, and deploying to container-based infrastructure using OpenShift Container Platform. The material and slides are available on GitHub.

Hands-on OpenShift
Hands-on OpenShift

The lab was split into four scenarios, going through the process of understanding how a developer can most effectively use Red Hat technologies in deploying a monolith to OpenShift, wrapping it with a CI/CD pipeline, developing microservices to start replacing functionality in the monolith, and integrating it all together to form the beginnings of a complete modernization of an existing app. The last scenario was about using Istio to prevent and detect issues in a distributed system.

The session started with Red Hat Application Migration Toolkit (RHAMT) and migrating (lift & shift) Java EE monolith app on WebLogic to run on JBoss EAP and OpenShift in the cloud. Crafty tool which fixed poor and non-standard choices done in legacy app.

Hands-on: Red Hat Application Migration Tool
Hands-on: Red Hat Application Migration Tool (@walokra)

The breakout session had also a talk from Red Hat partner. “Shift to a Cloud-First Core” talk by Capgemini told how they are approaching OpenShift projects. Different options, some are easier depending of legacy technologies. Retain, retire, migrate: lift & shift, new layers, new apps.

Shift to the Cloud-First core
Shift to the Cloud-First core (@walokra)

OpenShift hands-on session continued with developer introduction which was about live synchronization and changes, deploying to different environments, Jenkins Pipeline, Continuous Delivery and approval steps.

Hands-on: introduction to OpenShift
Hands-on: introduction to OpenShift (@walokra)

Third and fourth scenarios were about strangling the monolith with transforming it to microservices architecture with and without Spring Boot. Splitting up monolith to domain specific applications and connecting them. Lots of things that goes over the hill and seems magic if you’re not familiar with them. You just click click click, done, profit. Some technologies used were Spring Boot and Spring Cloud, Snowdrop, Feign and Hystrix.

Strangling the monolith
Strangling the monolith

The last and most interesting part of the hands-on session was Istio and resilient apps and due time schedule Red Hat guy clicked and talked it through. It gave good overview to visualization, monitoring, metrics, fault injection, traffic shifting, circuit breaking, rate limiting and tracing. Time was limited so much things left to be read.

Hands-on: Istio, resilient apps
Hands-on: Istio, resilient apps (@walokra

All the OpenShift scenarios used Katacoda which made the hands-on experience with just a few clicks. Crafty tool for this kind of sessions and although you just clicked through with relative fast pace. For example “Developer Introduction to OpenShift” estimated time 45-60 minutes and the lab had 23 minutes. The limited time made the hands-on experience somewhat superficial but you got the point what the possibilities are and how OpenShift works.

And last Red Hat talked about OpenShift and their services regarding application modernization. Modernization of legacy applications is in high demand and there are different paths to achieve that.

One point regarding monoliths vs. microservices was that as Martin Fowler wrotes in Monolith First.: “you shouldn’t start a new project with microservices, even if you’re sure your application will be big enough to make it worthwhile.”

Monolith first
Martin Fowler: Monolith first

Red Hat OpenShift Application Runtimes product architecture showed the blocks in the OpenShift context.

Red Hat OpenShift Application Runtimes
Red Hat OpenShift Application Runtimes

Red Hat Application Migration and Modernization Program
Red Hat Application Migration and Modernization Program

Summary

Red Hat Forum Finland 2018 was nice event and the content was interesting. The hands-on session was fast paced but you got the point and ideas worth exploring. Will look into Istio. The WiFi network had some problems but got better when more access points were added. After the official program there was some networking and drinks. Some food other than hemp snacks and vegetable chips would’ve been nice but Woolshed provided in that regard. Thanks for Red Hat for organizing the event and good talks.

To continue with OpenShift topics you can check learn.openshift.com which has similar material as in hands-on and use Katacoda but different topics. The hands-on material can be read from GitHub and for listening there’s DevNation Podcasts.

Red Hat OpenShift Pale Ale
Red Hat OpenShift Pale Ale

Notes from React Helsinki August 2018 meetup

React Helsinki August 2018 meetup was hosted by Smartly.io at their office in Postitalo next to the Central Railway Station. Here’s my short notes from the event. To follow the community, React Helsinki has also a Facebook group.

The meetup started with Splitting React codebases for increased development speed by Hugo Kiiski from Smartly.io. He told how their Video Editor component is separated from main frontend. Code is in monorepo managed by Lerna. More tools going to be splitted. The recording of the presentation can be seen on Vimeo. (Twitter)

Splitting React codebases for increased development speed

Second topic was live coding and Making your own Ignite generator – for React Native by Toni Ristola from Gofore. It’s useful e.g. if you do many projects in a year. The recording of the presentation can be seen on Vimeo. (Twitter)

When to use generator
When to use generator

Why build your own
Why build your own

Use GraphQL! by Mikhail Novikov showed a quick intro to GraphQL, covered the current state of its adoption and described several ways of how to move to GraphQL. GraphQL “fills the gap between client and server developer needs and values. Matching server capabilities with client requirements.” GraphQL clients to use are i.a. Apollo and Relay. See the slides for more information. The recording of the presentation can be seen on Vimeo. (Twitter)

GraphQL parts
GraphQL parts

GraphQL adoption
GraphQL adoption

As I mentioned the event has hosted by Smartly.io and their office in Postitalo was cosy and had nice demo room for the meetup. Also the food and beverages were nice althought the hamburger patty was a bit too raw.

Some food & drinks
Some food & drinks

Smartly.io entrance with swings
Smartly.io entrance with swings

Monthly notes 33

Summer has turned to Autumn and it begins to show in the weather. Sun is setting earlier and soon it’s dark almost from dawn to dusk, rain clouds are gathering in the sky with cold winds. Good time to stay inside and read some articles and learn new things. Here’s the monthly notes for August.

Issue 33, 28.8.2018

Learning

Elements of Artificial Intelligence free online course
“Do you wonder what AI really means? Are you thinking about the kind of impact AI might have on your job or life? Do you want to understand how AI will develop and affect us in the coming years? Then this is the course for you!”

Microservices and cloud

Docker Pattern: The Build Container
Let’s say that you’re developing a microservice in a compiled language or an interpreted language that requires some additional “build” steps to package and lint your application code. This is a useful docker pattern for the “build” container.

Experiences with running PostgreSQL on Kubernetes
Gravitational CTO, Sasha Klizhentas, tells about his experience running PostgreSQL on Kubernetes. The challenges involved, open source and commercial tools that can help and other alternatives to managing stateful applications on Kubernetes.

Google Cloud Platform – The Good, Bad, and Ugly (It’s Mostly Good)
Deps developer tells his thoughts about Google Cloud Platform and splits them into good, meh, bad, ugly, and opportunities for improvement. He compares and contrasts with Amazon Web Services (AWS), the other hosting provider that he has the most experience with, and GCP’s biggest competitor.

Goodbye Microservices: From 100s of problem children to 1 superstar
Segment’s story of going to microservices architecture and back. “When deciding between microservices or a monolith, there are different factors to consider with each. In some parts of our infrastructure, microservices work well but our server-side destinations were a perfect example of how this popular trend can actually hurt productivity and performance. It turns out, the solution for us was a monolith.”

Development

Introducing Teleport: Over-the-air hot reloading & debugging for PWA’s
“Wouldn’t it be great if you could instantly hot reload & debug PWA’s on any platform, by just opening a link?”

Have you ever needed to generate a random number in code?
Have you ever needed to generate a random number in code? whether it’s for rolling a dice, or shuffling a set, this tweet thread is here for you! There’s no reason that it should be easy or obvious, very experienced programmers repeat common mistakes. I did, before I learned … from (@colmmacc)

Tools of the trade

Semantic Commit Messages
See how a minor change to your commit message style can make you a better programmer. Format: <type>(<scope>): <subject>. <scope> is optional.

Something different

The Psychology of Money
“Let me tell you the story of two investors, neither of whom knew each other, but whose paths crossed in an interesting way.”

Creative burnout is inevitable. Here are 10 ways to beat it
“Ten pros share their tricks for staying engaged with your work.”

Monthly notes 32

Summer season is heating up and here’s the monthly notes for July. Something about JavaScript, little bit of design, touch of privacy and tools of the trade.

Issue 32, 23.7.2018

JavaScript

Defining Component APIs in React
Collects some of the best practices for working with React. “The following is a collection of thoughts, opinions, and advice for defining component APIs that are meant to be more flexible, composable, and easier to understand. None of these are hard-and-fast rules, but they’ve helped guide the way I think about organizing and creating components.” (from Weekend reading)

The Cost Of JavaScript by Addy Osmani at Fluent 2018
Strategies to deliver JavaScript efficiently while giving users a great expericence. i.a. audit, use code-splitting, prpl-pattern. “Improving performance is a journey.” (from @walokra)

TIL: node-jsmin (port of Crockford’s JSMin) was dropped from a lot of places as modified MIT license with “The Software shall be used for Good, not Evil” is not compliant with definition of open source software which doesn’t permit any restriction on how software may be used. (from @walokra)

Microservices

Introducing Jib — build Java Docker images better
“Jib, an open-source Java containerizer from Google that lets Java developers build containers using the Java tools they know. Jib is a fast and simple container image builder that handles all the steps of packaging your application into a container image. It does not require you to write a Dockerfile or have docker installed, and it is directly integrated into Maven and Gradle.”

Design

Brutalist Web Design
TL;DR; Content is readable on ~all screens & devices. Only hyperlinks & buttons respond to clicks. Hyperlinks are underlined, buttons are buttons. Back button works. View content by scrolling. Decoration when needed and no unrelated content. Performance is a feature. (from @walokra)

Little known trick: the <script> tag in html runs the code inside, and also hides it using css display:none. But I can change that to display:block, so that I can show sample code to the reader and also run it on the page to generate diagrams. (need to test across browsers). This also applies to <style> tags, where you can also use contentEditable to create a live editable css of the page you are on. (from @ Amit Patel)

Rebass: Flexible & functional React design system, built with styled-system
Rebass is a library of highly-composable, primitive UI components for React, built with styled-system to make building consistent, responsive web apps simpler and faster.

Tools of the trade

Browsh
Terminal-based web browser renders everything a modern browser can (HTML5, CSS3, JS, video, even WebGL). Use case: run the browser in a data center with fast internet, and access it over SSH from a device that has slow/limited internet. (from Weekend reading)

@EricaJoy. Meanwhile, this hack mostly works.

“petition to make “paste and match formatting” the default paste option”

Privacy

Riot Games Approach to Anti-Cheat
Riot Games published an article about their anti-cheating methods – nothing really fancy or new but, in the Hacker News thread there was an interesting comment by a cheat writer:

“The current Mac game client for League Of Legends contains full debug symbols and it doesn’t have Packman (the packer described in this article), which makes it quite easy to look through the symbols. Inside you can find all of the anti-cheat-related network packets. Now, I personally expect anti-cheat to snoop around my system when I’m doing something shady like scanning its memory. However, if I was a normal user of the game, I would be a bit concerned to know that it might be sending my recently used file names, drive names, system driver names, currently running processes, processor information, system state, and even entire binary files that it automatically deems as “suspicious”, to their servers.”

@aral and maya kosoff: “X is a service that enables you to control articles presented to your wife on the websites she usually visits, in order to influence her on a subconscious level to initiate sex. The best bit? It’s “just” adtech. It’s retargeting. It’s how Google makes money.” Also suggested use cases are “get your kid a dog” or “stop drinking” which eems to open up a whole new acquaintance micromarketing concept. Makes you think how you’re influenced and by whom.

@dhh
“Imgur’s fake adherence to GDPR is exactly the kind of transgression that should trigger those multi-million euro fines. There are literally HUNDREDS and HUNDREDS of shady services getting your data. Only bulk link is to ALLOW ALL, which is also default. Tons you can’t opt-out. 👎”

Something different

StemCAPtain
“The StemCAPtain replaces the stem cap, aka top cap, piece of a threadless 1″ or 1 1/8″ headset with different functional accessories. In addition to the simple and elegant analog clock, we offer a thermometer, bottle opener, picture frame, compass, GPS mount, and USB charger”

Digital Laundry: how credit card thieves use free-to-play apps to launder their ill-gotten gains

Generating documentation as code with mermaid and PlantUML

Writing documentation is always a task which isn’t much liked and especially with diagrams and flowcharts there’s the problem of which tools to use. One crafty tool is Draw.io with web and desktop editors but what to use if you want to write documentation as a code and see the changes clearly in text format and maintain source-controlled diagrams? One of the tools for drawing diagrams with human readable text are mermaid and PlantUML.

mermaid

“Generation of diagrams and flowcharts from text in a similar manner as markdown.”

mermaid is a simple markdown-like script language for generating charts from text via javascript. You can try it in live editor.

mermaid sequence diagram

You can write mermaid diagrams in text editor but it’s better to use some editor with plugins to preview your work. Markdown Preview Enhanced for Atom and VS Code can render mermaid and PlantUML. There’s also dedicated preview plugins for VS Code and Atom.

To preview mermaid definition in VS Code with Markdown Preview Enhanced press Cmd-P to open Command palette and select Markdown Preview Enhanced: Open Preview.

mermaid in VS Code with Markdown Preview Enhanced

To preview mermaid definition in VS Code with Mermaid Preview press Cmd-P to open Command palette and select Preview Mermaid Diagram.

mermaid in VS Code with Mermaid preview
mermaid in VS Code with Mermaid preview

Generating PNG images from mermaid definitions

To use mermaid diagrams it’s useful to export them to PNGs. You can use mermaid.cli tool which takes a mermaid definition file as input and generates svg/png/pdf file as output.

Install mermaid.cli locally:

npm install mermaid.cli

Generate PNG:

./node_modules/.bin/mmdc -i input.mmd -o output.png

If you have plenty of defition files you can use the following script to generate PNGs:

#!/usr/bin/env bash
 
for mmd in ./docs/*.mmd
do
    filename="${mmd##*/}"
    echo "Generating $mmd"
    ./node_modules/.bin/mmdc -i $mmd -o ${filename%%.*}.png
done

Alternatively you can use node_modules/mermaid/bin/mermaid.js $mmd where mmd is the mermaid file.

PlantUML diagrams

PlantUML is used to draw UML diagrams, using a simple and human readable text description.

PlantUML is used to draw UML diagrams, using a simple and human readable text description. Diagrams are defined using a simple and intuitive language (pdf) and images can be generated in PNG, in SVG or in LaTeX format.

You can use PlantUML to write e.g. sequence diagrams, usecase diagrams, class diagrams, component diagrams, state diagrams and deployment diagrams.

PlantUML example diagram:

PlantUML diagram

Simple way to create and view PlantUML diagrams is to use Visual Studio Code and Markdown Preview Enhanced plugin which renders both PlantUML and mermaid diagrams. Alternative option is to use plantuml plugin.

To preview PlantUML diagram in VS Code with Markdown Preview Enhanced press Cmd-P to open Command palette and select Markdown Preview Enhanced: Open Preview.

PlantUML in VS Code with Markdown Preview Enhanced

There’s an online demo server which you can use to view PlantUML diagrams. The whole diagram is compressed into the URL itself and diagram data is stored in PNG metadata, so you can fetch it even from a downloaded image. For example this link opens the PlantUML Server with a simple Authentication activity diagram.

Running PlantUML server locally

Although you can render PlantUML diagrams online it’s better for usability and security reasons to install a local server. And this approach is important if you plan to generate diagrams with sensitive information. The easiest path is to run PlantUML Server Docker container and configure localhost as server.

docker run -d -p 8080:8080 plantuml/plantuml-server:jetty

In VS Code config, open user setting, and configure like:

"plantuml.server": "http://localhost:8080",
"plantuml.render": "PlantUMLServer",

Now to preview diagram in VS Code press alt-D to start PlantUML preview.

PlantUML preview in VS Code and local server

You can also generate diagrams from the command line. First download PlantUML compiled Jar and run the following command which will look for @startXXX into file1, file2 and file3. For each diagram, a .png file will be created.

java -jar plantuml.jar file1 file2 file3

The plantuml.jar needs Graphviz for dot (graph description language) and on macOS you can install it from Homebrew: brew install graphviz.

For processing a whole directory, you can use the following command which will search for @startXXX and @endXXX in .c, .h, .cpp, .txt, .pu, .tex, .html, .htm or .java files of the given directories:

java -jar plantuml.jar "directory1" "directory2"

Maintain source-controlled diagrams as a code

Documentation and drawing diagrams can be simple and maintaining source-controlled diagrams with tools like PlantUML and mermaid is achievable. These tools are not like the behemoth of Sparx Enterprise Architect but provide light and easy way to draw different diagrams for software development. You don’t have to draw lines and position labels manually as they are magically added where they fit and you even get as crude boxes and squares as thousands of dollars more expensive tools. Now the question is which tool to choose: PlantUML or mermaid?

Monthly notes 31

The first part of Summer has been great and holiday season is near. Here’s monthly notes for June with topics of microservices, kubernetes, design patterns and stories of how Shopify and Airbnb build their services. Also some tools like Kap. Happy reading.

Issue 31, 28.6.2018

Microservices

7 tips for effective microservices
“Have a request-id/correlation-id for every request, Maintain backward compatibility of interfaces, Have a centralized logging system, Implement idempotency and retries, Be aware of language constraints, Have a single service to manage the system state, Strike a balance between in-memory-data and db persistence” (from The Microservice Weekly)

Kubernetes

AWS Workshop for Kubernetes
“Self-paced workshop designed for Development and Operations teams who would like to leverage Kubernetes on Amazon Web Services (AWS).”

Kubernetes best practices: terminating with grace
“This episode of “Kubernetes Best Practices,” let’s take a look at how you can help Kubernetes do its job more efficiently and reduce the downtime your applications experience.”

Kubernetes Chaos Engineering: Lessons Learned — Part 1

Kubernetes and containers for enterprise developers
“O’Reilly Media Podcast talks with JP Phillips, platform engineer at IBM Cloud.”

iOS

xcprojectlint: A security blanket for Xcode project files
Would you like to automate some consistency in your Xcode project files with checks for settings defined at the project level (rather than in an xcconfig), missing files and empty file groups? This tool does exactly that, and more. Also, I like the way it’s described: “Provides a security blanket, ensuring neither your co-workers, nor git screw up your Xcode project file.” (from iOS Dev Weekly 353)

This app hacked the iPhone’s dual camera system, and you’ve never seen anything like it
Interesting: portrait mode collects 2D depth data along with the image itself. This app uses depth data to change the lightning source of photos after the fact. (from Weekend Reading)

Tools

Capture your screen
An open-source screen recorder built with web technology. Crafty for quick gif/mp4/webm/apng to issues, slack or other views.

Mozilla SSL Configuration Generator

How others are doing things

Shopify Infrastructure with Niko Kurtti
“Shopify has built its own platform-as-a-service on top of Kubernetes called Cloudbuddies. Niko Kurtti is a production engineer at Shopify joins the Software Engineering Daily show to describe Shopify’s infrastructure – how they run so many stores, how they distribute those stores across their infrastructure, and the motivation for building their own internal platform on top of Kubernetes.”

Building Services at Airbnb, Part 1
The first in a series on scaling service development, this article looks at the core structure, the Service IDL, underpinning the new Services Oriented Architecture at Airbnb.

Building Services at Airbnb, Part 2
The second in a series on scaling service development, this article looks at some of the key tooling that supports the new Services Oriented Architecture at Airbnb.

Design

Dieter Rams 10 Principles of Good Design
“But what is good design?” It’s around structure, function and aesthetics. “Good design is as little design as possible” (from @sidebario)

Design Patterns on CodePen

Awesome design patterns
A curated list of software and architecture related design patterns. Software design pattern – A general, reusable solution to a commonly occurring problem within a given context in software design. It is a description or template for how to solve a problem that can be used in many different situations.

Something Different

Cool Backgrounds
Collection of tools to create compelling, colorful images for blogs, social media, and websites. Beyond backgrounds, the images generated can be used as 🖥 desktop wallpapers or cropped for 📱 mobile wallpapers.