Hire Adrian Heine Copyright 2012–2017 Adrian Heine <mail@adrianheine.de> Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. [SERVER] A standard, express-based Node.js web site. Since the site is completely static it could have as well been rendered to HTML, CSS and client-side JS once. The content is split into five tabs. Each tab is represented by an object with the following properties: * title: The single-word title of the tab * longTitle: The title of the HTML document representing the tab * (subs: An array of similar objects, representing subpages) subpages may have additional properties. Subpages are defined in separate JS files in the `subs` directory: If no file corresponding to a tab exists, the tab has no subpages. HTML is generated from Pug templates in the `views` directory. Every tab has an own template file, there is a layout file and tabs with subpages have an additional `tab_subs.pug` file for the subpage content rendering. This setup works best where the whole tab content is visible on subpages as well. The response sent to a client heavily depends on the passed `Accept` header: * If the `Accept` header includes standard HTML, the full page with layout and tab template is rendered. If a subpage has been requested, the tab template has to include and render the subpage template appropriatly. * If the `Accept` header does not include HTML, but includes `application/prs.de.adrianlang.hire.tab`, the tab template is rendered without the layout. * Finally, if the `Accept` header does not include HTML, but `application/prs.de.adrianlang.hire.focus`, the tab’s subpage template is directly rendered, without layout or tab template. Accordingly, the response sets `Vary: Accept` and the `Content-Type` as requested. [CLIENT CODE] The client-side JavaScript is only active in modern browsers with HTML5’s history manipulation API available. In such environments, it augments links such that internal navigation works without page reloads by cleverly retrieving the needed page content via XHR and inserting it in-place. document location, title and browsing history are handled correctly. The script makes use of the aforementioned personal mime types to specify which representation of a tab or subpage it needs. No library is used for DOM manipulation or XHR. [HTML] The HTML uses HTML5‘s new, semantic elements. It’s quite straight-forward and contains no additional markup for styling purposes. [STYLE] I’m using Less for a SMACCS-like modularization. The CSS targets current browsers: IE > 7, Firefox > 3, Opera > 9.0. Limiting techniques are box-sizing, inline-block and media queries. background-size does not work in IE < 9, but it’s a minor issue. The layout is a grid with 4 columns, each having a spacing of 0.8333% of the page width to the left and right. The grid has a padding of 10% on the left and right, which leaves an area of 80% for the content. Vertically, the elements are aligned on 0.5em rows. The maximum width of the whole page is 48em.