DEV Community: Björn Schmidtke

Icon Madness

Björn Schmidtke — Thu, 16 Apr 2020 05:13:34 +0000

How to use FontAwesome SVGs tailwind style? With optional React flavor.

Tailwind has changed my life. After understanding that I can have the good part of Bootstrap (CSS classes) without the bad part (everyone creating their own classes, jQuery, etc.) - it has been a journey of amazingness.

Now to add to this I fall into love (and I guess many do) the way they use SVG icons and just inline them directly. It is super simple and creates no dependency. Today, I was tempted to use FontAwesome (FA) and checked out their docs for the React lib. OMG 😱3 npm Packages to install (+ more optionally) and then it only starts ... reading the docs and I fell like I'm implementing some rocket science framework - but it was actually just the fonts.

So I was sad - because some of the icons are actually nice. Just before leaving their page, I came across this interesting article about FA SVG Sprites. So I can use FA like this:

      <button>
        <svg>
          <use xlink:href="solid.svg#tv"></use>
        </svg>
        Facebook
      </button>

Well... That does not look bad. Downloading an SVG file instead of their whole fonts and CSS folders seems like a great idea to me. This translates into JSX/TSX as:

      <button>
        <svg>
          <use xlinkHref="solid.svg#tv" />
        </svg>
        Facebook
      </button>

That's easy enough. Now the madness comes... What we really need is setting the color and size the way we want it. And this just happens too easy to be true.

Colors

Tailwind has amazing classes for coloring SVGs. Whereas some will need to color the outline (stroke) and other the fill. The solid font set is called solid because you style it with fill. Whereas the regular set will be styled with stroke. So we can write:

      <button>
        <svg className="fill-current text-teal-500">
          <use xlinkHref="solid.svg#tv" />
        </svg>
        Facebook
      </button>

And we have a teal icon. For an icon from the FA's regular icons ( e.g. regular.svg#tv ) we would simply use tailwinds stroke utility class stroke-current.

The best possible way would be that our icon picks up the font size and adapts to it. We could actually tackle this using width and height and passing it em values. 1 EM will relate to your current font size. To take this further, you can very simply create a number of utility classes to make your icons slightly bigger or smaller than your text:

.icon-sm {
  width: 1em;
  height: 1em;
}

.icon {
  width: 1.2em;
  height: 1.2em;
}

.icon-lg {
  width: 1.5em;
  height: 1.5em;
}

... and so on. I hope you get it. I call it .icon but you can just do that however you want! I found that many designers are sizing the icons roughly at the line-height of the font. So in CSS, this defaults to 120% of your font-size. Ergo 1.2em. (Which is horrible - I will explain about this one day...) 🤯

Isn't this amazing? SVG madness with all the comfort of an icon-font. Let me know what you think!

What's next? Well...

It doesn't really end here. We are using an SVG Sprite. We could easily convert it into our own component library and inline it directly e.g. using webpack - this would save us the extra network request + fixes some of the issues you could face (e.g. CORS problems). But I will leave it to you to get creative with that.

✌ Peace!️

From Java to React Native

Björn Schmidtke — Tue, 23 Oct 2018 00:00:00 +0000

Why React Native is not a good choice for Native Apps?

We are currently updating the technology stack at Poverty Stoplight — an App created by Fundacion Paraguaya whose aim is to eradicate poverty.

Over the last years, we have developed Native Java Applications that have been discontinued in favor of React Native. This post explains the reasons, findings, and thoughts behind the decision to switch

Questions Around React Native (RN)?

There are still a lot of people that have not yet heard of React Native and still, quite some that associate it with something like Cordova / PhoneGap and all the other early mobile development frameworks.

Furthermore, Airbnb recently posted about discontinuing ReactNative for their applications in favor of building them natively, which might have given some people the impression that React Native is just a hype framework.

This post hopes to give a more differentiated view and show the advantages of the technology and the situations where it makes sense to use it. This post also aims to communicate the reasons for the team’s decision to move away from the current stack to the new React Native one.

Who uses React Native

After AirBnB decided to stop using React Native, many people have the impression that RN is not used anymore in any meaningful way beyond Facebook.

To start, the graph below shows that React Native is a robust technology and mature is enough to be used by the world’s leading companies in their flagship products.

Tesla, Walmart and Bloomberg are also heavy users of React Native. Here is a list with further projects that rely on the technology: https://facebook.github.io/react-native/showcase.html

So What is React Native?

Quoting Learning React Native:

React Native is a JavaScript framework for writing real, natively rendering mobile applications for iOS and Android. It’s based on React, Facebook’s JavaScript library for building user interfaces, but instead of targeting the browser, it targets mobile platforms. In other words: _ web developers can now write mobile applications that look and feel truly “native,” all from the comfort of a JavaScript library that we already know _ and love. Plus, because _ most of the code you write can be shared between platforms, React Native makes it easy to simultaneously develop for both Android and iOS _ .

Essentially, React Native is a toolkit that allows us to not only work the way we do on the web but also use a shared code base between Android and iOS, speeding up the development process greatly. This means the following:

We can develop one component for two Systems while ensuring that they are consistent with each other.
We only need to write tests once, which saves us a lot of development time with the TDD approach we have.
We don’t have to concern ourselves with the difference in implementing mobile & web apps, thus reducing the number of technologies we have in our systems and the amount of expertise we need to develop and maintain things.

Why is React Native so interesting?

This post mentions a great amount of the advantages of using RN. https://hackernoon.com/react-native-is-it-really-the-future-of-mobile-app-development-31cb2c531747

To list a few:

Cross-Platform Compatibility (Android, iOS, Web)
Native functionality (In fact code is executed just as native code)
Simple to Learn
Positive Developer Experience (one of the most important points)
Supported by Facebook and a growing technology

