<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>Forem: Anton Frattaroli</title>
    <description>The latest articles on Forem by Anton Frattaroli (@antonfrattaroli).</description>
    <link>https://forem.com/antonfrattaroli</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F826%2F6cd54f8d69eecaa954b4e9878f3115ec.png</url>
      <title>Forem: Anton Frattaroli</title>
      <link>https://forem.com/antonfrattaroli</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://forem.com/feed/antonfrattaroli"/>
    <language>en</language>
    <item>
      <title>A Different Kind of War</title>
      <dc:creator>Anton Frattaroli</dc:creator>
      <pubDate>Mon, 28 Jan 2019 20:05:53 +0000</pubDate>
      <link>https://forem.com/antonfrattaroli/a-different-kind-of-war-2653</link>
      <guid>https://forem.com/antonfrattaroli/a-different-kind-of-war-2653</guid>
      <description>&lt;p&gt;I came across the following twitter thread and wanted to respond, but it's a bit more complex than can fit in a tweet:&lt;/p&gt;


&lt;blockquote class="ltag__twitter-tweet"&gt;

  &lt;div class="ltag__twitter-tweet__main"&gt;
    &lt;div class="ltag__twitter-tweet__header"&gt;
      &lt;img class="ltag__twitter-tweet__profile-image" src="https://res.cloudinary.com/practicaldev/image/fetch/s--gA_e-uTZ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://pbs.twimg.com/profile_images/1020051236148609024/KDyskyLR_normal.jpg" alt="Jen Simmons profile image"&gt;
      &lt;div class="ltag__twitter-tweet__full-name"&gt;
        Jen Simmons
      &lt;/div&gt;
      &lt;div class="ltag__twitter-tweet__username"&gt;
        &lt;a class="comment-mentioned-user" href="https://dev.to/jensimmons"&gt;@jensimmons&lt;/a&gt;

      &lt;/div&gt;
      &lt;div class="ltag__twitter-tweet__twitter-logo"&gt;
        &lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--P4t6ys1m--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://practicaldev-herokuapp-com.freetls.fastly.net/assets/twitter-f95605061196010f91e64806688390eb1a4dbc9e913682e043eb8b1e06ca484f.svg" alt="twitter logo"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="ltag__twitter-tweet__body"&gt;
      It’s beginning to feel like the HTML-CSS-JS vs JS-JS-JS war is a class war. If your project has a budget of millions, “of course” you should use a complex build process and a JavaScript framework that handles everything (according to the folks who believe this). The pressure…
    &lt;/div&gt;
    &lt;div class="ltag__twitter-tweet__date"&gt;
      19:48 PM - 27 Jan 2019
    &lt;/div&gt;


    &lt;div class="ltag__twitter-tweet__actions"&gt;
      &lt;a href="https://twitter.com/intent/tweet?in_reply_to=1089611136666927106" class="ltag__twitter-tweet__actions__button"&gt;
        &lt;img src="/assets/twitter-reply-action.svg" alt="Twitter reply action"&gt;
      &lt;/a&gt;
      &lt;a href="https://twitter.com/intent/retweet?tweet_id=1089611136666927106" class="ltag__twitter-tweet__actions__button"&gt;
        &lt;img src="/assets/twitter-retweet-action.svg" alt="Twitter retweet action"&gt;
      &lt;/a&gt;
      291
      &lt;a href="https://twitter.com/intent/like?tweet_id=1089611136666927106" class="ltag__twitter-tweet__actions__button"&gt;
        &lt;img src="/assets/twitter-like-action.svg" alt="Twitter like action"&gt;
      &lt;/a&gt;
      910
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/blockquote&gt;
&lt;br&gt;
&lt;blockquote class="ltag__twitter-tweet"&gt;

  &lt;div class="ltag__twitter-tweet__main"&gt;
    &lt;div class="ltag__twitter-tweet__header"&gt;
      &lt;img class="ltag__twitter-tweet__profile-image" src="https://res.cloudinary.com/practicaldev/image/fetch/s--gA_e-uTZ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://pbs.twimg.com/profile_images/1020051236148609024/KDyskyLR_normal.jpg" alt="Jen Simmons profile image"&gt;
      &lt;div class="ltag__twitter-tweet__full-name"&gt;
        Jen Simmons
      &lt;/div&gt;
      &lt;div class="ltag__twitter-tweet__username"&gt;
        &lt;a class="comment-mentioned-user" href="https://dev.to/jensimmons"&gt;@jensimmons&lt;/a&gt;

      &lt;/div&gt;
      &lt;div class="ltag__twitter-tweet__twitter-logo"&gt;
        &lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--P4t6ys1m--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://practicaldev-herokuapp-com.freetls.fastly.net/assets/twitter-f95605061196010f91e64806688390eb1a4dbc9e913682e043eb8b1e06ca484f.svg" alt="twitter logo"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="ltag__twitter-tweet__body"&gt;
      The pressure to re-architect the web itself to conform to these ideas, and abandon the original design principles (HTML as a base, super robust, works with *all* devices; CSS for styling on top of that, with a cascade; JS for bonus fanciness) is fierce. Feels like a class war.
    &lt;/div&gt;
    &lt;div class="ltag__twitter-tweet__date"&gt;
      19:48 PM - 27 Jan 2019
    &lt;/div&gt;


    &lt;div class="ltag__twitter-tweet__actions"&gt;
      &lt;a href="https://twitter.com/intent/tweet?in_reply_to=1089611137459671040" class="ltag__twitter-tweet__actions__button"&gt;
        &lt;img src="/assets/twitter-reply-action.svg" alt="Twitter reply action"&gt;
      &lt;/a&gt;
      &lt;a href="https://twitter.com/intent/retweet?tweet_id=1089611137459671040" class="ltag__twitter-tweet__actions__button"&gt;
        &lt;img src="/assets/twitter-retweet-action.svg" alt="Twitter retweet action"&gt;
      &lt;/a&gt;
      78
      &lt;a href="https://twitter.com/intent/like?tweet_id=1089611137459671040" class="ltag__twitter-tweet__actions__button"&gt;
        &lt;img src="/assets/twitter-like-action.svg" alt="Twitter like action"&gt;
      &lt;/a&gt;
      358
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/blockquote&gt;
&lt;br&gt;
&lt;blockquote class="ltag__twitter-tweet"&gt;

  &lt;div class="ltag__twitter-tweet__main"&gt;
    &lt;div class="ltag__twitter-tweet__header"&gt;
      &lt;img class="ltag__twitter-tweet__profile-image" src="https://res.cloudinary.com/practicaldev/image/fetch/s--gA_e-uTZ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://pbs.twimg.com/profile_images/1020051236148609024/KDyskyLR_normal.jpg" alt="Jen Simmons profile image"&gt;
      &lt;div class="ltag__twitter-tweet__full-name"&gt;
        Jen Simmons
      &lt;/div&gt;
      &lt;div class="ltag__twitter-tweet__username"&gt;
        &lt;a class="comment-mentioned-user" href="https://dev.to/jensimmons"&gt;@jensimmons&lt;/a&gt;

      &lt;/div&gt;
      &lt;div class="ltag__twitter-tweet__twitter-logo"&gt;
        &lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--P4t6ys1m--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://practicaldev-herokuapp-com.freetls.fastly.net/assets/twitter-f95605061196010f91e64806688390eb1a4dbc9e913682e043eb8b1e06ca484f.svg" alt="twitter logo"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="ltag__twitter-tweet__body"&gt;
      Rich vs poor. &lt;br&gt;&lt;br&gt;Massive teams vs everyone else. &lt;br&gt;&lt;br&gt;Building a web that works for everyone vs a web that only works for those with expensive new devices and no disabilities. &lt;br&gt;&lt;br&gt;Architecting a web that favors massive corporations and pushes out less-powerful voices and ideas.
    &lt;/div&gt;
    &lt;div class="ltag__twitter-tweet__date"&gt;
      19:48 PM - 27 Jan 2019
    &lt;/div&gt;


    &lt;div class="ltag__twitter-tweet__actions"&gt;
      &lt;a href="https://twitter.com/intent/tweet?in_reply_to=1089611138176860161" class="ltag__twitter-tweet__actions__button"&gt;
        &lt;img src="/assets/twitter-reply-action.svg" alt="Twitter reply action"&gt;
      &lt;/a&gt;
      &lt;a href="https://twitter.com/intent/retweet?tweet_id=1089611138176860161" class="ltag__twitter-tweet__actions__button"&gt;
        &lt;img src="/assets/twitter-retweet-action.svg" alt="Twitter retweet action"&gt;
      &lt;/a&gt;
      66
      &lt;a href="https://twitter.com/intent/like?tweet_id=1089611138176860161" class="ltag__twitter-tweet__actions__button"&gt;
        &lt;img src="/assets/twitter-like-action.svg" alt="Twitter like action"&gt;
      &lt;/a&gt;
      382
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/blockquote&gt;
&lt;br&gt;
&lt;blockquote class="ltag__twitter-tweet"&gt;

  &lt;div class="ltag__twitter-tweet__main"&gt;
    &lt;div class="ltag__twitter-tweet__header"&gt;
      &lt;img class="ltag__twitter-tweet__profile-image" src="https://res.cloudinary.com/practicaldev/image/fetch/s--gA_e-uTZ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://pbs.twimg.com/profile_images/1020051236148609024/KDyskyLR_normal.jpg" alt="Jen Simmons profile image"&gt;
      &lt;div class="ltag__twitter-tweet__full-name"&gt;
        Jen Simmons
      &lt;/div&gt;
      &lt;div class="ltag__twitter-tweet__username"&gt;
        &lt;a class="comment-mentioned-user" href="https://dev.to/jensimmons"&gt;@jensimmons&lt;/a&gt;

      &lt;/div&gt;
      &lt;div class="ltag__twitter-tweet__twitter-logo"&gt;
        &lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--P4t6ys1m--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://practicaldev-herokuapp-com.freetls.fastly.net/assets/twitter-f95605061196010f91e64806688390eb1a4dbc9e913682e043eb8b1e06ca484f.svg" alt="twitter logo"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="ltag__twitter-tweet__body"&gt;
      It does feel like a war. A war for the future of the web. When I read “the standards bodies don’t care about web developers” I see someone wielding a weapon in this war — pushing to get rid of the design principles that made the web for everyone. To give the powerful more power.
    &lt;/div&gt;
    &lt;div class="ltag__twitter-tweet__date"&gt;
      19:48 PM - 27 Jan 2019
    &lt;/div&gt;


    &lt;div class="ltag__twitter-tweet__actions"&gt;
      &lt;a href="https://twitter.com/intent/tweet?in_reply_to=1089611138906636290" class="ltag__twitter-tweet__actions__button"&gt;
        &lt;img src="/assets/twitter-reply-action.svg" alt="Twitter reply action"&gt;
      &lt;/a&gt;
      &lt;a href="https://twitter.com/intent/retweet?tweet_id=1089611138906636290" class="ltag__twitter-tweet__actions__button"&gt;
        &lt;img src="/assets/twitter-retweet-action.svg" alt="Twitter retweet action"&gt;
      &lt;/a&gt;
      59
      &lt;a href="https://twitter.com/intent/like?tweet_id=1089611138906636290" class="ltag__twitter-tweet__actions__button"&gt;
        &lt;img src="/assets/twitter-like-action.svg" alt="Twitter like action"&gt;
      &lt;/a&gt;
      340
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/blockquote&gt;


