Why Everyone Is Fighting About CSS/UX and JS

Why Everyone Is Fighting About CSS/UX and JS

Why Everyone Is Fighting About CSS/UX and JS

TL;DR: There isn’t one. There’s no short way to say any of this, yet one of the reasons you keep fighting is because you misunderstand what the fight is about. Read the damn article. Please and thank you.

I hate intros. Let’s just dive in and I’ll fill you in where pertinent.

The Great Divide

Chris Coiyer’s essay “The Great Divide” broke the frontend dev community, inviting no small amount of snarkiness and drama on Twitter and elsewhere. In case you haven’t read the piece (and you should), it revolves around an observed division between frontend developers who use primarily JavaScript-related technologies to do their job, and frontend developers for whom JavaScript is only one of the many technologies they employ to do their more UX-centric job. The thing that everyone seems to be missing is that this is not a prescriptive view of how frontend-land should work, but rather, a descriptive view derived from real-life interviews Chris and his buddy Dave Rupert have conducted on their podcast ShopTalk Show (dot com).

In other words, the split is real. Chris and Dave are merely putting it into words.

Chris concludes in “The Great Divide” that this rift in focus is happening because frontend-land has basically ballooned away from the old context where frontend development was comprised of merely styling server-rendered components. He notes that many frontend developers are using JavaScript in a way more closely reminiscent of usual MVC-style backend programming, while others are focusing on using a more rounded set of tools, and primarily CSS, to make the frontend experience better and more accessible, and thus, if we’re to helpfully describe the jobs frontend developers are being hired to do, we should be distinguishing between JS Engineers and UX Engineers.

Class Warfare

The discussion, though, immediately devolved into whether JS Engineers (I’ve gone ahead and accepted Chris’s proposed nomenclature) do more work than UX Engineers, and whether UX Engineers deserve to be paid the same as JS Engineers.

I should note: if you’ve seen the discussion online and the outline I’m presenting doesn’t jibe with your version of the events, that’s fine. The web is a big place, and it’s entirely possible you and I have witnessed two sides of the same coin. I’m trying to contextualize what I’ve seen with this narrative I’m building; I hope that’s OK with you.

Anyway, as a surprise to nobody in the industry, we have a recurring theme of derision and general snootiness toward other people’s tech, an attitude which developer Aurynn Shaw incisively terms “contempt culture”. In this case, we began to see this contempt target UX Engineers… and I’m certain a number of you reading this are now thinking “you mean designers, though, right? How is design also engineering?”

Because here’s the thing: even when no offense is meant, a lot of people don’t think UX Engineers are a thing, or that they’re glorified web designers at best. I observed this same attitude in the discussions surrounding the ShopTalk interviews of people who were primarily doing design-centric work. I’m not going to nag you one way or the other about whether this is correct; I’m merely pointing out that this is an attitude that people hold.

I’m likewise going to point out that people who take part in this culture of contempt often don’t mean harm with their dismissiveness (citation needed, sure, but it’s my writeup). People are not necessarily trying to be jerks when they dismiss Ruby for being slow, nor when they dismiss JavaScript for “having been written in ten days”, nor when they dismiss Java as tech for stuffy old farts, nor when they dismiss Elixir as a toy language, nor when they dismiss PHP for being PHP, nor when they dismiss web development as “not real programming”, nor when they dismiss UX Engineers as “not engineers”. Sometimes the snootiness is just abrasive opinion based on passive biased observation.

Not many are keen on defending this behavior, though, because to people specializing in the technologies being disdained, these opinions often constitute a direct attack. You can pin a huge asterisk on this point, but basically: turns out when a person feels other people are shitting on the thing that pays the bills, that person might (rightly or understandably, your choice) get defensive. And that’s precisely what we saw on Twitter.

Jen Simmons (W3C’s Working Group, Mozilla, Layout Land) describes the animosity toward UX Engineers as “class warfare”, and shot a number of choice spicy tweets toward a particular lean of JS Engineers:

I’m not doing you the (dis)favor of including any of the shittier tweets thereafter flung in Jen’s direction: it’s the web—use your imagination. On the more sensible side of things, though, this argument gets more nuanced. Dan Abramov (React, Redux, create-react-app) writes:

I’m obviously putting Dan in the JS Engineer camp because, you know, React. Then there are people who don’t fully identify with either of our new frontend designations. For example, Kyle Simpson (You Don’t Know JS, Frontend Masters) writes:

Among other opinions, though, you can see folks beginning to tire of the incessant barrage of negativity. Das Surma (Google, HTTP203) sums it up thusly (and I really wish I could say “Surma surmises” but it’s wrong diction):

Basic as HTML

