Ethiopia:

Prime Minister quit abruptly. A state of emergency 2.0 declared. Succession talks heating up.

Kosovo:

The ratification of a border demarcation deal with Montenegro. Kosovar’s are unable to move freely in the EU’s Schengen area

Russia:

Pavel Grudinin is the most popular presidential candidate right now. “Elections” begin next month.

Pakistan:

Cricket. PSL (Pakistan super league) has started so it’s a very talked about topic right now.

Hong Kong:

There was a deadly bus accident that killed 19 people. Bus driver was speeding because passengers were angry that he was late. It’s triggered a lot of discussions about people being overworked and underpaid.

Brazil:

Upcoming Presidential vote this year. Former president Lula is running for a third term. He’s being attacked by the partidos (right, central-right), but people feel he will probably win again.

Colombia:

The supreme court investigation against former president Alvaro Uribe. The charges are he and others were planning to plant witnesses to falsely testify against an opponent Senator.

Malaysia:

The Prime Minister is being mocked for eating pricey quinoa instead of rice.

In 2012 I left Google to join The Obvious Corporation, a small company with the mission of building systems that help people work together to make the world better.

One of the things that attracted me to Obvious was how much Ev and Biz were thinking about the company they wanted to build, not just the product. They were asking why companies got worse as they got bigger: why do people become less engaged, teams become less productive, and bureaucracy ends off feeling like a force of nature? Shouldn’t work be better?

“Why do network effects make internet products better but make internet companies worse?”

As I took over leadership of the engineering team and helped grow the company’s operations, working on how we work became a personal mission of my own.

In every minute of free time, I explored the nature of work and researched how the most progressive companies operate — from Netflix to Bridgewater, Patagonia to Spotify, Disney to Amazon — I started to see patterns and opportunities. Many perennial problems had been solved, but often within the confines of a single organization. Everyone seemed to be reinventing the wheel, and when best-practices did emerge, they seemed overdue.

To paraphrase Gibson, the future [of work] is here — it’s just not evenly distributed.

I realized that instead of solving these organizational challenges for the one company where I worked, there was an opportunity to build software that helps people solve these organizational challenges everywhere.

So, last April I partnered with Jennifer Dennard and Braden Kowitz to start a company — Range Labs Inc. — with the goal of helping people build healthier companies. To range is to explore — to search the world for what’s next. The world is changing and organizations need to adapt and evolve.

Jen’s career choices show she has a passion for helping people enjoy their work — and their lives — more. She’s worked with companies big and small to improve their workplace culture during times of pivoting and intense scaling. We met at Medium, where we collaborated on new people programs, and company wide org design efforts as we changed operating structures. She’s an advocate for a new approach to human resources that focuses more on the person and their needs.

Braden was an early designer at Google and has built products used daily by millions. He co-led design on Gmail for several years, where we worked together on Gmail Chat, pushing against the capabilities of the early web. Then at Google Ventures he advised dozens of startups, teaching them how to listen to customers, scale design teams, and build processes that support innovation. He is the co-author of the New York Times Bestseller, Sprint, and has spoken at design conferences around the world.

At Range, we believe that healthy companies aren’t simply better places to work, but do better work and will ultimately be more successful. We know that software can’t solve all problems, but the fact that so much of our work-life is mediated through software means that there is a huge opportunity to rethink how our tools affect how we work with each other.

Over the last few months I’ve joked that we’re not very good at being a “stealth startup.” We’re too excited about this space to keep our mouths shut.

We nerd out about meetings (not in meetings… about meetings), team structures, and work cadences. We love talking to people about people-centric leadership, learning organizations, and helping friends diagnose organizational issues. We believe in networks, in transparency, in individual empowerment, and in the need to bring more humanity to our work.

And we believe in working in the open and sharing knowledge, so follow this publication as we each share what we’re working on, what we’re excited about, and what we’re learning from folks we’re talking to.

Hello World was originally published in Range Labs on Medium, where people are continuing the conversation by highlighting and responding to this story.

Agile Resource Planning

Time Tracking is an essential part of Agile software development. To make resource planning effective, you need to track the time you spend on tasks so that developers, technical management and product managers gain insight into project progress and how much work remains outstanding.

Time tracking is built right into Manuscript, and enables you to not only record time spent on each case, but from that logged time you can keep timesheets useful for keeping clients and customers informed, as well as generate reports and visualizations that show how individuals and teams spend their time. Like ‘Hours spent per person, per project’, or burndown charts, showing hours remaining to complete a project displayed over time.

It also provides the raw data, along with estimates, that powers our unique Smart Scheduling feature, which uses AI to calculate ship date probabilities and predict software schedules.

Tracking Time

We provide the facility to log time automatically. To make it easy to track your time, Manuscript uses your working schedule (which can be set at Time Tracking > My Working Schedule) to stop the clock automatically whenever you go home and start it again automatically when you come back in the morning. It also stops the clock during lunch breaks and when you’re on vacation, etc. That way you only need to change the “working on” case when you switch from one case to another. You can specify a site-wide working schedule, along with individual team members’ working schedules when they differ.