&lt;p&gt;It immediately reminded me of a section of a &lt;a href="https://hackernoon.com/modern-web-development-bf0b2ef0e22e"&gt;fantastic analysis by Mark Nutter&lt;/a&gt; from a couple years ago. He inferred that Google's deep ties to the web (and standards bodies) make the web, as a platform, a risk that Facebook does not want to be exposed to. He says that React is a step toward abstracting away the browser.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://medium.com/@Gramshackle/the-web-of-native-apps-ii-google-and-facebook-ed2ee497302d"&gt;Gramshackle follows up on the Google/Facebook relationship&lt;/a&gt; and outlines what he believes would need to take place for Facebook to usurp Google. He identifies React Native as a way to add an abstraction layer over mobile platforms, and GraphQL as a replacement for REST. They may even be targeting HTTP itself, which is a frightening thought given how fundamental it is to the world.&lt;/p&gt;

&lt;p&gt;I find that to be entirely plausible and even likely. JS-JS-JS vs HTML-CSS-JS is only about abstracting the browser as a result of one corporation trying to thrive in an ecosystem dominated by an actor who isn't them.&lt;/p&gt;

&lt;p&gt;So I agree, it feels like a war for the future of the web, with standards bodies used as weapons (note: GraphQL and JSX are standards, but not W3C), but not targeted towards web developers and not based on team size (we're just caught in the middle). But it's a war we've seen before. Mac or PC? What came about is the browser abstracting away the OS, and other form factors contributing to the success of the browser as a platform. Google won that war. Now Facebook is using a similar playbook in our latest round of tech wars.&lt;/p&gt;

&lt;p&gt;If you're unaware of Facebook's intentions, it can be absolutely frustrating how they stomp all over years of web platform evolution. And the current lack of an alternative to the web can make it seem like they're just a bunch of crazies.&lt;/p&gt;

&lt;p&gt;But something I've noticed with the most recent generation of tech is the amazing documentation and ease of use, which I believe is there because creators really, really want you to use their stuff. Take &lt;a href="https://www.gatsbyjs.org/"&gt;GatsbyJS&lt;/a&gt; and their amazing tutorial series. I'll admit that the underlying complexity is oppressive, but it's made so that a single person can grasp the tools and use them effectively.&lt;/p&gt;

&lt;p&gt;I think everything that is going on is narrowing the gap between large and small teams, and am glad to see the industry moving in that direction. &lt;/p&gt;

</description>
      <category>webdev</category>
    </item>
    <item>
      <title>Do You Have a Good Job?</title>
      <dc:creator>Anton Frattaroli</dc:creator>
      <pubDate>Sat, 08 Dec 2018 02:52:43 +0000</pubDate>
      <link>https://forem.com/antonfrattaroli/do-you-have-a-good-job-g46</link>
      <guid>https://forem.com/antonfrattaroli/do-you-have-a-good-job-g46</guid>
      <description>&lt;p&gt;Its not easy to recognize the value of your job when all you have to compare it to are your past jobs. Bad past jobs will make an employee over-value their current job. A lack of experience can lead to under-valuing a job. The definition of a good job hasn't always been the same but the responsibility of making jobs good has always lied with managers. A good manager knows what makes a job a good one.&lt;/p&gt;

&lt;h1&gt;
  
  
  Individual Attention From Your Manager
&lt;/h1&gt;

&lt;p&gt;Being successful in your job is a responsibility shared by you and your manager. If you're not getting regular one-on-one face time with your manager then you're not being respected as an employee. Having successful one-on-one meetings is a widely discussed and marketed topic in management. Even if you have some trouble communicating in a one-on-one situation, your manager should have some tools and tactics to start and keep you improving. Your manager should make you feel heard and not forgotten.&lt;/p&gt;

&lt;h1&gt;
  
  
  Career Progression
&lt;/h1&gt;

&lt;p&gt;Dramatic changes in markets are commonplace today. Because of that companies can't guarantee lifelong employment for good employees the way they used to. In response, companies should be striving to instead guarantee increased employability. When you've outgrown the demands of your current position you should have the skills and training you need to take that next step. In an ideal world, you and your manager would agree on when that is and the company should be lifting you up on your way out having been fully prepared for your departure.&lt;/p&gt;

&lt;h1&gt;
  
  
  Transparency and Engagement
&lt;/h1&gt;

&lt;p&gt;Do you understand and agree with the reasons behind the work that gets done? Nothing hurts your chances for success quite like being given partial information, or being told "just do it." If the "why" of the work isn't communicated, understood, and agreed with then its importance will be lost on those contributing - leading to poor contributions. &lt;/p&gt;

&lt;h1&gt;
  
  
  Professional Communication
&lt;/h1&gt;

&lt;p&gt;Does your company have a common way of discussing professional interactions and approaches to work? Many systems come across as goofy personality tests but are meant to provide a common language for team building. It might take a leap of faith to hop on board but if used appropriately they can enhance your team's ability to communicate and empathize with each other.&lt;/p&gt;

&lt;h1&gt;
  
  
  Developer experience
&lt;/h1&gt;

&lt;p&gt;Many have argued that user experience is priority number one. It acts like an emotional safety net for when things go wrong. Are there obstacles standing between you and digging into the meat of your work? Leaders will be looking for ways to improve the process so that your ability to produce is as uninhibited as possible.&lt;/p&gt;

&lt;h1&gt;
  
  
  Single-discipline Teams
&lt;/h1&gt;

&lt;p&gt;When you work in a team of people practicing your same craft, opportunities to collaborate, learn, and share are readily available. Your manager can focus on a deep knowledge of managing one type of employee rather than spreading themselves thin playing catch-up to understand how to develop employees of various disciplines. &lt;/p&gt;

&lt;h1&gt;
  
  
  Team Performance
&lt;/h1&gt;

&lt;p&gt;Your team needs to agree on a simple way to collectively measure their performance and how your manager can work with the team to improve quantity and quality metrics over time. Working together for these shared goals helps you understand what your role in the company is providing and its place in the greater scheme of things.&lt;/p&gt;

&lt;h1&gt;
  
  
  Regular Team Meetings
&lt;/h1&gt;

&lt;p&gt;Collaboration and continuous improvement doesn't happen unless you make the time for it. This time can also be used to refresh the reasons why the work is important work, to reinvigorate and motivate the team.&lt;/p&gt;

&lt;h1&gt;
  
  
  Your Work
&lt;/h1&gt;

&lt;p&gt;Just because you know [insert legacy tech here] doesn't mean that you took the job to work on that. Your manager should make it a priority for you to be working on either your core responsibilities or branching out into areas you want to explore. And when you succeed in doing the work you like, you deserve to be recognized for your accomplishment.&lt;/p&gt;

&lt;h1&gt;
  
  
  Inter-team Teamwork
&lt;/h1&gt;

&lt;p&gt;It can be a pain point for a team to depend on another team for progress even if they're responsive. Your manager should be working to replace dependencies on other teams with greater cooperation. If a team of developers is regularly asking a security team for new service accounts, let the developers create their own service accounts while introducing a method to allow the security team to audit the accounts for compliance. &lt;/p&gt;

&lt;h1&gt;
  
  
  Benefits
&lt;/h1&gt;

&lt;p&gt;Health, Dental, Vision, 401k; holidays, vacation, and sick leave: pretty standard benefits. Are executives making some effort to provide more? Flexible (Health) Spending Accounts, 401k matching, bonuses (profit sharing, stock options), flexible working hours and remote opportunities, gym access, and maternity/paternity benefits are some areas where companies can do more to award their employees for their contributions. Human Resources should always be asking "at this point, can we commit to doing more?"&lt;/p&gt;

&lt;h1&gt;
  
  
  "People leave managers, not companies."
&lt;/h1&gt;

&lt;p&gt;It's your manager's job to make sure your position is a good job. I believe that a good job doesn't need to excel in every category, but at least address each one and aim for continually improving on that. In a truly good job, you'll always be getting more out than you put in.&lt;/p&gt;

</description>
      <category>work</category>
      <category>management</category>
      <category>leadership</category>
      <category>career</category>
    </item>
    <item>
      <title>What happens when you type 'google.com' into a browser and press Enter?</title>
      <dc:creator>Anton Frattaroli</dc:creator>
      <pubDate>Thu, 19 Jul 2018 15:10:23 +0000</pubDate>
      <link>https://forem.com/antonfrattaroli/what-happens-when-you-type-googlecom-into-a-browser-and-press-enter-39g8</link>
      <guid>https://forem.com/antonfrattaroli/what-happens-when-you-type-googlecom-into-a-browser-and-press-enter-39g8</guid>
      <description>&lt;p&gt;My most favorite interview question I've come across yet was "You type 'google.com' into a browser address bar and hit &lt;code&gt;&amp;lt;Enter&amp;gt;&lt;/code&gt;, what happens afterwards?"&lt;/p&gt;

&lt;p&gt;Someone could talk for days on end trying to answer that with some form of completeness. How deep will they go? Strictly for fun, I'm going to put my answer here. When I was asked this in an actual interview, I rambled on for a good 10 minutes before they stopped me. And then I kept remembering things I forgot to include even after the interview finished.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;I'm going to keep this formatted as a wall of text because that's how it felt to answer this question in conversation.&lt;/em&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  So What Happens?
&lt;/h1&gt;

&lt;p&gt;The browser is going to analyze the input. Usually if it has a ".com" it won't think you're typing search terms. And once it decides it must be a URL, it'll check that it has a scheme, if not, it'll add "http://" to the beginning. And since you didn't specify a number of HTTP protocol features, it'll assume defaults, like port 80, GET method and no basic auth.&lt;/p&gt;

&lt;p&gt;Then it'll create an HTTP request and send that. I'm not confident in my low level networking knowledge but if I was I'd say something about the MAC address, TCP packet transfers, dropped packet handling. But anyway, a "google.com" DNS lookup will happen, and if it's not already cached a DNS service will reply with a list of IP addresses, because "google.com" doesn't just have a single IP address. Browsers will pick the first one by default I believe. Not sure if they're regional or how the list works, but I know it's there.&lt;/p&gt;

&lt;p&gt;So the HTTP request jumps from node to node until it gets to the IP address of  google.com's load balancer. It wouldn't last long, Google would respond that you need to be using HTTPS - assuming with a 301 permanent redirect. So it would go all the way back to your browser, the browser would change the scheme to HTTPS, use the default 443 port and resend. This time the TLS handshake would take place between the load balancer and the browser client. Not 100% on how that works but I know the request would tell Google what protocols it supports (TLS 1.0, 1.1, 1.2) and Google would respond with "Let's use 1.2". Then the request gets sent with TLS encryption.&lt;/p&gt;

&lt;p&gt;I think the next thing Google would do is put it through web application firewall rules on its load balancer to see if it's a malicious request. When it passes, the secure connection has probably been terminated (because PCI-DSS regulations say you don't need to encrypt internal traffic) and the request would get assigned to a pool in their CDN, and the google-side cached homepage will be returned in an HTTP response. Probably pre-gzipped.&lt;/p&gt;

