October 2017 • Modern Web and Mobile Development and more...

Hi there! How are you? I hope you are well!

Well, here is a short note trying to clarify once and for all the notion of Parameter against the notion of an Argument!

Differences

Parameters are special kind of variables which are plain references to the actual values they point at. This is similar to the separation of variable declaration and variable initialization. Analogically, the parameter is a simple variable without initialization while an argument is the same variable but this time initialized and assigned with an actual value.

For example:

public void greeting(String name) {
  System.out.println("Hello " + name);
}

In this case we have a function definition and this function expects to have one Parameter, marked with bold.

When we actually invoke this function somewhere in our code, then we “initialize” the Parameter name of type String on the fly and this value is called Argument from now on! For example,

greeting("George");

The Argument is the string George!

Cheers!

Hi there! How are you? I hope you are well!

Well, I just want to share with you some really good news that came to my email a couple of hours ago!

It seems that I got accepted to the Android Developer program with scholarship offered by Google and Udacity!

This is really awesome but kinda frightening! I started learning Java A.S.A.P. starting with this lesson, suggestion by Udacity:

https://www.udacity.com/course/java-programming-basics–ud282

Finally, here is my badge which I proudly share here with you:

I think this will be veeeery challenging!!

Cheers!

Hi there! How are you? I hope you are well!

In this short post, we are going to introduce another debugging technique more appropriate for Frontend developers like me. Inside the developer menu of your app there is a link by the name Start Remote JS Debugging. This enables to debug our app using the Chrome’s developer’s tools, as if it was a web app! Not exactly like this of course, but we can get access to the JS console and print there our console messages. Pretty neat if you ask me! The JS server for debugging runs on this URL:

localhost:8081/debugger-ui

The Chrome tab should look something like this one:

React Native Debugger Chrome tab

You can see the enabled debugger in this screenshot from my cellphone, it is the second line:

Enabled JS Remote Debugger of React Native

Conclusion

While in the beginning everything might seem discouraging little by little and while sticking to it, everything falls into place and more tools and more techniques help you build better and better apps altogether! I hope this technique might help you as it helps me nowadays.

Cheers!

Hey there! How are you? I hope well!

Well, we have reached a point in our app development that requires us to tidy up our code, because we just add everything to the MainScreen component just to check if everything works just fine! Now, we need to separate the concerns and clear things in our minds by breaking up the component in separate components and assigning them with the correct jobs each should execute! Let’s make a sketch first, so we can visualize our design and logic behind the first screen in our app.

Component structure of MainScreen

Our top Component in our MainScreen remains in the index.js file of the folder with the same name! This component includes a lot more components inside it and so we need to break it up keeping in mind our goals at this point:

we need a header which is used for navigation (for this case we are using StackNavigator)
we need the general title of the app, which is the Site title and Tagline of the WP settings
and finally the list of posts

A general guiding rule is that each file contains only one component. This keeps things clean and readable!

So, we have 3 main components (the PostsList component breaks down to more) that we need to create in order to give our app a clean structure.

SiteInfo component

For the time being, I put the Site title and Tagline into a separate component called SiteInfo inside the MainScreen folder. This component does from now on the http call to get its contents. Of course, now we import it in the MainScreen component.

That’s it for now… Refactoring is on its way.. We keep in mind to make our app components as decoupled as possible!

PostsList component

Ok, we added an additional component which is responsible for rendering the list of posts from now on. In this component we are passing down the posts array from MainScreen state and the navigation prop as a prop of the PostsList component. Eventually, the two props of this component are: navigation and posts!

Hi there! How are you? I hope you are well!

Well, this time we need a very basic refactoring to clear things up for us although we have moved a little bit far into the app! I wish I had done it earlier! But, it is necessary.

Root level

In the root directory we currently have enough custom directories, such as:

assets/
components/
utils/

These directories ought to be in a common directory which we will call

src/

so we clean up our basic structure by not having scattered around all files and folders!

So, yep! That is for this one at the moment! We need further to break down our MainScreen component to separate components and do some styling for us to see things falling in place little by little!

Cheers!

Hi there! How are you? I hope you are doing fine..

Well, what is a programmer who doesn’t know the CS fundamentals, right? Well, in order to level up you need to know some of these concepts! Even if you are autodidact like me, at some point the questions arise.. So, in this post we will explore some of the basic data structures that I am sure you all use every day but some of you (like me) do not know the basic notions behind them!

Stack

A stack is a basic data structure that can be illustrated by thinking of your data set as a stack of books where you can only take the top item off the stack in order to remove things from it. Further on, if you add a book in the stack it has to go on top of it.

There are basically three operations that can be performed on stacks.

inserting (“pushing”) an item into a stack
deleting (“popping”) an item from the stack
displaying the contents of the top item of the stack (“peeking”)

Queue

