My experience on my daily works... helping others ease each other

Sunday, December 31, 2017

Javascript to newbies

Want to learn JavaScript and conquer the world? Start here:

Tutorials and Books
- JavaScript For Cats is a dead simply introduction for new programmers.
- MDN JavaScript Guide has the most standard and straightforward tutorials. If you need references, MDN is here for you
too.
- You Don’t Know JS is the best book to learn JavaScript from. It’s free to read on GitHub.
- Eloquent JavaScript is another great introduction to programming and learning JavaScript.
- Modern JavaScript Cheatsheet helps you understand and learn all the new features in the language.
- JSBooks, a collection of free JavaScript books.

Videos and Courses
- JavaScript: Understanding the Weird Parts an incredible course which teaches the concepts of the language. First 3 hours
are free on YouTube, you can but the whole course from Udemy.
- FunFunFunction makes the learning process enjoyable.
- Javascript30, 30 videos to level up your skills.
- Traversy Media great contents mostly aimed for begginers.

Learn by Doing
- FreeCodeCamp, learn to code by building projects.
- CodeAcademy, learn to code interactively.
- Codewars, train with programming challenges.

Functional Programming
This where the true the good parts show theirselves.
- JSUnconf 2016, learn functional programming basics with this talk from Anjana Vakil.
- FunFunFunction's videos are a great start.
- Mostly Adequate Guide to Functional Programming and Functional Light JS will make you master the functional programming.
- JavaScript Allongé, programming from functions to classes.
- Functional Programming Jargon in simple terms.
- awesome-fp-js is a good reference for functional programming in JavaScript.

Other Resources
- Spellbook of Modern Web Dev is a big picture of modern JavaScript development.
- What the fuck JavaScript?, list of funny and tricky JavaScript examples.

From JS telegram Part of @thedevs 
Rules: @thedevsrules Join other dev groups https://thedevs.network
Share:

Thursday, December 28, 2017

Cannot parse JSON-encoded object value

I'm using Loopback, a node.js API framework which helps you to develop RESTful API very easy and fast. It reduces the programming/coding require and allow you to deploy your API within days.

However, things may not be as easy you can think of. The documentation given is still lack of information and there are not many solutions that can help you to solve your problem. One of it is Cannot parse JSON-encoded object value issue.

The error message you will get as example below

error": {
"statusCode": 400
"name": "Error"
"message": "Cannot parse JSON-encoded object value."
"stack": "Error: Cannot parse JSON-encoded object value. at Object.fromSloppyValue (D:\Project\loopback\touchpoint\node_modules\strong-remoting\lib\types\object.js:34:19) at HttpContext.buildArgs (D:\Project\loopback\touchpoint\node_modules\strong-remoting\lib\http-context.js:193:22) at new HttpContext (D:\Project\loopback\touchpoint\node_modules\strong-remoting\lib\http-context.js:59:20) at restStaticMethodHandler (D:\Project\loopback\touchpoint\node_modules\strong-remoting\lib\rest-adapter.js:485:15) at Layer.handle [as handle_request] (D:\Project\loopback\touchpoint\node_modules\express\lib\router\layer.js:95:5) at next (D:\Project\loopback\touchpoint\node_modules\express\lib\router\route.js:137:13) at Route.dispatch (D:\Project\loopback\touchpoint\node_modules\express\lib\router\route.js:112:3) at Layer.handle [as handle_request] (D:\Project\loopback\touchpoint\node_modules\express\lib\router\layer.js:95:5) at D:\Project\loopback\touchpoint\node_modules\express\lib\router\index.js:281:22 at Function.process_params (D:\Project\loopback\touchpoint\node_modules\express\lib\router\index.js:335:12) at next (D:\Project\loopback\touchpoint\node_modules\express\lib\router\index.js:275:10) at Function.handle (D:\Project\loopback\touchpoint\node_modules\express\lib\router\index.js:174:3) at router (D:\Project\loopback\touchpoint\node_modules\express\lib\router\index.js:47:12) at Layer.handle [as handle_request] (D:\Project\loopback\touchpoint\node_modules\express\lib\router\layer.js:95:5) at trim_prefix (D:\Project\loopback\touchpoint\node_modules\express\lib\router\index.js:317:13) at D:\Project\loopback\touchpoint\node_modules\express\lib\router\index.js:284:7"

You can google it but the solution was not helpful enough to guide you. Sometimes, when you used its pre-default apps (coming together when you setup your loopback apps) known as swagger (Loopback API Explorer), the url and parameter used seem work as it meant to be. The problem only occurs when you try to call it from 3rd party apps such as ARC (Advanced Rest Client, POSTMAN, IMSONIA) or from your program, the above error occurs.

How to solve this?


  1. Ensure that you run and test your parameter passing which should be in JSON format is valid. You may use online such as Jsonlint or any JSON validator available.
  2. If it is valid, then, ensure that all key and value is in open and close double quote - "key": "value". Do not use single quote 'key': 'value'
  3. Finally, if the above two is correct, encode some of your parameter; for instance, '%' shall be encoded to '%25'. Use online encoder to help you such as https://www.urlencoder.org/


The above solution only applicable if you implement method through http GET, POST, PATCH, etc request. It may not be applicable for other REST calling method.

#enjoycoding





Share:

Wednesday, December 27, 2017

Set the display to center using Ionic

If you are developing apps focusing only on mobile, you may not be facing display issue as the user won't be able to see gaps or alignment problem. However, if you are developing apps that required to run on multiple platforms including web and mobile, aligning your display may cause a problem.

You will spend lots of time to configure your .css (or .scss) and when you thought you solved the problem on mobile, it shows differently on web.

I too faced such difficulties and finally found a way to solve it. I'm using ion-card and ion-list together.

here are snapshot of the code
<ion-card-content style="justify-content: center; margin-left: 0px; margin-right:
0px;background-color: #000000;">
<ion-card-title style="color: #fcfa87">
Center content <br> Working together
</ion-card-title>
<ion-list no-lines style="justify-content: center; margin-left: 0px;
margin-right: 0px; background-color: #030303;">
<ion-item style="background-color: #f1f7d6;">
<ion-label floating class="item item-input">Username</ion-label>
<ion-input type="text" name="username" class="input-label"></ion-input>
</ion-item>

and of course you need to configure your .scss too

snapshot of the code
.displayed {
display: block;
margin-left: auto;
margin-right: auto;
}
.card{
width:100%;
margin: auto;
}

the first (.displayed) shall be call by your ion-content tags and the .card is automatically set the card to be 100% width depending on your screen size

and it shall be displaying nicely on any screen as shown below
On web browser

On iPhone 7
For complete source code, you can download from my github.

All the best coding :)

Share:

About Me

Somewhere, Selangor, Malaysia
An IT by profession, a beginner in photography

Blog Archive

Blogger templates