Hosting Inclusive Angular Events: Ideas from AngularConnect

We care a lot about making Angular's community inclusive and welcoming for everyone. 
Guest bloggers Vicky Carmichael and Ruth Yarnit are part of the White October Events team that co-organises AngularConnect.  If you're planning an Angular meetup or conference, you might find this post helpful in increasing the reach of your event. Enjoy!  - Naomi

---

As an event organiser, you want your attendees to have an amazing time. You put a lot of thought into the content, the venue and the atmosphere – and these are all important – but your natural and unconscious biases may make it easy to forget about how your experience of an event differs from someone else’s.

There are lots of reasons an attendee may require additional support to ensure they have a great time at your event. Perhaps they have a disability or health condition that means they require special assistance to be able to access the event and enjoy it fully. Maybe they come from an underrepresented group within tech, and are experiencing a sense of isolation. Or they may be new to the industry and feel a little intimidated to be surrounded by more experienced developers.

This post outlines some of the measures the AngularConnect team are taking to improve accessibility at their conference, and offers some handy pointers for how you can implement these measures at your own Angular events. This is by no means an exhaustive list – we know there’s always more we could do. Please feel free to email us at hello@angularconnect.com if you have any comments or other ideas.

Code of Conduct

Having a Code of Conduct at your event demonstrates your commitment to ensuring all participants feel welcome, safe and comfortable without threat of intimidation or public embarrassment. Here are some tips if you’re implementing one for the first time:

• Start with a template, and adapt it for your specific industry and event. Check out Angular’s Code of Conduct, which applies to all of the projects under the Angular organisation on GitHub and the Angular community at large, including IRC, mailing lists, and on social media.
• Be sure to list specific examples of behaviours that constitute a violation of the code. For instance, the AngularConnect code includes the line: “Harassment includes offensive verbal comments, sexual images in public spaces, deliberate intimidation, stalking, following, harassing photography or recording, sustained disruption of talks or other events, inappropriate physical contact, and unwelcome sexual attention.” This makes it easier to identify offending behaviour as it happens.
• Include clear instructions for what someone should do if they wish to report a violation of the Code of Conduct, and make sure all event staff are fully briefed on how to respond to such a report. AngularConnect staff wear brightly coloured t-shirts with the word “staff” or “organiser” on the back, so that they can be easily identified from afar by anyone needing assistance. Also provide details about how you will enforce your Code of Conduct.
• Make everyone aware of the Code of Conduct. Link to it clearly on your event website, and announce it on the day(s). We include a mention of the AngularConnect Code of Conduct at the bottom of every marketing email we send. This year we also plan to display large signs at the event reminding people where the code can be found, and how to report a violation. Make it clear that you expect all delegates, speakers, organisers and staff to comply with the code at all times and in all event spaces.
• Finally, don’t just pay lip service to your Code of Conduct. As event organisers, it’s our responsibility to use our judgement and take swift and appropriate action in the event of a violation of the Code of Conduct, and to send a clear message to our attendees.

Further Reading

Conference Code of Conduct
Codes of Conduct 101 + FAQ
Conference anti-harassment policy
HOWTO design a code of conduct for your community
Angular's Code of Conduct
AngularConnect Code of Conduct

Access Requirements

Making your event as accessible as reasonably possible will help ensure you’re not inadvertently excluding anyone from attending. People you should consider include wheelchair users and those with mobility impairments, people who are hard of hearing or deaf, people with visual impairments, and people with hidden impairments such as learning disabilities or mental health issues. Here are some measures you can take:

• On your event sign up form, include a checkbox for attendees to let you know if they have any special access requirements, and a field for them to provide further information. Make sure you check the feedback in plenty of time to make any necessary arrangements at the venue, and reach out to the attendee directly if you need more information to be able to accommodate their needs.
• When selecting a venue for your event, check that it’s fully wheelchair accessible. Consider whether it has step-free access, doorways wide enough to accommodate wheelchairs, elevator access to relevant floors, and dedicated accessible toilet facilities.
• Have reserved seating at the front of the space for people with disabilities, such as wheelchair users and people with visual impairments to use, if they wish to.
• Enquire whether the venue has hearing induction loops installed in the relevant spaces and, if it doesn’t, think about hiring them in. The venue may be able to put you in touch with a supplier. At AngularConnect we’re installing a hearing loop in both of the main track spaces for use by people with hearing aids.
• Consider providing real-time captioning for talks. You can choose how to display this, but make sure captions are clearly visible to all participants. This is something we’re excited to provide at AngularConnect this year, and we’ve selected a service that provides attendees with a link that can be viewed and customised in the browser on their personal device. This service is not only helpful for people who are hard of hearing, but also those for whom English is not their first language, and anyone who finds it easier to take something in when they see it written down.
• Make it clear to people considering attending that service animals such as guide dogs are welcome at the event, and offer to provide complimentary tickets to assistants of those with disabilities.
• Invite participants to contact you with any access requirements they’d like to discuss, and commit to doing your best to accommodate them. If you need time to check whether you’re able to provide the assistance they need, you could offer to reserve their ticket in the meantime so that they don’t risk missing out.
• A full-day (or longer) event surrounded by crowds can be overwhelming for some people. If you’re running a conference for an audience of hundreds, you may wish to create a comfortable “quiet zone” for those who need to take a breather. At AngularConnect last year we had ran mindfulness sessions in our chill out area for those who need a peaceful moment’s reflection. We got positive feedback about this and we’re looking forward to bringing the sessions back this year.

