Catégorie : Notes

Things any programmer should know #3

  • Understand as much as you can the project you work on
  • A common web-based development architecture:
    • local development and unit testing on the developer’s machine
    • development server where manual or automated integration testing is done
    • staging server where the QA team and the users do acceptance tests
    • production server
  • If something is broken, it should not be fixed on production.
  • There is no guru. There should be an expert willing to develop other experts.

Things any programmer should know #2

  • Don’t ignore an error!It will raise problems in the future.
  • Write comments only when the code doesn’t or can’t say something.
  • Technical exceptions will be handled by the application framework while the business domain exceptions by the client code.
  • Deploy often.
  • Challenge yourself by doing what you are not good at (deliberate practice).

Things any programmer should know #1

  1. Create shared library only when you know the context. Sometimes, while decreasing the number of line of code in the system the number of dependencies is increased.
  2. Care for the team’s code. Make it a little bit better than when you checked it out.
  3. Debug your own code before rushing to blame others.
  4. Choose the right mix of tools:
    1. avoid architectural mistmatch (some tools are good only in some specific contexts)
    2. avoid using too many
    3. should be easy to configure
    4. licensing terms matter
    5. start by using only the tools that are absolutely necessary

MVC Architecture

Model – the application data and behaviour in terms of its problem domain. It is independent of the UI. (Domain Model – POCO).

View – the HTML markup we want to display to the user.

Controller – it is responsible for handling a HTTP request. It does some things.

Router – selects the right controller. Based on some rules the router knows that a request should be handled by a method of a class (called an action) with the same name as the request. So, an action in a controller is responsable for handling a request.

Undoing a commit in git

When forgot something on a commit:

git reset –soft HEAD^ — move to the commit one before the HEAD.

undo the last commit and move everything from that commit back into staging.

git commit –amend -m « modify something and add it to the last commit »

git reset –hard HEAD^ -undo last commit and all changes

git reset –hard HEAD^^ – undo last two commits and all changes

 

 

 

Unstaging files in git

When staging files that I didn’t mean to stage:

(use git reset HEAD (file) … to unstage)

git reset HEAD filename

HEAD – the last commit on the current branch

The file has its modifications.

Reset the file to its last commit.

git checkout — filename

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

 

Notes for a clear, simple and consistent navigation of a website

People won’t use your website if they can’t find their way around it. Looking for something on a website and looking for something in the real world is basically the same. When we are exploring the website it feels like moving around in a physical space but the experience is missing many of the cues of rely in a real life. There is no sense of scale, no sense of direction and no sense of location. This way we should always remember to the user the conceptual hierarchy of the website and retrace his steps. So, web navigation had better be good!

The navigation of the website should have two main purposes:

  1. help us find whatever it is we are looking for
  2. tell us where we are

The navigation of the website should also be able to tell us how to use the site.

There is a set of navigation elements that appear on every page of a site, except forms like paying, subscribing, giving feedback.This is called persistent navigation.

The persistent navigation includes elements like:

  • Logo or SiteId – the highest thing in the logical hierarchy of the site.
  • Sections – the top level of the site’s hierarchy
  • Utilites – links to important elements of the site that aren’t really part of the content hierarchy
  • Home button
  • A way to search
  • Design more then two sub-levels of navigation if needed
  • Page names –  not enough to highlight the selected work into the page layout. The name should be prominent.
  • You are here! sign. It needs to stand out and not too-subtle.
  • Breadcrumbs –  useful in large sites with a deep hierarchy

 

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.

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.