...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 script that...
...script already a component? Let's go through a checklist: ✔️ Reliable invocation Using the HTML markup above should always result in the same behavior. Components are usually invoked when a...
Get an idea of the varying support for HTML/CSS/JavaScript features in different browsers like Chrome, Firefox, Internet Explorer, Edge, Safari. Look up a few modern features like "subgrid", ":has...
...it comes to feature support. "Transpilation" and "polyfills" are both techniques to use modern HTML and JavaScript features with old browsers Understand the differences between transpilation and polyfilling
In this exercise we take a closer look at how the HTML forms produced by Rails helpers, and how user input in those forms is sent over...
...that view. Right-click into your form and select Inspect. You should see the HTML generated by your view. It will look something like this: Again your actual HTML will...
You have the following HTML structure:
If you want to run Javascript code whenever someone clicks on a ...
..., you can do this in three different ways: function code(event...
We will implement a simplified version of Whac-A-Mole in HTML and Javascript. Start with this HTML structure: Now add some Javascript to implement the following...
...interactive behavior to our interfaces that would not be possible through declarative rules in HTML and CSS alone. Goals Know how to use the native DOM API to do the...
...elements, e.g. hiding them all Resources Introduction to the DOM: MDN article DOM Cheatsheet HTML attributes vs. DOM properties Exercises Playing with the DOM Visit https://makandracards.com/makandra
...strong parameters? (now part of Rails) How does Rails protect you against injecting unwanted HTML tags? How to prevent users from uploading malicious content? How do we organize our application...
...an attacker with bad intentions. Exercise: XSS in Rails Intentionally make MovieDB vulnerable to HTML code injection Boot up a second Rails application on another port (e.g. rails server -p...
...the component makes a request to /foo. The server is expected to respond with HTML containing an element with the same [id] (news in the example). The component parses the...
...a message like Error 404 while loading. When the server does not respond with HTML containing an element with matching [id], the inner text of will be replaced by a...
...Rails error messages for models and attributes Rails I18n scope for humanized attribute names HTML: Making browsers wrap long words Use the same translations for ActiveRecord and ActiveModel Organize large...
...I18n dictionary files in Rails 3+ I18n fallback locales Rails: Including HTML in your i18n locales Even for a single language, locales are useful Even if your application only supports...
...that parse data correctly, like the parser gem for Ruby code or Nokogiri for HTML. Regular expressions are a blunt tool that happens to be good enough much of the...
...time. Read Parsing Html The Cthulhu Way for more...
...implement basic e-mail styling (not required for the exercises below) Watch the talk "HTML E-Mails mit MJML 🔒" (slides) Visit Can I Email. Can you use flex styles in...
...this array in your tests. Discuss With your mentor, discuss the challenges of implementing HTML mails well...
...sites with their documentation, e.g.: http://unpoly.com https://lodash.com/ https://fontawesome.com/icons Web Platform (HTML, JavaScript, CSS) The best reference to look up information on HTML tags, JavaScript features or...
...it inline within the browser window. You can do so with either the [download] HTML attribute, or by sending a Content-Disposition header when delivering the image. When editing a...
...sees an image review, downloads image. Capybara needs the browser to show an interactive HTML page to be happy. Capybara methods will fail when the browser shows a "Save as...
...t need a Rails project for this. Just make a new folder with static HTML and CSS files. You can push it into a new repository in GitLab.
...peak too much into the actual HTML and CSS of makandracards.com. You are likely to have trouble deciding where to draw the line between the blocks. E.g. a structure could...
Frontend Frameworks like Unpoly Wysiwyg (What You See Is What You Get) HTML editors Datepickers Sliders Tooltips Dialogs ... We generally use the yarn add command to add third...
...code base will grow a collection of different file types including: Ruby (business logic) HTML fragments (layouts and views) CSS/Sass/SCSS (styles) JavaScript (client-side behavior) Static media (images, fonts, videos...
...a class WebsiteSizer that measures the number of characters in the given URL's HTML body: website_sizer = WebsiteSizer.new website_sizer.size_of('https://makandra.com') # => 27448 website_sizer.size_of('https://railslts.com') # => 2145364
...class should cache its results so subsequent calls for the same URLs return the HTML size instantly, without making an additional HTTP request. Write two versions of WebsiteSizer:
...the pros and cons of each approach with your mentor. Resources Images done right HTML Standard A collection of 300.000+ SVG Vectors and Icons MDN: Responsive Images img srcset und...
...a CSS class so you can apply styles. Some layout techniques may require more HTML elements than others, or a different nesting. You can generate paragraphs of random text on...
In a web application you often need to move data between the client (HTML, Javascript) and the server (Ruby, Rails). Step 1: Moving HTML snippets Add a find-as-you...
...search results should happen on the server. So the client is pulling snippets of HTML from the server. For the part of the implementation that lives in Javascript, implement a...
...s list of movies. How long does the movies index render now? Inspect the HTML generated by will_paginate. Customize the style so it matches the look of your MovieDB...
...tutorial doesn't show how to execute ruby-code that isn't rendered to HTML. To do this start a line with a dash ('-') instead of the equals-sign...
Best results in other decks
...wrap at a soft hyphen, it is turned into a regular hyphen character (‐). The HTML entity for a soft hyphen is ­. Use it to mark division opportunities in a...
...hyphenized. E.g. brand names like makandra should not be hyphenated. Option 3: wbr-tags HTML has a tag you can use to mark word wrap opportunities: Do nau dampf schiff...
...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 content inside their container...
...If you only have two lines of text in your page, your html and body elements will only be around 40 pixels high, regardless of the size of your browser...