TODO

• Edit site image to make it shorter

I recently embarked in the task of helping some friends set up their website. They own Ediciones La gota de agua, an editorial whose main goal is to promote cuban literature. I didn’t had much free time, so the main goal was to implement a simple site that could be re-designed later. The decision to use Wordpress, specifically with WooCommerce, was fairly straight forward, as I already had some experience with it. At some point we wanted to list the books on the site on Amazon automatically and that’s when the issues started. This post explains some of the challenges we faced.

For reference here’s a screenshot of the home page:

It's pretty basic and it will probably be re-designed soon, but setting it up, proved me once more how powerful is the WooCommerce + Wordpress combination. The site is using the Storefront theme, which offers a lot of options to customize the end look. We considered buying Bookstore, which is another theme designed specifically for a book shop, but from my point of view it didn't offered enough functionality to be worth it. And I was able to extend Storefront and add the features needed for a book store. Specifically:

• I changed the number of elements and the columns displayed in the home page as described here

• For each book I added three new fields to the configuration page: ISBN, Author and Publication Date. Details here. The Author field had to be displayed on the product page, and the ISBN and the Publication Date were used when publishing the book to Amazon.

Besides those there were a few cosmetic changes but nothing major.

Integrating Amazon was more complicated, the first issue was deciding what plugin to use. A quick search returned 6 options, each with their own configuration particularities.

I tried the ones by ExportFeed.com and by ChannelUnity and neither of them worked. At the time of writing the Wordpress version I was using was 4.9.4, WooCommerce version was 3.1.2 and the plugins versions were 3.1.8.1 and 2.7 respectively.

I ended up using WP-Lister Lite for Amazon which at first seemed simpler than the other two I had tried, but it surprised me in the end. Its very well implemented.

Blog Post --> http://arielrodriguezromero.com/blog/jekyll-redesign-personal-page-2018.html

For a while now I have been wanting to re-design my blog, here's the current design for reference.

I implemented it a few years ago, back in 2015, after I had graduated from the university. It was always my intention to go back to it, and now is that I'm able to fulfill that promise. Since it's very hard to find time to devote to the blog itself, i want to do something this time that makes me happy for a longer period of time. This post is a log of the process I followed to create the new design.

I didn't give it much thought to whether to find a different platform to host the blog, since I'm fond of the combination of Jekyll with Github Pages. It gives you free hosting and the end result is a very fast website. I briefly considered using webpack and react, but I would have had generate the site on my computer and push it to github. While this didn't have any clear advantages, it would have prevented me from the automatic compilation done by Github with Jeckyll, which I find very convenient.

There are several key-points that I want for the blog:

• Simple. Simple. Simple.
• Responsive
• Single column. I want the blog to highlight the content, and I can't think of anything that is important enough to deserve a space in an additional column.
• Top bar with site name ("Ariel Rodriguez Romero's Blog" for now) and a few links

Home Page:

• Should have a nice image (Havana or Philadelphia)
• Include a description about me
• Links to social networks: GIthub, Linkedin, etc
• Include a list of articles, with summaries for each of them. On the current design, there's a separate /articles page with the a of articles, I prefer to have this content into the landing page directly. In the future if the list of articles grows I can put an additional section with highlights of the best articles.

Article Page:

• Integrate well with markdown, and allow including both images and highlighted code
• Simple top bar, maybe transparent
• Disqus comments at the bottom

In order to be certain of what I wanted, I created several proposals for the home page. From these, I like the 4th one the most. It will allow me to show a picture of myself with a short bio, and all the social links below.

Now, I could try to build a new template from scratch, but I usually like to find something similar and adapt it, and there're many places with free Jeckyll templates such as jekyllthemes.org, jekyllthemes.io or jekyll-themes.com. From these sites I found several candidates for the base theme:

• https://github.com/chesterhow/tale

https://jekyll-themes.com/page8/

Demo image:

Given the processing times for the different cases of USCIS, can I estimate the likelihood that a case will be processed in a given time??

I'll calculate what's the chance of USCIS taking 12 months to process a permanent residency application, and create an application that does the same for all cases in each office.

The app will have three main pages:

• Landing page, with general information and links to each one of the cases

• A page for each form type.

• A page for each form type and a specific office.

TODO

• Create script to query all USCIS endpoints and save the results as JSON
• Create Jekyll plugin to generate all pages from the downloaded data
• Convert USCIS data into the format required by Jekyll

Migrating create react app to nextjs

yarn add next

and so it begins

Add .next/ to .gitignore.

Initially I thought I would have to change the directory structure, but next.js supports having the pages directory in src/pages vercel/next.js#8451

Styles and Images

Started to get errors about importing .sass files which are used heavily on refine.bio. This is suported with a plugin

• instructions here https://github.com/zeit/next-plugins/tree/master/packages/next-sass#without-css-modules

It was also needed for CSS imports https://github.com/zeit/next-plugins/tree/master/packages/next-css

For the svg files the recommended approach is to use babel-plugin-inline-react-svg and import the SVG as react components. However in refine.bio we have been importing them as images, which is maybe more convenient but less efficient.

After some research, I found next-images which seems to address our specific case.

With that the first error appeared :)

Other projects/demos

• Similar migration nteract/nteract.io#7
• Hackernews with nextjs demo https://github.com/clintonwoo/hackernews-react-graphql/tree/master/src

Notes to deploy to ZEIT

https://docs-git-fork-karaggeorge-projects-changes.zeit.now.sh/docs/v2/advanced/now-for-github/#disabling-production-domain-updates

disable production updates and deploy with CI

refs

• Paypal experience https://medium.com/paypal-engineering/graphql-a-success-story-for-paypal-checkout-3482f724fb53