Tired of manually changing the backgrounds in Storybook whenever you change the color theme of your component? With a few lines of code, storybook can automatically change the background color whenever certain props on your component change.

In order to understand this article you need a basic understanding of Storybook. To learn about storybook checkout their website.

What we are making

This article will teach you how to achieve the background-changing effect in the GIF at the top of this article.



Setup


To get started you need to have a storybook project set up, and you need some component to render in Storybook. I created a new React app, and installed storybook. This can be done with the following commands:

npx create-react-app app_name

Create storybook project within root of react your project:

npx sb init


In order to change the background color in Storybook at all, you need to install the essential addons package, use the following command in your storybook project:

npm install --save-dev @storybook/addon-essentials


Now that everything is installed we are ready to create the background-changing magic. 

In your component of choice, make sure you have a prop that you want to use to trigger a background-color change in Storybook. I changed the button.jsx file in my newly created react / storybook project .


I changed backgroundColor prop to colorTheme and the code looks like this:

This is what my final button.jsx file looks like:



Changing your story

The component's story needs to be modified. Make sure the story has a control for the prop you want to trigger the background change with. In my story I removed my existing backgroundColor argType and replaced it with my colorTheme prop from the button file. I also gave it the options dark and light and control type radio. 

The backgrounds parameter will also be set to not disabled, as it will be disabled from the preview file later in this guide. 

In addition we will add the global parameter colorTheme to the rendered component:



This is my entire button story at this point. I have removed some of the code that was generated to highlight what we are actually using in the example. The key takeaway is that we are passing in the globals parameter theme to the button.



If our story did not consume the global parameter "theme" but instead used the local args parameter, we could now change the color of the button by changing the backgroundColor prop of the component. It would look like the gif below



We would be able to manually change the background color through the backgrounds addon button.  



It would be nice if the background changed color automatically when the backgroundColor prop changed its value. That is why we are consuming the "theme" from the global parameter. If your file is like the code above, and you can't change the color of the button anymore with the controls, don't worry. This is intentional, and needed to achieve our goal. We will tie it all together in the last step in the preview.js file.

Changing the preview.js file

Jump into the preview.js file in the storybook folder

In my project I have not touched this file, except from installing the backgrounds add on. This is the only contents of this file.



First lets add the background colors we want to have available in components with the colortheme prop. In the following codeblock I have only added the backgrounds object. The backgrounds are disabled, this is to prevent the background from being applied to components without a colorTheme prop. 



Next let's import two events from core-events and a channel from addons. These allow us to listen to events in storybook and run our own code whenever they are invoked.

Put these imports at the top of the preview file.



Next, create the channel we will use to listen to events.

we also need a listener for our channel:



If you find this block of code confusing, here is an explanation. Storybook has global parameters that can be consumed by components. The background color of the backgrounds addon uses such global parameters. This is why we emit an event UPDATE_GLOBALS with the globals object and the values of globals that we want to set. In our case, backgrounds. We also conditionally set this depending on the value of args.colorTheme.

This listener takes in args, which comes from another event. It will be made clear after the next lines of code.



We now need to attach our listener to the channel whenever our story args are updated,



We first remove the listener already added to the event STORY_ARGS_UPDATED  then we add the same listener. This is because of the lifecycle of stories in Storybook. They re-render whenever global parameters update. This way we make sure the listeners are deleted on re-renders caused by our own updates of the global parameters. Afterwards we add it again to listen to changes to story args.



The STORY_ARGS_UPDATED event passes the updated args into the listener that is added to the channel. That is how the args.args.colorTheme is accessed in the listener const in the previous step. 



Lastly, call the function to add the listener to stories.





In the end our preview.js file should contain the following code:



The end result should be the following

Bonus explanation

The global parameter theme is what we set our component to consume. Earlier it was mentioned how the controls would no longer update the color of our component. This was because we were trying to consume a parameter that we were not yet producing in the preview.js file. At the end, it is added to every story from the preview.js file, and we actually access it from our button story, and we also change the global theme parameter by using the controls in the story

Final notes