By the time Surma makes this statement, though, we’ve lost all semblance of a common thread of discussion. It’s no longer about how frondend development is evolving, but about whether CSS and HTML are difficult as technologies, by way of defending people whose job might often go no further programming-wise (though in my case obviously not dismissing the wealth of education and experience required for UX Engineering).

This is where DHH, whose JavaScript framework Stimulus (and indeed his entire work on Rails) pivots on the idea that the web is becoming unnecessarily complex and we’re all better off focusing on making app development as straightforward as possible, gives us his unsurprisingly direct opinion that designing for the web ought to mean making HTML and CSS.

I’ll admit that I think the discussion did seem to have jumped the shark a bit around the time DHH said this (though in the name of defending UX Engineers, so I’m not faulting anyone)… I mean, isn’t the whole point of web technologies to be accessible? Shouldn’t we take pride on the fact that HTML and CSS are as easy as they are powerful?

Wait, what were we talking about?

Somewhere around this point, there seemed to be a shift in the atmosphere: a secondary argument began to emerge… and it is where I think everything became real convoluted, and it’s where people are having trouble reconciling what the hell is even going on with this whole UX vs. JS thing. Because while one side was fighting about whether UX is as cool as JS or whatever, an adjacent and more interesting talk began to make its way forward…

From my personal vantage, it started with DHH, who goes on to make a second appearance in this story with an observation about the state of web technologies, this time in a post about how View Source is on the decline and how we shouldn’t let it die.

(Here Tom Dale throws a spicy one at DHH; I’m including these for no better reason than it’s funny:)

Anyway, the idea that View Source is worth saving is pretty interesting, because I knew I couldn’t be the only one who thinks the original discussion is coalescing into a second and more nuanced conversation, namely: what is going on with the semantic web?

Wait, what? Who is even bringing up the semantic web?

Well, look, allow me a brief leap in context. In case you’re not familiar and didn’t bother reading the article I linked to just now, the semantic web was Sir Tim-Berners Lee’s idea for the future of the web, where web pages would be intelligible to humans as well as computers. To be realistic about it, though, the semantic web ultimately amounted to not much more than a bunch of schema tags that we were supposed to throw into our HTML to make it easier for Google to do their job, but while it’s fun to be cynical about it, let’s not forget the real reason the notion of the semantic web exists: the dream of a decentralized web where everyone owns their data and information silos aren’t a thing. More pertinently, though, the semantic web illustrates that, ever since the beginning of the web, there’s been the idea that the web is meant to be accessible and open.

Agree or disagree—not the point. I’m only claiming this is what is at the heart of this second round of the fight pitting JS against UX: whether or not JS is becoming bloat that is keeping the web from being accessible and open.

As you can probably tell, this also runs in contempt culture territory, because it implies that frontend Javascript technologies are bad for the web. And while I think this argument has more intellectual merit than whether UX engineers are less cool than JS engineers or whatever, as you might infer, things once again got pretty heated. For the sake of brevity, here’s a cursory list of the types of arguments being made:

  • Some people argue that using so much JS on the frontend is creating a scene where the fabric of the web that’s supposed to tie us together is no longer human-accessible (implication being that’s a problem).
  • Some people argue that it doesn’t matter because the web is only a delivery method for digital products.
  • Some people argue that JS frameworks make the web impractical or inaccessible for people with accessibility needs.
  • Some people argue that, while accessibility concerns are a valid criticism, it doesn’t mean that frameworks and best practices aren’t still evolving and this is a solvable problem.
  • Some people argue that frameworks are making people overly reliant on technologies not inherent to the web, and new developers are losing grasp of the possibilities of raw technologies.
  • Some people argue that frameworks help tame the complexity of the web and allow people to become productive faster.
  • Some people argue that frameworks are needlessly bulky and make the web experience worse for people with crappier internet.
  • Some people argue that’s also a solvable problem…

I wanted to back each of those sentiments with individual tweets expressing them concretely, but that’s a lot of work, so I’m using my editorial discretion and not doing any of that. However, you can go on Twitter or Dev.to or Medium and do your own research—people are expressing these opinions.

None of this is new

This whole fight about the state and future of the web has long been a simmering disturbance in the Force, usually felt by developers as no more than a dull background throb, but every once in a while coming back with a jolt. This is evidently one such time. As developers though, we recognize this recurring argument as the worn motif of old, morphed but yet familiar, and existing as long as our industry has existed: what role should computers play on the theme of our collective human experience?

…yeah, OK—I’ll tone down the philosophical flight of fancy.

But you know what I’m saying, at least. This is the industry that coined the hacker ethic, and free software, and open source, and Creative Commons, and “information wants to be free,” and the aforementioned semantic web, and shit, we could even take it as far back as Doug Engelbart’s notion of augmenting human intelligence with computers. All I’m saying is that developers have been known to entertain thoughts about the nature of the relationship between humans and computers.

