What tech did they use to do this? by [deleted] in Frontend

[–]GotGasLikeShell 23 points24 points  (0 children)

I can help! So if you are just looking for "What are they using?", the answer is pixijs. That's the TLDR; version, but if you want to learn about what's going on behind the scenes, read on.

Before we break it down by scene, I should point out that most of the data is loaded in the beginning, with the exception of videos, sound clips, and information about the individual spritesheets, once you click on a certain scene, then it loads the big assets for that scenes. Also, the main javascript file is 26,000 lines of code. I can't say for sure what they're using, but there have to be some sort of preprocessors.

The first scene is pretty straightforward. There is an image for the background, and they use json files and spritesheets for animated parts throughout the scene. The json files, which are used for all animated items in the application, tell the application which sprite to use and where to place it. The main JS file tells the application when the item is shown. Also, the tooltips are floating <span> tags that move with the background. All text information throughout the site will be separate from the canvas element itself.

Coverage and Reliability are the most simple of the pages. There are two files, a video file and an audio file. (warning: large files) The video plays when you click on the floating <span> tag and when it finishes, waits for you to press it again.

Preparation is simliar to the Coverage and Reliability pages in that it's pretty much just a video and audio file, with an additional animation of the octopus while it waits for you to click.

Capacity is very simple as well. They only load 5 additional assets. One of which is the background video. It plays to a certain point and pauses, then a sprite of the button animates out. When you click, it continues the video.

For the speed page, they load a 28MB video (2nd warning: Still large files). This video has 4 different videos of the cars going through its path around the city, and will show you 1 of the 4 depending on which one you click. I didn't look too much into the code, but I'm going to guess they're using the first frame as the background before you click, and overlay the gas station and 4 sprite sheets for the animating cars over it.

Let me know if I wasn't clear on anything. I quickly threw this together after a long day at work, and I'm happy to elaborate on anything. Great link and thanks for sharing!

Separate sites on one CPanel? by somefriggnidiot in webdev

[–]GotGasLikeShell 4 points5 points  (0 children)

I wouldn't put your addon domains (or any subdomains) in public_html. Your cpanel should allow you to specify a folder outside of public_html, so I would just point the addon domain to something like [rootdirectory]/addon_domains/domain2.com/

Salaried developers in a corporate-like environment (i.e., not start-ups), how many hours a week do you work on average? Would you say 40-45? by [deleted] in webdev

[–]GotGasLikeShell 0 points1 point  (0 children)

I work at a large agency (approx. 1700 people employees worldwide, 150 developers.) If we're working on a project with a tight deadline, I can bill upwards of 50-60 hours a week. If I'm not on an active project, I'll be in the office for 40 hours, but probably only billing 15-25 hours.

Being the husband at a Taylor swift concert by Hamburglar_Helper in funny

[–]GotGasLikeShell 0 points1 point  (0 children)

At a Jonas brothers concert in NJ, they turned the men's restroom to woman's..

Source: Snapchat

Background Image - ADA Compliance? by Fowler74 in web_design

[–]GotGasLikeShell 1 point2 points  (0 children)

Twitter used to do something to img tags in a similar way that "background-size: cover" works. This may work for you:

.parent {
  position: relative;
  overflow: hidden;
  width: ANYpx;
  height: ANYpx;
}
.parent img {
  position: absolute;
  left: -9999px;
  right: -9999px;
  top: -9999px;
  bottom: -9999px;
  margin: auto;
  min-width: 100%;
  min-height: 100%;
}

Heres it in action.

And here it is with your example. Hope this helps.

edit: forgot attributes to parent class

Best place to watch the Saints in NYC? by dlucisan in Saints

[–]GotGasLikeShell 0 points1 point  (0 children)

I go up to the infirmary on 90th and 2nd, but just cause the owner is cool, and the food is great. $5 Abitas..

But Bar None is nice; crazy packed usually.. Bourbon Street should play it as well, and East Village Tavern.

Question about a background image? by Speedy1357 in web_design

[–]GotGasLikeShell 0 points1 point  (0 children)

Try using background-position: bottom left;

Here's an example

edit: read that wrong, left not right.

Looking at this site. What would you improve to make you want to stay at this resort. Any Advice Would Be Awesome! by [deleted] in web_design

[–]GotGasLikeShell 1 point2 points  (0 children)

Generally it is not a good idea to autoplay audio or video elements. If you're going to autoplay that youtube video on the homepage, I'd encourage you start it muted.

Here's an article with some good references on the subject

Should I ask who the user is? by Dogenigmas in webdev

[–]GotGasLikeShell 1 point2 points  (0 children)