One drawback is that the global parameter for the background color remains in the storybook state after changing story. This means that changing to another component that also has a colorTheme prop will automatically be displayed with the same background color as you last displayed a component with the colorTheme prop on. You risk showing light-theme components on a dark background, if you did not change it before browsing through the components. By disabling background-colors by default in preview.js, any story that does not set it to enabled again will always be rendered with the default white background, which means switching from a dark background story to a "no background story" works as intended. If you can figure out a way to reset the global parameter on story-change, let us know!

Storybook: background change on prop change

Have you ever worried about the security of the application you are developing and wished for a way to ensure that it is good enough? In this article you will get an introduction to a very popular application security testing tool and some insight into how you can use it as a developer to create secure web applications. 

Why should you use a security testing tool as a web developer?

Security testing tools are tools that help us detect and verify whether the information contained in a system or an application is protected and if it has the expected behavior. Even though they are typically used by security researchers, security testers and bug bounty hunters, they are also excellent tools for developers.

As we all know, security should be a focus in every step of the development process and using a security testing tool makes it easy to verify that the produced code is secure before it is deployed to production. 

There are many available tools out there, but in this article I will focus on Burp Suite. 

Introduction to Burp Suite

Burp Suite comes in both a community edition (free) and a paid version called Burp Suite Professional. In both cases, it is a web application testing tool that acts as a proxy for intercepting and manipulating network traffic, which makes it easy to verify the intended behavior of an application and discover bugs. The community edition provides the necessary tools to carry out manual testing of web applications, while the pro version contains powerful automatic and customizable tools that make your testing more effective. 

For basic testing, the community edition is sufficient. Therefore, I will focus on presenting some of the available tools that can help you to debug your APIs, verify your authentication/authorization mechanisms, and ensure correct handling of cookies and security headers.

The most important features to know

Burp Suite has several built-in tools and features that makes it easy to learn about the security state of your application. Here, I will provide you with a quick introduction of the basic functionality that you can use to ensure security as you code. 

Target site-map

Burp has some useful features to make it easier for you to map out your application. When you manually click through your application or use an automated scan, Burp populates the Proxy history or a Target site-map which gives you an overview of the content of the application. This can then be used to identify functionality that should be investigated further and can also reveal possible information leakage issues. 

Repeater

The repeater can be used to replay modified requests. You can select any previously intercepted request and send it to the repeater tool, where you can modify the raw request as you wish and replay it. This feature is especially useful for API and web debugging. By making small modifications to a request and re-issuing it over and over, you are able to verify the behavior in different cases by analyzing the application's responses.

Intruder

The intruder tool comes in handy when you want to test for input-based bugs, as for example enumeration bugs or injection vulnerabilities. You can use this tool to perform fuzzing of input fields, i.e. submitting different variations of test strings and analyzing the response. If you have already identified a type of bug, the intruder also offers possibilities to exploit the bug. 

Decoder, Comparer and Sequencer

Burp also includes some smaller tools that are useful in application testing.

The integrated decoder lets you transform application data using common encoding and decoding schemes.

The sequencer lets you analyze session tokens to see if the quality of randomness is sufficient. 

The comparer lets you compare data, and provides you with a visual "diff". This can be useful to see if there are any differences in the responses for login requests with valid and invalid usernames to reveal possible username enumeration. 

Extensions 

Lastly, another great feature of Burp is all the available third-party extensions located in the Extender tab. There you can find several plugins that can assist you in your testing based on your needs. Some that are worth to mention are: Logger++, JSON Decoder, Turbo Intruder and Authorize. 

Want to get started with Burp Suite?

In this article we have gained a brief overview over the basic tools available in Burp, and why they are useful for web developers. Want to get started using Burp?

Here is a guide that explains the first steps of getting started. 

Here is a guide on how to use Burp Suite for penetration testing. 

An introduction to Burp Suite for web developers

Everyone that works with development of web pages has to deal with universal design. Accessibility should be considered from the start and it is therefore smart to test with a screen reader during the development. It is often more costly to make an existing project accessible, rather than just doing it right the first time. This fall I have tried to learn how to use VoiceOver on Mac. I want to share with you the most essential parts I have learned and I hope this introduction will help you get started with VoiceOver.

Testing your web application with a screen reader is something every development team should do to make websites for everyone. There are many automated tools that can help you on the way to an accessible website, but there will always be cases that are best captured when testing the website with a screen reader. There are several screen readers available, and unfortunately, they all behave a bit differently for end-users. In this article, I will only address VoiceOver on macOS, but testing the solution now and then with other screen readers is also recommended.