Our goals for this technology:

Faster Iteration Speed (Faster Development and Burn Down Rates)
Write Code Once Instead of Twice — Shared code between app and web with the option to also support iOS
Easier on-boarding for contributors
Improve the Developer Experience
More aligned technologies (we use React in the Web App and Website)

What could go against it?

Despite all the reasons to move to React, there are a lot of arguments against React Native in general. Some of them we picked up and looked at them more in depth.

(1) Stated Problem: React Native is less compatible with older devices (The old native app supports back to API 19)

API 19 is KitKat or Android 4.4. With RN we support backward to 4.1 (we only tested it with 4.4 devices). Globally, that means we are only missing out 0.6% of the devices and actually cover even more than most current Native Apps do.

Looking at the picture in Paraguay (South America and Africa just look the same): We have slightly more devices with Android 4.1 and 4.2 (around 1.4%).

(2) Stated Problem: _ React Native is slower on older devices _

There are countless statistics made on this. One report (where I also took the graph below from) is here: https://codeburst.io/react-native-vs-real-native-apps-ad890986f1f

Codeburst states it like this:

This is the biggest setback for me. If you’re planning to develop a complicated app such as an image/video editor, React Native isn’t a good option for you.

In our case (and most cases where you consider React Native), we are not creating a complicated app for video editing! Instead, we are creating a data collection application BTW: The graphs show that in some cases React Native is even outperforming Swift!

(3) Stated Problem: There is no React Native library to handle synchronization (offline functionality)

It is clear that an app that should feel like an app needs offline capacity. But with Poverty Stoplight we have an additional challenge. We are operating in countries like Sierra Leone where our app is used without internet for several days or even weeks and only 2G connections available.

Today, a bit over 1 billion people have access to high-speed internet, 3 billion have some access to the web, and over 5 billion people own a mobile phone. Every single year more people will be gaining access to the internet. Most of them will be mobile users, connected via low-speed, intermittent connections.For these people, offline support is not a luxury, it is basic accessibility. Read Bruce Lawson’s essay World Wide Web, Not Wealth Western Web for a deeper look.

Redux Offline is a technology for Offline-First Apps (and Web Apps). They have above 5k Stars on GitHuband wrote a very interesting article about the idea behind the framework.

At the moment we do not have a need for background sync but will look into it as soon as it becomes relevant.

(4) Stated Problem: _ A major concern with using React Native is the lack of long-term commitment to the project. _

We look into open-source projects very carefully and think twice before adopting something. The two key elements we always consider are:

How much does this framework help me?
How well is it maintained? Who is the guarantee behind it?

Both questions have to match the strategic position a technology has for us. How we look at our App: It’s an App that’s based on our API (there are multiple Apps based on the API so the API is much harder to change). We want to develop it for 3 to 5 years. It is an important part at the moment and we will invest a medium-level amount in the development. The functionality is very UI heavy not computing intensive.

We must remember that React Native is an open source project and is driven as much by its owner as its community. It would be crazy for Facebook to break React Native just to change it to what it wants. Looking at the Github Repository https://github.com/facebook/react-native, there have been more than 1,700 people contributing code to the project over the years with more than 13,000 issues that were identified by the community resolved. This is, in fact, a lot of commitment by a lot of people who think that the technology is important and valuable enough to help improve it.

We don’t see a lack of long-term commitment to the project at the moment. Every technology will be discontinued at some point (hopefully). Looking at it with a 3 years horizon and the current support and growth in the community, it seems to be a very solid decision.

(5) Stated Problem: _ React Native is still in beta, and breaking updates are pushed out directly. This makes it very hard for a small development team to maintain _

It is true, that RN is under heavy development and has gone through some major improvements over the last years. Compared to a more stable framework, this leads to higher cost in updating and a certain risk for breaking changes.

We expect the advantages related to time savings listed in the section above to outweigh those drawbacks.

One note to mention here: RN has been around for 3 years now and became more and more relevant. As we are moving forward we anticipate less breaking changes (or at least not more) than in the past.

(6) React Native was created by Facebook and so it caters to Facebook’s needs which can break things that you depend on.

Again referring to the contribution statistics on the React Native repository mentioned above, RN has to be able to listen to its community of developers and include their needs in the project to be as successful as they are at the moment. This is something that they have done to an extremely good level and the input has only improved the technology and made it more accessible and feasible for others to use.y

RN after 1 Year with 10 Developers?

Let’s have a look how RN scales. What do developers and companies report after using RN for a longer period and in a bigger team? That is the topic of a post with many answers: https://news.ycombinator.com/item?id=15293573

The question was, if it works in bigger teams and if those regret it after having at least one year of experience with it. Here are some answers:

We have a 15-person engineering team and converted our mobile app to React Native at the beginning of this year. We do not regret it. Our pace of delivery is much faster with React Native than what we were able to achieve building natively. Our app has over 100 screens, and only needing to implement features once to have them on both platforms is nice. The feedback loop when making code changes is much faster, especially when writing unit tests. There are some rough edges, but the benefits far outweigh the costs for us.

Absolutely not. We went all in on it. We even developed our own open source framework based on it called Gluestick. […] We also built a component/style library that allows us to make responsive designs into web and mobile apps quickly and easily. Gluestick also allows easy creation of native apps (native/react native/web views) with 90+% code sharing. We also added a bunch of features (regex based routing, etc) to help with seo. We do all of this from our single framework based on react.We had a lot of front end ‘frameworks’ in use and no consistency. Now we do. It’s been a lot of work, but for us totally worth it.

We also have done a bunch of optimizations to make react fast, including how we handle webviews in a react native/native app. It’s seamless. I’d like to link a video, but proprietary work that isn’t done…blah blah blah, company secrets, blah blah blah. We will be releasing another blog post, detailing all the native enhancements soon.