And now any case that has an estimate will show a start/stop work button directly in the case itself. This makes it even easier to record what it is that you’re working on, and provide accurate time information. This benefits everything you use time tracking for, from better probabilities of project completion, to more accurate reports that keep management informed and eases project planning.

Learn more about managing projects with Manuscript.

The Time Has Come to Push the Button was originally published in Fog Creek Software on Medium, where people are continuing the conversation by highlighting and responding to this story.

I recently wrote a 427-tweet thread that a great many people contributed to, with many wonderful replies:

Things that surprised/amazed me about Japan, an ongoing thread. (More likely UI than food, but you know this already.) It's my first time here. Please comment away and/or point out my cultural insensitivities!

 — @mwichary

It was a great deal of fun for me, and I am not sure this could’ve happened anywhere else but on Twitter. However, creating and maintaining the thread was painful, and — much more than ever before — reading and participating in it seemed also to be painful to others.

This is a list of my observations and suggestions on how to make it better. I don’t know how common this use case is, and how exactly it relates to other Twitter/threading use cases; I wanted to share this in case there’s something useful in here.

I bolded my suggestions so it’s easier to scan this quickly.

Setup: I used my iPhone 6S to take photos, and posted most of the tweets using the official Twitter iOS app on the same phone.

1. Threads are slow to load

In the iOS app, opening any tweet in a thread shows it immediately, but the context of the thread (surrounding tweets) and the UI to append to the thread are slower and slower to load the longer the thread gets.

This feels like an unintentional punishment for creating longer threads. It’s there for me as a writer, and — more importantly — it’s also there for readers. Currently, looking at the later tweets in the thread (example link to one) on good wi-fi takes over 90 seconds to load the surrounding context and UI. (And looking at it on cellular made me worried about data charges, as it seems consistently slow and therefore probably not cached?)

It seems like this could be optimized to load in constant time (perhaps show the first few items in the thread and then a Load more item, in between, similarly to what’s done in notifications?). Or cached once loaded. It’d also be good — and it feels like good practice — to see the related UI (Add another Tweet button) appear immediately without having to wait for the content. Lastly, some sort of a loading indicator would be nice to add, although perhaps only if the thread is expected to be long.

(The desktop web experience doesn’t seem to have that problem.)

2. There is a nasty scroll up bug

In the iOS app, if you open any tweet further down the thread and scroll up or down even just a bit before the context/UI finish loading (or even attempt to scroll)… the moment they do, you get moved up all the way to the top of the thread, losing whatever orientation you had.

It’s really confusing at worst, and infuriating at best, when you understand what’s going on but — after having waited 90 seconds and accidentally touched the screen and scrolled it— are still powerless to stop it.

Please fix this bug. It’s been there for so long.

3a. It seems easy to lose track of the thread

As you read, the thread gets truncated at some point, with responses to the “selected” tweet (the tweet with big letters) taking over. There is a call to action to keep reading the thread, but it’s tiny and that makes it easy to miss it — and that assumes you know to look for it.

The call to action also says X more replies, not using the word “thread,” even though the UI to enter the thread calls it that (Show this thread).

Even when you find that call to action in the middle of scrolling and tap on it, you’ll have to fish for it next time, too, as the responses to the original tweet keep hanging in there at the bottom of the chute.

(There is also a bug you could see above, where for some reason the number never goes above 171? That might add to the confusion — you tap it once, scroll down, and the number remains the same.)

3b. The conversation UI seems confusing, in general

The above three problems — slowness, scrolling bugs, extending UI — contribute to the confusion, but I think even without them it’d still be hard to participate in a conversation where people respond to various tweets in the thread. Here’s a sample of the problem:

I don’t think people intended to respond with the same answer despite others having done so before them. I believe they responded because they never saw the other answers.

This was the first time I actually wrote a little explainer…

Pro tip if you're following this thread: tap or click on tweets that interest you; many have feedback and thoughts from awesome people who understand things better than I do. (Also, thanks for following this thread!)

 — @mwichary

…and I had so many questions — on Twitter or otherwise — about how to read the replies to a tweet in the thread. It’s confusing (here are some comments), even if it’s explained to you: the replies to the “selected/current” tweet appear nowhere close to the tweet but far below, separated by 30 subsequent tweets in the thread.

I have a few tactical suggestions:

• Make the “tap here to extend the thread” UI more visible, and tie its label more to the notion of a thread (right now it reads as replies from others).
• If you tap on the action to extend the thread, consider making the initially “selected” tweet not selected any more — or at least remove the replies to it from the bottom. This way, reaching the end of the visible part of the thread will also mean reaching the bottom of the scrollable chute, Fitts’s Law and all that.
• When you start navigating within the thread (e.g. tapping on various tweets to make them “selected”), maybe reduce the distance between the currently “selected” tweet and the tweets replying to it from 30 to much lower? Since the intent of the reader is then to engage with the replies first, and the thread later.