Dietary requirements

If you’ll be serving breakfast, lunch or dinner, you should offer at least one vegetarian option available as standard. You can aim to cater for more specific requirements (such as gluten free, allergies, Kosher, Halal, vegan etc.) with advance notice. Ask all attendees to let you know about any special dietary requirements at the point of registration. Be sure to label major allergens such as gluten or nuts on food packaging where possible.

Scholarship scheme

For paid events, you may wish to make extra efforts to open up your event to people who don’t have access to the funds to buy a ticket. One method for doing this is to run a Scholarship scheme where you set aside a number of free tickets to give away to individuals from underrepresented groups in tech or those facing economic and social hardship. If you have the budget, you could also consider covering their travel and accommodation expenses. Some sponsors may be willing to support a scheme like this financially.

To get set up, design a basic online form to capture applicants’ information, such as their name, contact details, location, and their reason for applying to the Scholarship Scheme. Have a look at the AngularConnect Scholarship Fund form for inspiration. Be sure to link to the form on your site and tickets page, shout about it on social media, and reach out directly to groups working with relevant individuals to ask if they’ll help spread the word. Include clear details about who should apply, how the process works, any deadlines, and how and when you will notify them of the outcome.

There’s no exact science to evaluating the applications, but it’s best done by a small committee rather than by just one person. You should aim to award tickets to people who would otherwise not be able to attend, and who can show how the knowledge they gain at the event will be useful to them in their ongoing career.

Summary

There’s an awful lot to think about when organising a conference or meetup. As a team, we try to be mindful of accessibility at all stages of planning AngularConnect, but we know there are always more improvements we can make. We hope this post has provided some food for thought for other event organisers, and we’d love to chat with you if you have comments or ideas for additional ways to make events accessible. Catch us on on Twitter at @AngularConnect, or email hello@angularconnect.com.

Read More

Come join the Firebase Slack community

David East

Developer Advocate

Do you love Slack? We do too. We’re happy to introduce the new Firebase Slack community to discuss all things Firebase!

Slack has been a great tool for community members to help one another. The Angular and iOS Slack communities have grown to over 4,000 strong each, and we hope we can do the same.

What will we be discussing?

When you want to learn a foreign language, the best way is to surround yourself with those who speak it.

The Firebase Slack community is a place to learn from other Firebase developers. Such as Firebase GDEs (Google Developer Experts), active Github contributors to libraries like AngularFire, and even Firebase team members (I’ll be there!).

The Slack community is a place to discuss app ideas, data structure questions, feature requests, guidance on problems, and feedback about Firebase in general. Oh, and we love GIFs too.

Code of Conduct

Our goal is to gather a diverse group to represent the community. In doing so, we expect community members to treat each other kindly and respectfully. We have a complete Code of Conduct that can be viewed here.

How do I join?

To join, click here to go to the inviter website. Once you input your email, you’ll get a confirmation to join in your inbox. (Make sure to check for spam if you don’t see it).

We hope to see you there soon.

Read More

Introducing Firecasts - A YouTube series of Firebase Screencasts

David East

Developer Advocate

Get ready for a whole new series of screencasts. Today we're excited to announce the launch of our new YouTube series, Firecasts!

Firecasts is a hands on YouTube series for Firebase developers. Tune in each week and learn how to build realtime apps on Android, iOS, and the Web.

All Platforms

While the first episode is on Android, Firecasts is platform agnostic. We have episodes queued for iOS and the Web as well. Tune in each week for a new screencast. And, if you want to see something specifically covered...

#AskFirebase

Your input matters. If you want to see a topic covered, tweet at us using the #AskFirebase hashtag. We'll be answering those questions in future videos.

At Firebase, we believe the best way to learn is by doing. We're excited to hear what you want to learn.

Read More

Firebase - Almost 1.5 years with Google

James Tamplin

Product Manager

