Étiquette : web development

ASP.NET Core Authorization

Authentication – when you ask someone who they are and you get its identity.

Authorization – decide what identity is able to do.

You can authenticate but you don’t have to authorize.

You can authorize without having any authentication.

Two main HTTP codes in web security:

401 – Unauthorized – You are not authenticated

403 – Forbidden – You are authenticated but you don’t have access

ASP.NET Authorization workshop

 

 

Testing the usability of a website

A member of a web-design team is also a web-user and sometimes it turns out to be very hard to check the personal preferences at the door. Plus, there is also a professional perspective on what constitutes good Web design. Another level of complexity to any discussion of usability issue is given by the necessary promises made for attracting capital.

Avoid religious debate – discussion where people are expressing strongly held personal beliefs about things that can’t be proven. They rarely result in anyone involved changing his or her point of view.

Test and watch people carefully as they try to figure out what you have designed and how to use it.

A focus group is a small group of people talking about things, like their opinions about products, past experiences and reactions to new concepts. A focus group is useful for getting a sampling of users’ feelings and opinions. It is best used in the planning stages of a project. It can help you finding out whether you are building the right product.

Usability tests are about watching one user trying to do something on a website so you can detect and fix things that confuses or frustrate him.  Usability tests should be used through the entire process.

  • watch other people trying to use your site because after you have worked on a site you know too much.
  • test early in the project
  • a small number of users, not necessarily to be in the audience
  • list the three most serious usability problems you noticed
  • decide what to fix – you should always start by fixing the most serious problems first

Do-It yourself usability testing

 

How to design for scanning

There are some important things we can do to make sure that the users see and understand as much of what they need to know and of what you want them to know:

  • Conventions. Follow the existing conventions and standardized design patterns
    • Where things should be located on a page (logo and primary navigation example)
    • How things work (common metaphor for similar sites)
    • How things look (standardize appearance for many elements)
  • Create visual hierarchies. The relationships between the things on the pages should be obvious:
    • which things are most important – (the more important something is, the more prominent it is)
    • which things are similar – (things that are related logically should be related visually)
    • which things are part of other things – « nest » things to show what’s part of what.
  • Break pages up into clearly defined areas – it allows users to decide quickly which areas of the page to focus on
  • Make it obvious what is clickable – looking for the next thing to click is what people are doing on the web
  • Eliminate distractions – avoid visual noise like
    • shouting
    • disorganisation
    • clutter – get rid of anything that’s not making a real contribution
  • Format content support scanning – help users to find what they are searching for in your text.
    • use plenty of headings
    • keep paragraphs short
    • use bulleted lists
    • highlight key terms

Be creative as you want but as long you make sure it’s still usable.

Choose clarity over consistency.

Learn more about making content scannable by reading Ginny Redish’s book Letting Go of the Words.

What is JSX (Javascript XML)

JSX is the markup used when building React applications.

JSX is another way to write Javascript, even it looks like HTML. A transpile step was added to transform it in Javascript because browser don’t understand JSX natively. Ultimately, the Javascript code becomes HTML.

It can be mixed with Javascript. Code written within curly braces is interpreted as literal Javascript.

Web usability guidelines

The most important thing if you want to make sure that your application or your site is easy to use is « Don’t make me think« . A Web page should be self-evident, obvious and self-explanatory.

There is a big difference between how we think people use websites and how they actually use them – glancing each new page, scanning some of the text, click on the first link that catches their interest. So, three facts about real-world Web use:

  1. Users don’t read pages, they scan them. They are on a mission, they don’t have to read everything.
  2. They don’t make optimal choices. They choose the first reasonable option. They are usually in a hurry, there is not much of a penalty for guessing wrong and weighing options may not improve the changes.
  3. They don’t figure out how things work. Not for lack of intelligence but for lack of caring. They forge ahead and muddle through.

Basic concepts of React.js

React is a Javascript library for building user interfaces. It is considered the « V » from the MVC pattern.
React was created to solve one problem: building large applications with data that changes over time.
A React application is build in terms of components. Javascript classes are used when declaring React components.
A component must extend the React.Component class and it must have a render method.
The Virtual DOM is an in-memory representation of the real DOM. It is generated by the components before any changes are made to the page. It happens between the render function being called and displaying of elements. . So, there are two steps:

  1. The render method of the component returns some markup but it is not the final HTML yet. It is an in-memory representation.
  2. The HTML is displayed in the browser.

This makes react faster. It is called diffing and it allows React to minimize changes as a result of user actions.

ReactDOM.Render method is called to render components to a web page.

Angular components

Angular is build up on components.

The starting poing of an Angular app is the bootstrapping of the initial component. Angular runs on a component-tree model. After the first component is loaded it will look in that component HTML view and verifies if it has any nested components. If yes, Angular will find matches and will run the corresponded code.

A component in Angular is used to render a portion of HTML and provide functionality to that portion. It uses a component class where the application logic is added.

For every component in Angular you can specify an HTML template. Angular provides template syntax to wire the templates to DOM events.

Angular 2

Angular – a framework for dynamic web application. It was released in 2011 and it is maintained by Google and open-source community. It helps you organize the HTML, CSS and Javascript code.

Angular 2 is faster that Angular 1.

Angular 2 uses components instead of controlers and scope in Angular 1.

Data binding is more intuitive.

Creating custom directives is more simpler.

Services are now a class.

Other small improvements.

You can use Javascript with Angular 2 but not all browsers support the newest version of Javascript.

Workaround – transpile – write code the code in latest version of Javascript and transpile it into Javascript compatible with all browsers.

  • Babel
  • Typescript – superset of Javascript (including the ES2015 features) developed by Microsoft. It adds type checking and object oriented features.