I was working on a and I wanted to evolve the icons that I usually use as part of my API storytelling. I primarily use the , to associate simple black and white icons which represent the stories I tell, companies I showcase, and topics I cover. One area I find the Noun Project deficient is when it comes to icons for specific technologies, so while working on my project I wanted to find a new source. I fired up the Googles and got to work. forkable definition of my API portal Noun Project API I quickly came across , designing & development tools which you can use as a font or with SVG code. , it says they have 78 icons with over 200 versions total. I used a set of the icons to d , allowing anyone who forks to turn on and off which languages they offer SDKs for. Devicon, a set of icons representing programming languages At the Github repo for the project isplay API SDKs on my API portal prototype programming Being pretty graphically challenged, as you can tell by my logo, I’m a big fan of projects like — especially when they make it so simple, and so good looking, all at the same time. If you are needing icons for your API portal I recommend taking a look at what they are doing. They have images for all the that cool kids are using these days, and they seem open to crafting more if you find something missing. Devicon technology

A New API Programming Language SDK Icon Set

introduced a long awaited feature — custom map styles! Google Play Services 9.6.0 Map styles allow you to customize the color, visibility, and density of almost every map feature. This is really powerful! Not only can you change the style to fit perfectly within your brand, but you can . hide specific map elements Does showing roads or public transport detract from your content? Hide what you don’t need. Don’t want to clutter the map with business POI’s. Hide them too. Want to highlight parks on the map? Give them a bright color and make everything else greyscale. What if you wanted to change map style at a certain time of day, or as the user zooms in? It’s totally possible. Map styles can be changed on the fly. I decided to see how far I could push this. My goal was to implement a sample app with a ‘Level of detail’ map. i.e. as the user zooms in, more map feature become visible. , or keep reading! Check out the sample project here Lets dive in! Map styles are . Here’s an example style that hides POI’s, roads and transit features: defined in JSON [{"featureType": "poi","stylers": [{"visibility": "off"}]},{"featureType": "road.highway","stylers": [{"visibility": "off"}]},{"featureType": "transit","stylers": [{"visibility": "off"}]}] You can edit the JSON yourself, or use Googles handy . Styling Wizard Styling wizard — yes please! The styling wizard comes with a handful of prebuilt styles, including a night mode style— check them out. Or you can toggle advanced mode to tweak the map style to your heart’s content. There is an overwhelming amount of options. Happy styling! Once done, you can export the JSON to use in your app. Styling wizard options — and lots of them! Applying the style Applying the style to your map is super easy. The recommended way of storing a style is via a raw resource file in your Android project. The new class provides a handy method to load this, and there’s new method on the GoogleMap class to set the style. MapStyleOptions MapStyleOptions style = MapStyleOptions. (this.context, R.raw.my_map_style);map.setMapStyle(style); loadRawResourceStyle Or if your map style is stored some other way (perhaps as a Firebase Remote Config), you can create the directly: MapOptionsStyle String myMapStyle = "[map style here]";MapStyleOptions style = new MapStyleOptions(myMapStyle);map.setMapStyle(style); That’s it! Your map now has a custom style. Ship it! 🛳 MapStyleManager To achieve level of detail map styles, I created a custom class — . MapStyleManager This class essentially sets an and sets the appropriate map style for the current zoom level as the camera moves. OnCameraMoveListener, You can get the gist of it . here Using the is as simple as adding a map style, and specifying a minimum zoom level. MapStyleManager When the cameras zoom level reaches the minimum level for that style, the style is applied. Simple! MapStyleManager styleManager = MapStyleManager. (this, map);styleManager.addStyle(0, R.raw. );styleManager.addStyle(10, R.raw. );styleManager.addStyle(12, R.raw. ); attachToMap map_style_1 map_style_2 map_style_3 The result is the following: Not bad right? It’s not quite as smooth as I hoped for. The transition between styles can be a bit jarring the first time Google Maps loads the style. It would be nice if it there was an option to preload the style. That’s a wrap! That’s a brief overview of custom styles for Google Maps Android API. I can’t wait to see beautiful looking Google Maps styles everywhere! It’s great to see the Maps team tackling some of the long standing feature requests. Keep it up Google! If you liked this article make sure to give it a few 👏’s, and follow me . on twitter