You've likely already heard that Parse will be shutting down. It brings us no joy in seeing them close their doors. While Parse was a competitor, they were also a part of the developer tools community and ecosystem. We were both working towards a common goal: empowering developers to create great apps.

I’m writing this post to reassure current and future Firebase developers that we are working full steam ahead on realizing that goal.

Firebase joined Google fifteen months ago, and the experience has been fantastic. We’ve had a chance to work closely with many products inside Google Cloud and across the company with teams like Play. We're in the process of moving our account system to Google accounts so we can deeply integrate with Google's family of developer products.

Also, we’ve been busy:

• 
  We introduced lower and simpler pricing
  


• Our iOS & Android SDKs received persistent offline support


• Mobile development with Firebase became much easier with FirebaseUI


• AngularFire moved out of beta into 1.0


• Another acquisition, Divshot, joined us to work on Firebase Hosting


• Our JVM client was tailored to fit Google AppEngine


• We released an early preview of Unity3D support


• We collaborated with Udacity to launch a Firebase course

These are just a few examples.

For those of you who have asked about migration from Parse Core to the Firebase Realtime Database: there isn’t currently an easy migration path. The data models and APIs are quite different. We recommend moving to Google Cloud by running Parse’s server on App Engine. To do so, follow this guide.

Though we’re sad to see Parse shut down, it does not change our roadmap. Firebase and Google are committed to radically changing how app development is done, and we’re working hard towards that goal.

We have big plans for the future.

Read More

Angular 1.5.0 - ennoblement-facilitation has been released!

We have just released the next major version of Angular 1, which has been in development since May last year.
The primary theme for this release was to improve the upgrade path to Angular 2.
In this release we have added features that will enable developers to write Angular 1 applications that are closer to the way that applications are structured in Angular 2.

New Features

The big feature changes to Angular 1 in this release are mostly focused around supporting Angular applications that are built from Components. But there are a number of other features that will improve your development experience.

Component-based applications

Defining component directives

While creating components in Angular has been the primary way of structuring applications for a long time, we now made it possible for you to easily define a component directive with the module.component() helper method. For example a simple component only needs to provide a template, some bindings and a controller. For the remaining directive options we set sensible defaults.

myModule.component('myComponent', {
  template: '<h1>Hello {{ $ctrl.getFullName() }}</h1>',
  bindings: { firstName: '<', lastName: '<' },
  controller: function() {
    this.getFullName = function() {
      return this.firstName + ' ' + this.lastName;
    };
  }
});

<my-component first-name="'Alan'" last-name="'Rickman'"></my-component>
Read the new component guide to find out more about this.

Lifecycle hooks

If your directive/component controller has a method called $onInit() the compiler will now call it after the component has been initialized and all its bindings have been set up. This provides a clear place to put the initialization code for your components and is similar to the ngOnInit() lifecycle hook of Angular 2.

Binding to required directives

As well as the string and array forms, you can now specify an object for the require property of directives and components. If used with bindToController, the compiler will also automatically bind these required directive controllers to your controller.
These bindings (including those of sibling directives) are guaranteed to be in place by the time the $onInit() hook is called.

Multi-slot transclusion

You can now specify that different parts of the transcluded content is rendered at different slots in the template. See the 1.5.0-beta.2 release announcement for a detailed explanation of this feature.

Default transclusion content

ngTransclude no longer overwrites its contents if there is no content to fill it. This means that you can provide default content to be shown if the user of your directive has not provided any content to be transcluded.

One-way bindings

You can now define a directive/component binding using the '<' character to indicate that the binding is one-way. In this case the compiler will only set up a watch on the outer expression and not on the internal property. This means that changes to the value of a binding inside the component will not be propagated to the outside. See the $compile API docs for more information.

Improved support for ES6 classes

We now support instantiation of native ES6 classes in the $injector and as a controller. Due to variable browser support this is a volatile feature, so be careful to test on your target browsers before going to production.

ngAnimateSwap Directive

We have introduced the new ngAnimateSwap directive, which allows you to animate a collection of DOM changes together as a single container swap. See the 1.5.0-beta.2 release announcement for a detailed explanation of this feature.

ngResource

We now have proper support for cancellable actions on resources, which means a $cancelRequest() method will be available on the return value of the request method.

ngRoute

Any promises resolved as part of a route's resolve property are now added to the scope as a $resolve property, which saves you having to inject them into the route controller.

Other Improvements

There are loads of other improvements, which you can find in the Angular changelog. Here are a few highlights:

• You can now access the locals object that was passed to a call to $parse from inside the parsed expression, via a $locals variable.
• You can provide $http configuration options of the $templateRequest service.
• You can create your own custom XHR objects for the $http via the $xhrFactory service.
• ngModel now provides ng-empty and ng-not-empty CSS classes.
• The ngAria module is now more precise with handling of ARIA attributes and tabindex for custom controls.
• Some new helpers are available on ngMock to ease testing:
• $componentController,
• $httpBackend.expectRoute()/whenRoute(),
• $animate.closeAndFlush().

