How do you React?

– With JS! Geeky pun aside, if you’re one of the people that has not yet boarded the React train, or if you’re just interested in a brief introduction on what React is and why it’s awesome – keep reading!

So, let’s start with the what part, what is React?

React is a JavaScript library for building user interfaces, it’s often described as the V in the MVC structure. In case you’re not familiar with the MVC structure it is a software architecture pattern, Model View Controller, used to implement user interfaces. Where the Model should define the data structure, the View should define the display (UI) and the Controller should contain control and business logic, acting like a bridge between the model and the view.

React is used for building the view layer of web applications. And its winning concept is spelled: COMPONENTS.
A component is a module, think of it as a reusable piece of the UI, it is self-contained and isolated from the rest of the UI. Components are composable, meaning that a component can include other components. They take input, called “props” and return a React element that describes what should be displayed in the view.

How does it work?

Unlike other JS frameworks and libraries React does not manipulate the browser’s DOM (Document Object Model) directly, it uses a virtual DOM. The virtual DOM is a representation of the browser’s DOM that is kept in memory. When our data changes, the virtual DOM will be updated, and then React can determine what changes need to be done to the actual browser DOM. This makes updates to the UI really fast, and we can easily build a more dynamic UI.

To build the UI we will need to build components. That leads us to another corner stone of React, JSX. JSX is a custom JavaScript syntax, that allows HTML quoting. It is used by React to map elements to real HTML elements. A very simple JSX element:

It might be worth mentioning that it is not a requirement to use JSX, but it’s the preferred way of working.

Elements or components, what’s the difference? Elements are the smallest building blocks used in React, and they describe what you see on the screen. It is a plain object describing a component’s type and properties (props). Elements are what components are made of.

There are two types of components, functional and class components. A functional component looks like your typical JavaScript function:

Whereas the class component uses the ES6 class definition, and looks like this:

These are equivalent from a React point of view, and as you can see, both the functional and the class component returns a React element.

As mentioned earlier, components take input in form of properties, “props”, which are immutable, forcing components to act like pure functions with respect to their props. Acting like a pure function means that they can never change their input, and therefor they will always return the same result for the same inputs. This ensures that data will only flow one way. Put simply, props are options passed to the component to affect the way it is rendered.

The one-way data-binding might sound like a limitation, but in my opinion it’s not. Usually components are written to pass down properties to child components, and the child components can communicate with parents through callback functions bound to action events from, for example buttons.

Finally, how do we get our components to show up on the screen?
Let’s take your arbitrary index.html file and add some React magic to it.

In the example above, React and ReactDOM is in the head element of our page, so that they will be available as variables for us to use in the body element of the page. There is also a reference to babel-standalone, which is needed for transpiling ES6 into ES5 JavaScript, to have the page supported in older browsers.

The React application is defined in the body, and for now the application consists of only a single element, the <h1> How do you react?</h1>. The ReactDOM.render function will place this minimal application on the page. The function takes two arguments, the first is what to render, and the second is where to render it. So if the ReactDOM.render( , document.getElementById(‘app’)); part of the script above had been left out, nothing would have been rendered on the screen.

Although it is teeny-tiny, this piece of code qualifies as a React application. If you want to try it out for yourself, here’s something to fiddle with: https://jsfiddle.net/tgsw9ncm/

Let’s finishing this off, why is React is amazing?

• The virtual DOM enables great user experience.
• Plug n’ play developer experience with reusable components.
• One-way data flow simplifies A LOT! (And makes debugging super easy)
• Lightweight library – means you pick what other tools to add to the mixture.
• The syntax is easy to learn.
• It’s very testable…
• ..And it’s so much fun!

Tips for a Sustainable and Repeatable Accessibility Process

Have you ever had trouble using a digital product or service? Do you remember how it felt? Did you feel excluded, or just frustrated? In this introductory post I’ll discuss some of the roadblocks to creating accessible products while offering practical advice on how to overcome them.

What is Web Accessibility?

Web accessibility is about putting people first. It’s about digital equality and inclusion. It’s about understanding the diversity of users and designing for the needs of the widest range of people – including (but not limited to) those with situational, temporary, changing or permanent disabilities. It’s not about edge cases: designing for inclusion makes the design better for everyone. It’s not about “them”, it’s about us.

