Home - martindubenet/wed-dev-design GitHub Wiki
Web Dev & Design
Welcome to my shared personnal notes. Navigate the sidebar menu to find all my precious documents. Search for keywords.
Single quotes ' vs ’ — or double quotes "…" vs “…” vs « … ».
Also my external link icon ⌝ and icon for navigating to sub-contents ➥. View more on my complete « Encoded Characters Cheatsheet » or get my « Lorem ipsum strings ». ❖
| type | space rule | cases | an example |
|---|---|---|---|
| chamelCase | No white spaces | First letter is lowercase, the following words starts by uppercases. | anExample |
| PascalCase | No white spaces | All words starts with uppercases, including the first letter. | AnExample |
| kebab-case | White spaces are replaced by hyphens (-) |
All lowercases. | an-example |
| snake_case | White spaces are replaced by underscores (_) |
All lowercases. | an_example |
[ Design wording ][ Front-end development ][ Roles wording ][ Agile ]
A method of coding CSS that uses multiple inline generic CSS class as values to render the element within an HTML style attribute. This method offers a fast integration time and the best page download performance at the cost of maintenance since each element needs to be edited one-by-one when change requests comes in.
This design system consist of (1) Atoms, (2) Molecules, (3) Organisms, (4) Templates and (5) Pages concurrently working together to create effective interface design systems. †Atomic design is not a linear process, but rather a mental model to help us think of our UIs (User Interfaces) as both a cohesive whole and a collection of parts at the same time.
A discipline involves designing (static) infographics or interactive charts out of analysis by data-driven journalisme (DDJ)⌝ to emphasis on details that humans can’t see without filtering out a large volume of data.
This is a creative methodology inspired by the Agile Scrum approach of breaking down big stories as small doable tasks. Design Sprint on the other end is oriented toward isolating the fondamental problem to solve using ideas that are developed and prototyped as a team within a limited time frame (usually five days).
Modular collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications.
Pattern Library, sometime referred to as Style Guide, is a collection of the assets and components you use to build a digital product.
On the 2010 Mobile World Congress (00:15), Eric Schmidt, the CEO of Google put forward that designers should follow the «mobile first» rule in (web) product design.
This rule is about starting your thinking and wireframing by designing for the more limited and most popular devices, small phone's viewports. Then gradually enhance the user's experience (UX) at different break-points by adding variations of models from the most limited device to the most free and interactive devices with (in this case) larger viewports.
Means that when we design a product, first we build a version for the relatively lower browser (like that on a mobile phone). This version includes the most basic functions & features. After that, we tend to the advanced version for a tablet or PC, which is created by adding interactions, more complicated effects, etc. on the basic version for a better user experience.
A window or frame within a content that contains or includes a duplicated part of content or code (known as partials in .NET, modules, widgets or content fragment).
A reusable page layout. A matrix for an internet layout. Not to be confused with the <template>⌝ HTML tag.
The acronym of «User Interface» which is the graphical aspect of a digital product.
The acronym of «User Experience» which is the global aspect that the end client perceive when using a (digital, virtual or real) product. This discipline encompasses the UI. It is the equivalence of Customer Experience (CX)⌝ but for the internet context.
A framework developed by Google for building user interfaces (UI).
- AngularJS is a JavaScript based framework released in 2010. We can refer to it as «Angular version 1».
- Angular is a TypeScript based web framework. Launch in 2016 as «Angular 2+», contrary to the name may suggest it was a complete make-over of the previous version. This as it’s own UI library, Angular Material Design, branched from Google’s Material Design ⌝
A popular naming convention (nomenclature) for CSS class names.
A style sheet language used for describing the user interface (UI) of a document written in a markup language such as HTML. The CSS specifications are maintained by the World Wide Web Consortium (W3C).
Officially known as «ECMAScript 2015», ECMAScript 6 (ES6) was the second major revision to JavaScript language, much more efficient than its 2009 (ES5) predecessor. Relying on an object-oriented (OOJS)⌝ approach it results in faster execution of the scripts, therefor a better user experience (UX).
Since 2015, every month of June a major ECMAScript version† is published.
Traditional « CMS » (Content Management System) platforms hold content in predefined web templates that blend content presentation with back-end structure. On the other hand, «headless CMS» separates the front-end from the back-end and stores content separately. The latter makes it easier to deliver content on various channels.
The only scripted language that can be executed on a user’s device. It is universally supported by all browsers on any devices, from computers to mobile phones. JavaScript evolved as frameworks (NodeJS/npm, Angular, React, VueJS, etc…) on which the modern (mobile and web) applications are executed. Alongside HTML and CSS, JavaScript is one of the core technologies of the World Wide Web. (TypeScript is a superset of the JavaScript language)
Created in 2006, is a small and feature-rich library that simplify JavaScript coding learning curve. Victim of its success with junior developers it has fallen out of favor with industry professionals. Since ECMAScript 2015⌝ is supported by modern browsers jQuery usage faded out. This library should now be avoided as much as possible for performance concerns.
The acronym of «Modal Viewer Controller». This model or “pattern” is commonly used by developers for coding modern user interfaces. It provides the fundamental pieces for designing a program and/or a web application using object-oriented programming, since the different models, views, and controllers can be treated as objects and reused within an application. MVC was first described way back in 1979, before the "www" era when there was no concept of web applications. The architecture used today for web applications is an adaptation of the original pattern.
An application designed to build JavaScript based scalable network applications. It can be executed locally on a developers workstation or remotly on a server via a task manager like Jenkins. It is the cornerstone of modern JavaScript libraries and frameworks.
A free open-sourced JavaScript framework for building user interfaces (UI) components. It is maintained by Facebook and a community of individual developers and companies. React is only concerned with state management and rendering that state to the DOM, so creating React applications usually requires the use of additional libraries for routing, as well as certain client-side functionality.
Tailwind CSS⌝ is an open source CSS framework. The main feature of this library is that, unlike other CSS frameworks like Bootstrap, it does not provide a series of predefined classes for elements such as buttons or tables.
Developed by Google, TypeScript a typed programming language that relies on NodeJS to run a build process that translate it to JavaScript.
A term commonly used within a JavaScript context to describe the removal of dead code.
A JavaScript framework developed Evan You in 2013 after he experienced coding with AngularJS for building user interfaces (UI). Known to have a less steep learning curve than the other two main JavaScript frameworks (React and Angular), Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is easy to pick up and integrate with other libraries or existing projects.
Vuetify is a Vue.js open-source framework, supported by the Vue community, that helps to create beautiful and responsive user interfaces. It includes a wide variety of customizable and reusable components based on (Google) Material Design System for building modern web and mobile applications.
«Software As A Service» is a software licensing and delivery model in which software is licensed on a subscription basis and is centrally hosted. SaaS is also known as on-demand software, web-based software, web-hosted software or simply Webapp.
A preprocessor scripting language for style sheets that requires to be compiled into CSS files to be interpreted by the web browsers.
A web application or website that interacts with the user by dynamically rewriting parts of the current page with new data from the web server whithout the user noticing a reload of the entire page. The goal is faster transitions that make a better user experience (UX) by feeling faster therefore more natural.
An open-source JavaScript module bundler based on (and requiring) the Node app. It is used to define rules, plugins, etc…, for a project allowing web developers to use a modular approach for their web application development.
MVP : Minimum Viable Product.
Common work flow examples
See every arrows (➥) below as nodes of communication where ideas and comments are exchange. The more you have, the better the end product gets.
-
Full design and development cycle
Owner ➥ Info.Arch. ➥ Analyst programmer ➥ UX ➥ Back-end dev ➥ Copywriter ➥ UI design ➥ Front-end dev ➥ Webmaster ➥ 📦 -
Development cycle (excluding design)
Owner ➥ Info.Arch. ➥ Analyst programmer ➥ UX ➥ Back-end dev ➥ Front-end dev ➥ Webmaster ➥ 📦 -
Design cycle (simplified development)
Owner ➥ Info.Arch. ➥ Copywriter ➥ UX ➥ Copywriter ➥ UI design ➥ Integrator ➥ Webmaster ➥ 📦 -
Small Wordpress (for comparaison purpose)
Owner ➥ Theme designer ➥ Webmaster ➥ 📦
A creative role mastering visual communications to better render contents to users. With the ability to capture and digest people’s desires and style trends, they tends to be sociable individuals.
- UX designer is an ergonomic and/or cognitive science specialist that layouts how a user is expected to navigate within an entire web site or application. After validating with front-end dev team lead they usually render grayed out mockups with specifications and requirements for developpers. They tends to be rational cartesian minded designers.
- UI designer is a graphic designer for the web. They know design trends and use them to render layouts that are pleasent for the users. They create mood-boards, icons, SVG images, decide the proper fonts and apply color themes and graphical styles to images.
- Animation designer, or Motion designer, is a niche that sites between UX and UI. They used to be about Flash ActionScript⌝ specialists but since mobiles devices killed that technologie their expertise evolved to ecmascript (JavaScript) for rendering animated SVG images across all devices and browsers
A web developer is mastering scripted languages for developing coded solutions and managing datas issues. All developper’s scripts are subject to unitary testing for solution stability. Algorithms been the backbone of all scripts, web developers tends to be cartesian minded people.
- Back-end developer masters scripting languages for/from database that gets executed on a server (back-end). Languages like .Net, Java, PHP, Python or Perl among others.
- Front-end developer is above all a «developper». As so he also masters scripting languages but the ones that rendered by the servers (front-end), frameworks like among others NodeJS/npm, Angular, React or VueJS, that executes on the users devices.
An analytic person that first digest owner’s (customers and/or product owners) needs then goes through all contents to regroup them. From there they validate the value of those contents with metrics📊 from Search Engin Specialists (SEO) specialists⌝ and UX Designers. Usually, if the owner has not done it yet, they define user personas that helps the design team and copywriter to visualize their customers and their needs.
Person that translate UI mockups in HTML markup for the web browsers. They are W3C accessibility (WCAG ⌝) and organic SEO specialist. They master HTML, CSS/Sass for responsive layout accros different devices screens, SVG image coding, and use JavaScript for UI (jQuery) but rely on a Front-end devs to set-up JavaScript frameworks for them to use in a solution. Their JavaScript lines do NOT pass by unitary testing as long as it does not put the solution stability on jeopardy.
A popular lean method⌝ used to implement agile and DevOps software development based on a board view⌝. Work is pulled as capacity permits, rather than work being pushed into the process when requested (like Scrum). This makes this method more appropriate in a make-over project where a new UX or logic is implemented in an already existing application resulting in an unstable solution during the development process.
A lightweight, iterative and incremental method for developing, delivering, and sustaining complex products. It is designed to break a small team’s work into goals that can be completed within time-boxed iterations, called «Sprints», no longer than one month and most commonly two weeks where developers democratically assign poker points to each task based on its complexity and their own personnal ability to tackle it. Refer to the official Glossary of Scrum Terms available on Scrum.org⌝ for more info.
† : This definition was copy/pasted from Wikipedia