Google

Super

Transit

Twitter

Using custom styles with Google Maps Android API

I wanted to try what it would take to migrate my little side project to Xcode 8 and write this article as summary of all the struggles I had to face. Logging madness Apple has introduced new super fast logging APIs with iOS 10, there is a WWDC talk about it, and boy have they started logging absolutely everything you can think of. We can fortunately add an enviromental variable that disables this as described here. Crash when accessing media library I experienced a crash when accessing my photos library. This app has crashed because it attempted to access privacy-sensitive data without a usage description. The app’s Info.plist must contain an NSPhotoLibraryUsageDescription key with a string value explaining to the user how the app uses this data. The solution is simple, do as described above. Broken Facebook login login started returning a good old when trying to log in. Few minutes of googling gave me a hint that there are changes in how facebook handles the keychain on iOS 10 and that I need to . That did the trick for me. Facebook Error 308 enable Keychain Sharing under Capabilities tab in project settings Broken Fastlane and archiving in general Apple has introduced some some black magic that is supposed to manage the code signing for you. I just turned it off and everything ranging from archive button in Xcode to Fastlane and Buddybuild started to work again. Apple seem to have removed the option to automatically add UDID of connected device to dev provisioning profile unless you’re using automating code signing 🙁. edit: I’ve started with switching to automatic code signing, here is what you need to do. edit: experimenting Switch to automatic code signing in your project settings. Set both both your debug and release configuration to iPhone Developer. Yes, it does not make sense, but it’s what Xcode told me and it works. Archiving using Xcode should not work fine. I tried fastlane as well, which threw an error towards the end but the binary have made it and appeared in iTunes Connect eventually. Migrating to Swift 3 This will be a separate article when I get to it. If you don’t want to convert to Swift 3 just yet Swift 2.3 is basically Swift 2.2 including the fact that Apple simply couldn’t resist including at least a few breaking changes, I’ve experienced few changes in Core Graphics framework where certain APIs suddenly return an optional variable and vice versa, so you’ll need to fix those. Regarding Swift cocoapods, you’ll need to add a post_install stem to your podfile that tells the build system to use swift 2.3. Please note that at the time of writing this, the latest stable version of cocoapods was 1.0.1, and it may not be necessary when using a version >= 1.1 post_install do |installer| installer.pods_project.targets.each do |target| target.build\_configurations.each do |config|

  config.build\_settings\['SWIFT\_VERSION'\] = '2.3'

end end end

Apple

Facebook

Target

Migrating to Xcode 8 — What You Need to Know

Amazon

You Might Not Need React