The team I’m a part of (~14 people) started building two new Android apps and transitioned our iOS apps to React Native a little over a year ago. Overall, I would call it a great success; we have four apps (2 iOS and 2 Android) built from the same codebase, soon to be 5, and React Native has allowed us to be incredibly nimble in developing the framework and features for them.Some things I regret:

We didn’t go all in on React Native, keeping large portions of code in native in case of performance or security needs. This means that any given feature requires iOS, Android and React Native development. All of us are now fluent enough in each to do the work, but the context switching and debugging of actions moving across the bridge are a velocity killer.

We didn’t realize that RN’s cross-platform integrations testing story was so poor; we thought that we’d “just use Appium, it’s perfect.” Nope — design decisions made by the React Native team actually make Appium unusable for our Android apps. This has forced a lot of churn in our testing strategy and we still have a lot of manual testing at this point. This is, IMO, the #1 thing that should be focused on either by Facebook or the React Native community.

At Penguin Digital we focus on using the right tools and helping our clients to make decisions that match their situation. We work alongside our client Poverty Stoplight to eradicate poverty! If you want to get to know more about some awesome technology, the penguins, and our work, do not hesitate to contact us or visit www.penguin.digital 🐧 and make sure to check povertystoplight.org 🚦.

Virtual Box — fixing all the errors

Björn Schmidtke — Wed, 29 Aug 2018 00:00:00 +0000

Lately, we create a lot of events to learn how to code. For these bootcamps we use a VirtualBox (VB) Image (Ubuntu), where we preinstall a bunch of tools and make sure that everyone in the course has the same environment.

Everytime we distribute the image there are a bunch of problems occurring once we ask the students to import and start the machines. Since it’s a handful of problems that occur over and over again, it makes sence to write a post for future reference and also to share this knowledge among other instructors.

Especially given that some of those errors are not self explanatory and very tricky to google. So, here we go:

(1) Network Adapter does not exist.

Problem : When starting a machine, an error happens: “Network Interface not found”.

Reason : If you distribute an image that is configured to use a custom “Host-only Adapter”, there might be a problem that this network interface is not automatically imported.

Solution : Go to “Global Tools”, create a new “Host-only Adapter” (press “Create”). Go to the Machine “Settings” — “Network” and “Adapter 1” or 2, … wherever the problem is. Press “OK”. Now this problem is resolved.

(2) VirtualBox on Mac throws en error with talking about “Kernel Drivers”

Problem : Starting a machine in VirtualBox on Mac throws an error “Kernel Drivers not Installed” (or simmilar).

Reason : During the VB installation, you need to grant a special permission. The only time the option shows is during the installation process and you cannot fix it afterwards.

Solution : Uninstall VirtualBox (Applications, right click, remove); Empty Trash; Unmount the installation image; restart; install VirtualBox again. During the installation: Open “System Preferences”-“Security & Privacy”-”General”. There will be a message to allow apps from Oracle… press allow as soon as it shows up there.

(3) 64bit error on Lenovo and HP Laptops

Problem : When starting a machine, an error message shows saying something like“Cannot run 64 bit OS” or “Virtualization error”.

Reason : Those laptops come with disabled virtualization settings per default.

Solution : Go into the Bios (Restart and press during start: on Lenovo / on HP). In the Bios you have to find a configuration to “Enable Virtualization” (google if you don’t find it). Save and Exit. Now it should work. BTW: Lenovo Yoga models require to press to enter Bios.

(4) Black screen with blinking cursour

Problem : When starting the machine it seems to start (or not) but after some time stops and shows a blinking cursor.

Reason : We are not sure yet.

Solution : For us it worked best: First make sure 64bit is enabled in the Bios (see above). Afterwards reinstall VirtualBox and download the image again. Make sure to delete the whole image and everything related to it. Also make sure that the VRAM setting has more at least 24MB allocated.

We hope that helps. If you encounter more problems during your camps, post a comment!

This post was made during the SHSG Summer School Coding Bootcamp in St. Gallen, Switzerland by virtue of the Penguin Academy, an organization that supports and organizes coding events all around the world. 👩‍💻👨‍💻🐧

The CMS — Wordpress vs React

Björn Schmidtke — Thu, 19 Apr 2018 00:00:00 +0000

First: This article makes no claim to be complete, objective or representative. The reason is that comparing Wordpress and React is like comparing apples and pears. But let’s give it a try nevertheless :)

The core of a website project is the Content Management System — for short CMS. With the CMS you decide on the entire technology you are going to use for the lifetime of your website.

We have developed the Penguin CMS system over the past 5 years after we stopped working with Wordpress. Today Penguin CMS powers over 100 websites with thousands of visitors per day. I quickly want to point out the drawbacks and benefits.

Why we and 100% of our clients stopped using Wordpress:

Design: You are constrained in the design and the way you organize your website. That is why all Wordpress sites look similar, and it becomes quickly expensive if you wish to create something unique.

Security: We never had security incidents on our systems (Penguin CMS). When we were using Wordpress, it got hacked twice due to security issues in plugins. That happened despite having installed several “Security Plugins” on the Wordpress site.

Updates: Updates with Wordpress are a big issue. There are breaking changes and some plugins stop working. Most of the plugins are developed by people in their free time and not by professional programmers — and do not meet a professional, secure standard. We had the case multiple times when updating resulted in a huge effort (resulting in cost).

Scaling: Wordpress runs on PHP, an old programming language. It is not really made for scaling; therefore, the page becomes slower when growing — either content on the page or the visitor number. There are tricks on how to deal with the performance on PHP, but it still is not made for many visitors and it becomes expensive in hosting.