&lt;p&gt;Google's response header would be read by the browser, cached according to the response header caching policy, then the body would be un-gzipped. And because it's google it's probably ultra-optimized: minified, likely a lot of pre-rendered content, inlined CSS, JavaScript and images to reduce network requests and the time-to-first-render. But that request will trigger a cascade of other requests, all concurrent because it should be running HTTP/2. While those requests are being made, JavaScript would be parsed, probably not blocking because they used the defer attribute on their tags - or async, I never did read about what those did individually.&lt;/p&gt;

&lt;p&gt;But the browser has probably already rendered the search box and is working on the toolbar at the top, which is going to take some extra network requests - I probably already have a cookie or maybe local storage with an OAuth token - or maybe I'm using Chrome and it already knows who I am, and that request with auth gets sent to their Google+ API that tells the Google search page application who I am.&lt;/p&gt;

&lt;p&gt;Another request would be sent to get my avatar image. At this point they've already browser-sniffed to see if I wasn't using Chrome, in which case they would have popped-in a tooltip to tell me that Chrome is awesome and I should be using that instead of anything else.&lt;/p&gt;

&lt;p&gt;I think it would quiet down at that point. All taking place in a fraction of a second.&lt;/p&gt;

&lt;h1&gt;
  
  
  What is observably different?
&lt;/h1&gt;