So, why’s the process of creating digital products so broken that we – often unintentionally – create exclusions, or simply make the products difficult to use? How can we try to fix the accessibility process?

The Cost of Accessibility

Accessibility does have a cost: it’s the cost of being professional and doing the work well. It’s operational cost, not a line item in a project. This of course requires initial training, awareness and organizational changes, but once your organization designs, develops, delivers and sells with accessibility in mind, the cost becomes much less. Retrofitting accessibility is expensive, so the trick is to start early and proactively integrate it into the work processes.

It’s important to understand that accessibility is neither a feature nor only a checklist. It’s a facet of quality user experience and as such, it can be a crucial differentiator and competitive advantage in the product or service you’re selling. By ensuring your product is accessible you might even avoid a lawsuit when the new European accessibility legislation becomes binding law.

Some Reasons for Poor Accessibility

• Myths
• Business decisions
• Lack of knowledge, experience, time or money
• Ignorance
• Vendor lock-in (authoring tools/3rd-party software)
• Culture or organizational structure

More specifically, I have identified the following areas of improvement:

1. Accessibility Audit
2. Evaluating by Principle
3. Prototyping with Idealized Static Content
4. Automated Checklist Accessibility
5. Awareness, Motivation and Training
6. Company Culture and Organizational Structure

Let’s break these down one by one.

1.     Accessibility Audit

If you ask a consultant to do an accessibility audit for you, the result is often just stating the obvious: the product has barriers to accessibility. Every product has. The key is to turn accessibility audit into an organizational learning experience by working closely with the client and suggesting better practices that ensure success. It’s important to try to reduce complexity around accessibility and help solve the root causes in a sustainable, predictable and actionable manner.

2.     Evaluating by Principle

It’s common to report accessibility issues by abstract principles – after all, that’s how the Web Content Accessibility Guidelines (WCAG) are organized. However, a better approach is to think holistically and in terms of accessible Design Patterns. After you learn to evaluate and identify problematic patterns, you can use better ones.

3.     Prototyping with Idealized Static Content

Prototypes and designs should offer various ways of consuming dynamic content. We all have different levels of vision, hearing, dexterity, and cognition. Even for “perfectly abled”, sometimes the situation is less than ideal: reading on your phone in bright sunlight, or when you’re constantly interrupted when you’re trying to complete a task.

4.     Automated Checklist Accessibility

Automated accessibility testing is important, but it only tells you if it finds failures in code. These technical failures highlight just a very small percentage of all possible issues that people can experience using the product. It doesn’t tell you if the product is actually usable. This means that you should always test with real users, in addition to automated testing.

5.     Awareness, Motivation and Training

Product design decisions may affect the targeted audience in unexpected ways. You just might not be aware of why, how and how much.That’s why it’s important to have a Change Agent or a Champion in the organization creating awareness and transparency around possible accessibility issues. However, accessibility should be owned by everyone involved.

Finding the right arguments for a change can be challenging. It may be better to show and not tell. It’s easier to understand things after you’ve experienced them firsthand. Whatever you do, make sure to challenge the status quo and address ignorance and myths with training and workshops.

6.     Company Culture and Organizational Structure

Accessibility requires structural and process changes and a holistic view of the organization as a living system. Much like a good Scrum Master helping remove impediments to the team’s progress, so can the team eliminate barriers to accessibility and usability. High-performance teams already know that the key to achieving results of this caliber requires a mindset switch.

Examples of Integrating Accessibility into Your Process

• Create and use accessibility Personas when researching and designing
• Create an inclusive Design System driven development workflow
• Add accessibility guidelines in your Definition of Done and make sure the team has a shared understanding of them

Conclusion

I hope this post has given you some new ideas on how to integrate web accessibility into your workflow. We’ve seen how a little bit of empathy, awareness and leading by example can go a long way towards improving the lives of people using your product or service and make a positive impact on bottom line.

Remember: all technology is assistive.

/Aki Kärkkäinen

Hur du skapar en unik upplevelse för din publik