Biggest issue — Technical Debt : Since Wordpress is the main player on the market, many of their customers own websites created with older versions of Wordpress. Therefore, they cannot come up with a new system that fixes all underlying issues that are deeply ingrained in their system. This concept is called “technical debt” — and Wordpress has a tremendous one as shown in the graph below. The result of the technical debt is the following: it might be fast to start a project with Wordpress, adding further features will get slower and slower over time. Example: We once created a shop for a client. After it went online, the client asked us to do another small update: to add an optional “school address” in the checkout. This was as expensive as setting up the whole shop, just because the “technical debt” made it so cumbersome to add a feature without breaking other features.

Technical debt. Wordpress keeps the world record.

The main reason why many people still go for Wordpress is that it is cheaper in the initial project, and agencies tend to not tell customers about the effects of technical debt (low initial cost and high subsequent service cost). It is also cheaper and easier to find people programming with the “old” technologies.

The support for Wordpress : Often it seems to be an argument that Wordpress is a major CMS and therefore it should have good support. While it might be true for a standard template, it is not true for a custom website. Custom websites built on PHP and Wordpress are hard to develop further because there is no clear structure. I have often seen code where the developer did some “freestyle coding” to somehow just get the job done.

Customer’s choice: From the 100 biggest websites on the net, Wordpress.com is the only Wordpress-based website. All the rest run on other CMS systems because Wordpress is not scalable, professional and secure enough for them.

Our approach:

We use a system which is based on React. React is developed and backed by Facebook and is therefore truly scalable. It is developed to fit their security standards and is in use on facebook.com and many other of their platforms. React is growing at a fast pace and at this point is already used by Airbnb, Alipay, Amazon Video, Atlassian, BBC, Uber, Udacity, Yahoo, Salesforce, NFL, New York Times and many more.

React has a very clear way of programming, structuring, and workflows. This results in a very low “technical debt” and the project stays manageable in the future. You program real custom components which are reusable in the future. This also makes it easy to test the code.

Since it is made for scaling, there is a lower hosting cost and the system can easily handle massive visitor spikes.

Overall we implement the handmade design and no templates. We are flexible in the implementation and have everything prepared to grow in the future and extend functionalities.

To make this work, we use an architecture with a “static site generator” together with a “headless CMS”. Our chosen tools at the moment are React Static and Storyblok . This setup, together with some own tools, is what we call Penguin CMS.

At Penguin Digital we focus on creating a good user experience for our clients. That is why we have created several CMS systems and are still working on improving every day. We are a web agency based in Switzerland and Bulgaria with clients on five continents. If you want to get to know more about some awesome technology, the penguins, and our work, do not hesitate to contact us or visit www.penguin.digital 🐧.

The Penguin’s Guide to Scrum

Björn Schmidtke — Mon, 22 Jan 2018 00:00:00 +0000

At Penguin Digital we create a lot of amazing websites and web apps. Over the last years we have launched over 100 projects. During all that time we did not follow a specific project management approach. After growing quite a bit it is finally time for us to adopt one. What else could we follow but Scrum?

5.5 hrs of learning and 2.5 hrs of working puts you ahead after 1 year if the gain daily is 1%.— Llewellyn Falco

WHY is Scrum the right approach for the Penguins?

You have maybe heard about The Way of the Penguin. These are the basic principles guiding us. Such are for example the constant self-improvement, openness and transparency. We believe in the potential of each individual and that we are in an age in which every individual is increasingly able to take over responsibility over their work and self-development. Managers are commanding and controlling less and are transitioning to a role of serving the organization, the idea behind it and its people. People are not working for a paycheck only, but are as focused on the purpose of their organization and on what they contribute towards.

We believe that all these of developments in lead to a springtime in human progress and are emanating from the same source. In this interview with the “two fathers of Scrum” you will encounter many of the above mentioned topics.Interview with Ken Schwaber and Jeff Sutherland, the two fathers of SCRUM.

How I thought we use Scrum but we used Waterfall

This is actually a true story. After coming across Scrum and Agile Methods, I was very excited and directly jumped into some articles to learn more about it. Of course, we directly adopted the new methodology and started working with Sprints. We would first do a sprint for the User Research then Design, then Development and finally Testing.

A while ago, I encountered then this amazing visual on the Waterfall approach and got curious. Why does it look so much like what we did?

Waterfall Approach. Very old and not what you would like to do today ;-)

This was the moment when I realized that we follow an approach which is just the opposite of what I thought we do.

The very basics of Scrum

Scrum is not complicated. It is rather minimalistic and the most important thing is: It is not and it does not claim to be a blueprint which you copy as it is. Rather it is an idea and you have to make it work for you.

The basic principles are: Sprints, Artifacts and Roles.

Sprints

This one is the most mind-blowing one to me. Do not forget. It is not an expert writing here. But someone who was thinking he did Sprints but was actually following Waterfall till a while ago.

The concept of sprints is easy. It is a defined time-frame between 1 and 4 weeks (mostly 2 weeks) in which the developers are protected from changes and requests from the outside world. After running a few sprints with the team you have a good point of reference to estimate how many features you will be able to realize within the next sprint. For this it is important that the sprints always have the same length.

What is fundamentally different and requires the most rethinking from my side is that design and development happen at the same time now. This means the developers don’t wait for the design to be completed; we move forward as a whole team. Just as a scrum in Rugby, hence the name…

Artifacts

There are three artifacts: the Product Backlog, the Sprint Backlog, and the product Increment.

The Product Backlog and Sprint Backlog describe work to be “Done” that will add value, and the product Increment is the “Done” portion of the product completed during a Sprint.

You can check out more about them here: https://www.scrumalliance.org/why-scrum/scrum-elearning-series/scrum-artifacts