&lt;h3&gt;
  
  
  Let's lookup the DNS:
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F1y0lpk5owzzak6nsdyv5.PNG" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F1y0lpk5owzzak6nsdyv5.PNG" alt="DNS lookup response for google.com" width="702" height="523"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt; I know I had previously seen google.com coming back with multiple IP addresses, but that doesn't seem to be the case anymore. Seems that they used to use round-robin but don't anymore. &lt;a href="https://stackoverflow.com/questions/10257969/is-it-possible-that-one-domain-name-has-multiple-corresponding-ip-addresses" rel="noopener noreferrer"&gt;This StackOverflow question covers it&lt;/a&gt;. I had forgotten it was called round-robin.&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Network Layers...
&lt;/h3&gt;

&lt;p&gt;In a formally structured answer, you'd probably reference the OSI Model, which I know of but am not well versed in. After looking it up, I take it network layering maps like this:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Application - The logic initiating requests&lt;/li&gt;
&lt;li&gt;Presentation - HTTP&lt;/li&gt;
&lt;li&gt;Session - TLS&lt;/li&gt;
&lt;li&gt;Transport - TCP&lt;/li&gt;
&lt;li&gt;Network - packet routing (IP)&lt;/li&gt;
&lt;li&gt;Data link - frames (which seem to be packet containers)&lt;/li&gt;
&lt;li&gt;Physical - bitstreams&lt;/li&gt;
&lt;/ol&gt;

&lt;ul&gt;
&lt;li&gt; I missed that in TLS they exchange certificates after agreeing on a protocol.&lt;/li&gt;
&lt;li&gt; Networking isn't my strongest arena.&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Open google.com in my browser, disable cache:
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fvvi4i4eyye3l342bpg5e.PNG" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fvvi4i4eyye3l342bpg5e.PNG" alt="Network tab of browser dev tools" width="800" height="395"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt; I missed the host name canonicalization - which was a 301.&lt;/li&gt;
&lt;li&gt; The correction from HTTP to HTTPS is a 307 Internal Redirect.&lt;/li&gt;
&lt;li&gt; It then downloads fonts, the logo images, and my avatar image. Without an API call, which means they shoved my profile information in the page and bundled that with the return - so they're doing actual data retrieval when you hit google.com and not just serving cached assets.&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  The Response
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F7ee7gc2336c07ncsjaaw.PNG" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F7ee7gc2336c07ncsjaaw.PNG" alt="WinMerge comparison of Chrome and IE11 response bodies" width="602" height="735"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Above is a file comparison of the IE 11 and Chrome responses - both logged out.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt; Not terribly different between IE11 and Chrome. But it means they're user-agent sniffing server-side and not client-side. Could have mentioned this in my answer. &lt;/li&gt;
&lt;li&gt; Unexpectedly, the Chrome response is larger by 22kB. I wonder if it's the search-by-voice feature, which is visibly absent from IE 11. IE11 probably needs polyfills and the Chrome advertisement but it's all obfuscated and I'm not going to torture myself any further.&lt;/li&gt;
&lt;li&gt; Even after I clear my cookies in Chrome, it still sends cookies on first request. It does not do that in IE 11. &lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Lets dig into that rendering!
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Floko570gqyktnoiu5ed4.PNG" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Floko570gqyktnoiu5ed4.PNG" alt="First render loading of google.com" width="784" height="681"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;That pic above is the first screenshot Chrome will give you.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt; There aren't any async or defer attributes on the script tags, just nonce attributes. I'm learning about nonce as of this minute, and it seems to be security related. I guess they want those blocking scripts. I'm sure they fiddled around with/without async/defer at some point and decided against it.&lt;/li&gt;
&lt;li&gt; Note to self: Full response is a mess of mixed JavaScript, CSS, and HTML. They aren't following any rules governing their placement in regards to separation.&lt;/li&gt;
&lt;/ul&gt;

&lt;h1&gt;
  
  
  What about the question itself?
&lt;/h1&gt;

&lt;p&gt;You know what? Maybe it's not that great of an interview question for a developer since the answer has so much networking involved. It's the format of the question I like, something open ended, that includes some guessing. That gives the interviewer the opportunity to follow up with questions like "How do you think TLS is established?" to see how the candidate thinks, see how creative they are, see what their limit is (how patient?).&lt;/p&gt;

&lt;p&gt;What's your favorite interview question?&lt;/p&gt;

</description>
      <category>webdev</category>
    </item>
    <item>
      <title>Quick and Dirty Web Accessibility</title>
      <dc:creator>Anton Frattaroli</dc:creator>
      <pubDate>Mon, 09 Jul 2018 04:20:43 +0000</pubDate>
      <link>https://forem.com/antonfrattaroli/quick-and-dirty-web-accessibility-29f</link>
      <guid>https://forem.com/antonfrattaroli/quick-and-dirty-web-accessibility-29f</guid>
      <description>&lt;h1&gt;
  
  
  Why
&lt;/h1&gt;

&lt;ul&gt;
&lt;li&gt;Legal Reasons: "equal opportunity", "reasonable accommodation"&lt;/li&gt;
&lt;li&gt;Government contracts&lt;/li&gt;
&lt;li&gt;SEO... sort of.&lt;/li&gt;
&lt;/ul&gt;

&lt;h1&gt;
  
  
  How Long
&lt;/h1&gt;

&lt;p&gt;Shouldn't take long.&lt;/p&gt;

&lt;h1&gt;
  
  
  How
&lt;/h1&gt;

&lt;h2&gt;
  
  
  Use semantic HTML
&lt;/h2&gt;

&lt;p&gt;Use the semantic HTML5 elements - &lt;code&gt;header&lt;/code&gt;, &lt;code&gt;footer&lt;/code&gt;, &lt;code&gt;nav&lt;/code&gt;, &lt;code&gt;main&lt;/code&gt;, &lt;br&gt;
&lt;code&gt;dialog&lt;/code&gt; (w/polyfill), &lt;code&gt;article&lt;/code&gt;, &lt;code&gt;section&lt;/code&gt;, &lt;code&gt;aside&lt;/code&gt;. They double as ARIA &lt;br&gt;
landmarks so you won't need to deal with those. Also use semantic HTML4 elements, like &lt;code&gt;label&lt;/code&gt; on &lt;code&gt;input&lt;/code&gt; fields.&lt;/p&gt;

&lt;h2&gt;
  
  
  Skip navigation link
&lt;/h2&gt;

&lt;p&gt;You need:&lt;/p&gt;

&lt;p&gt;a. A screen-reader only class:&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;b. A link after your &lt;code&gt;body&lt;/code&gt; element:&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;&amp;lt;body&amp;gt;
    &amp;lt;a class="sr-only" href="#main" tabindex="0"&amp;gt;Skip to Main Content&amp;lt;/a&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;c. Give your &lt;code&gt;main&lt;/code&gt; element that ID:&lt;/p&gt;


&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;&amp;lt;main id="main"&amp;gt;&lt;br&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;
&lt;h2&gt;
&lt;br&gt;
  &lt;br&gt;
  &lt;br&gt;
  WAVE Accessibility Checker Browser Extension&lt;br&gt;
&lt;/h2&gt;

&lt;p&gt;Why this one? Because there's a WAVE Accessibility Checker extension for both Firefox and Chrome, and that covers 99% of the people I know.&lt;/p&gt;

&lt;p&gt;None of the accessibility checkers do a particularly good job. Clear out the errors, ignore warnings and manual checks. Common errors are missing &lt;code&gt;alt&lt;/code&gt; attributes on images and empty headings.&lt;/p&gt;

&lt;h2&gt;
  
  
  Keyboard Navigation - tabindex
&lt;/h2&gt;

&lt;p&gt;In this step you'll be adding &lt;code&gt;tabindex&lt;/code&gt; to everything "interactable" - anything a user might click on like a link or a text input field. Don't worry about text sections, people who actually know how to use screen readers will be able to manage that.&lt;/p&gt;

&lt;p&gt;There are only two values for &lt;code&gt;tabindex&lt;/code&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;0&lt;/code&gt;: can tab to this element.&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;-1&lt;/code&gt;: can't tab to this element.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Tabbing should follow the DOM order, which is why we only use &lt;code&gt;0&lt;/code&gt;. Hidden stuff like menu items should have &lt;code&gt;-1&lt;/code&gt;. Install the ChromeVox screen reader browser extension to test this - it's free and it does the job.&lt;/p&gt;