I do have a sense that a more profound redesign of this entire UI would be in order, however, to better accommodate threads with replies to them.

4. It’s hard to stay on top of notifications

The very moment your tweet/thread become nanoviral, your notifications get shot. It feels like the service punishing you for doing a good job. Two things in particular are frustrating:

• You can very quickly run out of notifications buffer — you scroll back and at some point the notifications just stop without any warning. If you don’t want to miss out on a reply to you, this forces you to be on top of your notifications, and that’s stressful. I talked about it a bit more before. One idea would to be to extend the notifications buffer. The other, to perhaps allow you to paginate notifications, or allow to choose a specific date and be more intentional about reading notifications than just the rudimentary (and getting slower and slower) infinite scroll.
• Notifications pane has two modes: All and Mentions. I expect the second tab to also include quote tweets, but they’re not there. That forces me to use All not to miss anything — and wade through tons of likes and retweets that are not pertinent. Suggestion: Please add quote tweets to the Mentions view.

5. It’s easy to make a mistake and mess up the thread

If you mess up and continue the thread not from its last tweet, the whole thing breaks — you can follow up to the beginning from a misplaced tweet, but you will no longer be able to read the entire thread when you start from the beginning.

This makes sense, but it feels too easy to arrive at this state. It happened to me twice in the above thread alone, where I later had to delete some tweets and republish them in the correct order. (Leftover proof where someone else helped me figure it out.)

I think a feature to reconnect/reshuffle tweets in a thread would be an overkill. Making the UI appear faster (as per above) would help. Perhaps there’s a chance to introduce some sort of a thread end mark, maybe even visible just to the author? It could be a typographical glyph, or it could be just a change in the UI. Right now in my own stream the last tweet in a thread has the same text as any tweet before: Show this thread. Maybe there’s an opportunity to make the last one special?

6. It’s hard to keep track of which photos were already included

Managing photos is a small private hell: choosing photos to be portrayed, remembering to filter them, remembering which ones were already used. This is mostly on iOS, not on Twitter. As a matter of fact, Twitter has a pretty good photo selection UI.

However, one feature request that would make this so much easier: when I’m selecting photos to be attached to a tweet, please indicate (gray out?) photos I already attached to (other) tweets before.

That’s it! My DMs are open if anything here needs clarification. Screenshot frames thanks to mockuphone.com.

We have a new brand! Friends, let us show it to you.

The measure of a good brand is what it can do. It’s a bit of cultural code that you can continually expand and execute in new context. Viral, but in a good way.

A long, long, long time ago (six months?) we decided it was time to rebrand Postlight. Our early identity had been made for a baby company unsure of its footing. At the same time we weren’t quite ready to have a three-day offsite with a large branding firm to talk about our core values. So we pulled Will Denton into a meeting room. Will was then a new designer here, unsullied by our peccadilloes and preferences.

Will, we said, you’re a new designer here, unsullied by our peccadilloes and preferences. How would you like to take on the impossible task of rebranding the company where you work every day? Keep in mind that we’re a platform and product shop, not a branding shop, which means we have all the opinions of a branding shop but none of the respect for the process.

Will, to his inestimable credit, continued to meet our gaze. “I will,” he said. Or maybe he was simply asserting his personhood in the face of having to serve as a one-person creative agency inside a firm with very strong opinions about everything: “I, Will.”

Our brief:

• It needed to feel familiar, as if we’d been around for a while.
• And extremely modern, because we’re a technology company.
• And you know, finished. But also incredibly flexible.
• Because we’re growing in every direction. But don’t want to identify those directions because we don’t want to limit ourselves.
• It truly needs to work on our website, across social. Maybe in Keynote decks. But also PDFs, statements of work, MSWord docs, Google Docs, spreadsheet headers, invoices, business cards, marketing brochures, posters, short books, motion graphics, videos. Oh, and in-house events. We might hold a mini-conference.
• Plus holiday cards.
• Since we’re going to be working with outside firms, it should be easy for a newcomer to apply the brand.
• And lots of animations?
• Don’t overthink it.

And that’s…exactly what we got, with great credit to Will and the Postlight design team. We are grateful! And we promise never to make you do this again.

—Paul (take it away, Will…)

Growing up

We wanted to reflect the fact that Postlight has grown up. We’re a young company but many of our client relationships go back a decade or more. It was time to stop pretending that “ad hoc” was okay, and button up. And this is where we ended up—

Brand ≠ Logo

The way we got there was by thinking ground up about what the brand of this place means. A rebrand is of course much deeper than just a logo. We sought to align all aspects of our business to a singular, unchanging idea. This helpful diagram will explain that:

People’s Perception of Us Drives Meaning — and Action!

