After waiting years for sprockets to support this we were very happy to see that sprockets 4 officially added support (thanks ), but then when trying to upgrade we noticed there's actually no way to use it in production... (without brittle hacks mentioned above).

Now that source maps in production by default seems to be the official Rails position, can we expect some movement on this?

If you don't mind putting the sourcemap url in the minified JS

minified_url: MINIFIED_URL_PATH, source_map: HTTP::FormData::File.new(LOCAL_SOURCEMAP_PATH)

//= link application.js.map

While I understand orgs wanting not to expose their unminified source, it's security through obscurity (meaning it's not adding any real security).

The only place I can find it is in the sprockets-rails gem. javascript_include_tag calls this: def find_debug_asset(path) if asset = find_asset(path, pipeline: :debug) raise_unless_precompiled_asset asset.logical_path.sub('.debug', '') asset end end

If I'm understanding correctly, this means that Sprockets only adds sourceMappingURL when assets are dynamically compiled.

I'd be happy to open a PR for this, but I'm not sure exactly what code needs to change. default_source_map.rb and source_map_utils.rb seem like candidates, but I'd appreciate guidance

It seems I'm in the minority, and Sprockets seems to already pretty far along in the beta process, so at most we should add a configuration option to enable it for static compilation.

modifying my build process to send the source map to my error logging service, Rollbar

If the bug is still there I think that it is better if it is open so others can find it if they run into the same issue.

Closing this because it's obviously not going to get fixed and it's cluttering my open issues

To achieve this, we created a small Compressor which wraps the Uglifier compressor and links the source maps so they are written to disk.

Here's the four case: foo.js Load/Require dependencies Concatenate dependencies foo.js.map Load foo.js Currently grabs metadata[:map] from asset to build an asset, need to move that generation somewhere else to accomplish de-coupling map generation foo.debug.js Load foo.js Load foo.js.map Add comment to end of foo.js with path to foo.js.map foo.source.js The raw file on disk, the map file will need to point to source files.

Now I just need to figure out how to decouple this ball of mud

The way we do it currently is by calling load from inside of load, via different "pipelines" and processors which is quite elegant and completely impossible to work with.

Certainly appreciate the work you've done!

If I can find some time, maybe I can help pitch in somehow.

