Accessing Nested Objects in JavaScript

  • tldr; safely access nested objects in JavaScript in a super cool way.
  • One of those things is the confrontation with this error when you try to access a nested object, – – Most of the times when we’re working with JavaScript, we’ll be dealing with nested objects and often we’ll be needing to access the innermost nested values safely.
  • But, for some reason, if our user’s personal info is not available, the object structure will be like this, – – Now if you try you access the name, you’ll be thrown Cannot read property ‘name’ of undefined.
  • The usual way how most devs deal with this scenario is, – – This is okay if your nested structure is simple, but if you have your data nested 5 or 6 levels deep, then your code will look really messy like this, – – There are a few tricks…
  • Unfortunately, you cannot access nested arrays with this trick – – Array reduce method is very powerful and it can be used to safely access nested objects.

Accessing nested objects in JavaScript without getting choked by ‘cannot read property of undefined’ error
Continue reading “Accessing Nested Objects in JavaScript”

Development Driven Testing (ReactJS) – Ahsan Naveed – Medium

  • Development Driven Testing (ReactJS)Apparently it is a thing — while constructing UI’s with React we need to have components before we test the expected UI behavior.
  • There is still some TDD involved as you develop components you want to make sure that the HOC’s you are developing/engineering works the way you want them to work.
  • The normal workflow of structuring these components will be, to have the site running on localhost:port and thinking the code as you go.
  • If you would like to implement feature x in your web application it would be a good idea to see if there exists a package that can x-ify your app for you.Finally, would like to share the article below: the article above, the most important advice is to construct the…
  • My personal advice extends the advice above i.e. implement static components and then write tests to validate their UI behavior and then do whatever the senior developer says.

Apparently it is a thing — while constructing UI’s with React we need to have components before we test the expected UI behavior. There is still some TDD involved as you develop components you want…
Continue reading “Development Driven Testing (ReactJS) – Ahsan Naveed – Medium”

React.js Weekend Training Tickets, Sat, Dec 9, 2017 at 9:00 AM

Sign up for this weekend's course here:

  • This course is intended for developers with intermediate JavaScript experience who want to understand the fundamentals, principles, and capabilities of React.
  • You will learn development principles of the React.js framework by diving hands-first into working examples.
  • You will gain the skills you need to immediately implement React.js in your applications using professional test-driven development tools and methodologies.
  • Senior Software Engineer and Instructor, Troy Miles will guide you through the development of a real-world application using React and AWS.
  • Instructor, Troy Miles – – Troy Miles is a Senior Software Engineer and Lynda.com instructor.

Eventbrite – Code District presents React.js Weekend Training – Saturday, December 9, 2017 | Sunday, December 10, 2017 at Cowork South Bay, Torrance, CA. Find event and ticket information.
Continue reading “React.js Weekend Training Tickets, Sat, Dec 9, 2017 at 9:00 AM”