The way we got there was by doing a Google Design Sprint, which I strongly recommend if you need to get busy, opinionated executives to sit down and think through where their company is going. Ultimately the brand can only reflect the culture of our organization—the founder’s values, the culture of the different teams (engineering, design, and product management) and the larger network in which our company operates. The brand has to reflect that, so it’s good to take time to get it right, nail down those values, and think hard about where those values are going.

The Wordmark

Our name is meant to stick in the minds of our peers, clients, and prospects. To hell with little icons. We don’t need to hide the name. We needed to look focused — but be flexible too. Thus we landed on the overline. Or the “dash,” or “eyebrow.” A diacritical mark so simple it can be reappropriated for future applications—see below:

!Brand-splaining ahead! It is an accent yes, but it serves as a beacon. A reminder to ourselves what is post light. What is just beyond the technological horizon and how we can harness it to serve our brand promise.

Are we there yet?

We soft-launched our new site and look-and-feel before the holidays. So are we done? Of course not! It’s a perpetual process. We ship ideas, test assumptions and iterate on insights. It’s quite on-brand to ship our identity like we ship our products.

It’s a journey. We appreciate any feedback, and we invite you to come along with us as we mature and evolve!

Make the Logo Bigger was originally published in Track Changes on Medium, where people are continuing the conversation by highlighting and responding to this story.

Whether you’ve been programming for decades or are just starting, everyone who codes is constantly in the process of learning new things. It can be frustrating to know just where to begin, but we’re here to help. Actually, the whole community is here to help you. We built Glitch to be a fun and friendly way to build the app of your dreams, and we are seeing a number of crafty developers and global tech companies use Glitch to teach you everything from building a simple website to creating an immersive VR experience.

Earlier this year, we rolled out our free React Starter Kit, and this week, we launched our Website Starter Kit. These are two great ways to learn coding using Glitch, so let’s take a look at how you can use Glitch to teach others!

The A-B-Cs of WebVR 🌐

WebVR is a JavaScript API that lets you bring virtual reality experiences to the Web. These WebVR experiences also work on VR headsets like Oculus Rift or Google Daydream! If you’re interested in learning more about it, take a look at A-Frame School. This interactive course is presented as an in-browser slideshow (that also works on mobile devices!), and guides you step-by-step through setting up Glitch as your development environment, introducing you to the basic elements and features, and provides you with several lessons and examples. Each of these lessons can be remixed on Glitch, so you can really get hands-on experience with the code.

Animating Animals: Boarding the Choo Train 🚂

Already have a little experience with HTML, CSS, and JavaScript? Take the next step and make your own interactive web app using choo! This great onboarding example in the Choo Handbook gives you great instructions and code examples on getting started using choo on Glitch by building a fun animals app. By the time you’re finished, you’ll learn the basics on creating templates, modularizing your code, and other helpful concepts which will help you build any app you can imagine.

Learning to Search: Rating Tweets with Algolia 🔍

When there’s already a ton of documentation around a particular language or framework, sometimes a simple blog entry is best. It’s also a great way to highlight new projects or features, which is what Algolia has done with their Glitch app We Rate Tweets.

Instead of walking users through building the app themselves, Algolia wrote a blog post which shows off their new app, tells people how to use it, and gives you instructions to remix it to have your own copy to use. All you need is a Twitter account and an Algolia account to get started!

Developer Docs from Tech’s Titans 👩‍💻

Glitch is super approachable for beginners, but it’s also powerful enough to be used by some of the biggest companies on the Web. We talked about how A-Frame uses Glitch for their interactive slideshow, and Mozilla also uses Glitch to teach developers as well! Mozilla’s post on creating multi-user experiences with A-Frame shows you how to create shared, persistent and interconnected 3D virtual spaces using WebRTC. If you want to make your own slash commands for Slack, Airtable provides you with detailed instructions on using Glitch and the Airtable API to make that happen. Samsung explores how to use web components to build visualizations and configure a midi controller — perfect for anyone looking to become a VJ and show off some cool effects. Lastly, Google will teach you how to get started using Workbox for NPM, a way to improve load performance for your website and make it work offline.

But what about the rest of us? 🤔

We’ve shown you a lot of examples of what companies are doing with Glitch, but lots of developers out there are using Glitch in amazing ways. The team at Trove has several starter kits to show you how to create your own Twitter bots. Remix any of their bots, add your own personality, and give it a try! Live out your horror fantasies and make a dark and stormy night come alive using this fun tutorial from software developer and educator Kelly Lougheed. It uses regular HTML and CSS animations for everything! And this article from Red Hat’s developer evangelist Nicolas Grenié really embodies the spirit of what we want to accomplish with Glitch — getting better at programming by helping others. Teaching really does help you gain a better understanding!

These are just a few examples of how Glitch is used to teach developers across the Internet. The sky’s the limit when it comes to what you can learn, and we’re here to help you succeed. Don’t worry, you’ve got this!