&lt;h2&gt;
  
  
  Other Stuff
&lt;/h2&gt;

&lt;p&gt;You're probably going to have some keyboard navigation one-offs, like 'Press enter to open the menu and the arrow keys to navigate the menu items'. Tell the user that with the &lt;code&gt;aria-label&lt;/code&gt; attribute.&lt;/p&gt;

&lt;p&gt;If you have content that updates without user interaction, like notifications, use the &lt;code&gt;aria-live="polite"&lt;/code&gt; attribute and value on it. That will tell the user something happened.&lt;/p&gt;

&lt;p&gt;If you have links that only say "Click Here" you're doing it wrong.&lt;/p&gt;

&lt;p&gt;If you have a &lt;code&gt;hover&lt;/code&gt; event handler or CSS pseudo-class, then make it do that same thing on &lt;code&gt;focus&lt;/code&gt;, too.&lt;/p&gt;

&lt;p&gt;If you have a &lt;code&gt;click&lt;/code&gt; event handler, you're going to want to add the same handler for &lt;code&gt;keypress&lt;/code&gt; against &lt;code&gt;event.key === 'Enter'&lt;/code&gt;.&lt;/p&gt;

&lt;h1&gt;
  
  
  Good Enough?
&lt;/h1&gt;

&lt;p&gt;Good enough to argue in court that you made an effort.&lt;/p&gt;

&lt;h1&gt;
  
  
  Not Good Enough?
&lt;/h1&gt;

&lt;ul&gt;
&lt;li&gt;The idea is that all users have an equivalent experience with the website.&lt;/li&gt;
&lt;li&gt;Reach out to a consultant, they have the expensive screen readers.&lt;/li&gt;
&lt;li&gt;Enlist actual disabled people to assist with testing.&lt;/li&gt;
&lt;/ul&gt;

&lt;h1&gt;
  
  
  Notes
&lt;/h1&gt;

&lt;p&gt;Ganked image from Google Image Search's 'labeled for reuse' tool. Originally on &lt;a href="https://yoast.com/http-503-site-maintenance-seo/"&gt;https://yoast.com/http-503-site-maintenance-seo/&lt;/a&gt;&lt;/p&gt;

</description>
      <category>tutorial</category>
      <category>beginners</category>
      <category>a11y</category>
    </item>
    <item>
      <title>OAuth Tips for the Uninitiated</title>
      <dc:creator>Anton Frattaroli</dc:creator>
      <pubDate>Thu, 05 Jul 2018 18:43:52 +0000</pubDate>
      <link>https://forem.com/antonfrattaroli/oauth-tips-for-the-uninitiated-476e</link>
      <guid>https://forem.com/antonfrattaroli/oauth-tips-for-the-uninitiated-476e</guid>
      <description>&lt;p&gt;Devs are hyped to unload the identity management parts of their apps onto an OAuth provider(s). You know OAuth is a good thing, but you don't have a good grasp on what the impacts will be to your organization. Here are some tips that'll get you comfortable with it.&lt;/p&gt;

&lt;h1&gt;
  
  
  Decoupling Authentication and Authorization
&lt;/h1&gt;

&lt;p&gt;Customers/employees are now typing their usernames and passwords directly into your websites. If they are inactive for 15 minutes, they get logged out automatically and need to provide their usernames and passwords again to get access. When a user registers, they're creating an identity that is authorized for that website, and that website only.&lt;/p&gt;

&lt;p&gt;An OAuth service alone doesn't do much. It needs identities - so it gets hooked up to one or more identity providers. Users will type their usernames and passwords into an identity provider's form to authenticate. That identity provider is handling the authentication part for the OAuth service.&lt;/p&gt;

&lt;p&gt;The OAuth service allows users to authorize (registered) applications to use their identity (and possibly other information). Once the user has authenticated with the identity provider, the OAuth service gives the user a token for use on those authorized applications. The token is proof that the user is who they say they are. Your website offloads authentication to the OAuth service (through the OAuth service's identity provider(s)), and only requests authorization to use the identity. With the OAuth service handling authorization and the identity provider handling authentication, authentication and authorization become decoupled.&lt;/p&gt;

&lt;p&gt;The internal features of your applications are still under your control, independent of the OAuth service (unless you want them to be).&lt;/p&gt;

&lt;h1&gt;
  
  
  Short-lived Tokens
&lt;/h1&gt;

&lt;p&gt;Once a token is given out, it can't be taken away (as long as you're using standard JSON web tokens). That's a good thing and a bad thing. Good because it means you don't have to worry about it after you've given it out. Having to track all of those tokens would be a significant amount of overhead you don't need. The bad part is that if someone else gets a hold of that token, they can use it too.&lt;/p&gt;

&lt;p&gt;That's why tokens need to have a short lifetime. Say, 20 minutes max until expiration. If someone else gets it, they have at most 20 minutes to do damage.&lt;/p&gt;

&lt;h1&gt;
  
  
  Refresh Tokens
&lt;/h1&gt;

&lt;p&gt;But you don't want your users re-authenticating every 20 minutes. So when they authenticate the first time, they get two tokens - the Access Token (the 20 minute one) and the Refresh Token. Refresh Tokens are used by your website to say "Hey OAuth provider, my user is still using our services so they need to refresh their Access Token". And the OAuth provider hands out a new Access Token and everyone is happy. The OAuth provider is tracking those refresh tokens, and because of that they can last a long time - a six month or more lifetime on a refresh token is considered reasonable.&lt;/p&gt;

&lt;p&gt;That does mean more coding for your website. If services start giving "Unauthorized" errors, the access token probably expired and needs to be refreshed.&lt;/p&gt;

&lt;h1&gt;
  
  
  Security Process Impacts
&lt;/h1&gt;

&lt;p&gt;It's nice that today, you only need to flag a user account and their authentication quits working, and they can't use your systems anymore. But remember we decoupled authentication from authorization, so you need to have a plan for revoking their refresh tokens, too.&lt;/p&gt;

&lt;h1&gt;
  
  
  Moving Forward
&lt;/h1&gt;

&lt;p&gt;And then, now that your authentication endpoints are consolidated, maybe you could look into multi-factor authentication and really nail the user experience of the "Forgot Password?" functionality.&lt;/p&gt;

&lt;h1&gt;
  
  
  Notes
&lt;/h1&gt;

&lt;p&gt;This article is intended as a response and complement to this super-high quality article:&lt;br&gt;
&lt;/p&gt;
&lt;div class="ltag__link"&gt;
  &lt;a href="/anabella" class="ltag__link__link"&gt;
    &lt;div class="ltag__link__pic"&gt;
      &lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F70949%2Fdce8cfb2-f200-4ce3-b590-78f538796692.png" alt="anabella"&gt;
    &lt;/div&gt;
  &lt;/a&gt;
  &lt;a href="/anabella/dancing-with-oauth-emp" class="ltag__link__link"&gt;
    &lt;div class="ltag__link__content"&gt;
      &lt;h2&gt;Dancing with OAuth: a step by step guide&lt;/h2&gt;
      &lt;h3&gt;anabella ・ Jul 4 '18&lt;/h3&gt;
      &lt;div class="ltag__link__taglist"&gt;
        &lt;span class="ltag__link__tag"&gt;#oauth&lt;/span&gt;
        &lt;span class="ltag__link__tag"&gt;#authentication&lt;/span&gt;
        &lt;span class="ltag__link__tag"&gt;#explainlikeimfive&lt;/span&gt;
        &lt;span class="ltag__link__tag"&gt;#beginners&lt;/span&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/a&gt;
&lt;/div&gt;


&lt;p&gt;Ganked image from Google Image Search's "labeled for reuse" tool, illustration by Bauke Schildt&lt;/p&gt;