So one good thing that’s emerged from this fight is a renewed vigor in visiting this topic from the point of view of the web: what do we want out of it? What do we want the web to look like? What’s worth preserving, and what’s expendable? What new features do we want to see? Who’s role is it to bring this all about? And what role will frontend engineers of every persuasion play?

Indeed, some of the people I’ve already mentioned in tweets have some pretty sharp observations on the future of the web. For example, in his excellent talk about the future of JavaScript, Kyle Simpson talks about whether we should let JavaScript become a mere compilation target (relevant bits at 27:50):

And in one of her great videos about modern CSS, Jen Simmons recommends to stop reaching for frameworks such as Bootstrap and to begin to use raw CSS and all its awesome features (relevant bits at 8:29):

And it couldn’t hurt to also watch this other excellent talk about why the semantic web as originally envisioned failed, and what we can do about it (summary slide thrown at around 1:09:24).

But maybe I digress…

Get to the point, author guy

Yeah, ok. My point is that there are a number of us (whoops, I guess I am choosing sides after all) who think the web should be a batteries-included, accessible platform for everyone, and that we should try hard to maintain its open and semantic nature. Some of us (me) even go so far as to buy into Sir Tim Berners-Lee’s idea that the web should be wholly decetralized and become solid scheming turtles all the way down or whatever. In this newly morphed discussion, let’s call this extreme side A.

Then there’s others who think that it doesn’t matter if the web is just a compilation target: that the web only matters insofar as people are using it for real business purposes, and if this is so, then our only concern should be to deliver a good experience to our product’s users, and this hippy-dippy notion of the web as a place where we can hold hands and view readable source be damned. Let’s call this extreme side B.

No doubt, most people will have opinions that fall somewhere along that continuum, rather than at either extreme. To conclude, though:

  1. Chris Coiyer’s “the Great Divide” is meant to be descriptive, not prescriptive, of the state of frontend development.
  2. The conversation of whether UX Engineers should be paid as much as JS Engineers is mired in misunderstanding of what the hell UX Engineers even do and whether the appellation is just a fancy new name for “designers”, a word which in this context seems to carry the weight of substantial misplaced disgust. I would stay away from this.
  3. The conversation among sensible developers centers more around whether it’s OK or not that we’re using so much JS framework magic on the frontend that it’s in fact evolving the industry—less like gradually leveling up a Pokémon, and more akin to forcing a Thunderstone-induced transformation on Pikachu. I think there are good points to be had either way, but everyone involved would probably benefit from being careful not to tread in contempt-culture territory. Not that you need me refereeing your shit, but you know, it’s my blog.
  4. Also, no surprises, but Twitter commenters who are not sensible can indeed be so much fodder for a hefty trash compactor.
  5. But fuck’em, because there’s a neat adult conversation to be had about the future of the web in spite of these people, so let’s, you know, get crackin’ on that front: let’s discuss the role of JS frameworks; let’s discuss whether Web Assembly is really going to replace JavaScript, and whether we want it to; let’s even discuss all the great new features available on the web… There’s a lot to talk about, valid interpretations of our future as web denizens and as developers, and we should definitely sit down and talk it out.

You go first, though.

How To Create a User Profile Card Using HTML, CSS and JavaScript

How To Create a User Profile Card Using HTML, CSS and JavaScript

Learn how to create a user profile card using HTML, CSS and JavaScript. Learn to create a quick and easy profile card with HTML, CSS and JavaScript

Learn how to create a user profile card using HTML, CSS and JavaScript

How to Retrieve full Profile of LinkedIn User using Javascript

How to Retrieve full Profile of LinkedIn User using Javascript

I am trying to retrieve the full profile (especially job history and educational qualifications) of a linkedin user via the Javascript (Fetch LinkedIn Data Using JavaScript)

Here we are fetching LinkedIn data like Username, Email and other fields using JavaScript SDK.

Here we have 2 workarounds.

  1. Configuration of linkedIn developer api
  2. Javascript Code to fetch records

Configuration of linkedIn developer api

In order to fetch records, first we need to create developer api in linkedin which will act as token/identity while fetching data from other linkedin accounts.

So to create api, navigate to https://linkedin.com/developer/apps and click on 'Create Application'.

After navigating, fill in details like name, description and other required fields and then submit.

As we submit, it will create Client ID and Client Secret shown below, which we will be using in our code while communicating to fetch records from other LinkedIn account.

Note: We need to provide localhost Url here under Oauth 2.0. I am using my localhost, but you can probably use other production URLs under Oauth 2.0 where your app is configured. It will make your api  consider the Url as trusted which fetching records.

Javascript Code to fetch records

For getting user details like first name, last name,User image can be written as,