Roles

There are three main roles within a Scrum Team: The Product Owner, the Development Team, and the Scrum Master.

The Product Owner represents the client. They define what brings the most value and set the priorities. They prepare what should be worked on in the next sprint.

The Development Team is not only referred to the developers but also to a Cross Functional and Self-Organizing Team. All members of a Scrum Team have all competencies needed to accomplish the work without depending on others who aren’t part of the team.

The Scrum Master is the facilitator. They ensure that the Product Owner, the Development Team, and the Organization as a whole understand how Scrum can be used to help them accomplish and align their goals.

Getting the right mindset

SCRUM comes as part of a bigger idea:. The _ agile idea _. It is the answer to a problem most of the software projects have. It is complex to build software. You cannot fully foresee everything and create the whole plan before starting the project. When you build a house this is possible. So it’s fine to use waterfall. But in a faster and faster changing world we have to be increasingly agile. Thus, it is as important to understand the mindset Scrum lives in (this section) as it is to understand the way Scrum works (which we will do in the next section).

Here you have 4 amazing resources:

1. Agile Product Ownership in a Nutshell

This is the must-see video about creating a product in an agile way.

2. Making sense of MVP (Minimum Viable Product)

How do you create a product in increments? Understanding MVP the right way.

3. The art of doing twice as much in half the time

Jeff Sutherland (one of the Scrum fathers). “Bang that airplane right at the end of the runway”.

4. The Agile Manifesto

The agile manifesto is the foundation for the Agile movement and all Agile Frameworks (like XP, Kanban, Scrum). It states the four main principles and values of Agile Software Development. The document was signed in 2001 by 17 software practitioners.

The Agile Manifesto

5. IDEO — DeepDive methodology in practice

IDEO, Palo Alto, CA is the most influential Product Development firm in the world. They are extremely insightful. They are THE EXPERTS in the process. Enlightened trial and error succeeds over the planning of the lone genius.

Implement Scrum in your organization

Now it’s time to implement Scrum in our team. How do we do it?

After the inspiring videos above we know a bit about the background and the mindset of Scrum. We now need some more technical knowledge about Scrum.

Remember the three basic roles in Scrum? We have a team of developers, a product owner (PO) and a Scrum master (SM). While there are multiple developers, there will be one Scrum master and one Product Owner. In small teams there will not be a separate Product Owner and Scrum master, but some of the developers can take over this role. What is important is that Scrum Master and Product Owner are not the same person.

Having said that, in the adoption of Scrum in small teams it makes sense that everybody is learns about the developer role. Afterwards there should be at least one person who continues specializing in the role of a Product Owner and one in being a Scrum Master.

The scrum.org organization offers specialized courses and tests for the three Scrum roles (and some more). While it might be amazing for the whole company to attend a course, this can get quite expensive. We will certainly do that in the future; as a start, though, we will focus on the online materials.

Some of the following points are copied from Łukasz Krzyżek’s post on getting started with Scrum.

_ Make sure to cover the first three points. It might take a working day. The further points are mainly relevant for POs and SMs. _

1. Study the Scrum Guide.

The original source of truth: The Scrum Guide — 18 pages. It is the official overview of the Scrum Framework comprising the Scrum Principles, Values, Definition of Artifacts, Scrum Roles and Events: http://www.scrumguides.org/index.html

2. Watch the Scrum Training Series Video.

This is the most amazing video series I have found. It’s a series of short videos explaining the Scrum Framework in real-life situations. You can observe what is expected by the team during Planning Meeting, Retrospective Session or Sprint Review. By watching the video you can understand better the structure of Scrum Events and what behaviors are not aligned with Scrum Framework. There are also many links to other great Scrum resources.

3. Dive into your role or into all roles.

Understand the differences between Scrum Roles: Know responsibilities of Scrum Master, Product Owner and Dev Team. You can find a great description of those roles in Barry Overeem’s publications: Characteristics of Great Scrum Team, Characteristics of Scrum Masterand Characteristics of Produt Owner.

4. Further videos by lynda.

You will need to ask your company for a paid account. There are some good contents. The very basic video is: Scrum: The Basics — it will be boring after you have checked the information above.

The Product Owner is the face to the customer. In my understanding they are pretty close to the role of a product manager. The role requires skills in three areas: Business, Engineering and Design. There are quite some interesting videos about it: Transitioning from Waterfall to Agile Project Management, Scrum: Advanced, Agile Product Owner Role: Foundations, Agile Product Owner Role: Techniques.

For the Scrum Master the videos above are interesting as well. Especially: Transitioning from Waterfall to Agile Project Management, Scrum: Advanced. In addition the following ones are available: Agile Project Management Foundations and the Agile at Work series: Building Your Agile Team, Planning with Agile User Stories, Reporting with Agile Charts and Boards, Getting Better with Agile Retrospectives.

5. Further information.

You can find lots of valuable resources, tipps and discussions that can help you understand the Scrum framework better. Scrum Master Skeleton Board

Beware that Scrum and other Agile Frameworks are not only for small projects, teams or organizations. There are already available frameworks that can help you scale your adoption of Scrum like: SAF, Nexus, LESS, DAD. Watch video with the overview of Scaled Agile Model in Spotify.

6. Know what Scrum.org and Scrum Alliance are.

There are two main organizations that support and guide the development of the Scrum Framework. They have different approaches to some aspects of the framework, training and certification process (i.e. Scrum.org — getting certification doesn’t require attending training; Scrum Alliance — you need to attend the formal training to apply for the certification process).

The conclusion

It must be clear that truly following Scrum has to result in a fundamental change of the culture and processes we are following. If we do not feel the change, we do not really adopt Scrum.