</description>
      <category>oauth</category>
      <category>authentication</category>
      <category>explainlikeimfive</category>
      <category>beginners</category>
    </item>
    <item>
      <title>Can't Wait for Windows: Cypress</title>
      <dc:creator>Anton Frattaroli</dc:creator>
      <pubDate>Wed, 23 Aug 2017 02:31:37 +0000</pubDate>
      <link>https://forem.com/antonfrattaroli/cant-wait-for-windows-cypress</link>
      <guid>https://forem.com/antonfrattaroli/cant-wait-for-windows-cypress</guid>
      <description>&lt;p&gt;When I first saw Cypress a couple years ago, I watched a demo video from the creator and nearly cried tears of joy. I signed up for early access, but never got accepted. I bothered them in their team chat once. I clicked the Watch button on the &lt;a href="https://github.com/cypress-io/cypress"&gt;github project&lt;/a&gt; and waited - with an eye on this particular issue: &lt;a href="https://github.com/cypress-io/cypress/issues/74"&gt;Windows support?&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Some are still waiting on Windows support, but I can't wait any longer. Luckily there is a breadcrumb in the github issue: When someone attempts to run Cypress on Windows the error message is supposed to show: &lt;code&gt;You can use Cypress if you install a Linux VM using something like VirtualBox.&lt;/code&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  VirtualBox
&lt;/h1&gt;

&lt;p&gt;Never heard of it. My virtual machines have always been VMWare. &lt;a href="https://www.google.com/search?q=virtualbox"&gt;Googled.&lt;/a&gt; &lt;a href="https://www.virtualbox.org/wiki/Downloads"&gt;Downloaded.&lt;/a&gt; Installed.&lt;/p&gt;

&lt;p&gt;Pretty straightforward. There's a dropdown to choose my operating system. My last experience with Linux was back in 2009 when Windows Vista was out and everyone hated it and Ubuntu was the Linux messiah. I tried it out at the time, only to remember there's no Visual Studio for Ubuntu and abandoned any further effort to switch. Ubuntu is in the VirtualBox list of OSes, and I selected it.&lt;/p&gt;

&lt;h1&gt;
  
  
  Ubuntu
&lt;/h1&gt;

&lt;p&gt;... &lt;code&gt;FATAL: Could not read from the boot medium.&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;You mean I have to install Ubuntu myself? Weak. Why the dropdown? Whatever. &lt;a href="https://www.google.com/search?q=ubuntu+download"&gt;Googled.&lt;/a&gt; &lt;a href="https://www.ubuntu.com/download/desktop"&gt;Downloaded.&lt;/a&gt; Mounted.&lt;/p&gt;

&lt;p&gt;... &lt;code&gt;This kernel requires an x86-64 CPU, but only detects an i686 CPU, unable to boot.&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;I don't know what you're detecting but it isn't an i686. &lt;a href="https://askubuntu.com/questions/308937/cannot-install-ubuntu-in-virtualbox-due-to-this-kernel-requires-an-x86-64-cpu"&gt;Googled.&lt;/a&gt; Oh I have to create a new VM and choose the 64-bit Ubuntu from the dropdown... There's no 64-bit option. &lt;a href="http://www.fixedbyvonnie.com/2014/11/virtualbox-showing-32-bit-guest-versions-64-bit-host-os/#.WZzSMem2z6Q"&gt;Googled.&lt;/a&gt; Oh, I need to change my BIOS settings to enable "Virtualization Technology", fine.&lt;/p&gt;

&lt;p&gt;Installed Ubuntu. Alright, now we're talking! What's all this Office software? Is this why the ISO took forever to download? Get rid of that desktop trash real quick. Now time to follow the &lt;a href="https://docs.cypress.io/guides/getting-started/installing-cypress.html"&gt;Cypress installation guide.&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;I need node installed. &lt;a href="https://www.digitalocean.com/community/tutorials/how-to-install-node-js-on-ubuntu-16-04"&gt;Googled.&lt;/a&gt; &lt;code&gt;sudo apt-get update&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;Oh, no, no internet. &lt;a href="https://supportforums.cisco.com/t5/vpn/anyconnect-3-1-04072-won-t-allow-internet-connectivity-from/td-p/2400378"&gt;Googled.&lt;/a&gt; I have to change Ubuntu settings to work with the host's Cisco AnyConnect VPN. &lt;code&gt;VBoxManage modifyvm "Cypress.io" --natdnshostresolver1 on&lt;/code&gt; Baffles me that it has to be run on the virtual machine and not the physical machine, or in VirtualBox Manager. Again, whatever. Let's go.&lt;/p&gt;

&lt;h1&gt;
  
  
  Node and NPM
&lt;/h1&gt;

&lt;p&gt;&lt;code&gt;sudo apt-get update&lt;/code&gt;&lt;br&gt;
&lt;code&gt;sudo apt-get install nodejs&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;And although it's not mentioned in the Cypress docs, they use the npm command and I know that's separate - not that I've ever used it, must have learned that by osmosis.&lt;/p&gt;

&lt;p&gt;&lt;code&gt;sudo apt-get install npm&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;Fantastic. Let's get the cypress-cli.&lt;/p&gt;

&lt;del&gt;&lt;code&gt;npm install -g cypress-cli&lt;/code&gt;&lt;/del&gt;

&lt;p&gt;Error. Can't connect. I can browse the internet otherwise... does it work on my physical machine? Oh, no, registry.npmjs.org is blocked by the corporate proxy under the category "internet-communications". First off, that category doesn't make sense, and second, I take offense to npm being blocked. That's like telling hundreds of thousands of people their collective work isn't to be trusted. File a support ticket with NetSec... unblocked.&lt;/p&gt;

&lt;del&gt;&lt;code&gt;npm install -g cypress-cli&lt;/code&gt;&lt;/del&gt;

&lt;p&gt;Nope. That didn't work. Need to install nodejs-legacy.&lt;/p&gt;

&lt;p&gt;&lt;code&gt;sudo apt-get install nodejs-legacy&lt;/code&gt;&lt;br&gt;
&lt;code&gt;npm install -g cypress-cli&lt;/code&gt;&lt;/p&gt;

&lt;del&gt;&lt;code&gt;cypress install&lt;/code&gt;&lt;/del&gt;

&lt;p&gt;Didn't work. Need git.&lt;/p&gt;

&lt;p&gt;&lt;code&gt;sudo apt-get install git&lt;/code&gt;&lt;br&gt;
&lt;code&gt;cypress install&lt;/code&gt;&lt;br&gt;
&lt;code&gt;cypress open&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;Hooray. I can log in with GitHub? Cool, I have one of those. Installing Cypress docs covered, now on to &lt;a href="https://docs.cypress.io/guides/getting-started/writing-your-first-test.html"&gt;Writing Your First Test&lt;/a&gt;... "Open up your favorite IDE". Ouch, 2009 coming back to punch me in the face. At some point I'll be checking this into source control, so better make sure I have something that supports TFS. &lt;a href="http://blogs.microsoft.co.il/morgen/2010/06/07/using-tfs-in-linux-ubuntu/"&gt;Googled.&lt;/a&gt; Thank you blog from 2010 for your solution to my 2009 problem.&lt;/p&gt;

&lt;h1&gt;
  
  
  Eclipse
&lt;/h1&gt;

&lt;p&gt;&lt;a href="http://ubuntuhandbook.org/index.php/2016/01/how-to-install-the-latest-eclipse-in-ubuntu-16-04-15-10/"&gt;Googled.&lt;/a&gt; Looks like I need Java 8 first. One step forward, two steps back.&lt;/p&gt;

&lt;p&gt;&lt;code&gt;sudo add-apt-repository ppa:webupd8team/java&lt;/code&gt;&lt;br&gt;
&lt;code&gt;sudo apt-get update&lt;/code&gt;&lt;br&gt;
&lt;code&gt;sudo apt-get install oracle-java8-installer&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;Got that. &lt;a href="https://www.eclipse.org/downloads/"&gt;Download Eclipse.&lt;/a&gt; Extract. Double click an icon to install - that would be nice if it were Windows but at this point I'm expecting to use the command line.&lt;/p&gt;