<script type="text/javascript" src="https://platform.linkedin.com/in.js">  
    api_key: XXXXXXX //Client ID  
    onLoad: OnLinkedInFrameworkLoad //Method that will be called on page load  
    authorize: true  
</script>  
<script type="text/javascript">  
    function OnLinkedInFrameworkLoad() {  
        IN.Event.on(IN, "auth", OnLinkedInAuth);  
    }  
  
    function OnLinkedInAuth() {  
        IN.API.Profile("me").result(ShowProfileData);  
    }  
  
    function ShowProfileData(profiles) {  
        var member = profiles.values[0];  
        var id = member.id;  
        var firstName = member.firstName;  
        var lastName = member.lastName;  
        var photo = member.pictureUrl;  
        var headline = member.headline;  
        //use information captured above  
        var stringToBind = "<p>First Name: " + firstName + " <p/><p> Last Name: " + lastName + "<p/><p>User ID: " + id + " and Head Line Provided: " + headline + "<p/>"  
        document.getElementById('profiles').innerHTML = stringToBind;  
    }  
</script>    

Kindly note we need to include 'https://platform.linkedin.com/in.js' as src under script type as it will act on this Javascript SDK provided by Linkedin.

In the same way we can also fetch records of any organization with the companyid as keyword.

<head>  
    <script type="text/javascript" src="https://platform.linkedin.com/in.js">  
        api_key: XXXXXXX ////Client ID  
        onLoad: onLinkedInLoad  
        authorize: true  
    </script>  
</head>  
  
<body>  
    <div id="displayUpdates"></div>  
    <script type="text/javascript">  
        function onLinkedInLoad() {  
            IN.Event.on(IN, "auth", onLinkedInAuth);  
            console.log("On auth");  
        }  
  
        function onLinkedInAuth() {  
            var cpnyID = XXXXX; //the Company ID for which we want updates  
            IN.API.Raw("/companies/" + cpnyID + "/updates?event-type=status-update&start=0&count=10&format=json").result(displayCompanyUpdates);  
            console.log("After auth");  
        }  
  
        function displayCompanyUpdates(result) {  
            var div = document.getElementById("displayUpdates");  
            var el = "<ul>";  
            var resValues = result.values;  
            for (var i in resValues) {  
                var share = resValues[i].updateContent.companyStatusUpdate.share;  
                var isContent = share.content;  
                var isTitled = isContent,  
                    isLinked = isContent,  
                    isDescription = isContent,  
                    isThumbnail = isContent,  
                    isComment = isContent;  
                if (isTitled) {  
                    var title = isContent.title;  
                } else {  
                    var title = "News headline";  
                }  
                var comment = share.comment;  
                if (isLinked) {  
                    var link = isContent.shortenedUrl;  
                } else {  
                    var link = "#";  
                }  
                if (isDescription) {  
                    var description = isContent.description;  
                } else {  
                    var description = "No description";  
                }  
                /* 
                if (isThumbnailz) { 
                var thumbnailUrl = isContent.thumbnailUrl; 
                } else { 
                var thumbnailUrl = "http://placehold.it/60x60"; 
                } 
                */  
                if (share) {  
                    var content = "<a target='_blank' href=" + link + ">" + comment + "</a><br>";  
                    //el += "<li><img src='" + thumbnailUrl + "' alt=''>" + content + "</li>";  
                    el += "<li><div>" + content + "</div></li>";  
                }  
                console.log(share);  
            }  
            el += "</ul>";  
            document.getElementById("displayUpdates").innerHTML = el;  
        }  
    </script>  
</body>  

We can get multiple metadata while fetching records for any any organization. We can get company updates as shown below.

Conclusion

We can also fetch any company specific data like company job updates/post, total likes, comments, and number of views along with a lot of metadata we can fetch which I have shown below.

Thank you for reading !

Teaching CSS to JavaScripters

Teaching CSS to JavaScripters

Teaching CSS to JavaScripters. Some JavaScript professionals do not know CSS as well as they’d like to. In order to help them, PPK decided to write a book “CDD for JavaScripters”, where he will explain CSS in terms that JavaScripters will understand. But what are those terms? What kind of teaching would JavaScripters expect? Is there a CSS mental model that is different from a JavaScript mental model? Is CSS a programming language? Does that matter for teaching or learning CSS?

But what are those terms? What kind of teaching would JavaScripters expect? Is there a CSS mental model that is different from a JavaScript mental model? Is CSS a programming language? Does that matter for teaching or learning CSS?

PPK will give a brief outline of where he’s standing right now on these questions. The majority of the session will be used for a discussion with the audience. How should he teach CSS? Why is it so hard for some to understand it? What are the least-understood parts of CSS? We hope this discussion will yield valuable feedback.