var pets = {
"cats": {
"persian": {
"black": 1,
"white": 2,
},
"sphynx": {
"blue": 2,
"white": 2,
}
},
"dogs": {
"pug": {
"black": 1,
"brown": 2,
"white": 1,
},
"bulldog": {
"brown": 1,
"white": 1,
}
}
}
if(pets.persian.black){
//This might throw an exception if persian does not exist. Error: black of undefined
}
Solution with lodash:
_.get(pets, ‘persian.black’)
When we assign a nested object to a new property, the properties nested inside the object will remain linked. In some cases we can use the spread operator to create a whole new object but this will only work with 1 level of nested objects. In order to have a complete new instance of the object with no reference to the original object, we can use lodash _.cloneDeep() method.
Requirements: lodash
Examples:
var test = {
user: {
name: 'Roch',
surname: 'Cassar',
education: {
primary: {},
secondary: {},
tertiary: {}
}
}
};
I can use the spread operator to get a new instance of user as follows:
var newUser = {...test.user};
The problem is that education will not be cloned but will still be referenced. To Avoid this, we can use cloneDeep by lodash.
var newUser = _.cloneDeep(test.user);
When trying to serve my project this morning I kept on getting an Error saying that I can listen to the port.
After, I noticed that my host file had suddenly went blank. Weird because I did not edit it but anyways… I solved it by simply adding the localhost back into the host file:
127.0.0.1 localhost
…. and save. Quite simple but not as trivial if this stops working all of sudden like it did with mine.
As we all probably know by now, Javascript was not built with immutability in mind. For this reason, in our reducers, we usually copy over the state using object.assign or a spread operator to copy over the current state to a new state and append to it. This method is ok UNLESS our state is very big. In big apps, when we continue appending to our state in a session, our state keeps growing and growing, keeping data we no longer need. This is where immutable JS comes in. Two main persistent immutable data structures that immutable js offers are Map (for objects) and List (for arrays).
npm install --save immutable
Javascript Object:
const obj = {name: 'Rochelle', surname: 'Cassar', parents: {mother: 'Pauline', father: 'France'}}
obj.name //Rochelle
obj.parents.mother //Pauline
obj.name = 'Rochelle Claire'
Immutable JS Map:
const obj = Map({name: 'Rochelle', surname: 'Cassar'})
obj.get('name') //Rochelle
obj.getIn(['parents','mother']) //Pauline
obj.set('Rochelle Claire')
Javascript Array:
const arr = ['Rochelle', 'Cassar'] arr[0] //Rochelle arr[0] = 'Rochelle Claire'
Immutable JS List:
const arr = List(['Rochelle', 'Cassar']) arr.get(0) //Rochelle arr.set(0, 'Rochelle Claire')
In order to avoid an extra learning curve, immutable JS lists have all the normal Array methods you’re used to like size, push, pop, includes, reverse and unshift.
toJS helps us changing an immutable JS Map/List to a plain javascript object/array accordingly.
On the contrary, fromJS helps us changing a plain javascript object / array to immutable JS Map/List.
Immutable JS uses merge to merge objects together:
const objFirst = {name: 'Rochelle'}
const objSecond = {surname: 'Cassar'}
const obj = objFirst.merge(objSecond)
import { Map, fromJS } from 'immutable'
const initialState = Map({
isFetching: true,
error: '',
})
export default function users (state = initialState, action) {
switch (action.type) {
case FETCHING_USERS :
return state.merge({
isFetching: true
})
caseFETCHING_USERS_SUCCESS :
return state.merge({
error: '',
isFetching: false,
users: action.users
})
default :
return state
}
}
Since immutablejs has a different way of accessing properties, we need to also make sure that our mapStateToProps is using .get instead:
function mapStateToProps ({users}, props) {
return {
user: users.get(props.uid)
}
}
Result:
If you use chrome redux extension or place a debugger in the mapStateToProps before the return, you can see that the state is always clean, consisting of the initialState plus the state we append in the reducer action. This was, any old state we do not need, is cleared out.
Redux allows us to manage state within our app. Lets starts by installing redux by using npm:
npm install --save redux npm install --save-dev babel-plugin-transform-class-properties
In our app folder, lets create a folder called redux and another folder inside redux called modules. Create a js file called users inside modules.
In our users.js file we need to specify:
First of all, here we will be using es6 syntax so we will need to rename our webpack.config.js file to webpack.config.babel.js so that it can be compiled.
Once we do so, we can use import instead of require and export default {} instead of module.exports = {}
Then we need to add the following:
Import webpack:
import webpack from 'webpack'
Check for production:
const LAUNCH_COMMAND = process.env.npm_lifecycle_event
const isProduction = LAUNCH_COMMAND === 'production'
const productionPlugin = new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('production')
}
})
Add common properties such as ‘base’, ‘output’, and ‘module’ in base json:
const base = {
entry: [ ... ],
output: { ... },
module: {
loaders: [ ... ]
}
}
Specify dev and production configs:
const devConfig = {
plugins: [...]
}
const productionConfig = {]
plugins: [productionPlugin, ...]
}
Merge objects to export:
export default Object.assign({}, base,
isProduction === true
? productionConfig
: devConfig
)
When developing a big project in React, it is important to maintain some standard code practises. This is where lint comes in. I will be using the common standardjs.com rules in the article.
In your project install the following commands using npm:
npm install --save-dev eslint eslint-{config-standard,plugin-standard,plugin-promise,plugin-import,plugin-node,plugin-react}
npm install --save-dev babel-eslint@next
In your project root add a file called ‘.eslintrc’ and add the following json:
{
parser: "babel-eslint",
env: {
es6: true,
"browser": true
},
parserOptions: {
ecmaversion: 6,
sourceType: "module",
ecmaFeatures: {
jsx: true,
experimentalObjectRestSpread: true
}
},
extends: ["eslint:recommended","plugin:react/recommended","standard"],
plugins: [
"react"
]
}
Parser will be used to specify that we need to parse lint using babel, for which we installed the babel-eslint@next in npm.
Env and parserOptions are optional and will simply specify the env options that lint may encounter during parsing.
Extends is the most important since it will specify what kind of rules will be set. You can use only “standard” if you would like however both eslint and react lint plugin come with inbuilt recommendations that I decided to use above too.
Plugins above is simply there to tell lint that react is used to avoid getting react errors such as unused imports etc.
In our package.json, add 2 scripts that will help you use lint quicker:
"scripts": {
"lint": "eslint app/.",
"fix": "eslint --fix app/.; exit 0;"
}
“lint” script will check for errors while “fix” script will TRY to auto fix as many errors/warnings as possible such as end of file line, extra spacings, etc.
.ellipsis {
overflow: hidden;
position: relative;
height: 120px;
line-height: 20px;
}
.ellipsis:before {
content:"";
float: left;
width: 5px; height: 120px; }
.ellipsis> *:first-child {
float: right;
width: 100%;
margin-left: -5px; }
.ellipsis:after {
content: "\02026";
box-sizing: content-box;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
float: right; position: relative;
top: -20px; left: 100%;
width: 3em; margin-left: -3em;
padding-right: 5px;
text-align: right;
background-size: 100% 100%;
background: -webkit-gradient(linear, left top, right top,
from(rgba(255, 255, 255, 0)), to(white), color-stop(15%, white));
background: -moz-linear-gradient(to right, rgba(255, 255, 255, 0), white 15%, white);
background: -o-linear-gradient(to right, rgba(255, 255, 255, 0), white 15%, white);
background: -ms-linear-gradient(to right, rgba(255, 255, 255, 0), white 15%, white);
background: linear-gradient(to right, rgba(255, 255, 255, 0), white 15%, white);
}
.ellipsis a {
position: absolute;
left: 0; top: 0;
width: 100%; height: 100%;
overflow: hidden; text-indent: -9999px;
}
.ellipsis i, .ellipsis:after {
font-style: normal;
}
<div className="ellipsis"><div>Your multi lined text here<i></i></div></div>
Seems like migrating to Angular 4 throws errors for animation module, mainly 404 not found.
I have tried so many ways to fix it and looked all over google until I finally found the correct answer.
In systemsjs.config.js add the following map settings:
'@angular/animations': 'npm:@angular/animations/bundles/animations.umd.js',
'@angular/animations/browser': 'npm:@angular/animations/bundles/animations-browser.umd.js',
'@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js'
In app.module.js (or whatever your module is named) add the following:
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
NgModule({
imports: [
BrowserAnimationsModule
]
})
Please not that some people mentioned that using BrowserModule and BrowserAnimationsModule will not work so you will need to replace one with the other. Please know this is incorrect and if BrowserModule is removed from your app.module.js you may get a lot of errors especially for ng properties.
While I was working my notepad++ crashed and of course I had not taken a backup in 3 working days. My heart stopped and was panicking as I was of the assumption notepad++ had no history. Well, I was wrong, it does. I found all file backups inn my AppData folder of my computer with time stamp of backup time. To access these files go to:
C:\Users\<user>\AppData\Roaming\Notepad++\backup
Hope this helps you too!
Rochcass 