Expertise in Learning? Starting a new job or entering a new industry always entails a learning curve. People understand they have to learn quickly in order to survive. It’s the key to their success. When people work closely in a business or specific industry, as experience builds and time accumulates they often forget this sense of voracious learning. It becomes more and more difficult to see things in a new light. And some top leaders are stuck thinking in a silo. Some call this ‘the paradox of expertise.’ As expertise increases, people struggle to notice possibilities, discern novel patterns, or see new prospects, ideas, or insights. Out-Learning the Competition Learning — studying and absorbing trends, market forces, new technology, research, and happenings within your industry and outside it — is key to success today. It will drive your business towards the future, keep your brand agile and able to shift as fast as the world you work within. Building a culture of voracious learners is one of the best things you can do for your business. Here’s how to build a learning culture: 1. Look wide and far: If you gather information from the same, ingrained sources as your competition, the findings and the decisions you make from those findings won’t stand out. Shifting perceptions requires widening the lens of where you’re looking. And innovation and creativity thrive on perception shifting. Expanding your point of view and discovering a different angle requires bringing people with a diverse array of mindsets into the conversation. Experiment and adopt new ways of thinking, seeing, and working. What you do and how you think should never be contained. So examine what’s happening in other industries and draw parallels and note constrasts. In fact, the most established practices in one industry could be revolutionary when translated into another. Interconnectivity is key to successful business today. And understanding a business and where it can go requires learning about the world at large and where you are situated within it. A learning culture can help bring new thinking, ideas, and opportunities to your business. 2. Learn collaboratively: Collaboration hinges on humility. It’s important to listen as if you can learn something — asking questions, engaging fully, and being open to other angles. Everyone within your organization should have the mindset “I’m still learning” — no matter your role. Admit when you don’t know something. Ask for help from different people. Gather an opinion from someone you don’t usually talk with. These kind of collaborative practices can be quite valuable. A designer can learn a lot from a strategist, an accountant from a writer, a C-Suite leader from a new recruit, and vice versa. And always share your findings. Engaging in collaborative learning can take an organization to the next level. 3. Be open to what’s possible: Don’t settle for the status quo. Ask: What can I learn now? What’s possible for my knowledge? My organization? Its products and/or services? Its people? The brand? The best brands of today are built for the future. By being open to what’s possible, you can position yourself to be at the cutting edge of that future. So take interest in what you don’t know. Strive to gain new perspectives and new information. Expand your knowledge and the scope of your learning in order to fuel creativity, innovation, and agile decision making. Learn to Thrive Consider some learning-focused companies today that are thriving. The CEO of WD-40 Company, Garry Ridge, prides himself on building . And rightly so. The focus Ridge placed on a voracious learning culture explains how how the company nearly tripled its share price since 2009. a learning-obsessed company culture , giving employees allocated time to explore their own interests within the workplace. GE has created programs such as , meant to foster experiential and continuous learning and fuel innovation. Google has formalized informal and continuous learning Change Acceleration Process The examples are many. No innovative, cutting edge, top company today is at the top because they stopped asking questions. These companies are and always learning. always curious Creating a learning culture can foster the business agility and open mindedness that businesses and brands require today. And leaders who put a premium on learning can help fuel a culture of learners that will shine from the inside out. So focus on learning as an asset and position your business for greatness. Emotive Brand is a San Francisco brand strategy and design agency. Originally published at www.emotivebrand.com on September 22, 2016.

The Benefits of a “Culture of Learning”

