...on hover, the following SASS is used (shorthand syntax): .element color: red transition: color .1s &:hover color: green This tells the browser "whenever the color of an .element changes, let...
...it take 1/10th of a second" and next "whenever an .element is hovered, make its text green". Multiple animated properties are comma-separated: .element color: red opacity: .9 transition: color...
...family: 'My variable font', Verdana, 'Helvetica Neue', Helvetica, sans-serif font-feature-settings: "kern" 1 ,"liga" 1, "calt" 1, "locl" 1 strong font-variation-settings: "wght" 700 font-weight: normal...
...you to reset font-weight on elements like , or :. strong font-variation-settings: "wdth" 100, "wght" 700 font-weight: normal // Ensure that the text is not fattened twice
...allowing you to keep your integration tests as DRY as your application code. Option 1: Call other step definitions This is Cucumbers default way of sharing short setup steps or...
...use to create great-looking screen designers when you're not a designer. Part 1 contains: Light comes from the sky Black and white first Double your whitespace
...async function helperFunction() { console.log("second") await backgroundTask() console.log("third") } // Stub function that resolves after 100 milliseconds, could be an API call function backgroundTask() { return new Promise((resolve) => setTimeout(resolve, 100...
...should wait for the remaining milliseconds until the next second starts. For example, at 13:23 and 441 milliseconds, atFullSecond(1) should wait for 559 milliseconds before triggering the callback...
end end end end Output: == AddUserToken: migrating ========================================= # ... == AddUserToken: now generating tokens ============================= -- For users #1 to #500 -> 1.542s -> 1 rows == AddUserToken: migrated (1.0003s...
...by allowlisting specific directories directories %w[app config public spec] allowed_js_reload_window = 10 # seconds last_js_change = Time.at(0) guard 'livereload', apply_css_live: true, host: '127.0.0.1' do...
...css)$)) do |match| # Any generated CSS changed, send its name to livereload-js match[1] end watch(%r(^app/assets/.*\.js$)) do |_match| # Any source Javascript changed. Assume the next changes...
...card contains some advice that has helped me to use icon fonts more comfortably. 1 Map the font's icon names into your application domain You don't want to...
...repeat a 100 times that the icon for a "post" is actually icon-comment-alt, or that cancel buttons should be decorated with icon-remove because the shape fits so...
...the configuration file of the shell your using instead): man() { LESS_TERMCAP_mb=$'\e'"[1;31m" \ LESS_TERMCAP_md=$'\e'"[1;31m" \ LESS_TERMCAP_me=$'\e'"[0m" \ LESS_TERMCAP_se...
LESS_TERMCAP_so=$'\e'"[1;44;33m" \ LESS_TERMCAP_ue=$'\e'"[0m" \ LESS_TERMCAP_us=$'\e'"[1;32m" \ command man...
...remove) certain lines through navigating in the changes and select the current line with 1 Split a chunk with...
...XSS]: (javascript:prompt(document.cookie)) [XSS](javascript:window.onerror=alert;throw%20document.cookie) [XSS](javascript://%0d%0aprompt(1)) [XSS](javascript://%0d%0aprompt(1);com) [XSS](javascript:window.onerror=alert;throw%20document.cookie) [XSS](javascript://%0d...
...20document.cookie) [XSS](data:text/html;base64,PHNjcmlwdD5hbGVydCgnWFNTJyk8L3NjcmlwdD4K) [XSS](vbscript:alert(document.domain)) [XSS](javascript:this;alert(1)) [XSS](javascript:this;alert(1)) [XSS](javascript:this;alert(1))
...and print the time Reference previously inspected elements (from the Elements panel) Variables $0, $1,...
...$n reference the nth-last inspected Element. $0 is the element that's currently selected...
...Is Dead, Long Live CSP! Ergebnis: ~ 95% vorhandener CSP-Policies bieten keinen Schutz Grund 1 Meist offensichtliche Fehlkonfiguration (Wildcards, unsichere Domains, object-src fehlt etc) Grund 2 Bibliothek mit JSONP...
...JavaScript reflection gadget", Bibliothek erlaubt einen Weg DOM-Inhalte zu Code zu machen. Beispiel. {{ 1000 - 1 }} Grund 4 User kann Javascript zur Domain hochladen. Wichtig: User darf nie Dateien hochladen...
...may need to re-run the test with a visible Chrome window (NO_HEADLESS=1). Note how you can even use the developer tools in the Selenium-controlled browser to...
...Twitter account just to follow accounts, you don't need to post. Hacker News 100: Tweeting Hacker News stories as soon as they reach 100 points. @IntentToShip: Early notifications when...
...multiple podcasts is Pocket Casts. It has free clients for Android and iOS. An 1€/month subscription gives you a web player. Working Draft Podcast INNOQ Podcast Geekstammtisch Podcast (with...
Given you have a strict CSP that only allows elements from your own domain: Content-Security-Policy: script-src 'self' This will block JavaScript handlers inlined as attribute into your HTML elements. Clicking on the following link will only log an error with a strict CSP: click me click me Solution 1: Move the handler into your JavaScript The recommended solution is to move the handler from the HTML to the allowed JavaScript file that we loaded via . In the example above we could invent a new [data-alert] attribute with the alert message: click me Then our JavaScript intercepts clicks on elements with that attribute: document.addEventListener('click', function(event) { let link = event.target.closest('[data-alert]') if (link) { let message = link.dataset.alert alert(message) event.preventDefault() } }) Solution 2: Allow that one handler in your CSP Some browsers allow the CSP directive script-src-attr. This lets you allow the hashes of actual JavaScript code. The SHA256 hash of alert('hello') is vIsp2avtxDy0157AryO+jEJVpLdmka7PI7o7C4q5ABE= (in Base64). We can allow this one event handlers like this: Content-Security-Policy: script-src 'self'; script-src-attr 'unsafe-hashes' 'sha256-vIsp2avtxDy0157AryO+jEJVpLdmka7PI7o7C4q5ABE=' Note the sha256- prefix. This event handler now works when clicked: click me But any other script will still be blocked: click me Dealing with legacy browsers Currently (November 2023) about 75% of browsers support script-src-attr. Here is a forward-looking compromise that many users use with new CSP features: Have a liberal CSP with old directives supported by all browsers Make your CSP stricter with new, more specific directives for browsers that support it The CSP spec supports that approach in that using newer, more specific directives disable older, more general features. In our case this means: For old browsers, allow all inline scripts For new browsers, disallow inline scripts but allow inline handlers with given hashes Here is a CSP directive that works like this: Content-Security-Policy: script-src 'self' 'unsafe-inline'; script-src-elem 'self'; script-src-attr 'unsafe-hashes' 'sha256-vIsp2avtxDy0157AryO+jEJVpLdmka7PI7o7C4q5ABE=' Old browsers will only use script-src. New browsers will use script-src-elem (for tags) and script-src-attr (for inline event handlers), which override the more liberal rules from script-src.
...simply issuing an extra query, like this: SELECT post.* FROM posts LIMIT 20 OFFSET 100; SELECT COUNT(*) FROM posts; This is fine most of the time. But rarely, you might...
...it needs to be. SELECT posts.* FROM (/* some complicated_subquery */) posts LIMIT 20 OFFSET 100; SELECT COUNT(*) FROM (/* some complicated subquery */) posts; Here the subquery had to run twice. (Although...
Exercise 1: XML On the start page of your Movie DB, show the title of a random movie that is coming soon to theaters. There's an XML feed for...
...to test it yourself. When you run your cucumber feature now with NO_HEADLESS=1 geordi cucumber, you should see a browser opening. Get someone to help you if this...
...invest more than a day to skim over the asset pipeline and webpacker. Rails 1-7 with the Asset Pipeline (Sprockets) The asset pipeline is Rails' original mechanism on how...
...practice we still need some form of minification etc. Don't spend more than 15 minutes looking at this approach as we're currently not using it. You should mainly...
...An OAuth-compatible request matcher Body with ignored order URI ignoring query parameter ordering 1 URI ignoring query parameter ordering 2 Tests with AJAX Using javascript in integration tests might...
Profit Example Imagine you expect General Kenobi to be in level 6 { level_1: { level_2: { level_3: { level_4: { level_5: { level_6: { general_kenobi: 'Hello there!' } } } } } } }
...actually in level 3. Then RSpec will output the diff this way: expected: {:level_1=>{:level_2=>{:level_3=>{:level_4=>{:level_5=>{:level_6=>{:general_kenobi=>"Hello there!"}}}}}}}
...use permit (or expect) to receive Strong Parameters, but strip extra parameters. # Better (option 1) redirect_to users_path(params.slice(:query, :encoding).permit(:query, :encoding)) # Better (option 2)
...upgrade to take a few days even the diff is quite small afterwards. Preparations 1. Find all libraries that are bundled with the asset pipeline. You can check the application.js...
...have to be copied to a private node package into the project. Introduce Webpacker 1. Install Webpacker 2. Check if css extraction is enabled in webpacker.yml: # Extract and emit a...