Fixed other captions and markdown errors 🚀

Author: chicio

_includes/blog-lazy-image.html

@@ -1,6 +1,6 @@
 {% capture description %}{{ include.description | replace: ' ', '-' | downcase }}{% endcapture %}
 {% capture customClassAndBlogClass %}{{ include.class | default: '' | append: ' figure-img img-fluid d-block mx-auto rounded blog-image' }}{% endcapture %}
 <figure class="d-block mx-auto">
-  {% include lazy-image.html id=description alt=include.description fill="BDBDBD" src=include.src width=include.width height=include.height class=customClassAndBlogClass %}
+  {% include lazy-image.html alt=include.description fill="BDBDBD" src=include.src width=include.width height=include.height class=customClassAndBlogClass %}
   <figcaption class="figure-caption text-center font-italic font-weight-light">{{ include.description }}</figcaption>
 </figure>

_includes/blog-recent-posts.html

@@ -9,8 +9,8 @@ <h3>Recent posts</h3>
 					   aria-label="{{ post.title }}">
 						<div class="col-lg-4">
 							<div class="card">
-								<div class="img-container"> 
-										{% include blog-lazy-image.html class="img" src=post.image description=post.title %}
+								<div class="img-container">
+										{% include lazy-image.html alt=post.title fill="BDBDBD" src=post.image class="img blog-image" %} 
 								</div>
 								<h4>{{ post.title }}</h4>
 								{{ post.excerpt | remove: '<em>' | remove: '</em>' }}

_posts/2017-10-27-model-view-presenter-architecture-android-java.md