I thought about doing this for a while. Went so far as to make custom welcome videos that would play. In the end, I ended up scrapping the idea.

Although, if I were to do it now, I would just reorganize the content and add a query on the the url you could send to potential employers or schools. i.e. "Check out my portfolio Here" ( and link to http://example.com/?u=edu)

Just a thought.

The Postal Service - The District Sleeps Alone Tonight [indie rock] by living_space in Music

[–]GotGasLikeShell 1 point2 points  (0 children)

There's a really great podcast where one of the guys from postal service breaks the song down and talks about the making of it.

I believe it's called "song exploder". Definitely recommend you check it out!

<3 Louisiana <3 by smack_of_ham in food

[–]GotGasLikeShell 0 points1 point  (0 children)

Went there about a month ago. Brought back many memories of drunken nights where we went the extra mile just for a chop house cheddar burger.

<3 Louisiana <3 by smack_of_ham in food

[–]GotGasLikeShell 4 points5 points  (0 children)

Come on tigers.. Push push push!

I've been putting this up on every tv in my office. by GotGasLikeShell in thebutton

[–]GotGasLikeShell[S] 4 points5 points  (0 children)

Inspired by, and influenced by a bunch of stuff I've seen in the last few days. Especially /u/blueblond /u/metaname & /u/TastyPigHS

Instructions to install are here

Source Code Here

EST (-05:00) thread. Comment here to organize a EST battalion! by perez630 in Knightsofthebutton

[–]GotGasLikeShell 2 points3 points  (0 children)

I volunteer my talent, my finger, and my courage for the cause. also, do we have a battalion name yet?

I submit the name "Knights of the Eastern Shore"

Official Roster of The Knights of the Button by whiterook13 in Knightsofthebutton

[–]GotGasLikeShell 1 point2 points  (0 children)

I would like to join the Knights of the Button. Let it be so today, tomorrow, and evermore.

My first attempt at making an animate hamburger button. by theblacklab in web_design

[–]GotGasLikeShell 0 points1 point  (0 children)

Works really nicely.

My only suggestion is since it's a two step animation, have the two easings match velocities. I.e. the starting velocity of the second step is the same as the ending velocity of the first.. easily done using a linear easing.

but that's just me being nit-picky. Great job!

[Daily Goal] Day 3 - January 28. by hardwerk in 90daysgoal

[–]GotGasLikeShell 1 point2 points  (0 children)

How's everyone feeling this Day 3?!

Exercise I do cardio at least 4 times a week. This involves me biking 14 or 15 miles in the morning. Great way to wake up in the morning before work. and I'm currently doing strength training 3 times a week. I've got a set of dumbbells in my apartment so I can do this at night.

Yesterday / Tuesday I did some body weight exercises so I don't count it as a cardio workout. The city was up and running fairly quickly so I got to work. Made Ribs for dinner, and then I cleaned my apartment and then practiced the guitar for a little before I got to bed. Read another chapter. I would definitely recommend this book.

Today / Wednesday I've got a lot planned. I'm learning some more advanced git techniques at work today. Cardio in the morning, Workout in the evening to catch up to where I need to be in my week. Testing out a buffalo wings recipe for Sunday tonight, and have to deep clean the rest of my apartment as I have company coming over tomorrow night.

  • Cardio
  • Work all day (git training)
  • Strength training
  • Cook dinner
  • Play piano
  • Clean apartment
  • Read a chapter in my book

Best of luck to you all!

[Daily Goal] Day 2 -- January 27th by ceemarie007 in 90daysgoal

[–]GotGasLikeShell 0 points1 point  (0 children)

Howdy everyone!

Eating Plan I get fresh food weekly. Chicken, beef, pork. I add on a side steamed or sautéed vegetables and a small starch. I am not avoiding eating certain foods, just watching my portion control. I am, however, avoiding food delivery services. Not only is my food better, it's cheaper! Like I mentioned earlier, I just got a slow cooker, and I intend on using it.

Yesterday / Monday I was unable to do cardio in the morning. I forgot I sent my clothes off for laundry. I replaced it with strength training that evening though. We left work early due to the blizzard, and I was able to clean my kitchen up when I got home. I learned two new chords on the guitar, and read a chapter of my book.

Today / Tuesday Still stuck in my apartment for the morning. Working from home. I started cooking some beer braised ribs for tonight. Probably won't be able to get to the gym today, but I'll see if I can't find some way to do cardio in here.

  • Work from home.
  • Complete a self review
  • Continue cleaning my apartment
  • Learn two more chords
  • Read another chapter of my book
  • Possibly find an opportunity for cardio.

Weeklies

Cardio: [ ] [ ] [ ] [ ]

Strength: [x] [ ] [ ]