I'm kinda stuck at the moment, going around in circles. Everything is really heavily coupled. I would like to get to the point where no load is called from within processors, but i'm not sure if that's possible. Currently the API and the caching strategies are fighting me at every step of the way. I have a branch where i'm hacking through some refactoring, no light at the end of the tunnel yet though :(

That should work, but it's a non-trivial change.

For the $$$ question, nothing comes to mind. These problems i'm hitting up against are larger than a contractor could solve in a few hours of work (which would be hundreds/thousands of dollars).

Right now major changes require a deep and broad understanding of the codebase and how things get done.

If a company really wanted to invest, I would prefer they dedicated an employee for X hours a week for Y months than money.

Money could be good if it is spent to provide some of the above things. Money on it's own is hard because then it means I would have to spend time book-keeping and managing instead of programming.

Triaging issues, reproducing bugs, fixing reported bugs are all helpful.

Yeah, can we pay money to make this go faster? Serious question.

I think that's fine, but I also don't particularly care about @mikeycgto's desire to not have the linking comment be present in the minified JS.

Progress is slow though. I want to change how assets are loaded, the current implementation of "pipelines" is challenging to work with.

Our team is also looking into generating source maps in production/staging for error reporting (via Airbrake).

I want source map in prod too (for error tracking, same as @vincentwoo)

Could you explain your use case in a bit more detail? How are you using source maps without source map comments? Are you uploading them to a bug tracker?

richard.schneeman+no-recruiters@gmail.com

Married to Ruby, literally.

Puma core. Sprockets Core. Top 50 Rails contributors. Married to Ruby, literally.

Sentry supports un-minifying JavaScript via Source Maps. This lets you view source code context obtained from stack traces in their original untransformed form, which is particularly useful for debugging minified code (e.g. UglifyJS), or transpiled code from a higher-level language (e.g. TypeScript, ES6).

Abbreviations used in bookkeeping

The term taxon was first used in 1926 by Adolf Meyer-Abich for animal groups, as a backformation from the word Taxonomy

Accounting or Accountancy is the measurement, processing, and communication of financial and non financial information about economic entities[1][2] such as businesses and corporations. Accounting, which has been called the "language of business",[3] measures the results of an organization's economic activities and conveys this information to a variety of users, including investors, creditors, management, and regulators.

The terms "accounting" and "financial reporting" are often used as synonyms.

The recording of financial transactions, so that summaries of the financials may be presented in financial reports, is known as bookkeeping, of which double-entry bookkeeping is the most common system.

I've been able to find three alternatives ahead of the bugfix

I confirm that since version 4.0.0 of sprockets, a single line directive is breaking the source maps and the javascript debugging system by consequence.

still compiles everything into single CSS/JS files

Reopening #162

Yes, it's true that it returns a single file, but with the more robust caching in 4.0 it works well enough in my experience.

The semantic has changed a bit as far as I understand. You need to select a pipeline in debug mode.

In order to move forwards with this issue I'll need an example app that reproduces the behavior (https://www.codetriage.com/example_app).

let me know if you've got more issues (by opening a new issue)

it's super hard to test master because i have no idea which gems need to be updated. is there a guide on how to take a rails 4.2 project to master sprockets without everything mysteriously exploding? ill try to make a repro case but its hard to tell where to even start

There's no release of sprockets 4 so there's nothing to revert. Master branch is a WIP. I would recommend using Sprockets 3.

Source maps are on my radar, but i'm playing catchup. See: #124 (comment) for a rundown of where we are right now. Source maps are a pretty big project, it's not li

I'm trying to get official time at work to dedicate to source maps, and haven't made much progress there.

But we're definitely sticking with the source map idea rather than the current (Rails 3/4) behavior of including all JS and CSS files separately while in development?

Still broken, @cannikin. Nobody's on board to investigate, much less fix it. Please do dig in

Any updates on this one? It makes debugging JS and CSS in the web inspector next to impossible when you can't get any help finding the offending code in your own source files.

Cross-posted to https://stackoverflow.com/questions/58632880/error-while-fetching-an-original-source-in-new-rails-app-sprockets-4-firefox, in hopes of reaching more people.

Sprockets 4.0 treats the ".js.erb" as the extension now. There's no mime type registered to that extension. You need to do: register_mime_type 'application/javascript+ruby', extensions: ['.js.erb']

Opal is a Ruby to JavaScript source-to-source compiler. It comes packed with the Ruby corelib you know and love. It is both fast as a runtime and small in its footprint.

Notice that the HTML elements (BUTTON, DIV, etc.) are in CAPS. We know this is bending the standard Ruby style rules slightly, but we think it reads better this way.

n this example, we are calling a function on FaaStRuby which is a new serverless platform built for Ruby developers.

we used `backticks` to jump into native Javascript to use moment.js

Hyperstack gives you full access to the entire universe of JavaScript libraries and components directly within your Ruby code.Everything you can do in JavaScript is simple to do in Ruby; this includes passing parameters between Ruby and JavaScript and even passing Ruby methods as JavaScript callbacks.There is no need to learn JavaScript, all you need to understand is how to bridge between JS and Ruby.

Think JavaScript is your only option for the front-end? Think again. Hyperstack is a Ruby DSL, compiled by Opal, bundled by Webpack, powered by React.

multi-paradigm: functional, imperative

I decided a couple of months ago to look for a way to work on faastRuby full time. Today is October 1st, 2019, and I am excited to announce that I am bringing faastRuby into Shopify. As I start this next chapter, I will be taking down all faastRuby servers. 

I decided a couple of months ago to look for a way to work on faastRuby full time. Today is October 1st, 2019, and I am excited to announce that I am bringing faastRuby into Shopify.

What happens to my functions? I encourage you to migrate your workloads to OpenFaaS.

On the “lows” side, I’d say the worst thing was the impact of not being present enough for my family. I was working a full-time job and doing faastRuby on nights and weekends. Here I want to give a big shout out to my wife. She supported me through this and didn’t cut my head off in the process.

One day last August 2018, I stumbled upon an online petition that sparked my curiosity - We Want Serverless Ruby. At that time, none of the major cloud providers had first-class support for Ruby in their serverless products. There were ~1400 devs signing that petition, and I wondered if there was something about Ruby that made it unsuitable for FaaS. I decided to roll the sleeves and start building what would be the first PoC of faastRuby.

The core of OpenFaaS is an independent open-source project originally created by Alex Ellis in 2016. It is now being built and shaped by a growing community of contributors and end-users.

OpenFaaS is hosted by OpenFaaS Ltd (registration: 11076587), a company which also offers commercial services, homepage sponsorships, and support.

OpenFaaS® makes it easy for developers to deploy event-driven functions and microservices to Kubernetes without repetitive, boiler-plate coding.

Emscripten is an LLVM/Clang-based compiler that compiles C and C++ source code to WebAssembly

The Unity, Godot, and Unreal game engines provide an export option to HTML5, utilizing Emscripten.

Examples include Closure Compiler, CoffeeScript, Dart, Haxe, TypeScript and Emscripten.

A source-to-source translator, source-to-source compiler (S2S compiler), transcompiler, or transpiler[1] is a type of translator that takes the source code of a program written in a programming language as its input and produces an equivalent source code in the same or a different programming language.

Better yet, send them a link to this page to help them understand why and how to make an example app:

If you end up finding and fixing a bug in your code, consider re-reading the documentation and seeing if that behavior of the library is unclear. Consider sending a documentation PR.

If you want the issue fixed as fast as possible, then you should try to help the maintainers as much as possible. Make an example app! Even if it takes extra time for you, it will ultimately lead to your issues getting fixed faster.

Finally: Give a link to the example app to a maintainer (usually through an issue).

An example app is an application that is designed to reproduce a bug or demonstrate an issue.

Before a bug can be fixed, it has to be understood and reproduced. For every issue, a maintainer gets, they have to decipher what was supposed to happen and then spend minutes or hours piecing together their reproduction. Usually, they can’t get it right, so they have to ask for clarification. This back-and-forth process takes lots of energy and wastes everyone’s time. Instead, it’s better to provide an example app from the beginning. At the end of the day, would you rather maintainers spend their time making example apps or fixing issues?

I don't myself understand what's going on, it clearly has something to do with source maps, but may also have to do with other sprockets changes.

sprockets 4 makes Chrome browser identification of SCSS css lines _worse_

But maybe few are still using sprockets at all, for JS or (S)CSS anymore? Hard to say.

But yeah, I'm not sure how you would determine which was the "recommended way" really. I don't see anything in Rails docs saying either way.

But last I have seen comments from DHH, he considered webpack(er) recommended for JS, but Sprockets still the preferred solution for (S)CSS.

I don't really understand what's going on. Clearly source maps have something to do with it -- a source map feature that doesn't handle SCSS very well, apparently.

If I can't do something to change the sprockets 4 debugging experience I am seeing, I am going to probably downgrade back to sprockets 3. I am finding it impossible to develop CSS the ways I am used to.

Is there a PR to... something? sassc-rails? That would make the patch not necessary? (I don't know if there's any good way to monkey-patch that in, I think you have to fork? So some change seems required...) Should the defaults be different somehow? This is very difficult to figure out.

I am not sure this whole ecosystem currently has much maintainers unfortunately. :( Pick your reaction

Is there a PR to... something? sassc-rails?

I'm not sure about all consequences of my change and this is very complex.

I agree about lack of maintenance. It's probably because people use more and more Webpack.

But I can describe a simple reproduction case to demonstrate the developer inconvenience (can provide a sample app if it's helpful).

What is the difference between equation and formula?

I'd say an equation is anything with an equals sign in it; a formula is an equation of the form A= stuffA= stuffA={\rm\ stuff} where AAA does not appear among the stuff on the right side.

I think that over time the distinction is lost. My math teacher, 35 years ago stated "formulas are used in chemistry, in math we have equations". To this day, the word 'formula' in math seems wrong, but I'd accept it's used commonly.

An equation is meant to be solved, that is, there are some unknowns. A formula is meant to be evaluated, that is, you replace all variables in it with values and get the value of the formula.

The key idea is that the equation captures not just the ingredients of the formula, but also the relationship between the different ingredients.

In your case, "mpg = distance/gallons" is best understood as "a formula in the form of an equation", which means that in this instance the two words are interchangeable.

An equation is any expression with an equals sign, so your example is by definition an equation. Equations appear frequently in mathematics because mathematicians love to use equal signs. A formula is a set of instructions for creating a desired result. Non-mathematical examples include such things as chemical formulas (two H and one O make H2O), or the formula for Coca-Cola (which is just a list of ingredients). You can argue that these examples are not equations, in the sense that hydrogen and oxygen are not "equal" to water, yet you can use them to make water.

Using these attributes will show validation errors, or limit what the user can enter into an <input>.

Rails still encourages you to dump all validation errors at the top of a form, which is lulzy in this age of touchy UX

The HTML5 form validation techniques in this post only work on the front end. Someone could turn off JavaScript and still submit jank data to a form with the tightest JS form validation.To be clear, you should still do validation on the server.

With these JavaScript techniques, the display of server validation errors could be a lot simpler if you expect most of your users to have JS enabled. For example, Rails still encourages you to dump all validation errors at the top of a form, which is lulzy in this age of touchy UX. But you could do that minimal thing with server errors, then rely on HTML5 validation to provide a good user experience for the vast majority of your users.

Dave Rupert has a good solution that uses an input's invalid event. Instead of using the :invalid pseudo selector, he adds a CSS class to the input when it becomes invalid. We will extend this approach by removing the CSS class when the element becomes valid again.

Last week, I shared how to check if an input is empty with CSS. Today, let’s talk about the same thing, but with JavaScript.

We don’t want to invalidate the input if the user removes all text. They may need a moment to think, but the invalidated state sets off an unnecessary alarm.

The valueAsNumber IDL attribute represents the value of the element, interpreted as a number. On getting, if the valueAsNumber attribute does not apply, as defined for the input element's type attribute's current state, then return a Not-a-Number (NaN) value.

Your expectations are reasonable considering the property name, but

The :empty selector refers only to child nodes, not input values. [value=""] does work; but only for the initial state. This is because a node's value attribute (that CSS sees), is not the same as the node's value property (Changed by the user or DOM javascript, and submitted as form data).

If you would like to make “empty” include values that consist of spaces only, you can add the attribute pattern=.*\S.*.

You can use the :placeholder-shown pseudo class. Technically a placeholder is required, but you can use a space instead.

Semantically this is wrong.

There is (currently) no CSS selector for detecting directly whether an input control has a nonempty value, so we need to do it indirectly, as described above.

Generally, CSS selectors refer to markup or, in some cases, to element properties as set with scripting (client-side JavaScript), rather than user actions. For example, :empty matches element with empty content in markup; all input elements are unavoidably empty in this sense. The selector [value=""] tests whether the element has the value attribute in markup and has the empty string as its value. And :checked and :indeterminate are similar things. They are not affected by actual user input.

The selector [value=""] tests whether the element has the value attribute in markup and has the empty string as its value.

One word for each aspect of this game. Story - N/A.Gameplay - Excellent.Graphics - Minimal.Sound - Splendid.Music - Elegant.Overall - Delightful.

If you plan on using a gamepad with big picture mode I made a config that works perfectly so check it out.

There are myriads of platformers around, it's an oversaturated market, and just like industrial designer Karim Rashid said about there being no excuse by this point to make an uncomfortable chair, there's no excuse by this point to make a boring patformer.

Positively indicate valid input values Let users know a field has been entered correctly. The browser can give us this information through the :valid CSS selector:

it does require some CSS trickery to get everything just right

Assuming wonderful support, this is how the logic would play out…

But there doesn’t appear to be a simple way to test for :placeholder-shown.

You can’t use @supports for selectors, only property/values (e.g. @supports (display: flex))

We’re not really using placeholder in our demo, but a value of a single space works:

:placeholder-shown is super useful for us here! It’s basically the secret selector for testing if an input currently has a value or not.

You’d think :empty would be it, but it’s not. That’s for matching things like <p></p>… container elements with nothing inside them. Inputs are no-content elements already.

Sub trick!

You don’t need to do any tricky cursor stuff, because it’s all semantically wired up already.

always use real <label for="correct_input"> elements. Just that alone is a UX consideration all too many forms fail on

Placeholders are suggestions for valid input, like putting “Tulsa” in an input labeled “City”.

I’d say if the form is short and an obvious pattern (like sign up or log in), you could use the placeholder visual pattern, but use real labels instead.

If they click the area taken up by the label, it will activate the input. If they click the input, it will activate the input. Both correct.

You can do and impressive amount of form validation with just HTML attributes. You can make the user experience pretty clean and clear with CSS selectors.

When you code in a semantic way, you basically give meaning to the data you're describing.

Usually when people are talking about code being semantically correct, they're referring to the code that accurately describes something.

HTML elements have meaning. "Semantically correct" means that your elements mean what they are supposed to.

Semantically correct usage of elements means that you use them for what they are meant to be used for.

It means that you're calling something what it actually is.

Another example: a list (<ul> or <ol>) should generally be used to group similar items (<li>). You could use a div for the group and a <span> for each item, and style each span to be on a separate line with a bullet point, and it might look the way you want. But "this is a list" conveys more information.

The classic example is that if something is a table, it should contain rows and columns of data. To use that for layout is semantically incorrect - you're saying "this is a table" when it's not.

Browsers can correctly apply your CSS (Cascading Style Sheets), describing how each type of content should look. You can offer alternative styles, or users can use their own; as long as you've labeled your elements semantically, rules like "I want headlines to be huge" will be usable.

Screen readers for the blind can help them fill out a form more easily if the logical sections are broken into fieldsets with one legend for each one. A blind user can hear the legend text and decide, "oh, I can skip this section," just as a sighted user might do by reading it.

Mobile phones can switch to a numeric keyboard when they see a form input of type="tel" (for telephone numbers).

Knowing what your elements are lets browsers use sensible defaults for how they should look and behave. This means you have less customization work to do and are more likely to get consistent results in different browsers.

All of this semantic labeling helps machines parse your content, which helps users.

Fits the ideal behind HTML HTML stands for "HyperText Markup Language"; its purpose is to mark up, or label, your content. The more accurately you mark it up, the better. New elements are being introduced in HTML5 to more accurately label common web page parts, such as headers and footers.

Yes, but honestly, and no offense intended, but I don't see the harm in these type questions, nor why some people are offended when they are asked. If I owed a website, I wouldn't mind it because it just creates more pages that can be indexed. I see it as helping the website. But, I did look and didn't see a simple answer. Again, no offense is intended. I've just never understood the complaints.

Currently, there is no way to style those little validation tooltips.

Brass tacks:

Demos; Style 01, Style 02, Style 03 and the code.

The source for all versions is available on GitHub.

My collection (this isn’t all of it) grows at a comical pace.

Having them in a physical form is good for my soul.

This is a non-exhaustive list of other things I love;

Spending an hour digging through bins in a record store is one of my favorite ways to clear my head. And then spend too much money.

Designing and writing code get me money so I can have food so they get a lot of my attention.

I get asked a lot which I want to do more; design or write code? I answer, “yes.”

Being a better designer makes me a better engineer and being a better engineer makes me a better designer.

;

;

There are plenty of words and acronyms you can put in front of “Designer”. Product, Web, Graphic, UX, UI, IA, etc. The lines between each are blurry, and the titles go in and out of fashion. Depending on the project and team I’m working alongside, I practice them all to varying degrees. I prefer to call myself; “A Designer.”

the client form validation is the one I like a lot, because, for example, by adding required attribute to an input, I don’t need to write any additional JavaScript to warn a user, when the user submits a form without filling out the required fields

There are numerous user interface state pseudo-classes. You’ve probably already known :hover, :active etc. According to this W3C Candidate Doc, there are additional pseudo-classes defined, such as :valid, invalid, in-range, out-of-range, required, optional, read-only and read-write.

Website: <input type="url" name="website" required pattern="https?://.+"> Now our input box will only accept text starting with http:// or https:// and at least one additional character

The document.evaluate() method evaluates an XPATH query/expression. So you can pass XPATH expressions there, traverse into the HTML document and locate the desired element.

Array.from(document.querySelectorAll('div')) .find(el => el.textContent === 'SomeText, text continues.');

The TreeWalker API gives you only the #text Nodes, and then you do what you want with them.

You could also use the NodeIterator API, but TreeWalker is faster

All those 'modern' and 'super-modern' querySelectorAll("*") need to process all nodes and do string comparisons on every node.

the fastest solution because the main workload is done by the Browser Engine NOT the JavaScript Engine

[...document.querySelectorAll("*")].filter(e => e.childNodes && [...e.childNodes].find(n => n.nodeValue?.match("❤")))

Super modern one-line approach with optional chaining operator

Possibly use Array.prototype.filter.call instead of allocating a new array.

function contains(selector, text) { var elements = document.querySelectorAll(selector); return [].filter.call(elements, function(element){ return RegExp(text).test(element.textContent); }); }

This only works provided each element has a label. It will not work if you put the attribute on the element itself, because <input> elements cannot have :after pseudo elements.

label:after { content: attr(data-invalid); ... }

This question was asked over a year ago, but it's a good question that I recently encountered as well...

var applicationForm = document.getElementById("applicationForm"); if (applicationForm.checkValidity()) { applicationForm.submit(); } else { applicationForm.reportValidity(); }

:placeholder-shown

Does there exist a Unicode new-line, which I could copy-paste? (PLEASE NOTE, I DON'T ASK ABOUT THE CODE, like U+000D or whatever is considered as new line. I want the "copyable" output, like the above space (which I have put above in brackets and can be copied). So, if there is, please paste it in your answer, so I could copy it, like you copy the unicode space above from brackets.