&lt;p&gt;Team Explorer Everywhere... &lt;a href="https://msdn.microsoft.com/en-us/library/hh301122(v=vs.120).aspx"&gt;Googled.&lt;/a&gt; I read that there is also a plugin for IntelliJ, and I have read that many people prefer IntelliJ over Eclipse. Too late for that now, I want my automated testing.&lt;/p&gt;

&lt;p&gt;Download Source... &lt;/p&gt;

&lt;h1&gt;
  
  
  Cypress
&lt;/h1&gt;

&lt;p&gt;Add folder... New Cypress project... Copy/paste/gut example test file. Within a half hour I had a test to log in to a site using OAuth:&lt;/p&gt;


&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;  describe('Log On Test', function() {&lt;br&gt;
    it('Logs On &lt;a href="http://www.mysite.com"&gt;www.mysite.com&lt;/a&gt;', function() {&lt;br&gt;
      cy.visit('&lt;a href="https://www.mysite.com'"&gt;https://www.mysite.com'&lt;/a&gt;)&lt;br&gt;
      cy.get('.landing-login-panel .mdl-card__supporting-text:last a').contains('Log In').click()&lt;br&gt;
      if (cy.url('host') === 'login.domain.com') {&lt;br&gt;
        cy.get('#domain-id').type('username')&lt;br&gt;
        cy.get('#password').type('********')&lt;br&gt;
        cy.get('.submit').click()&lt;br&gt;
      }
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;  cy.wait(2000)
  cy.get('.user-nav-menu').click()
  cy.get('[for="UIMenu-99"]').should('be.visible')
  cy.get('[for="UIMenu-99"] a[href="/MyProfile"]').click()
})
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;
&lt;p&gt;})&lt;br&gt;
&lt;/p&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;
&lt;h1&gt;
&lt;br&gt;
  &lt;br&gt;
  &lt;br&gt;
  Satisfaction&lt;br&gt;
&lt;/h1&gt;

&lt;p&gt;Plowing ahead without letting obstacles get in your way. That's a skill I has. It certainly was an odyssey to set this up, but it was a morning well spent.&lt;/p&gt;

&lt;p&gt;Maybe once I recreate the regression test suite I'll work on integrating it into the CI workflow. I'm sure QA and devops will love that.&lt;/p&gt;

&lt;p&gt;And one day, Windows Support will come to Cypress, and I'll force it upon my co-workers.&lt;/p&gt;

</description>
    </item>
    <item>
      <title>I still use Firefox</title>
      <dc:creator>Anton Frattaroli</dc:creator>
      <pubDate>Wed, 21 Jun 2017 02:21:24 +0000</pubDate>
      <link>https://forem.com/antonfrattaroli/i-still-use-firefox</link>
      <guid>https://forem.com/antonfrattaroli/i-still-use-firefox</guid>
      <description>&lt;p&gt;Chrome is really popular. I'm pretty sure everyone knows it. &lt;a href="http://gs.statcounter.com/browser-market-share" rel="noopener noreferrer"&gt;Chart confirmation&lt;/a&gt;. I still use Firefox.&lt;/p&gt;

&lt;h3&gt;
  
  
  Side Tabs
&lt;/h3&gt;

&lt;p&gt;A good side tabs extension is the primary reason I use Firefox. A row of tabs on top is the worst thing ever. Lists are great:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxzekqc5ixbh9vyz5onxd.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxzekqc5ixbh9vyz5onxd.png" alt="Side Tabs" width="348" height="413"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;I use the "Tab Tree" extension (thank you Sergey Zelentsov). Chrome has a handful of side tabs extensions, but I don't consider them usable.&lt;/p&gt;

&lt;h3&gt;
  
  
  That's It
&lt;/h3&gt;

&lt;p&gt;Side tabs is the only reason I use Firefox.&lt;/p&gt;

&lt;h3&gt;
  
  
  What's different?
&lt;/h3&gt;

&lt;p&gt;Since I'm using Firefox on my laptop, I'd like everything to sync to my phone so I don't have to retype all my passwords. I like Firefox for Android's tab screen better than Chrome. That's the only difference I notice so that works out pretty well.&lt;/p&gt;

&lt;p&gt;I'm in the dev tools quite a bit throughout the day, and I find the Firefox dev tools more intuitive. Chrome can take it's 'Elements', 'Sources', 'Application' tabs and shove it - I prefer 'Inspector', 'Debugger', 'Storage'. Honestly it's not a big difference to me. Some people feel strongly about dev tools.&lt;/p&gt;

&lt;p&gt;Should I ever be debugging a cross-browser issue, my other (more popular) browsers are clean installs. Nice to have.&lt;/p&gt;

&lt;p&gt;Firefox doesn't support integrated windows authentication. That's alright by me.&lt;/p&gt;

&lt;p&gt;I don't understand why more people don't demand side tabs.&lt;/p&gt;

</description>
    </item>
    <item>
      <title>IT Roles and Responsibilities</title>
      <dc:creator>Anton Frattaroli</dc:creator>
      <pubDate>Fri, 17 Mar 2017 04:19:18 +0000</pubDate>
      <link>https://forem.com/antonfrattaroli/it-roles-and-responsibilities</link>
      <guid>https://forem.com/antonfrattaroli/it-roles-and-responsibilities</guid>
      <description>&lt;p&gt;Increasing growth and complexity brings about distinctive roles in an organization. Let's take a tour of an established information technology division's roles:&lt;/p&gt;

&lt;h4&gt;
  
  
  Business Analyst
&lt;/h4&gt;

&lt;p&gt;The end users have an idea of what data they want to input and what they want either coming back or going out another end. A business analyst assists end users in defining exactly what those inputs and outputs are and strives to describe the interactions with completeness and consistency.&lt;/p&gt;

&lt;h4&gt;
  
  
  Infrastructure
&lt;/h4&gt;

&lt;p&gt;The infrastructure team provides places for inputs to go to. It starts with physical machines that need to run in a temperature and humidity controlled environment. Sizing the data center and redundancy are primary concerns. And then they put a layer on top of all that, so that hardware resources can be divided or shared as they please.&lt;/p&gt;

&lt;h4&gt;
  
  
  Networking
&lt;/h4&gt;

&lt;p&gt;A network engineer makes sure the places that inputs are going to can be gotten to. They logically divide the data centers into layers of connectivity. It's closely tied to security - the data center having it's own firewall, and each division of the data center having an internal segmentation firewall. Publicly exposed HTTP endpoints may also be placed behind a web application firewall. Certain network segments may be accessible via a VPN connection.&lt;/p&gt;

&lt;h4&gt;
  
  
  Developer
&lt;/h4&gt;

&lt;p&gt;A developer writes instructions to take in input data and turn out output data. Usually transforming the data along the way. That's pretty difficult to do with a stream of 1's and 0's, so developers added layers of abstraction and automation and established shared standards. Layers upon layers, increasing productivity and efficiency. And then rewriting it all.&lt;/p&gt;

&lt;h4&gt;
  
  
  Operations
&lt;/h4&gt;

&lt;p&gt;Events need to be triggered at certain times, in a certain order, at regular intervals - that's enterprise workflow. The operations team is known for having to make late night calls to support teams when processes fail to complete. They need to structure the workflow responsibly, so that the company isn't overwhelmed when multiple teams want their jobs running at exactly midnight and they all fail. There aren't too many enterprise workflow software suites out there - BMC's Control-M, Automic's UC4, IBM's Tivoli Workload Scheduler, and CA's Workload Automation are the big ones.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Update:&lt;/strong&gt; In response to feedback I'd like to clarify that by "Operations" I mean a team of Operators and not the more general term "IT Operations" that, at best, has a nebulous definition.&lt;/p&gt;

&lt;h4&gt;
  
  
  DevOps
&lt;/h4&gt;

&lt;p&gt;The DevOps team drops the developer's input/output instructions into the places that the infrastructure team set up. They set up build servers, integrate with source control, set up deployment scripts. As builds pass inspection they get promoted, eventually to production. It's like development, it's like operations, but it's not either.&lt;/p&gt;

&lt;h4&gt;
  
  
  Quality Assurance
&lt;/h4&gt;

&lt;p&gt;A quality assurance analyst will get a series of inputs and ensure that the outputs are what is expected. They need to get inputs that cover all use cases, as well as inputs that are known to be invalid, to verify that the product they're testing delivers the proper outputs. It's important for the analyst to be able to judge what is appropriate coverage when testing to balance testing efficiency against the release changeset.&lt;/p&gt;

&lt;h4&gt;
  
  
  Security
&lt;/h4&gt;

&lt;p&gt;Security has applications at all levels. There is physical security, for example meeting PCI (credit card processing) standards with a locked, 24/7 monitored data center. There are tools that are placed on the network so that the only inputs and outputs that happen are the ones that are there on purpose. There is additional application security and encryption standards, and then there are users. Users and social engineering traps are believed to only be combated by education. The security team focuses on risk management - danger level and probability - and work towards minimizing risk.&lt;/p&gt;

&lt;h4&gt;
  
  
  Data
&lt;/h4&gt;

&lt;p&gt;All the data being put into IT needs to be saved for later retrieval. Saved data needs secured, backed up, made to be redundant, processed regularly, adjusted for performance, moved around, archived, extracted, transformed and loaded. It's a full time job.&lt;/p&gt;

&lt;h4&gt;
  
  
  Data Analytics
&lt;/h4&gt;

&lt;p&gt;Who needs a visionary leader when you have predictive analytics? Applying statistics to large data sets can reveal previously unknown behavioral patterns (that you can profit from). This really makes academics irate because it doesn't prove causation. But that isn't a concern for the data analyst because randomized controlled trials are a) expensive and b) take too long.&lt;/p&gt;