Each One, Teach One: Using Glitch for Learning was originally published in Glitch on Medium, where people are continuing the conversation by highlighting and responding to this story.

Have you ever thought of making a website for yourself to showcase your portfolio or business — A Simple About Me Website that is easy to make to put on your resume or linkedin Profile that looks really nice and mobile friendly… Easy Right? 👇

In reality, it never ends being a Simple.. Process.. 😞

Unless you are Developer.. you will have to pay 😦

You have to go to GoDaddy ..buy domain name and pay for hosting and so many other fees..

I just want a web presence.. This shouldn’t be too complicated..Right?

Let’s Get Started… 🚀

Goal — Make a personal website to showcase skills, professional, hobbies. Get a Link to Share with Friends or Resume..

We will be using a website called — Glitch.com 💻

Make an Account Using Facebook or Github. It’s Free! Yeh.. there’s no catch they believe in Open-Source, you should help each other out. There is no credit card need just sign up for an account.

Search for ‘Freelance-Theme’ in Right Search box 🔎

Click on it and then hit ‘Remix your own’ ♻️

Glitch — each app can remixed to you account and then you can make changes. These ‘apps’ are boilerplate or template code and you can add on it instead of starting from scratch. This process helps us save time and quickly get started without needing to worry about installation and setup.

Now that we have our project and we can see it live on the browser, any changes we make to index.html will automatically show up on ‘show live’ tab.

Change the top left to your name and Let’s start making changes inside index.hml. All Web pages are broken down into three main sections — <HEADER> <BODY> <FOOTER>.

Based on where each section is we will simply change the text in between the html tags.

HEADER — Now change your Name and your skills.

BODY — Let’s Change About me section.

FOOTER — Same as above, lets add some links to facebook or linkedin.

If you need to find where the html tags are — on google chrome ‘Right click’ > click ‘Inspect’ — It open console to view html in browser

That’s all Folks! ☮️

By using all the html tags and bootstrap theme — we can simply change texts in between and have professional looking site that is mobile friendly with nice clean design.

Need more help.. Feel free to remix mine 👍 https://glitch.com/~ronakchovatiya

Learn HTML / CSS / Javascript by creating About Me — Resume Website using Glitch with ease.. was originally published in Javascript Testing on Medium, where people are continuing the conversation by highlighting and responding to this story.

Being so short on time I built it out of off the shelf parts carefully picking my tools to build it rapidly. This blog post will introduce the tools I used and the difficulties with joining them together to make a game.

You can play it right now, in your browser with no download. It is very short, after all I only had a week to make it:

I wake up with Anxiety

My goal for the game was to build a 3rd person rpg you explore either through interacting with the text or by exploring the 3D environment. Which works on phones and desktop computers.

Having only a week of weekends and evenings to put it together (about 20 hours in total) I had to pick my battles very carefully.

Firstly I picked the technologies I felt could help me build the scene fastest:

• A-Frame — A 3D engine controlled through HTML
• 3Dio—An amazing tool for designing and exporting 3D architecture in the browser.
• Twinery — A really fun narrative game engine designed for producing text games it exports to HTML.
• Glitch — A service for building and hosting web software. Provides a developer environment and the capabilities for running a node server.

Of these tools Twinery is the most prescriptive as it outputs the whole HTML file, which is what I will be publishing to Glitch. Because it is the most prescriptive it is what I will have to work with to add in my 3D features.

Fortunately Twinery gives us good JavaScript injection abilities allowing me to pull in the other resources I need.

You can explore full source code by saving the webpage as a .html file and opening it here: http://twinery.org/2/

Now we have our scene I wanted to add the 3D abilities. This meant adding A-Frame. The nice thing about A-Frame is that it is controlled through HTML so I can add my scene by using JQuery to add the A-Frame JavaScript library and injecting some HTML to the top of the page.

$.getScript('https://aframe.io/releases/0.7.1/aframe.min.js')
.then(function() {
 document.body.insertAdjacentHTML('afterbegin', `
    <a-scene vr-mode-ui="enabled: false">
      <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9" shadow></a-box>
      <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E" shadow></a-sphere>
      <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D" shadow></a-cylinder>
      <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4" shadow></a-plane>
      <a-sky color="#ECECEC"></a-sky>
    </a-scene>
`);
});

A-Frame is designed to be used for virtual reality so it provides additional controls to use it with a VR headset. My game isn’t intended to be used with VR so I disable these controls by adding vr-mode-ui="enabled: false;" to the <a-scene> element.

The A-Frame element I inject to the top of the page is by default hidden behind the Twinery story elements so I need to use some CSS to show the 3D scene. To do this I make the <tw-story> element transparent and ignore pointer-events. Also I move the <tw-passage> element to the bottom of the screen and let it scroll incase of long messages.

Twinery has a place to enter CSS to do this I hide the tw-story I place the tw-passage at the bottom of the screen and make the a-scene fill the whole page.