First things first, you need to know how to turn VoiceOver off. The shortcut Command + F5 is important to remember since you don't want to be trapped in VoiceOver mode. The same shortcut is used to turn it on. If you prefer you could also triple-click on the Touch-ID to open accessibility shortcuts.

Next, the VoiceOver activation keys (VO) are by default control + option. VO are used in combination with other keys to access the VoiceOver commands and gestures. The most basic commands are:

Navigate to the next element — VO + →

Navigate to the previous element — VO + ←

Navigate to the next interactive element - tab

Simulate a click — VO + space

Pause the screen reader — ctrl

Interact with an element (this is also used to navigate into the website) — VO + shift + ↓

Try it yourself on Wikipedia's article about Christmas. When you feel you manage to navigate the article we are ready to introduce the rotor. The rotor allows you to get a quick overview of the webpage. It presents all items of a particular type in a list. To open the rotor menu you press VO + U. You can navigate through different types of elements with the left and right arrows. If you open the Wikipedia article again, find the Headings menu and try to navigate through the different headings with the up and down arrows. Using the rotor can help you determine if the website uses the correct semantic HTML mark-up.

With the commands above you should be prepared enough for testing your website. Putting yourself in the shoes of your users is a good exercise. And, if you really want to test your VoiceOver-skills you can turn the screen black with VO + shift + F11. Good luck!

VoiceOver for dummies

Fem grep Bislett Games tok for å bli verdens mest bærekraftige internasjonale friidrettstevne 💚

Bislett Games er et av Norges største internasjonale idrettsarrangementer som for første gang gikk av stabelen i 1965. Siden den gang har stevnet vokst seg stort som en del av Diamond League, med idrettsutøvere fra 47 nasjoner og TV-sendinger i over 160 land. Hvert år samler rundt 60 millioner mennesker seg rundt TVene sine rundt om i verden for å vitne verdens beste friidrettsstjerner gjøre det de kan aller best. Og i 2017 bestemte Bislett Games seg for å stå på pallen i en annen konkurranse.

I 2017 mistet nemlig Bislett Games sin samarbeidspartner gjennom 29 år, oljeselskapet Exxon, og organisasjonen ble nødt til å tenke nytt. Bislett Games tok dermed en helomvending med det store målet om å bli verdens mest bærekraftige internasjonale friidrettstevne. Grepene de tok reduserte Bislett Games sitt totale CO₂-utslipp med 39% fra 2016 til 2017.

Økosystemet rundt et idrettstevne som Bislett Games er stort. Et utsolgt Bislett Games har nemlig plass til over 14 000 tilskuere. Disse har behov for transport for å ankomme og forlate stevnet, ønsker ofte å kjøpe seg noe å spise og drikke mens de er der og etterlater seg som følge av det trolig en liten mengde søppel. Videre består et Bislett Games av rundt 200 utøvere fra 47 nasjoner. Samtlige utøvere må transporteres til og fra arrangementet, ofte ved å fly, og trenger på lik linje med tilskuerne å bli fraktet til og fra stadion. Avslutningsvis krever det også store mengder ressurser og infrastruktur for å drifte alle aktivitetene som finner sted på selve stadion de dagene arrangementet pågår. Potensialet er med andre ord stort, og med stevnedirektør Steinar Hoen i spissen gjennomførte teamet bak Bislett Games en ekte forretningsmodellinnovasjon av idrettsarrangementet og tilhørende økosystem.

Forretningsmodellinnovasjon av Bislett Games

Under følger en liste over noen av de grepene som Bislett Games tok inn mot stevnet i 2017.

(1) Kollektivtransport til alle, også Kronprinsen

Publikum ble oppfordret til å ankomme stadion med kollektivtransport, og ruterbilletten var inkludert i stevnebilletten. Bislett Games tilbyr videre ikke publikum en eneste parkeringsplass og kombinasjonen av disse to grepene resulterte i at majoriteten av de besøkende på Bislett Games ankom gående eller med kollektivt. Til og med Kronprins Haakon ankom stadion i en hydrogen-drevet buss fra Ruter.