It is now time to get into the real life and to get some real products shipped using Scrum. At Penguin we are a distributed team based in St. Gallen, Switzerland and Sofia, Bulgaria. So we have set up Realtimeboard in order to have a digital Scrumboard, and we will followthose 7 steps described here for our first sprint.

At Penguin Digital we now follow Scrum in every project we work on. We strive to be an agile and learning organization. We are an agency based in Switzerland and Bulgaria with clients all around the world. If you want to figure out more about some awesome technology, the penguins, or our work, do not hesitate to contact us or visit www.penguin.digital 🐧.

The Way of the Penguin

Björn Schmidtke — Sun, 14 Jan 2018 00:00:00 +0000

In all we do as Penguins, we are guided by some basic principles: The way of the Penguin!

On the land, penguins are clumsy and pitiful; but once in the water, they become agile, fast and swim further than anyone else.

Just as the penguins, so are the humans. Clumsy and pitiful if they are in the wrong environment, or if they use the wrong tools. But once in the right setting, they can step into their full potential and grow far beyond the imaginable.

But never forget: A penguin in the desert will never become a giraffe. The penguin could train and exercise as much as he wants. Trying to stretch his neck further,… but the desert is and will stay the wrong environment for a penguin. So what are we humans doing? If we try to perform somewhere where we do not follow our strengths, we will fail to perform.

At Penguin, we create both: the right environment for our teammates to grow, and the right tools for our clients. Let’s push the penguins in the water!

This is the way of the Penguin:

CIRCLE OF TRUST

Trust is in the basis of a strong team. We strive to create a strong circle of trust among all penguin-teamies, so that everyone feels safe — to rely on the others, to experiment, to be part of the family. Only then can we all develop and show our best as a team. And then to bring the same trust to our extended circle — our customers.

OPEN & TRANSPARENT

We value transparency and openness — both to one another and to the work we do. Sharing ideas. Collaborating. Building a community. Because sharing is caring. Cooperation above competition.

IMPROVE YOURSELF

We have this thing in common — we are all students, in our way. We learn on a daily basis; individually and together. Developing ourselves continuously helps us to be on top of new technologies, to come up with innovative ideas, to keep our brains moving. We become better everyday in what we do, and strive for excellence.

The Way of the Penguin — CIRCLE OF TRUST | OPEN & TRANSPARENT | IMPROVE YOURSELF

ENJOY WHAT YOU DO

By focusing on what one likes and does best, they become more engaged and successful (according to GALLUP studies). We do what we like. Work can be, and should be fun. We try to minimize the boring parts, cut the red tape to zero, so that we can focus on what each one of us finds enjoyable. #TGIM

BE PROFESSIONAL & STAY COOL

We are professional in all we do. But we stay cool. It is important for us to keep the start-up vibe also when we grow. We know how to have fun, and try to incorporate that within our workdays. Because one can be successful also without a tie and champagne. ;)

RESPECT OTHERS AND THEIR DATA

We respect the individuals, their choice and data; thus, treat it with extra care and transparency. Data belongs to individuals, and its usage must be their decision. To foster the harmony between individuals and technology.

The Way of the Penguin — ENJOY WHAT YOU DO | BE PROFESSIONAL & STAY COOL | RESPECT OTHERS AND THEIR DATA

At Penguin Digital (www.penguin.digital) we follow those principles in every project we work on. We are an agency based in Switzerland and Bulgaria with clients all around the world. If you want to figure out more about awesome technology, penguins or our work, do not hesitate to contact us!

Deep Neural Networks: How-to setup a Azure NC24 VM with MXNet + GPU support and R bindings

Björn Schmidtke — Thu, 11 Jan 2018 00:00:00 +0000

_ Disclaimer: This is a very technical post; made only for crazy developers. _

This is a description on how to set up an Azure NC24 VM which contains 4 Tesla K80 GPUs. The idea was to setup a NC24 VM and install MXNet with GPU support under Ubuntu 16.04 LTS to add some power to a simple 9-layer Convolutional Neural Network. The official documentation is quite helpful and can be found here.

The key learning is this: Rather re-write your code in Python. After a few days this turned out to be the fastest way for us.

Still for documentation purposes, I publish this article. It might happen that there are other crazy people out there, for whom it can be useful.

I was generally following the process described here: Building Deep Neural Networks in the Cloud with Azure GPU VMs, MXNet and Microsoft R Server.

I. Azure set-up

If you don’t have an account at Azure yet, get one. It’s quite straight forward, with exception of one potential problem, if you are new to Azure.

Add a Virtual Machine with Ubuntu 16.04.
This one is tricky: If you have just registered an account, your free account will not allow you to buy a NC24, because the default quota for the virtual cores you can get is too small. Solution: Transform your free plan into a paid plan (the start credit will remain) and write to support for an increase of the vcore quota in the data center location you would like to spin up your VM.

II. System Setup

As mentioned above, I was following this article.

It assumes all the packages (CUDA, cuDNN, MKL and MXNet) are in the user’s home directory. There is a description in the article above on how to get them. You will need accounts at NVidia and Intel. But it turns out that the versions that are linked in the article are too old and not supported / not easily available anymore. So here comes the full process:

Prepare the system: Update apt-get: $ sudo apt-get update Install everything needed: $ sudo apt-get install -y libatlas-base-dev libopencv-dev libprotoc-dev python-numpy python-scipy make unzip git gcc g++ libcurl4-openssl-dev libssl-dev Update to alternatives for cc: $ sudo update-alternatives --install /usr/bin/cc cc /usr/bin/gcc 50
Install CUDA: Trying to install CUDA from the downloaded package failed for me. Here is what I tried: $ chmod 755 cuda_8.0.27_linux.run $ sudo ./cuda_8.0.27_linux.run –override

During installation select the following options when prompted:

Install NVIDIA Accelerated Graphics Driver for Linux-x86_64 361.77? — Yes
Do you want to install the OpenGL libraries? — Yes
Do you want to run nvidia-xconfig? — not necessary for this example.
Install the CUDA 8.0 Toolkit? — Yes
Enter Toolkit Location [default is /usr/local/cuda-8.0] — select default
Do you want to install a symbolic link at /usr/local/cuda? — Yes
Install the CUDA 8.0 Samples? — No

If installation of CUDA fails:

$ sudo apt-get upgrade -y

$ sudo apt-get dist-upgrade -y

$ sudo apt-get install linux-image-extra-virtual

$ sudo apt-get install linux-source

$ sudo apt-get source linux-image-$(uname -r)

$ sudo apt-get install linux-headers-$(uname -r)

… still failed. I finally decided to install CUDA 9 via package manager.

Finally it works like this:

$ sudo apt-get install cuda

Btw: Since you install CUDA from the package manager, you will get the latest patches and you don’t have to install them in addition. This also means, that in the following, the versions will be different from what was used int the article.

Try out if nvidia-smi works (set persistence-mode)

$ sudo nvidia-smi -pm 1

$ nvidia-smi

This should now show something like this… (see screenshot at the end of this section)

Download and install cuDNN and create a symbolic link for cudnn.h header file: $ tar -xvzf cudnn-9.0-linux-x64-v7.tgz $ sudo mv cuda /usr/local/cudnn $ sudo ln -s /usr/local/cudnn/include/cudnn.h /usr/local/cuda/include/cudnn.h
Download and install MKL: $ tar -xvzf l_mkl_2017.3.196.tgz $ sudo ./l_mkl_2017.3.196/install.sh Follow the prompt and enter the MKL serial number that you received in email from Intel. The default installation location is /opt/Intel — you’ll need this for the next step.
Install MXNet: I decided to install the latest version before the update to 1.0. Installing those two packages solved some problems for me: $ sudo apt-get install -y libopenblas-dev liblapack-dev $ git clone --recursive https://github.com/apache/incubator-mxnet.git mxnet --branch 0.12.1

Edit the .bashrc and add the links to CUDA and cuDNN libraries.

$ nano ~/.bashrc

$ export LD_LIBRARY_PATH=/usr/local/cuda/lib64/:/usr/local/cudnn/lib64/:$LD_LIBRARY_PATH

$ export LIBRARY_PATH=/usr/local/cudnn/lib64/

And reload the environment: $ bash

Next, copy the config.mk to the $MXNET_HOME directory.

$ cd mxnet/$

$ cp make/config.mk .

Modify the $MXNET_HOME/config.mk make file to use CUDA, cuDNN and MKL.

$ nano config.mk

USE_CUDA = 1

USE_CUDA_PATH = /usr/local/cuda

USE_CUDNN = 1

MKL is to be used, so set USE_BLAS and USE_INTEL_PATH as follows:

USE_BLAS = mkl

USE_INTEL_PATH = /opt/intel/

To enable distributed computing, set:

USE_DIST_KVSTORE = 1

Now it's time to build. To build in parallel, I use the –j option.

$ make -j ${nproc}

Install Microsoft R (MLServer): The MRS (Microsoft R Server) is not available anymore but Microsoft has a new product to use: Machine Learning Server for Linux. The installation is quite straight forward and is described here.

To add MXNet library into R, first add the following two lines to /etc/ld.so.conf: $ nano /etc/ld.so.conf

/usr/local/cuda/lib64/

/usr/local/cudnn/lib64/

Followed by re-configuring dynamic linker run-time bindings:

$ sudo ldconfig