Security Improvements

There have been a number of people who have contributed to the project over the last few releases by analyzing and identifying security issues in the Angular code base, which we have then fixed. We really appreciate the work that these people do. In particular we would like to thank Mario Heiderich, Gareth Heyes and Jann Horn and the security team at Google.

Migrating from 1.4 to 1.5

Angular 1.5 is the fastest, most feature complete and reliable version of Angular to date. We highly recommend upgrading your applications to use it.
While we tried to keep the number of breaking changes in the core to a minimum a few were unavoidable and will generally only affect very rare corner cases.
You can read about how to migrate and what breaking changes might affect your application in the migration guide.
If you find any issues with Angular while you are migrating, please report them at Github.

Thanks

Once again, Angular could not be what it is without the constant support of the literally millions of developers across the world who are using and contributing to the project, either through submitting issues and pull requests, running conferences and workshops, writing tutorials and sharing their real world experiences.

From everyone at the Angular team, we hope you enjoy developing with this latest version as much as we have enjoyed building it.

Read More

Angular 2 templates: Will it parse?

As part of the beta release, we eliminated the requirement for kebab-case in Angular templates and replaced them with case-sensitive names for attributes. This makes it easier for you to write Angular 2 templates that are consistent with naming conventions used in directives.

For example, where you would previously write:

  <my-widget (some-event)="someAction()" [some-property]="expression" #some-var>

You now write:
  <my-widget (someEvent)="someAction()" [someProperty]="expression" #someVar>

Case-sensitivity solves a long-standing confusing issue in Angular 1 where you needed to just know the convention for mapping template attribute names to JavaScript names.  This was an easy pit for novices and even experts to fall into.

Browsers don't differentiate tags by case. Solving the problem required Angular to do its own HTML parsing, so that we could retain the case-sensitive version, and lets us eliminate the mapping convention.

So are Angular 2 templates still valid HTML?  Absolutely.  Per the spec itself, HTML is case-insensitive.  You can freely write whatever case you like and still work with every HTML browser, tool, parser, etc. ever written.

But what if you see validation errors in your favorite tool? It's possible that your tool doesn't follow the HTML specification, or it could be a bug. We're working with tool developers to ensure a smooth experience and would like to hear about issues you encounter. Please file them here.

Just as Angular has always made it possible to create your own elements and attributes that add behaviors beyond the browser's basic set of HTML, the new HTML parser provides benefits by extending the syntax available to templates.

More Benefits

Beyond eliminating the confusion of kebab/camel-case, the HTML parser brings many additional benefits including:

• Better error messages.  When there are errors, we can now tell you which line and column number they occur on in the template.
• More consistent.  Whether you're on Chrome, IE, Safari, Firefox or even on the server in node.js we parse the template the same way.  We were able to drop all of the heuristic code required in Angular 1 to account for differences.
• Enables offline compilation.  We're nearly complete with our next phase of performance optimization where we move all parsing/compiling to a build step.  To make integration with existing build systems as smooth as possible we need to parse the template using Node.js without requiring any browser.
• Catches errors that browsers don't.  Web browsers are more lenient than the specification and auto-correct errors without telling you.  We want templates to be correct, as these HTML errors can cause real problems when browsers guess wrong.  With this new parser, we've already caught real errors in Google applications and in the Ionic 2 framework.
• Eliminates typos during development.  You can think of the parser as an HTML validator built into your framework.  We can catch typos in your attribute or tag names and tell you before you ever deploy.
• Better i18n support. Our new i18n support requires us to parse and understand the templates. Having a custom parser makes this job much easier, reliable and efficient.

Future Work

We're also hard at work on a CSS parser to gain the same benefits and potentially more in the realm of style sheets.  We're basing our Animations and Material Design features on this parser and we'll have early versions of them out soon.

Read More

Test your skills at the Static Showdown

Michael Bleigh

Engineer

The third annual Static Showdown hackathon is coming February 20-21, 2016 -- and this year it's presented by Firebase!

What is it?

The Static Showdown is a worldwide virtual competition where teams of up to four have 48 hours to build a web app with one catch: entries must be built without any custom server-side code. That means 100% HTML, JS, CSS, and off-the-shelf back-end services like the Firebase Database.

Where do I sign up?!

Registration has just opened, so get some friends together and build something awesome!

We're excited to continue the Static Showdown tradition started by Divshot. Past years have seen everything from music synthesizers to social networks, and we can't wait to see what everyone comes up with.

Read More