&lt;h4&gt;
  
  
  User Support (Level 1)
&lt;/h4&gt;

&lt;p&gt;With some tools, training and a knowledge-base, a first-responder user support team can address the majority of support incidents from users. With time, a user support technician develops relationships and becomes a go-to person for many users, who find that a personal understanding of their level of computer knowledge greatly enhances the efficiency of IT.&lt;/p&gt;

&lt;h4&gt;
  
  
  Application support
&lt;/h4&gt;

&lt;p&gt;Internally and externally developed applications need maintained and supported.&lt;br&gt;
Application support technicians, in comparison to level 1 user support, have greater permissions and working knowledge of specific applications. Should the technician be unable to solve an issue, they become the contact team member for the vendor (or development team) that can ultimately repair or extend the application.&lt;/p&gt;

&lt;h4&gt;
  
  
  Media Support and Production
&lt;/h4&gt;

&lt;p&gt;In the case where the company wants to produce a video and stream it to dozens of conference rooms - Media Support and Production can handle this. Admittedly, it's likely less frequent of a request than producing a polished video or supporting a microphone system, but an exciting opportunity nonetheless. They have expensive equipment and they know how to use it.&lt;/p&gt;

&lt;h4&gt;
  
  
  UX designer
&lt;/h4&gt;

&lt;p&gt;There are some smart people out there who will tell you that user experience means everything. A user experience (UX) designer could be employed anywhere in the company with great effect, but in terms of IT their focus is on a product's interface and workflow. If the product isn't a pleasure to use, it needs work. They focus on intuitive design, human-computer interactions, information architecture.&lt;/p&gt;

&lt;h4&gt;
  
  
  Designer
&lt;/h4&gt;

&lt;p&gt;The only time aesthetics can be overlooked is when you plan for no one to ever see it. Graphic design is a joy to practice and challenging to master, and a regular task for the designer. The real challenge is getting the company to follow a consistent aesthetic strategy that can enforce brand identification, and produce assets for consumption across all forms of media.&lt;/p&gt;

&lt;h4&gt;
  
  
  Compliance (Legal, Accessibility)
&lt;/h4&gt;

&lt;p&gt;Compliance can tell you what the boundaries of the law are, and whether or not you're outside of them. Frequently, they need the help of security to ensure compliance, but will cover many topics outside of security - privacy policies, service level agreement (SLA) contracts, acceptable use, user agreements, do-not-disclose (DND) contracts. There are grey areas, and in that case they stress that you show good intent. Do you ever see the legal disclaimers at the end of an email? Not enforceable, but show intent.&lt;/p&gt;

&lt;p&gt;I don't want to miss mentioning accessibility. A lot of work goes into support for blind/low vision, deaf, amputees, paralyzed users and others - and those users' participation in the process is greatly appreciated. Compliance can be the driving force behind accessibility support.&lt;/p&gt;

&lt;h4&gt;
  
  
  Architecture
&lt;/h4&gt;

&lt;p&gt;Responsible growth planning, exploitation of synergies and mapping business needs to IT solutions are the architect's bread and butter. They want a high level view of what is going on to ensure business needs are met while avoiding reinventing the wheel, having efforts duplicated, or starting something now that will be obsolete before it's finished. Depending on the scope of the architect, they may be tackling enterprise-wide problems like "the digital workplace" or looking to extend an existing solution to benefit a separate business unit.&lt;/p&gt;

&lt;h4&gt;
  
  
  Change Control
&lt;/h4&gt;

&lt;p&gt;Change control is said to be like herding cats, at times. Disparate yet highly integrated teams need to communicate changes to avoid collisions and conflicts and Change Control establishes a structured venue for that to happen. Like many aspects of IT, this is a process for risk management. Has it been tested? Will there be downtime? Is there a communication plan after the change is made? We want to know what is happening in the organization ahead of time, why emergency changes take place, and how we can avoid them in the future.&lt;/p&gt;

&lt;h4&gt;
  
  
  Project manager
&lt;/h4&gt;

&lt;p&gt;A project manager is another cat herder, who needs to track all of the moving parts of a big change and stay one step ahead to pull the stops that would otherwise halt progress. They like estimates, burn-downs, Scrums and time tracking software. With that high level view of progression comes an obligation to manage morale as well.&lt;/p&gt;

&lt;h4&gt;
  
  
  IT Manager
&lt;/h4&gt;

&lt;p&gt;IT Management primarily looks after people - people who need tools, budgets, career progression, and to work with other people on the same team and with other teams. In some ways they're like an architect, one eye to the horizon and the other on today. Often they'll be the final say on how work is prioritized, and be able to tell you who needs help when.&lt;/p&gt;

&lt;h4&gt;
  
  
  Honorable mentions
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;Language translation services - frequently outsourced or outside of IT, but kudos to those who translate resources files or JSON in the IDE.&lt;/li&gt;
&lt;li&gt;Product Owners - who are the final say in a Business Analyst's grey area, are welcome in the IT division, but have at least one foot firmly planted in the business side.&lt;/li&gt;
&lt;li&gt;Content Managers - They may as well be members of the IT department, setting up analytics and social media campaigns and having thorough knowledge of content management systems.&lt;/li&gt;
&lt;/ul&gt;

&lt;h4&gt;
  
  
  Thank You
&lt;/h4&gt;

&lt;p&gt;I'd like to personally thank the people who fill these roles - Thank you. I apologize if I missed anyone, misrepresented your role or lumped your responsibilities in with someone else's.&lt;/p&gt;

</description>
    </item>
    <item>
      <title>Hi, I'm Anton Frattaroli</title>
      <dc:creator>Anton Frattaroli</dc:creator>
      <pubDate>Thu, 16 Mar 2017 00:20:08 +0000</pubDate>
      <link>https://forem.com/antonfrattaroli/hi-im-anton-frattaroli</link>
      <guid>https://forem.com/antonfrattaroli/hi-im-anton-frattaroli</guid>
      <description>&lt;p&gt;I have been coding for 22 years.&lt;/p&gt;

&lt;p&gt;You can find me on Twitter as &lt;a href="https://twitter.com/AntonFrattaroli" rel="noopener noreferrer"&gt;@AntonFrattaroli&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;I live in Michigan.&lt;/p&gt;

&lt;p&gt;I mostly program in these languages: JavaScript, HTML, CSS, C#, SQL.&lt;/p&gt;

&lt;p&gt;Nice to meet you.&lt;/p&gt;

</description>
      <category>introduction</category>
    </item>
  </channel>
</rss>