A queue is linear data structure, in which the first element is inserted from one end (the “tail”), and the deletion of existing element takes place from the other end (the “head”). An example of a queue is a real queue of people waiting in line for a movie or in the bank.

The process of adding an element to a queue is called “enqueuing” and the process of removing an element from a queue is called “dequeuing”.

For those of you with a finance or business background (like me) you can use the terms of LIFO and FIFO for Stack and Queue respectively! LIFO means “Last-In, First-Out” and FIFO “First-In, First-Out”.

A very famous Queue is the Event Loop in JavaScript. You can check it out on Mozilla MDN:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/EventLoop

Finally, this is not an exhaustive list of the basic data structures someone can find but rather a mem note for me to remember.

Cheers!

Hey there! How are you? I hope well!

Ok, here is the next thing I am searching for: how on Earth should I find out how many posts there are in the response I get which is already paginated at 10 posts every time?

WordPress did a fine job passing through the total number of posts and pages in the headers of the response! Just look out for this:

headers: 
{ map: 
  { 
    allow: [ 'GET' ],
    'x-wp-total': [ '45' ],
    'x-wp-totalpages': [ '5' ],
... 
    'access-control-expose-headers': [ 'X-WP-Total, X-WP-TotalPages' ],
    link: [ '<http://geodoo.work/wp-json/wp/v2/posts?page=2>; rel="next"' ],
...

Nice and easy, huh? I have a total of 45 posts divided in 5 pages so far! Nice!

The only thing I have to do is find a way to pass those two variables over to the MainScreen component! The variables values are these (reading from the res parameter in the HTTP call):

res.headers.map['x-wp-total'][0]
res.headers.map['x-wp-totalpages'][0]

After I find them I have to find the proper way to make the calls for the next pages of the posts!

NOTE: The official docs page is this where I first saw the two variables:

WP REST API Pagination

Hey there! How are you today? I hope fine!

Ok, here is the thing: in order to make my app as dynamic as possible I need to have access to plenty of resources! What I didn’t think of since the beginning was to check out all the available routes and endpoints and check out which of them are “public” and which of them need Authentication/Authorization! Dear Lord! Here is the list of available routes (including some for a couple of useful plugins):

"routes": {
  "/": {},
  "/oembed/1.0": {},
  "/oembed/1.0/embed": {},
  "/oembed/1.0/proxy": {},
  "/akismet/v1": {},
  "/akismet/v1/key": {},
  "/akismet/v1/settings": {},
  "/akismet/v1/stats": {},
  "/akismet/v1/stats/(?P<interval>[\\w+])": {},
  "/yoast/v1": {},"/yoast/v1/configurator": {},
  "/yoast/v1/reindex_posts": {},
  "/yoast/v1/statistics": {},
  "/yoast/v1/ryte": {},
  "/wp/v2": {},
  "/wp/v2/posts": {},
  "/wp/v2/posts/(?P<id>[\\d]+)": {},
  "/wp/v2/posts/(?P<parent>[\\d]+)/revisions": {},
  "/wp/v2/posts/(?P<parent>[\\d]+)/revisions/(?P<id>[\\d]+)": {},
  "/wp/v2/pages": {},
  "/wp/v2/pages/(?P<id>[\\d]+)": {},
  "/wp/v2/pages/(?P<parent>[\\d]+)/revisions": {},
  "/wp/v2/pages/(?P<parent>[\\d]+)/revisions/(?P<id>[\\d]+)": {},
  "/wp/v2/media": {},"/wp/v2/media/(?P<id>[\\d]+)": {},
  "/wp/v2/types": {},
  "/wp/v2/types/(?P<type>[\\w-]+)": {},
  "/wp/v2/statuses": {},
  "/wp/v2/statuses/(?P<status>[\\w-]+)": {},
  "/wp/v2/taxonomies": {},
  "/wp/v2/taxonomies/(?P<taxonomy>[\\w-]+)": {},
  "/wp/v2/categories": {},"/wp/v2/categories/(?P<id>[\\d]+)": {},
  "/wp/v2/tags": {},
  "/wp/v2/tags/(?P<id>[\\d]+)": {},
  "/wp/v2/users": {},
  "/wp/v2/users/(?P<id>[\\d]+)": {},
  "/wp/v2/users/me": {},
  "/wp/v2/comments": {},
  "/wp/v2/comments/(?P<id>[\\d]+)": {},
  "/wp/v2/settings": {}

As you can see, there is a lot of stuff you can retrieve through the API. The thing is that you do not have access to ALL of them and this depends on two reasons: one of them is that for some actions like POST, PUT and DELETE you need Authorization and for this you need to setup oAuth on the server side, so your application can communicate with WordPress without you giving away your credentials! At this point, there are a few more considerations:

Do I need to use oAuth since I do not intend to write, edit or delete content through my app?
If I decide I wanna use it I can only authenticate/authorize as the WP admin or I could just create another user with less permissions, so noone can do some harm to my website! Because if by any means someone gets the credentials of oAuth and I have already authorize the app (even if I hide them from gitHub and from the source), he can possibly make a mess! No, I do not want this! So, the question is: can I authenticate as a plain user with certain permissions or not?

Re-designing

In the mockup I made I was thinking of using a pic, probably the author’s avatar! Now, especially while my route /wp/v2/users is unaccesible (I think for this one I need to “blame” shared hosting, well done for the high level of security!) and /wp/v2/settings gives me this json in return:

{
  "code": 
    "rest_forbidden",
    "message": "Sorry, you are not allowed to do that.",
    "data": {
      "status": 403
    }
}

I found a solution though for not being able to access the Site Title and Tagline. I can find them in the root route of the api wp-json as name and description respectively! I hope the are the same! Nonetheless, they are the same strings!

oAuth Authorization

Yesterday, I spent all day reading through the docs of the WP REST API about the routes and authentication and how it is to be done! Note: the docs are awfully written and confusing! I do not know why and I am not bitching about them, but they do not look good and professional as the WP docs in general! Some stuff are deprecated, others are half written. Nonetheless, a man has to do what a man has to do: find his way past the problem! So, here are some resources which I found quite illuminating! The best resource there is out there, in my opinion is this:

http://nobil.cc/blog/oauth-in-wp-rest-api/

This one is extensive and has some nice custom additions and photos:

Using OAuth 1.0 with the WordPress API & Custom Endpoints

The official (maybe) site is this:

https://oauth1.wp-api.org/

And some others I found were confusing so I leave them out! A thing to notice is that I am talking about oAuth here although in the docs there are some other plugins for the same purpose like Application Passwords, and JSON Web Tokens. That’s because let’s say this is the “official” way of doing this! Even the demo WP API site uses this along with the Broker central application registry!

The demo website displays the users on the browser (not like mine!): https://demo.wp-api.org/wp-json/wp/v2/users and uses the following authentication:

"authentication": {
  "oauth1": {
    "request": "https://demo.wp-api.org/oauth1/request",
    "authorize": "https://demo.wp-api.org/oauth1/authorize",
    "access": "https://demo.wp-api.org/oauth1/access",
    "version": "0.1"
  },
  "broker": "https://demo.wp-api.org/wp-json/broker/v1/connect"}

as you can probably see in https://demo.wp-api.org/wp-json/. So, I think that’s all with the WP REST API you need to know if you want to extend the control over your WP by connecting it with a mobile app or anything else! Of course, for the oAuth you need to login with your credentials, so there is no fear of exposing any secret URLs and stuff regarding security!

Final notes

Finally, I will look if I can use the Featured image instead of the avatar, although I do not use featured images on my posts (haha..) or leave it for now until I can think of something better! And now I found a way to dynamically getting the title and the tagline so I need to implement these in my code! Yay!

Cheers

Hi there! How have you been? Hope great!

Well, I have reached a point in my mind where I want to add some elements to the MainScreen component and to refactor it properly, because now separation of concerns sucks and there are some variables or console logs left!

The main screen as I am imagining it should look like a list of posts looking like the list of emails in Gmail. There should be the image of the author, the title and date of the post and underneath maybe the category and if it has comments there should be and icon with a counter of comments!

I used an excellent (and free! wireframing online tool – of course it has paid features too, duhh) called Mocking Bot! Marvelous! It has a ton of features for free and a ton of features paid too, I suppose! USE IT! It is worth it! Ok, here is what I have in mind for the Main Screen at the moment:

This is a prototype of course, do not expect miracles at this point.. The button Load more is supposed to load the next 10 or remaining posts in the feed! I saw that WP API is paged like this: no need to change this, I like it! I am thinking that on pressing the button we make another call to the API but this time to the second page and so on! Not bad at all…

PS: For the title Modern Web etc we need to make another call to the API (if there is exposed somewhere, more likely to an endpoint for General settings, because this is the Site title field for WP).

UPDATE

The Settings endpoint probably need authentication, so I hard-coded the string:

Modern Web Development and more… • A developer’s journal

which is the Site Title in General settings tab!

M	T	W	T	F	S	S
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	31

2017 / 10

Parameters vs Arguments

Differences

Google Android Developer Scholarship

GeodooBlog: debugging techniques update

Conclusion

GeodooBlog: refactoring the MainScreen component (to be continued)

Component structure of MainScreen

SiteInfo component

PostsList component

GeodooBlog: refactoring at the root level

Root level

Basic data structures

Stack

Queue

GeodooBlog: Houston we have a problem! WP REST API

Re-designing

oAuth Authorization

Final notes

GeodooBlog: refactoring the MainScreen component

UPDATE

Categories

Tag cloud

Recent posts

How to test login with Cypress and CircleCI in a secure way

2020's year resolutions

How to properly test a React component: an example

Refactoring a generator

Defensive coding

Discover MDN