Learning React.js: Getting Started and Concepts ― Scotch

  • — React Code Goes Here — – – /script – /body – /html – In React, components mount to an element, so in this example we can use the div myDiv as it’s parent container.
  • These attributes are available in our component as this.props and can be used in our render method to render dynamic data: – var MyComponent = React.createClass({ – render: function(){ – return ( – h1Hello, {this.props.name}!
  • Below, see how we can set our component’s state: – var MyComponent = React.createClass({ – getInitialState: function(){ – return { – count: 5 – } – }, – render: function(){ – return ( – h1{this.state.count}/h1 – ) – } – }); – – Events – React also has a built…
  • Lets make our count increment below using events: – /** @jsx React.DOM */ – – var Counter = React.createClass({ – incrementCount: function(){ – this.setState({ – count: this.state.count + 1 – }); – }, – getInitialState: function(){ – return { – count: 0 – } – }, – render: function(){ -…
  • == -1; – }); – this.setState({items: updatedList}); – }, – getInitialState: function(){ – return { – initialItems: [ – “Apples”, – “Broccoli”, – “Chicken”, – “Duck”, – “Eggs”, – “Fish”, – “Granola”, – “Hash Browns” – ], – items: [] – } – }, – componentWillMount: function(){ – this.setState({items: this.state.initialItems})…

Today we are going to kick off the first installment in a new series of tutorials, Learning React, that will focus on becoming proficient and effective with Facebook’s React library. Before we start building anything meaningful, its important that we cover some base concepts first, so lets get this party started.
Continue reading “Learning React.js: Getting Started and Concepts ― Scotch”

Our Journey Building a React Native App

  • Magento specialists, The App Store and The Play Store – three things rarely spoken about in the same sentence – – Then an existing client of ours, one that’s been having month on month growth from an existing Mobile-friendly website we built for them, approached us with a new request:…
  • React Native is a platform that allows Javascript developers to create Apps for both iOS and Android, all from the same Codebase.
  • There are other solutions out there than achieve similar results, but some of the reasons for choosing React Native were as follows: – – So we had the answer now, yes – JavaScript developers can produce an application that will run run on both iOS and android (thanks to react…
  • I don’t think it’s a good idea to become an Angular developer – or a React developer, you should instead strive to become an expert in JavaScript – doing so will allow you adopt new tools, libraries and frameworks as they come in and out of fashion without much work….
  • Jest – – There’s a huge amount of regular JavaScript that goes into a React Native application – especially when you’re handling side-effects away from components like we are with redux-observable.

Then an existing client of ours, one that’s been having month on month growth from an existing Mobile-friendly website we built for them, approached us with a new request: An App on both iOS and Android, capable of covering some of the offline features not currently possible on the Web.
Continue reading “Our Journey Building a React Native App”

Kicking off the first day of a full-week React Native training for @LexisNexisUK 👌🎉

Kicking off the first day of a full-week  React Native training for @LexisNexisUK 👌🎉

  • Learned a lot!
  • Good introduction to the basics of React.
  • I see it as a very good starting point for further React development.
  • Very thorough introduction to React.
  • The presentations were very straightforward, especially with the format of the slides.

Interactive React and JavaScript workshop for public training, private company training, or conference workshops. The first workshop accompanied by an interactive web app for practical exercises.
Continue reading “Kicking off the first day of a full-week React Native training for @LexisNexisUK 👌🎉”

My experience with React 16

  • If you have a React 15.5 app which doesn’t use deprecated features and doesn’t throw errors, then React 16 just works!
  • One of my favorite things about React is that it gives me access to a great library of open-source components.
  • And thanks to the stability of React’s API, I haven’t needed to upgrade many of these components… until now.
  • In previous versions of React, throwing exceptions within event handlers would have unpredictable results.
  • While React’s API hasn’t changed much, it has an entirely new engine under the hood called React Fiber.

Now I don’t want to waste your time with another “What is React 16?”; the official blog is already very informative. But what I can give you is the story of my experience this week, when I upgraded a large project to React 16.
Continue reading “My experience with React 16”

TypeScript + Webpack: Super Pursuit Mode – webpack – Medium

  • Add fork-ts-checker-webpack-plugin as a devDependency of your project and then amend the webpack.config.js to set ts-loader into transpileOnly mode and drop the plugin into the mix:var ForkTsCheckerWebpackPlugin = webpackConfig = { // other config… context: __dirname, // to automatically find tsconfig.json module: { rules: [ { test: /\.
  • $/, loader: ‘ts-loader’, options: { // disable type checker – we will use it in fork plugin transpileOnly: true } } ] }, plugins: [ new ForkTsCheckerWebpackPlugin() ]};If you’d like to see an example of how to use the plugin then take a look at a simple example and a more involved one.HappyPackNot so long ago I didn’t know what HappyPack was.
  • Isn’t multi-threading great?ts-loader did not initially play nicely with HappyPack; essentially this is because ts-loader touches parts of webpack’s API that HappyPack replaces.
  • id=ts’ } ] }, plugins: [ new HappyPack({ id: ‘ts’, threads: 2, loaders: [ { path: ‘ts-loader’, query: { happyPackMode: true } } ] }), new ForkTsCheckerWebpackPlugin({ checkSyntacticErrors: true }) ]};Note that the ts-loader options are now configured via the HappyPack query and that we’re setting ts-loader with the happyPackMode option set.There’s one other thing to note which is important; we’re now passing the checkSyntacticErrorsoption to the fork plugin.
  • Do note that, as with HappyPack, the thread-loader is highly configurable.If you’d like to see an example of how to use thread-loader and cache-loader then once again we have a simple example and a more involved one.All This Could Be Yours…In this post we’re improving build speeds with TypeScript and webpack in 3 this plugin in play ts-loader only performs transpilation.

If you’re like me then you’ll like TypeScript and you’ll like module bundling with webpack. You may also like speedy builds. That’s completely understandable. The fact of the matter is, you sacrifice…
Continue reading “TypeScript + Webpack: Super Pursuit Mode – webpack – Medium”

The Most Important Color In UI Design – UX Planet

  • Just look at your smartphone app icons, and you’ll see that a lot of them are blue: Facebook, Twitter, Shazam, Safari, etc.So why is blue the chosen color?There are a lot of reasons to use blue, I’ll list a few of them:People like this color.
  • Surveys show majority of people see blue as their favorite color.
  • Blue is strongly associated with clean water, clear skies, etc., which leads to its high preference as a color.Blue has an association with nature due to this being the color of ocean and sky.Universal color for UI designers.
  • Blue is a very common color for websites and apps in the travel industry.
  • ConclusionI hope that after reading this article you have a good idea of why blue color is so popular among designers.

As you probably already guessed this article is dedicated to blue color. Without a doubt, blue is one of the most important colors in UI design, and one of the most frequent. Just look at your…
Continue reading “The Most Important Color In UI Design – UX Planet”

Themes in React Native – Adam Bene – Medium

Themes in React Native  #reactnative #javascript #react #reactjs #reactjs

  • Themes in React Nativetheme provider and UI elementsWhen developing a large scale app it is a good idea to build our own UI components.
  • The styles should be factored out to be DRY.ContextReact context is a suitable tool for dependency injection.
  • Let’s inject our theme.ThemeProvider theme={lightTheme} ButtonTap param is props, 2nd is context.contextTypes has to be defined in order to receive properties in context.
  • Otherwise context will be empty.const Button = ({ text }, { theme }) = ( TouchableHighlight Text style={{ theme.color }}{text}/Text = { theme: PropTypes.shape({ color: PropTypes.string })}ThemeProviderThe return value of getChildContext() will be propagated to its children down the component tree as context.childContextTypes property is needed to defined.class ThemeProvider extends React.Component { getChildContext() { return { theme: this.props.theme } } render() { return this.props.children = { theme: PropTypes.shape({ color: PropTypes.string })}Change ThemesThemes can be changed through props.
  • The example below toggles two themes in the state.light theme by defaultdark theme with smaller border radius, paddings, margins and fontsWorking ExampleYou can try out a working example both on iOS and Android after setting up development environment.react-native run-iosreact-native run-androidSee Also

When developing a large scale app it is a good idea to build our own UI components. The styles should be factored out to be DRY. React context is a suitable tool for dependency injection. Similar to…
Continue reading “Themes in React Native – Adam Bene – Medium”