@@ -20,7 +20,7 @@ In a [previous post](/2017/08/11/model-view-presenter-architecture-ios-swift-uni
 In this post we will try to develop the same application we developed on iOS in the [previous post](/2017/08/11/model-view-presenter-architecture-ios-swift-unit-test.html "model view presenter ios post"): a simple product catalog that shows a list of products. When you tap on one of them, its details is shown.
 Below you can find the same mockup we used for the iOS version.
 
-![Model view presenter mockup](/assets/images/posts/mockup-model-view-presenter.png "Model view presenter mockup")
+{% include blog-lazy-image.html description="A mockup of the final app we will obtain at the end of this post"  width="1200" height="1527" src="/assets/images/posts/mockup-model-view-presenter.jpg" %}
 
 Let's start by creating a `Product` class. We need also to create a `ProductsRepository` class: in our case it will be a fake one that return to listener a list of products after 3 seconds. We do this to simulate a web service call. This is our implementation for the `Product` class:
 
@@ -76,15 +76,15 @@ public class ProductsRepository implements Repository {
 }
 ```
 
-As we said before, and as you can see above the repository return to a `ProductsRepositoryListener` the list of products. So the interface definition for that listener is: 
+As we said before, and as you can see above the repository return to a `ProductsRepositoryListener` the list of products. So the interface definition for that listener is:
 
 ```java
 public interface ProductsRepositoryListener {
     void onRetrieved(Product[] products);
 }
 ```
 
-Now we can start to create our presenter. First of all we will define a `ProductsView` that will be responsible to implement the real platform dependent UI code. Our presenter will be responsible for: 
+Now we can start to create our presenter. First of all we will define a `ProductsView` that will be responsible to implement the real platform dependent UI code. Our presenter will be responsible for:
 
 * **the start of the view in the**  `onStart()` method. In this method it will update the view title, show a loading status and more important it will start the retrieve of the product list and become its listener.
 * **listening to the repository callback when the products are retrieve**. So our presenter will implement the `ProductsRepositoryListener` interface and pass to the view the updated product list.
@@ -154,7 +154,7 @@ public class ProductsPresenter implements ProductsRepositoryListener {
 }
 ```
 
-And this are our presenter tests: 
+And this are our presenter tests:
 
 ```java
 public class ProductsPresenterTest {
@@ -397,7 +397,7 @@ public class ProductsFragment extends Fragment implements ProductsView {
 }
 ```
 
-As you can see it implements all the UI operation we defined in our view as the `UIViewController` do on iOS. But if you look well we have a little difference between the two platform. In the Android platform the tap on a product is managed in the adapter, so the presenter is passed to this component to manage the product selection. Let's see the implementation of our `ProductsPresenter`: 
+As you can see it implements all the UI operation we defined in our view as the `UIViewController` do on iOS. But if you look well we have a little difference between the two platform. In the Android platform the tap on a product is managed in the adapter, so the presenter is passed to this component to manage the product selection. Let's see the implementation of our `ProductsPresenter`:
 
 ```java
 class ProductsAdapter extends RecyclerView.Adapter<ProductsAdapter.ViewHolder> {
@@ -447,7 +447,7 @@ class ProductsAdapter extends RecyclerView.Adapter<ProductsAdapter.ViewHolder> {
 ```
 
 There's also another little difference between the Android and the iOS version. If you look carefully in the `showDetailFor(Product product)` method, that is called after the product selected is checked in the presenter, there is another component responsible to manage the navigation between the screen of our app. In particular, the screen of our app will  be `Fragment` objects and there will be an `Activity`, the `ProductsActivity`, that will implement the `ProductsNavigator` interface and will be responsible to manage the correct navigation between fragments in the app.
-Let's see in order the `ProductsNavigator` interface: 
+Let's see in order the `ProductsNavigator` interface:
 
 ```java
 public interface ProductsNavigator {
@@ -518,7 +518,7 @@ public interface ProductDetailView {
 }
 ```
 
-And then our presenter: 
+And then our presenter:
 
 ```java
 public class ProductDetailPresenter {
@@ -607,7 +607,7 @@ public class ProductDetailPresenterTest {
 }
 ```
 
-And finally our `ProductDetailFragment`: 
+And finally our `ProductDetailFragment`:
 
 ```java
 public class ProductDetailFragment extends Fragment implements ProductDetailView {
@@ -686,4 +686,4 @@ public class ProductDetailFragment extends Fragment implements ProductDetailView
 
 That's it!!!!! You've made it!!! Now you master the Model View Presenter architectural pattern on Android and you're ready to rock with unit test on all the main mobile platform on the market (somebody said Windows Phone!?!?!?!?!? :stuck_out_tongue_closed_eyes:).
 
-{% include blog-lazy-image.html description="model view presenter platforms" width="379" height="247" src="/assets/images/posts/model-view-presenter-platforms.jpg" %}
+{% include blog-lazy-image.html description="Chuck Norris approves the Model View Presenter architectural pattern" width="379" height="247" src="/assets/images/posts/model-view-presenter-platforms.jpg" %}

_posts/2017-11-14-react-native-realm-custom-manual-linking-app-custom-directories-ios.md

@@ -12,8 +12,7 @@ seo:
 authors: [fabrizio_duroni]    
 ---
 
-*In this post I will show you how to install realm as a dependency in a React Native project with custom folders structure 
-without using react-native link command*.
+*In this post I will show you how to install realm as a dependency in a React Native project with custom folders structure without using react-native link command*.
 
 ---
 
@@ -23,18 +22,14 @@ website:
 
 >Build native mobile apps using JavaScript and React. React Native lets you build mobile apps using only JavaScript. It uses the same design as React, letting you compose a rich mobile UI from declarative components. With React Native, you don't build a “mobile web app”, an “HTML5 app”, or a “hybrid app”. You build a real mobile app that's indistinguishable from an app built using Objective-C or Java. React Native uses the same fundamental UI building blocks as regular iOS and Android apps. You just put those building blocks together using JavaScript and React.
 
-Cool :sunglasses:!!!! Isn't it? Write an app using Javascript with the same performance of native code. You can also 
-reuse your native component and bridge them to the javascript side.  
-Most of the time the React Native framework will help you also to manage dependencies inside you project. But sometimes, especially 
-if your project doesn't follow the standard React Native directories structure you can have some problem when you try 
-to link you external library.  
-While I was working on an [existing native app integrated with React Native](https://facebook.github.io/react-native/docs/integration-with-existing-apps.html 'existing native app integrated with React Native') that 
-has a custom directories structure for the react-native and native code, I found some problem to add [Realm](https://realm.io 'https://realm.io'), the famous open source dbms, as a dependency to the project.  
+Cool :sunglasses:!!!! Isn't it? Write an app using Javascript with the same performance of native code. You can also reuse your native component and bridge them to the javascript side.  
+Most of the time the React Native framework will help you also to manage dependencies inside you project. But sometimes, especially if your project doesn't follow the standard React Native directories structure you can have some problem when you try to link you external library.  
+While I was working on an [existing native app integrated with React Native](https://facebook.github.io/react-native/docs/integration-with-existing-apps.html 'existing native app integrated with React Native') that has a custom directories structure for the react-native and native code, I found some problem to add [Realm](https://realm.io 'https://realm.io'), the famous open source dbms, as a dependency to the project.  
 In this post I will show you an example of how you can add Realm to your app that has a custom React Native installation. Let's start :cold_sweat:!!
 To describe the installation process I will use a sample app I created for this post called `ReactNativeRealmManualLink`. You can find it with realm installed in [this github repo](https://github.com/chicio/React-Native-Realm-Manual-Link 'React Native realm manual link').  
 Suppose you have a project like the one I shared above, in which React Native is contained in a subfolder of the iOS project, instead of the other way around in a standard React Native installation.
 
-{% include blog-lazy-image.html description="react native realm directories" width="500" height="355" src="/assets/images/posts/react-native-realm-1-directories.jpg" %}
+{% include blog-lazy-image.html description="The folders structure of the project used as example in this post" width="500" height="355" src="/assets/images/posts/react-native-realm-1-directories.jpg" %}
 
 First, to add realm as a dependency we need to install it through npm with following command.
 
@@ -50,20 +45,18 @@ react-native link realm
 
 But here something strange happens: as you can see from the screenshot below the command fails to link the library. So we need to find another way to install the library.
 
-{% include blog-lazy-image.html description="react native realm directories fails" width="1538" height="160" src="/assets/images/posts/react-native-realm-2-link-fails.jpg" %}
+{% include blog-lazy-image.html description="The react-native link command fails to install the realm library" width="1538" height="160" src="/assets/images/posts/react-native-realm-2-link-fails.jpg" %}
 
 Usually, if the previous command fails, you have to do the [manual linking](https://facebook.github.io/react-native/docs/linking-libraries-ios.html "manual linking").
 To do it we navigate inside the `node_modules` folder, contained in the React Native folder of our project, to found the realm folder.
-Inside it you will find an Xcode project named `RealmReact`, that you have to drag into our project. After that we 
-have to add a reference to 
-the static library `libRealmReact` and compile the project.
+Inside it you will find an Xcode project named `RealmReact`, that you have to drag into our project. After that we have to add a reference to the static library `libRealmReact` and compile the project.
 
-{% include blog-lazy-image.html description="react native realm directories step 1" width="1390" height="847" src="/assets/images/posts/react-native-realm-3-manual-link-step-1.jpg" %}
-{% include blog-lazy-image.html description="react native realm directories step 2" width="1390" height="850" src="/assets/images/posts/react-native-realm-3-manual-link-step-2.jpg" %}
+{% include blog-lazy-image.html description="Add the ReactRealm xcodeproj to the project" width="1390" height="847" src="/assets/images/posts/react-native-realm-3-manual-link-step-1.jpg" %}
+{% include blog-lazy-image.html description="Link the Realm static lib" width="1390" height="850" src="/assets/images/posts/react-native-realm-3-manual-link-step-2.jpg" %}
 
 Now you would expect that everything works fine but...
 
-{% include blog-lazy-image.html description="React Native realm manual link fails 4" width="1289" height="786" src="/assets/images/posts/react-native-realm-4-manual-link-fails.jpg" %}
+{% include blog-lazy-image.html description="The compilation fails with a complain about a header file missing" width="1289" height="786" src="/assets/images/posts/react-native-realm-4-manual-link-fails.jpg" %}
 
 What's happening? The `RealmReact` project is expecting the React Native headers in a relative position with respect to its original position. Argh :rage:!! We need to find another way...  
 
@@ -78,30 +71,26 @@ So we can try to modify our main project by:
 * adding the `RealmJS` project and the Objective-C++ files/classes as references
 * linking the static libraries `libRealmJS.a` and `libGCDWebServers.a` to our main project and see if everything works
 
-{% include blog-lazy-image.html description="react native realm custom manual link step 1" width="1500" height="915" src="/assets/images/posts/react-native-realm-5-custom-manual-link-step-1.jpg" %}
-{% include blog-lazy-image.html description="react native realm custom manual link step 2" width="1500" height="916" src="/assets/images/posts/react-native-realm-5-custom-manual-link-step-2.jpg" %}
+{% include blog-lazy-image.html description="Add the RealmReact folder and the RealmJS xcodeproj to the project" width="1500" height="915" src="/assets/images/posts/react-native-realm-5-custom-manual-link-step-1.jpg" %}
+{% include blog-lazy-image.html description="Add libRealmJS and libGCDWebServers static libraries to the project" width="1500" height="916" src="/assets/images/posts/react-native-realm-5-custom-manual-link-step-2.jpg" %}
 
 Now we need to add to the `Header search path` option of our main project the paths that were set in the `RealmReact` project. In this way the `RealmJS` project will be able to find some headers it needs. You can find the complete list of the folder that we need to add in the screenshot below.
 
-{% include blog-lazy-image.html description="react native realm header search path" width="1500" height="916" src="/assets/images/posts/react-native-realm-6-header-search-path.jpg" %}
+{% include blog-lazy-image.html description="Add the header search paths that were setted in the RealmReact project" width="1500" height="916" src="/assets/images/posts/react-native-realm-6-header-search-path.jpg" %}
 
 Now if we try to compile our app we expect that everything works fine but...ERROR :warning::fire:!!! The build fails :boom:!!!
 
-{% include blog-lazy-image.html description="react Native realm c++ error 1"  width="1500" height="914" src="/assets/images/posts/react-native-realm-7-Cplusplus-error.jpg" %}
+{% include blog-lazy-image.html description="The C++ compiler gives an error when compiling the RealmReact source code"  width="1500" height="914" src="/assets/images/posts/react-native-realm-7-Cplusplus-error.jpg" %}
 
-It seems like that in order to be able to compile the C++ source code contained in `RealmJS` we need to set a recent C++ version 
-in our project setting that supports some new features like auto return type on static function. We can set it to C++ 14 
-and set the Standard Library to the LLVM one with C++ 11 support.
+It seems like that in order to be able to compile the C++ source code contained in `RealmJS` we need to set a recent C++ version in our project setting that supports some new features like auto return type on static function. We can set it to C++ 14 and set the Standard Library to the LLVM one with C++ 11 support.
 
-{% include blog-lazy-image.html description="react native realm c++ error 2" width="1500" height="912" src="/assets/images/posts/react-native-realm-8-Cplusplus-setup.jpg" %}
+{% include blog-lazy-image.html description="Update the C++ language dialect and std library to C++14/11" width="1500" height="912" src="/assets/images/posts/react-native-realm-8-Cplusplus-setup.jpg" %}
 
-One final step is to remove the flag `-all_load` from the `Other linker flag` option of the main project (if you have it). 
-In this way we avoid to load all Objective-C symbols and have the "duplicated symbols" error.
+One final step is to remove the flag `-all_load` from the `Other linker flag` option of the main project (if you have it). In this way we avoid to load all Objective-C symbols and have the "duplicated symbols" error.
 
-{% include blog-lazy-image.html description="react native realm all_load flag" width="1500" height="915" src="/assets/images/posts/react-native-realm-9-all_load.jpg" %}
+{% include blog-lazy-image.html description="Remove the all_load linker flag" width="1500" height="915" src="/assets/images/posts/react-native-realm-9-all_load.jpg" %}
 
-We are now ready to build our app and see if everything works. To do this we create a sample native view controller 
-that has a `RCTRootView`
+We are now ready to build our app and see if everything works. To do this we create a sample native view controller that has a `RCTRootView`.
 
 ```swift
 class ReactNativeRealmController: UIViewController {
@@ -170,7 +159,7 @@ AppRegistry.registerComponent('ReactNativeRealmScreen', () => ReactNativeRealmSc
 
 We are now ready to build our app and, as expected, everything works fine.
 
-{% include blog-lazy-image.html description="react native realm build works" width="1500" height="914" src="/assets/images/posts/react-native-realm-10-build-works.jpg" %}
+{% include blog-lazy-image.html description="The example app compilation is fine and you can try to launch it" width="1500" height="914" src="/assets/images/posts/react-native-realm-10-build-works.jpg" %}
 
 That's it!! As I told you before you can find the complete example in [this github repo](https://github.com/chicio/React-Native-Realm-Manual-Link 'React Native realm manual link').
 We are now ready to create our React Native component with realm :bowtie:.