Tänk dig att du jobbar som musiker i en symfoniorkester och att du just nu sitter i ett stort, fint konserthus. Salongen är fullsatt, inte en enda stol är ledig. Allt ljus pekar på orkestern så att du inte ser någonting när du tittar ut mot publiken. Du vet om att hela salongen är fylld med förväntansfulla personer. De flesta har bokat sina biljetter flera månader i förväg. En del har åkt flera timmar för att vara här just nu för att lyssna på ditt och dina kollegors framförande. En del personer kanske bor i en annan världsdel och detta är kanske enda gången de kommer befinna sig i just det här konserthuset och den enda gången de kommer att lyssna på dig. Deras upplevelse ligger just nu helt och hållet i dina och dina kollegors händer. Frågan är nu, hur skapar du en unik upplevelse och ett underbart minne för publiken?

När man framför musik är det viktigt att leda lyssnaren genom musikens olika uttryck för att skapa en unik upplevelse. Ibland går tempot fort och ibland går tempot långsamt. Ibland är uttrycket aggressivt och ibland sorgset. Ibland läskigt och ibland glädjefyllt. Musikerna varierar tempo, styrka och en mängd andra effekter för att skapa en unik upplevelse för sin publik. Om musikerna inte använder sig av dessa variationer blir musiken snabbt tråkig och vi som lyssnare tappar intresset. Det samma gäller när vi presenterar vårt budskap genom att tala till vår publik. Talar vi i samma tonläge och i samma tempo blir det vi säger aldrig intressant. Det spelar ingen roll om vi berättar något helt unikt och nytt om sättet vi säger det på får publiken att somna.

Led in din publik i något intressant

Operor och musikaler skapar oftast tidigt intresse för sin publik genom så kallade ouvertyrer. En ouvertyr är ett kort orkesterstycke som framförs i början av föreställningen och som sammanfattar de olika melodierna som kommer framföras i sin helhet senare i föreställningen. När vi talar till vår publik kan vi precis som i ouvertyren sammanfatta och rama in vår presentation genom att berätta om förutsättningarna och syftet i en agenda eller inledning. Genom att gå igenom förutsättningarna och syftet i början av presentationen har vi pekat ut riktningen i vilken vi kommer leda vår publik. Publiken får en chans att känna trygghet och kan lättare fokusera på syftet med presentationen.

Berättelser om människor

Ett sätt att leda in sin publik på något intressant vid till exempel en produktpresentation är att berätta om människorna bakom produkten istället för om själva produkten. Vilken kunskapsnivå din publik än besitter kan du alltid fånga dem i berättelser om människor. Här är ett exempel: “När Honda skapade en konceptbil för unga förare var genomsnittsåldern i utvecklingsteamet 27 år.” Genast har vi flyttat fokus från själva bilen till att människorna som utvecklade bilen var i samma ålder som sin målgrupp. Samtidigt har presentatören skapat sig ett bra utgångsläge där vi kan få lyssna till spännande berättelser om hur ett ungt utvecklingsteam hanterade sitt ansvarsfulla uppdrag. Dessa berättelser blir något som publiken mycket väl kommer att minnas, snarare än detaljerad fakta om bilens konstruktion.

Dynamik – gör skillnader i volym och tempo

Ju duktigare musiker du är desto större skillnad kan du göra mellan svagt och starkt, snabbt och långsamt och ändå vara tydlig. Det samma gäller när vi talar inför vår publik. Om vi sänker tempot och viskar till publiken när vi vill lyfta fram något viktigt, tvingas publiken skärpa sina sinnen och verkligen lyssna efter vad vi säger. På samma sätt kan du överraska publiken genom en kraftig ökning av både volym och tempo under andra delar för att skapa mer dynamik i ditt tal. Försök hitta en balans i dynamiken, det vill säga ett bra utgångsläge du kan öka ifrån och minska ifrån. Går du till exempel fullt ut i styrka och tempo i början kan det vara svårt att öka styrkan eller tempot senare.

Pauser är också musik

Pausen är troligtvis det mest kraftfulla verktyg du kan använda dig av för att skapa dynamik i ditt framträdande, vare sig du spelar eller talar. Det är oftast pauserna som gör musiken intressant. Anledningen är ganska enkel. Det är under pausen som ditt budskap sjunker in hos din publik. Om du pratar oavbrutet får publiken inte en chans att ta in budskapet och det fastnar helt enkelt inte lika bra. Presenterar du till exempel intressant fakta kan du absolut använda pausen för att låta faktan sjunka in hos publiken. Använd pausen på samma sätt när du väver in humor in ditt tal eller när du skapar en cliffhanger för din publik. Våga vänta på publikens reaktioner och kommunicera med din publik, så att de är med på tåget. På så sätt följer publiken lättare med i ditt resonemang och du har goda möjligheter att leda publiken vidare.

