Qwertyuiopia

Chomping culture down into little bits

Web methodology and technologies

As described in our design principles, we utilize a meticulously selected stack of technologies to develop sites and web applications that can be easily extended with new functionality, adapted to the ever-shifting best practices of the modern web, deployed anywhere, and for which we can ultimately be accountable in the long run.

Mobile-first responsive design

Your site's presentation is developed in SASS through the strategy of progressive enhancement, extensively using the CSS3 Grid and Flex elements for layout.

We forfeit the use of heavy frameworks commonly seen in last-gen web design, resulting in lightweight stylesheets with fast loading times, tiny memory footprints, and HTML that contains purely semantic elements.

This results in fast, functional pages on low capability devices, while people with additional browser features or faster internet access receive progressively enhanced versions depending on the capabilities of their devices.

Clean, semantic HTML

Aside from performance, our approach of targeting CSS to your specific layout ensures your content is free of clutter that could interfere with alternate user agents, such as accessibility tools and search engine crawlers.

By customizing your site's templates to your content, we make sure it is populated with appropriate microdata, helping search engines spot and extract information, increasing your visibility on relevant searches.

We strive for unobtrusive JavaScript through separation of content and functionality, making sure your site works (and looks good) even if the user agent does not allow it to run at all.

Accessibility first

We aim to fulfill the AAA criteria of W3C's current Web Content Accessibility Guidelines (WCAG). This includes:

  • Content-first source ordering
  • Clear color contrast for improved readability
  • Text reflow for comfortable reading under large magnification
  • Fully functional keyboard navigation
  • Alternate text for images and image-based controls
  • Transcriptions or sign-language alternatives for time-based media
  • Testing with screen readers, such as orca

The right hat for the right job

On the backend we use Python, Django and Wagtail.

We've worked for years with other common backends, primarily WordPress and Drupal in PHP, and our experience has led us to deeply agree with the statements in the zen of wagtail: Building and running a website involves multiple roles requiring different skill sets; A content creator needs an interface that's simple and easy to learn. A developer's job is easier to do in code.

This approach leads to systems that allow more flexibility to the programmer and in turn a simpler, hand-tailored user experience to administrators, editors and content creators, according to the rule of least power.

Compared to the common approach of building websites through forms and storing controller logic in the database, this allows the live databases to only contain data, which makes the auditing of a system's security much more straightforward.

The frontend is managed in JavaScript with gulp.js and yarn, in order to take advantage of the npm ecosystem.

In broad strokes, there are no tools that claim "You don't have to know X to do X" in our pipeline. Your project is built using professional industry tools, allowing its only constraints to be the ones specified by you and current best practices.

Source control

A git repository is the source of truth for your application's logic, deployment and auxiliary tooling.

  • Any changes made to your project's code can always be rolled back to an older version
  • The specific versions of your project's dependencies are tracked with poetry and yarn, ensuring reproducible builds and deployment of the current or any previous state in your project's history
  • Changes to your database's schema are also tracked through Django's migration mechanism
  • Code changes are atomic, always leaving your repository's main branch in a working state

All of the tools in our pipeline have been selected to enable this workflow.

Depending on the level of involvement you wish to assume in your project's development, the benefits of this process to you include:

  • Backups of your project include not only its current state, but every single previous state in its development
  • If we're managing your deployment, you or your staff may submit code changes for us to review before deployment to the live server
  • If you're managing your deployment yourself, you can be sure that everything you need to deploy is contained in the deliverable

Infrastructure as Code

We run a Debian server infrastructure managed with DebOps, on which we regularly contribute documentation and enhancements.

The infrastructure is comprised of a set of shared servers where projects with low resource requirements are hosted, as well as a few independent project-specific VPS instances, all managed with the same set of Infrastructure-as-Code (IaC) tools.

This approach allows for great scalability and independence, as any project can painlessly move from the shared infrastructure, where it can have time to grow with very little overhead, to its own set of servers or even to your own IT team to handle as they please.

We only host our own projects. This allows the infrastructure to be lean, secure and specifically optimized towards them. If a project moves out, it will need a code review to get back in (and we may charge you for it).

Build and deployment automation

We use Fabric and Invoke as both a high-level central entry point for all of your project's development tools and a self-documenting overview of its capabilities. This includes:

  • The frontend's build pipeline
  • Linters and unit tests that make up the project's CI pipeline
  • Access to your project's encfs encrypted secrets folder, containing sensitive information such as passwords and API keys
  • Python and npm dependency management
  • Backup management
  • Deployment to the development, staging or production environments

This way, if you decide to take over your project's development, the steps required to deploy and work with it are always documented and up-to-date, without requiring you to delve into each of the components involved before you get started or worry about having missed something.