If you missed it — check out Part 1 of this series! ’ on up! Now we’re diving in to an application. Since we’re focusing on the basic model given by the ng cli, we’ll take a look at the simple bootstrap contained within application_ref.ts. Movin bootstrapping In ApplicationRef_ the actually just contains a simple call to a private method, _bootstrapModuleWithZone. If you missed my brief overview on zones, you can find it , but I’ll do a deeper article at some point in this series as well. implementation of bootstrapModule here First off we notice that now we instantiate a compiler; const compilerFactory: CompilerFactory =this.injector.get(CompilerFactory);const compiler = compilerFactory.createCompiler(Array.isArray(compilerOptions) ?compilerOptions : [compilerOptions]); If you’ll recall from Part 1, the compiler that comes with the dynamicBrowserPlatform is the . Looking into the createCompiler method, the code makes an injector, which provides the config that was passed in via the Factory’s constructor, and then gets the Compiler from the injector. RuntimeCompilerFactory What does the compiler look like? Well, although the COMPILER_PROVIDERS specifically call out many compilers, assigns the Compiler we’re looking for. The compiler provided here is the , an internal class of the Angular2 framework that compiles templates and components dynamically for use in the app. RuntimeCompiler is a subclasses . Remember the RuntimeCompiler, as we’ll come back to it shortly. this line RuntimeCompiler Compiler Continuing moving through , the third argument is componentFactoryCallback. The method that calls bootstrapModuleWithZone in _bootstrapModule calls it like this; _bootstrapModuleWithZone this._bootstrapModuleWithZone(moduleType, compilerOptions, null); in other words, there is no callback. The method instead returns a call to the compiler, , with an argument of the moduleType, which is in our case is our AppModule. That’s right, the first piece of code that we actually supplied (kind of) has entered the equation. compileModuleAsync compileModuleAsync, in turn, calls a private method, _compileModuleAndComponents, with the first argument being our AppModule, and the second being a boolean that tells the compiler whether it should perform the compile asynchronously. The method looks like this, const componentPromise = this._compileComponents(moduleType,isSync);const ngModuleFactory = this._compileModule(moduleType); return new SyncAsyncResult(ngModuleFactory,componentPromise.then(() => ngModuleFactory)); Diving into the method, the first line that isn’t a simple declaration is this; _compileComponents const ngModule = this._metadataResolver.getNgModuleMetadata(mainModule); Where mainModule is the AppModule provided by ng-cli’s boilerplate. The _metadataResolver comes into the RuntimeCompiler as a private property injected from the Compiler’s constructor. In , let’s take a look at , and what the response looks like. CompileMetadataResolver what happens to get the module metadata First we resolveForwardRef, which the developers of Angular2 were nice enough to give a . This forward reference allows the resolution of a class that isn’t necessarily inline before the CompileMetadataResolver. plnkr example of Moving on, the code then checks to see if the moduleType has already been compiled and retrieve it from the cache, var compileMeta = this._ngModuleCache.get(moduleType); Since this is our first execution of the code, we assume this is undefined and continue on. The code then attempts to resolve the metadata for the module via , another injected private property. _ngModuleResolver leads us to an actually relatively simple class, simple enough that I can replicate it below; NgModuleResolver @Injectable()export class NgModuleResolver {constructor(private _reflector: ReflectorReader = reflector) {} resolve(type: Type<any>, throwIfNotFound = true): NgModule {const ngModuleMeta: NgModule =this._reflector.annotations(type).find(_isNgModuleMetadata);if (isPresent(ngModuleMeta)) {return ngModuleMeta;} else {if (throwIfNotFound) {throw new Error(`No NgModule metadata found for '${stringify(type)}'.`);}return null;}}} So this asks the for information about the specific annotations for our module. Reflector is actually injected and instantiated way back (from part 1) in our platform_core_providers, and the ReflectionCapabilities, which Reflector draws from, are actually just the default implementation found . Reflector here We’re most curious right now about the , so let’s take a look. Before looking at this code, it might be useful to . So, our AppModule in fact have an annotation, and . annotations have a look at Paschal Precht’s article about Annotations vs. Decorators does the reflector will look for .annotations or .decorators and return the relevant NgModule annotation Stepping back out to this code; function _isNgModuleMetadata(obj: any): obj is NgModule {return obj instanceof NgModule;} ... const ngModuleMeta: NgModule = this._reflector.annotations(type).find(_isNgModuleMetadata); We find the specific annotation that is an instance of NgModule, corresponding to the @NgModule({...})export class AppModule { } From our own code. The contents of the NgModule annotation are now assigned to and returned from the NgModuleResolver. ngModuleMeta We’re now back with the successfully resolved meta information provided by the NgModule annotation. I’ll leave it here, as I think this article has gone on long enough. Keep an eye out for Part 3 when we delve into the resolution of the NgModule metadata! here is how hackers start their afternoons. We’re a part of the family. We are now and happy to opportunities. Hacker Noon @AMI accepting submissions discuss advertising &sponsorship To learn more, , , or simply, read our about page like/message us on Facebook tweet/DM @HackerNoon. If you enjoyed this story, we recommend reading our and . Until next time, don’t take the realities of the world for granted! latest tech stories trending tech stories

HackerNoon Tech Stories Archive September 22nd, 2016

A New API Programming Language SDK Icon Set

@kinlane
Kin Lane

Using custom styles with Google Maps Android API

@AthorNZ
Josh Burton

Migrating to Xcode 8 — What You Need to Know

@petrpavlik
Petr Pavlík

You Might Not Need React

@denisraslov
Denis Raslov

The Benefits of a “Culture of Learning”

@emotivebrand
Emotive Brand

How does Angular2 work? Part 2 — bootstrapModule()

@MertzAlertz
Pete Mertz

HackerNoon Tech Stories Archive September 22nd, 2016

A New API Programming Language SDK Icon Set

@kinlaneKin Lane

Using custom styles with Google Maps Android API

@AthorNZJosh Burton

Migrating to Xcode 8 — What You Need to Know

@petrpavlikPetr Pavlík

You Might Not Need React

@denisraslovDenis Raslov

The Benefits of a “Culture of Learning”

@emotivebrandEmotive Brand

How does Angular2 work? Part 2 — bootstrapModule()

@MertzAlertzPete Mertz

@kinlane
Kin Lane

@AthorNZ
Josh Burton

@petrpavlik
Petr Pavlík

@denisraslov
Denis Raslov

@emotivebrand
Emotive Brand

@MertzAlertz
Pete Mertz