A common task in web applications is to add client-side JavaScript behavior to existing HTML elements. For instance, in Working with the DOM you built a movie counter...
...JavaScript for both lists? For this your JavaScript must be abstract enough to not contain screen-specific references (such as selectors or URLs). Note that it's OK for the...
...implementation changes. The information below is validated for the current list of browsers we support. By default your html and body elements are only as high as the actual page...
...html and body elements will only be around 40 pixels high, regardless of the size of your browser window. You might be surprised by this, since setting a background on...
...handy when values have an implicit ordering. Let's imagine a record Issue(criticality: string). criticality should have the following three possible values: critical, medium, low. Sorting with Issue.all.order(criticality...
...critical' issue This happens because the database column backing the criticality attribute is a string and PG will use a collation to determine the result of comparisons. In most collations...
Most forms have a single submit button that will save the record when pressed. Sometimes a form needs additional submit buttons like "accept" or "reject". Such buttons usually attempt...
...a state transition while updating the record. To process a form with multiple buttons, your server-side code will need to know which button was pressed. To do so you...
We recommend configuring Selenium's unhandled prompt behavior to "ignore". When running tests in a real browser, we use Selenium. Each browser is controlled by a specific driver...
...e.g. Selenium::WebDriver::Chrome for Chrome. There is one quirk to all drivers (at least those following the W3C webdriver spec) that can be impractical: When any user prompt (like...
To make CSS rules dependent on the screen size, we use media queries: @media (max-width: 500px) { // rules for screen widths of 500px or smaller } Browsers will automatically enable and...
...disable the conditional rules as the screen width changes. To detect responsive breakpoints from JavaScript, you may use the global matchMedia() function. It is supported in all browsers:
...desktop users may encounter some weird quirks: Aside from allowing only digits and decimal separators, an "e" is also allowed (to allow scientific notation like "1e3"). Non-technical users will...
...be confused by this. Your server needs to understand that syntax. If it converts only digits (e.g. to_i in Ruby) you'll end up with wrong values (like...
Event delegation is a pattern where a container element has a single event listener that handles events for all descendants that match a CSS selector. This pattern was popularized by...
...element was clicked!") }) This technique has some advantages: When you have many descendants, you save time by only registering a single listener. When the descendants are changed dynamically via JavaScript...
When building an application that sends e-mails to users, you want to avoid those e-mails from being classified as spam. Most obvious scoring issues will not be relevant...
...to you because you are not a spammer. However, your application must do one thing by itself: When sending HTML e-mails, you should include a plain-text body or...
Both knapsack and parallel_tests have the option to split groups by historic execution time. The required logs for this might be outdated since you manually have to update and...
...consistently up to date with no extra effort locally and/or remotely. How to always split by execution logs Parallel Tests The parallel_tests gem has the option flag --group-by...
...has to decide whether and how to do authorization. The usual approaches are: Using send_file with a regular controller. This is secure, but potentially slow, especially for large collections...
...This is fast (because Apache can deliver assets without going through Rails), but less secure. When going with the "unguessable URL" approach, it is possible to somewhat increase security by...
...administrator before publication. Requirements Movies in MovieDB should have one of the following workflow states: draft pending published declined A movie always begins as a draft and then transitions through...
...as it's getting reviewed. This could be a typical state flow for a movie: stateDiagram-v2 [*] --> draft draft --> pending pending --> declined: Reason declined --> pending pending --> published Changes to the...
When you need test images, instead of using services like lorempixel or placehold.it you may generate test images yourself. Here we build a simple SVG image and wrap it into...
...a data: URI. All browsers support SVG, and you can easily adjust it yourself. Simply set it as an image's src attribute. JavaScript Simple solution in modern JavaScript, e.g...
When debugging slow SQL queries, it’s helpful to understand the database engine's query plan. Whenever you execute a declarative SQL query, the database generates a "query plan" that...
...outlines the exact steps the engine will take to execute the query. Most of the time, we don’t need to worry about this plan because SQL engines are highly...
To get a good overview about load, cpu frequency, temperature sensors, etc. we found s-tui quite useful. It's included in Ubuntu's default repositories: $ sudo apt install...
$ s-tui While it's possible to run s-tui as root for even more information and optionally also make use of stress for benchmarking, those methods did...
Goals Know how to use the native DOM API to do the following: Selecting all elements matching a given CSS selector Selecting all descendants of a given element matching...
...a given CSS selector Registering event listeners Changing an element's CSS classes Changing an element's attributes Making the same change to a list of elements, e.g. hiding them...
Although regular expression syntax is 99% interchangeable between languages, keep this in mind: By default, the dot character (".") does not match a line feed (newline, line break, "\n") in any...
...use the /s modifier in Ruby. It changes the RegExp to interpret text as Shift JIS encoded which you probably don't want. Javascript There is no modifier to make...
As developers we are dealing with many tasks every week. We need a system to organize ourselves. Goals After completing this card you should have: A to-do list that...
...never forget a task that a colleague or customer gives us. A habit of splitting any kind of task or project into actionable first steps. A habit of fully completing...
Browsers come with a set of built-in elements like or . When we need a new component not covered by that, we often build it from and tags. An alternative...
...Custom elements will be ignored for the purposes HTML validation, but their children will still be validated. Styling new elements Browsers will give unknown elements a default style of display...
...latest commits are not ready for production? Then use git merge master~n to skip the n-last commits. Tip A big advantage of merging vs. cherry-picking is that...
...in coding lies in crafting precise prompts. The main challenge is learning how to structure prompts effectively to guide the model toward accurate results. Further evidence supporting this is the...
...that Aider already writes ~70% of its own code (as of 02/2025). However, when starting out, your results may fall short of efficiently generating large portions of your code with...
...s presentation about asynchronous Javascript (there's also a German video presentation in our shared folder) Read about Promises on MDN and this visualization Read about async / await.
Read about canceling promises Error handling in event listeners Tasks, microtasks, queues and schedules Picking the Right Tool for Maneuvering JavaScript's Event Loop Browse the internet to answer...
...topic of this card. Read following chapters: (1) Security Principles (3.3) Sessions and Cookies (3.5) Same-Origin-Policy (4.2) Angriffsfläche / Attack Surface (4.3) Speicherung von Passwörtern (6) Kryptographische Grundlagen...
...Authentifikation (8) Authorization (9) Session Management Ohne (9.4) JSON Web Tokens (10) Federation / Single-Sign on (11) Serverseitige Angriffe (12) Clientseitige Angriffe (13) Clientseitige Schutzmaßnahmen Read through the most known...
...Repeat Yourself (or DRY). In Ruby on Rails we keep our code DRY by sharing behavior by using inheritance, modules, traits or partials. When you reuse behavior you want to...
...writing integration tests with Cucumber, where you need to express yourself with Gherkin and step definitions instead of Ruby classes and methods. But don't dispair! Below you will find...