tw-story {
 background: transparent; 
 pointer-events: none;
 padding: 0;
}

tw-passage {
  background: black;
  border: 4px double white;
  font-size: 1.5em;
  line-height: 1em;
  pointer-events: auto;
  margin: auto 1em 1em 1em;
  padding: 1em;
  max-height: 40vh;
  overflow: auto;
}

a-scene {
  position: absolute;
  top: 0;
  left: 0;
  transition: opacity ease 2s;
}

Now we have the funamentals set up I want to be able to control the scene from the Twinery passages.

The default scripting engine in Twinery is called Harlowe, it is designed to manage dynamic text and traversing between different passages. Here is the code in the first passage.

• It displays some text and then some text the user can click on. If they press ‘Go back to sleep’ it replaces it with a new line of text urging the user to continue.
• The text ‘Check it out’ is a link to anoter passage called ‘wake’

//Boom Boom Boom Boom// The banging echoes through my head.

Is it the door? Am I dreaming?

[Go back to sleep]<gosleep|
[[Check it out->wake]]
(click-replace: ?gosleep)[//Boom Boom Boom Boom//, the unceasing poundings, echoes in my ears. 
  
I'm probably imagining it but I should check it out.]

If you put a script tag in here it gets executed as soon as it is written to the screen:

[Make the box green]<green|
(click-replace: ?gosleep)[The box is now green.
<script>
  document.querySelector('a-box').setAttribute('color', green');
</script>]

This can be used to control the 3D scene which is good enough for a one way binding in the scene where the 3D scene represents the game.

This wasn’t quite enough for me I want a two way binding where the clicking the text can update the scene OR clicking the scene can update the game state.

Normally the game engine doesn’t expose state or internal macros to the JavaScript but it is possible to hack access to these. This is not supported in the Harlowe game engine so I cannot garuntee it will always work:

(print: (function () {
  window.harlowe = {
   state: State,
   macros: Macros
  }
  return JSON.stringify(State, null, '  ');
 }()))

This accesses the State and Macro variables and attaches them to the window making them available from all of my JavaScript code as harlowe.state and harlowe.macros.

I can use these objects to manipulate the internal state of the game engine.

Building the Environment

I have seen some amazing A-Frame demos made with the Architecture tools of the great Archilogic team so I knew their tools would work with my scene.

I spent a few hours building a scene. It was really fun, I felt like I was making it in the sims there was a wonderful selection of furniture.

The most amazing feature in my opinion is the lightmap baking. Once i had built my scene it could automatically generate a baked light map which looks amazing!! This is normally something which is very time consuming to set up well so having it built in as a one button feature is wonderful!

Look at the lights in the bathroom. The sunlight streaming through the shower curtain and being projected onto the wall!!

It took me a while to figure out but I was able to embed it into A-Frame scene with a few lines of JavaScript, first I add the 3dio library with $.getScript then I use it:

// I can get the sceneId from the URL (not a real uuid)
const sceneId = 'aaaaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa';

$.getScript('https://dist.3d.io/3dio-js/1.1.x/3dio.min.js')
.then(function () {
  return io3d.scene.getAframeElements(sceneID);
})
.then(function (els) {
  const sceneEl = document.querySelector('a-scene');
  sceneEl.querySelector('#scene-target').appendChild(els[0]);
});

In this case the position of the scene was displaced by 40 units in the x direction making it a little awkward to use until I moved the camera starting point to compensate.

Adding interactivity

I added a 3D head to be the character it is a model I got commisioned a few months ago to use as avatar for me in VR experiences.

I wanted to move it around the scene.

<a-entity obj-model="obj: #ada-obj; mtl: #ada-mtl" 
ada-model="eyes:3; mouth: 3;" position="-43.615 0.6 -0.312"
scale="0.08 0.08 0.08" shadow="cast: true; receive: false;">
</a-entity>

My first guess was to react to the use clicking on the floor and then moving the user there.

Unfortunately this often resulted in the user walking in straight lines through geometry to get places. Fortunately this can be solved with a Navmesh.

A Navmesh describes the areas of the scene a character can walk on. There are also tools to allow path finding around a Navmesh making it very useful for building explorable environments.

Don McCurdy’s amazing article on creating Navmeshes was invaluable here:

Creating a nav mesh for a WebVR scene

To generate the Navmesh for this scene I first downloaded it as an OBJ model from the Archilogic website. Unfortunately it did not download any of the furniture models with it. But it would do.

I followed the tutorial and tweaked the settings to generate the Navmesh for the scene which I exported as Gltf.

I also added the scripts for the Navmesh A-Frame components to my scene so that I could make the character walk around.

As well I added a camera which would follow the user.

The final HTML I add to the page looks like this:

<a-scene
 io3d-lighting vr-mode-ui="enabled: false">

<a-assets>
  <a-asset-item id="ada-obj" 
src="https://cdn.rawgit.com/AdaRoseEdwards/metaverse/master/static/models/ada/vr-ada.obj"></a-asset-item>

  <a-asset-item id="ada-mtl" 
src="https://cdn.rawgit.com/AdaRoseEdwards/metaverse/master/static/models/ada/vr-ada.mtl"></a-asset-item>

  <a-asset-item id="navmesh" 
src="https://cdn.glitch.com/b4fd6fd6-484f-46a9-abd9-b602f64aa92a%2Fnavmesh.gltf"></a-asset-item>
</a-assets>

  <!-- Black background -->
  <a-sky color="black"></a-sky>

  <!-- character model has the id #target -->
  <a-entity obj-model="obj: #ada-obj; mtl: #ada-mtl" 
ada-model="eyes:3; mouth: 3;" position="-43.615 0.6 -0.312" id="target" 
scale="0.08 0.08 0.08" shadow="cast: true; receive: false;" 
nav-controller="speed: 1.5"></a-entity>
 
  <!-- The Building Elements get injected here-->
  <a-entity id="scene-target">
  </a-entity>
 
  <!-- navigation mesh for the floor -->
  <a-entity gltf-model="#navmesh" nav-mesh 
visible="false"></a-entity>
  
  
  <!-- orbit cam looks at #target -->
  <a-entity camera="fov: 50; zoom: 1;" position="-44 3 5" 
orbit-controls="invertZoom: true; autoRotate: false; target: #target; 
enableDamping: true; dampingFactor: 0.5; minDistance:4; maxDistance:20; 
maxPolarAngle:1.0; minPolarAngle: 0.2; enableKeys: false; enablePan: 
false;"></a-entity>

</a-scene>

We are now ready to add mouse interactions. To do this we will use a raycaster to work out where the user is clicking on the scene.

This functionality is added in a helper JavaScript file I wrote. Full source.

It is a little complex so I will break down how it works.

First I create a new rayCaster to use do the detection and I get a list of elements which I want to detect.

const raycaster = new THREE.Raycaster();
const scene = document.querySelector('a-scene');
const furniture = Array.from(document.querySelectorAll('[nav-mesh],[io3d-furniture],[io3d-closet],[io3d-door]'));

Many of the objects in the Archilogic architecture are actually invisible and their geometry has been all joined into the scene. This breaks raycasting. Fortuantely the original objects are still present so first I have to make them all visible when I do a click. Once the raycasting is complete I hide them again so they don’t accidentially get rendered.

const invis = furniture.filter(o => {
  if (!o.getAttribute('visible')) {
    o.setAttribute('visible', true);
    return true;
  } else {
    return false;
  }
});

I then configure the raycaster based upon the mouse position and current view:

const camera = scene.camera;
const mouse = {
  x: (e.offsetX / scene.offsetWidth) * 2 - 1,
  y: -(e.offsetY / scene.offsetHeight) * 2 + 1
};
raycaster.setFromCamera(mouse, camera);

We can now do the raycasting.

const intersects = raycaster.intersectObjects(furniture.map(o => o.object3D), true);

We then interate over the intersections and filter out any objects we don’t care about.

If the user clicks on an object and that object’s name matches that of a passage we jump to that passage using the macros object we hacked access too earlier:

window.harlowe.macros.get('go-to')(['', passageName]).TwineScript_Print();

If the user clicks on the floor we use the navmesh component to move the user to that location.

const ctrlEl = scene.querySelector('[nav-controller]');
ctrlEl.setAttribute('nav-controller', {
  active: true,
  destination: intersection.point
});

Now we’re ready to write some story

We’re now ready to start writing some story. There is some additional functionality I added to handle some story elements.

For example starting some passsages will trigger the character to move to walk to a new position.

There is also some functionality for limiting the interactable elements to those in the room the user currently is.

Hosting and Publishing

The server is on Glitch. Unfortunately a bug in Glitch prevented me from uploading the large HTML file. Instead I rename it and uploaded it to the assets folder as a plain text file.

To get around this I made a small custom server. When a request for the page is made it downloads the file from the CDN and injects metadata for SEO and social media before serving it to the user. It is not an optimal solution but it worked in the limited time I had.

Here is the link again if you want to play the game:

I wake up with Anxiety

How I built a game in a week was originally published in Samsung Internet Developers on Medium, where people are continuing the conversation by highlighting and responding to this story.

The new Fog Creek Software office is meant for our staff to do their best work and feel comfortable and creative while doing it. With high ceilings, an open floor plan, and a killer view of the Financial District and Bowling Green Park, the new space is not only inspiring and beautiful, but as a nod to our history, it’s also experimental. To understand this better, let’s take a trip down memory lane.

In The Beginning, There Was Joel

We moved into our first real office, dubbed the “Bionic Office”, at 535 8th Avenue in New York City back in 2003. Our co-founder Joel Spolsky worked with architect Roy Leone to design a space where Fog Creek workers could thrive and work alongside their co-workers while still maintaining privacy.

Office space seems to be the one thing that nobody can get right and nobody can do anything about. There’s a ten year lease, and whenever the company moves the last person anybody asks about how to design the space is the manager of the software team, who finds out what his new veal-fattening pens, uh, cubicle farm is going to be like for the first time on the Monday after the move-in.

Well, it’s my own damn company and I can do something about it, so I did.

One of the primary features of this space was ensuring that our developers had private offices with closing doors. According to Joel, these offices were key to improving programmer productivity, were absolutely required, and not up for negotiation.

Not only did we get spacious, windowed private offices, but even the common area workstations (for non-developers) are hidden in clever angular alcoves, so everyone gets their own private space without line of sight to anyone else.

Having an office space that worked for employees was so important to Joel that he took a hands-on role in the office’s overall creation, having a say in office elements like power, wiring, and the common areas to create the ultimate software development environment.

Fog Creek continued growing over the years after that, eventually taking over the entire floor of the original office. But after five years, it was time to find a bigger space. After a grueling search, we found our next office home nearly all the way downtown at 55 Broadway. The new space was such a hit that we were even covered in The New York Times.

New Office, Same Neighborhood

A lot of changes happened during the years at 55 Broadway, but we also kept a few ideas from our original space. Joel still had a hands-on role in both layout and construction, we retained private offices for our developers, and we provided a space large enough for our daily team lunches. To get the best sense of how much detail went into this space, watch the video below and see how it all came together.

One of the biggest changes at Fog Creek was that the number of our remote workers increased to make up two-thirds of our workforce. Also, two of the most successful projects we’ve worked on — Trello and Stack Overflow — grew large enough to become independent companies.

“As they grew and we grew, it got a little cozy,” says Anil Dash, CEO of Fog Creek.

“It was just time for us to stand on our own again. As we refocused on our products, we really thought about what a great headquarters would look like now for a company that is so focused on being great for remote people too.”

We moved office spaces in 2017, but we didn’t go far — our new headquarters at 75 Broad Street is just a half mile away and has picturesque views of Bowling Green Park and The New York Stock Exchange from our lovely 19th floor private terrace.

So what’s different about this new space?

Working on How We Work

“The old space was built when the entire company was based in headquarters,” Anil mentions. “That was sort of a different era. And similarly, back then our founders would talk a lot about programmers and coders and what they needed, which is an office with a door that closes. That’s still part of our ethos, but half the company are not coders.”

With our developers, sales team, and C-level executives working from the same space, taking different work styles into consideration is important. Some of these tasks require intense concentration, while others are more conversational and collaborative with your co-workers. To that end, there are some ideas we kept from previous office spaces.

“I think there was a very strong expectation among the members of our technical staff that coders would have an office with a door that closes. That was always a very big part of our public face of what Fog Creek is to the world. And the research is pretty clear that it is a massive booster of productivity for people in those kinds of technical roles. So we didn’t want to compromise on that at all.”

But the new office also includes a variety of work spaces that accommodate different work modes. Anil mentioned personal offices for standalone work, but they also work well for collaborative work like pair programming. There are workstations for independent or individual co-working, and phone booths for external communication such as sales calls or podcast appearances. There’s also our conference room — known as the “quiet car” — which can be used across a number of different work modes. And true to the nature of our office being flexible and experimental, we are already re-configuring some of these spaces based on how we use them.

“I think we have made [the office] a much more malleable space. We have a lot more plans to sort of shift things around, even so far as being able to entertain here. We’d never really designed our old place to be able to have guests and have people hold events and all that sort of stuff. And all of that is on the road map for us now.”

The Future of Fog Creek

“I think just at a high level, work space really matters. It’s a fundamental part of how you take care of your people, and we have always been leaders on that. When the bar is set that high, you really have to get it right. And so we have always taken this really, really seriously. And at the same time, we have a lot of fun with it.”

And speaking of fun, we can’t forget about our lovely terrace. Once it’s up and running later in the year, we expect it to be a wonderful place for collaborative work. It will also be the centerpiece of our office as we host events, visitors, and other guests.

“There are a lot of companies in New York that have a lot of great ideas, and we are hoping to be able to invite them over, get to know each other, and figure out what we can learn from each other …and also just be good neighbors,” says Anil.

As the company has grown and changed over the years, so has our office space. Joel’s grand visions for what a work environment should do for employees have been part of Fog Creek from the very beginning, and we have tried to honor that legacy. We also have plenty of plans for the future, and look forward to continuing our tradition of incubating new teams and ideas from within our company and beyond.

“I think the fact that there’s so much personality and history in everything we do is really motivating. It’s become a very great space.”

Beyond Open Offices: The New Fog Creek Headquarters was originally published in Fog Creek Software on Medium, where people are continuing the conversation by highlighting and responding to this story.