Håll lyssnaren intresserad

Några som är kända för att skriva lättlyssnad musik är Benny Andersson och Björn Ulvaeus. Lyssnaren lär sig temat tidigt tack vare en enkel ackordföljd och en text man kan känna igen sig i. När tredje eller ibland fjärde refrängen kommer känner sig lyssnaren trygg, man har ju hört samma refräng några gånger tidigare så allt är som det ska. Då, plötsligt läggs ett extra slag till i en takt, och en textrad byts ut mot en ny. Nu skärps våra sinnen igen. Kompositören och textförfattaren har fångat vårt intresse återigen. Försök ändra någon detalj i din framtoning när du talar till din publik. Har du till exempel stått upp hittills är det kanske dags att sätt sig i publiken eller på scenkanten för att komma närmare publiken. Skriver du till exempel upp nyttiga nyckelord på ett blädderblock och du är skicklig på att skriva med båda händerna kan du helt plötsligt byta hand. Eller varför inte plocka fram en banan och ta en fruktstund på scenen för att fylla på energin samtidigt som publiken hinner smälta ditt budskap. Gör någonting oväntat som bryter ditt mönster, som egentligen inte har så stor betydelse för ämnet du talar om, men som pånytt skapar nyfikenhet och intresse hos din publik.

Spela in dig själv

Vad är det för likhet mellan dig som talare och första violinisten i en symfoniorkester? Ni måste båda öva, öva, öva för att skapa en unik upplevelse och ett underbart minne för er publik. Ta alla tillfällen i akt; håll tal på bröllop och fester, håll föredrag på jobbet, men öva också framför spegeln hemma. Och viktigast av allt, spela in dig själv. Att spela in sig själv kan ibland kännas läskigt, men du hör precis det som din publik hör. Alla små stakningar och tveksamheter, alla “eehh” och “hmm”, alla otydliga fraser som du måste artikulera noggrannare och alla missljud som du gör men som du tror att ingen hör. Många orkestrar spelar in alla sina repetitioner för att senare kunna lyssna på hur det lät där publiken kommer sitta. På så vis hittar de ständigt nya områden i sitt framträdande som kan förbättras.

Vad kommer publiken ihåg?

Du sitter nu som musiker i symfoniorkestern och publikens applåder ekar i salongen efter att ni avslutat sista symfonin i konserten. Du känner dig nöjd med ditt och dina kollegors framträdande. Men vad kommer publiken att minnas av er konsert? Publikens främsta minne är alltid det sista numret och det sista ackordet, det sista de hör från konserten. Du kan genomföra en underbar konsert, men gör du en miss i slutet eller väljer musik som inte passar att avsluta med lämnar du din publik med en mindre fantastisk upplevelse. Spelar du fel i början har du tid att visa att det bara var något tillfälligt, publiken har lättare för att glömma missen och du kan ändå briljera i slutet. Du måste ge din publik något att minnas, en unik upplevelse och ett underbart minne att bära med sig, så förbered ett bra avslut på din presentation.

/Roger

Hur vet du om gräset är grönare på andra sidan?

Är du en av dessa upplever du med stor sannolikhet att jobbmöjligheterna radar upp sig. Trots det kanske du känner att de jobbförslag du får inte alltid är de som du hoppats på eller drömmer om? Eller låter det alldeles fantastiskt ända tills du börjar på det nya jobbet då det visar sig att den bild du fått inte riktigt stämmer? På dagens arbetsmarknad finns det fem lediga jobb för varje utvecklare – hur säkerställer du då att du väljer rätt och att gräset verkligen blir grönare på andra sidan?

Det finns idag otaliga tips, artiklar och inlägg skrivna som berör hur jobbsökande ska gå tillväga för att landa det första jobbet, hur de ska locka till sig rekryterarnas intresse, hur de ska sticka ut i mängden, ja listan är lång…du som är utvecklare är nog inte i så stort behov av dessa tips. Vi tror snarare att du önskar tips och råd för hur du navigerar i djungeln av jobbmöjligheter för att landa just ditt drömjobb!

Vi har därför listat våra fem vassaste tips på vad du kan göra för att säkerställa att gräset blir grönare på andra sidan.