Create the MXNet R Package: Congratulations for having made it till here. Now comes the fun part. In the $MXNET_HOME folder, run this: $ sudo Rscript -e “install.packages(‘devtools’, repo = ‘https://cran.rstudio.com’)”

We now need to install a bunch of R dependencies.

$ cd R-package/

$ sudo Rscript -e “install.packages(c(‘Rcpp’, ‘DiagrammeR’, ‘data.table’, ‘jsonlite’, ‘magrittr’, ‘stringr’, ‘roxygen2’), repos = ‘https://cran.rstudio.com')"

If this worked for you just fine. Amazing!

Continue with Step 8. Otherwise check the Troubleshooting at Step9.

Install the MXNet R Package: $ cd .. $ make rpkg $ sudo R CMD INSTALL mxnet_0.12.tar.gz

Troubleshooting the rpkg build : If something goes wrong, it is most likely to be an issue with the compiler flags in the Makeconf. This comment is a great description of how to solve it: https://github.com/Microsoft/microsoft-r-open/issues/26#issuecomment-313739668

The Makeconf location is either /opt/microsoft/mlserver/9.2.1/runtime/R/etc/Makeconf or /etc/Makeconf

Troubleshooting for R dependencies: For me most of the R dependencies failed to install. Here are the things I did to make them install.

To fix the DiagrammeR package, this helped:

$ sudo apt-get install libxml2-dev

To fix the other packages, this was essential:

$ sudo Rscript -e “install.packages(‘openssl’)”

$ sudo Rscript -e “install.packages(‘httr’)”

$ sudo Rscript -e “remove.packages(‘curl’)”

$ sudo Rscript -e “install.packages(‘curl’)”

Finally roxygen2 could be installed like this:

$ sudo Rscript -e “devtools::install_version(‘roxygen2’,version=’5.0.1', repo=’https://cran.rstudio.com')"

Now you should have made it and you can require MXNet in R and make use of the GPU. Hopefully it will get easier with the next MXNet release. 🚀 🐧 🎉

outputs something like this

III. Test run

Let’s give it a try and build some deep neural network! I used the CIFAR-10 problem and dataset as an example. This is a 10-class classification problem, and the data set has 60,000 color images (6,000 images per class). Microsoft published a simple CIFAR-10 training algorithm which can be executed from R. You should first install the argparse dependency:

$ sudo Rscript -e “install.packages(‘argparse’, repo = ‘https://cran.rstudio.com’)”

Now you can run the following command from the extracted folder:

$ Rscript train_resnet_dynamic_reload.R

You should see output which is similar to the screenshot below:

For me it took 3.7 min to run on the GPU. 😎

Quite amazing compared to the CPU: It took Microsoft 119.5 minutes to run in on the CPU.

Progressive Web Apps (Part 2)

Björn Schmidtke — Tue, 02 Jan 2018 00:00:00 +0000

This is the second post explaining PWAs. The first part of it is here.

Technology

To understand, how amazing PWAs are, and to have a look in the future of their development, we have to understand where the technology comes from and why we did not have it before.

The fundament of PWAs is a technology called “appmanifest”. It is developed by “The World Wide Web Consortium” (W3C) — the main international standards organisation for the World Wide Web. The last version of the technical standard draft is a few days old, which illustrates its active current development.

The speed at which new features become available is determined by two entities: the W3C (as seen above) and the browser-developing companies (Mozilla: Firefox, Google: Chrome, Apple: Safari and iOS, Netscape: just joking…).

Google has been pushing forward with PWAs, while Apple was initially very skeptical about them. At the moment, the support for PWAs is already pretty good on Android and Chrome, as well as on Firefox. The great news: Apple also started implementing the standard so it is only a matter of time till the features start working on iOS. Thus, every major browser now supports or is to support PWAs. The graph below shows the support for push notifications as of September 2017.

Support for web push notifications as of September 2017

Support for important features

Two important features that every client would like to use are:

Installing the web app on the home screen. This works on all major devices today already. After installing the web app, it will open in fullscreen (without the URL bar) and directly offer an app-like feeling.
Sending push notifications. This is possible an all major devices (including desktops) but is missing on iOS so far. We have no information so far when it will be released on iOS.

What features will be available

Progressive Web Apps include a bundle of amazing features. Here you have an overview over the features that are already available under Chrome.

Support for Progressive Web Apps across platforms in Chrome

At Penguin we are excited to see that the interest in PWAs is growing very fast in Switzerland. If you want to figure out more about this awesome technology, do not hesitate to contact us!

Progressive Web Apps (Part 1)

Björn Schmidtke — Fri, 29 Dec 2017 00:00:00 +0000

As Penguins we are excited about a new technology:

Progressive Web Apps. Why?

AliExpress saw an 82% increase in iOS conversion after moving to a Progressive Web App. That is a smaller increase than they saw for all browsers (104%), but most businesses would happily accept an 82% increase in conversion.(e.g. site visitors transform into customers)The Washington Post has seen a near 5x increase in user engagement.

Source: cloudfour

From “websites” to “web apps” 🚀

This article aims to explain the basics of a great brand new technology: Progressive Web Apps (PWAs). In the first part, I will show the potential of web apps from a business perspective. The second part will cover the technology behind, shows the current limitations and what we can expect in the near future.

First things first: What is a web app and why would you care?

Apps and websites become one. It is as easy as that. No need to “install” an app anymore. You can now visit a website where you see a button to “install”. One click — done.

Why is a web app great?

Websites are amazing. You find them in Google or somewhere else and you just visit them — and you use them. But many websites like Facebook and Twitter also offer apps. Why? Why do so many companies want to create an app? Because you have great features that you could not get in a website: offline availability, push notifications, access to the users’ contacts or bluetooth. Now, thanks to “PWAs”, we can also do those things with “websites”.

Let’s stop calling those things “websites” but “web apps” instead.

“Websites” become “web apps”

Welcome to the Future

Just in case, you want to read more about the amazing possibilities of PWAs, here are some good reasons why you should be happy and consider asking your digital agency about web apps:

Accessibility You can create “apps” that are as easy to access as a website. And within one click, the user can install it. This does not only sound good but there are already quite some blog posts of companies reporting a great increase in installations.
Less effort You basically create a website which you now can use as app on all platforms. ONE website. Remember the time, when you had to create a website, an Android App, an iOS App and maybe one more for Microsoft? Now you need ONE and you can include all those platforms. This cuts the effort and the cost dramatically. It also let’s you implement features faster and so on… you got the picture.
The Developers: the skills Instead of getting a team together with 3 programming languages (one for each platform) — or hiring 2 companies, you can now work with one team.
Boost your website: like an app It is not only the amazing app you will create but you also add superpowers to your website. What you can do now is: – Increase re-engagement: send push notifications; – Reach easily: PWAs are installed and live on the home screen; – Experience: PWAs do not open in a browser but give you the app-like fullscreen; – Cache contents to make the website available even if the visitor is offline; – Optimize your loading time and preload all the contents.
More conversion It takes longer and more clicks to install a native app. In each step you loose ~20% of your users. PWAs are better integrated and you will loose fewer of your potential users.

Progressive web apps are better integrated, hence have higher conversions

But wait!

If there would be no limitations, you would not believe it, right? So there are some limitations you should be aware of:

For now, hardware intense applications (e.g. virtual reality / augmented reality) still work better in a native app. I am excited about another new technology that is under heavy development: WebAssembly (http://webassembly.org/) that will fix this later on.
It’s brand new. This is generally a good thing but it also means that not all features are available on every platform yet. We will talk more about this in the 2nd part of this post.

Despite those problems, this is the exact right moment to get started bringing your website or app to the next level. The best things: You start with a technology that is growing and as new features are available for PWAs, you will directly profit from them with no or very little additional effort!