(2) To Diamond Legaure stevner på én langhelg

Bislett Games er en del av Diamond League, som årlig arrangeres i 12 ulike byer rundt om i verden, deriblant Oslo og Stockholm. I 2017 var Bislett Games med på å flytte Oslo og Stockholms-stevnet til samme helg og organiserte det slik at utøverne tok tog mellom byen. Tiltaket sparte miljøet for tur/retur flybilletter til Skandinavia for 120 utøvere + støtteapparat. Dette er et godt eksempel på forretningsmodellinnovasjon hvor Bislett Games tenker utover det isolerte arrangementet for å spare både miljø og penger. Mer komfotabelt, bedre for miljø og bedre for lommeboka!

(3) Utslippsfrie utøvere

Under stevnet i 2017 var det ikke bare publikum som ankom miljøvennlig. Utøverne ble nemlig innlosjert på et hotell like ved Oslo S og som en del av samarbeidet med Ruter ble det satt opp egne elektriske busser og trikker for å frakte utøvere fra hotellet til Bislett Stadion. Videre tok selvfølgelig utøverne flytog fra Gardemoen til hotellet og et samarbeid med Huyndai sørget for at deres nyeste elbiler ble brukt til all transport til og fra trening.

(4) Kildesortering og søppelplukking

Bislett Games inngikk et partnerskap med Norsk Gjenvinning, for å legge til rette for bedre gjenvinning på stadion. Norsk Gjenvinning utarbeidet egne avfallsbeholdere for arrangementet. I tillegg engasjerte også Norsk Gjenvinning Natur og Ungdom ungdommer som gikk rundt og plukket søppel under hele stevnet, for deretter å sortere det i ulike fraksjoner.

Nytt tiltak i 2018: Solcellepanel som dekker deler av energibehovet

Bislett Alliansen har innført ytterligere tiltak etter 2017-stevnet. I 2018 ble det for eksempel montert solcellepanel på taket av Bislett stadion, som første idrettsanlegg i Norge. Anlegget skal produsere 150 000 kWt per år, og med dette dekke 15% av anleggets energibehov. I tillegg til å være bra for miljøet er anskaffelsen av solcellepanel også en god investering. Med en garantert levertid på 20 år og en nedbetalingstid på rundt 12 år sikrer Bislett stadion seg gode og rimelige energikilder for fremtiden.

Et eksempel til etterfølgelse

Resultatet av tiltakene over var som nevnt at Bislett Games kuttet CO₂-utslipp med 39% fra 2016 til 2017. Videre økte de kildesorteringsgraden med 40% og reduserte transportutgifter med 30%, som følge av at de delte kostnaden for flybilletter med idrettstevnet i Stockholm. Bislett Games sin transformasjon er et godt eksempel på hvordan man kan tenke nytt rundt forretningsmodeller for å bedre både miljø og økonomi. Vridningen stevnet gjorde mot en mer alliansebasert forretningsmodell som inkluderer partnerskap og samarbeid viser hvordan man kan tenke bærekraftig rundt et idrettsarrangement og er et eksempel til etterfølgelse!

For å høre mer om bærekraft og idrett anbefaler jeg å lytte til episode 30 i podcasten “Bærekraftseventyr med Jørgensen & Pedersen” hvor de i tillegg til Bislett Games forteller om hvordan den engelske fotballklubben Forest Green Rovers har tatt grep for å bli mer bærekraftige.

Kilder

Podcasten “Bærekraftseventyret med Jørgensen & Pedersen”

https://www.theexplorer.no/slik-ble-oslo-bislett-games-gront/

https://www.fremtidensbygg.no/bislett-stadion-blir-enda-gronnere/

https://assets.simpleviewcms.com/simpleview/image/upload/v1/clients/norway/OSLO_BISLETT_GAMES_38e94e2b-d713-48b4-80a3-af2368dafd4b.pdf



Historien om da Bislett Games ble grønnere

Drypp er en lavterskel podcast fra Bekk. I denne episoden snakker vi om nudging.

3-Dec

Today's posts

Storybook: background change on prop change

An introduction to Burp Suite for web developers

VoiceOver for dummies

Historien om da Bislett Games ble grønnere

Er nudging egentlig manipulering? (Del 3 av 3)