#100DAYSOFCODE Week 3

Due to father’s day and my birthday, I skipped coding during weekends ūüôā

Day 15: Work (Animated banner)

4th of September

This section will be filled with my GIF image of web animation.

Day 16: Work (Animated banner) & Eloquent Javascript Exercises

5th of September. Again, the GIF will be filled up. Geh. Why my work is so dragging me from doing something fun.

By the way, I have been very thirsty to back to more fundamental stuff. That is why I join to NodeGirls’ coding dojo session. I have been in multimedia, content production & web dev industries. What I have to chase up is learning new framework or tools. I have used JavaScript for 2 years almost but it was all about having myself to adjust to libraries or framework. I started to throw questions to myself. Am I confident to JavaScript on to really deep fundamental level? I know answers. It is unfortunately no. Am I a rare lazy ass to end up like this? No. There are a lot of people like me but we are so invisible in the industries. Well, I guess people, of course, don’t want to expose their¬†obstacles in the professional field. I don’t blame that because I do know how it feels once you share your point of honest thoughts along with your own struggles, starting to become Achilles hills.

Besides of coding dojo, I also started to massage my brain into fundamental JavaScript. I have three JavaScript books. “Eloquent JavaScript” (Oh, if you want, you can also read the content from the website. I highly recommend to buy the book though), ¬†“JavaScript and jQuery interactive front end web development book http://javascriptbook.com/” and “beginning JavaScript”. I think this is a good chance to review JavaScript quizzes from the books that I have again.

I picked up the eloquent JavaScript as the first re-read starter.

Below is my code solution to the quiz called “Fizz buzz”

for (i=1; i<20; i++) {
  for (i=1; i<20; i++) {
     if(i%15 ==0) {
         console.log("FizzBuzz");
     } else if (i%3==0) {
         console.log("Fizz");
     } else if (i%5==0) {
         console.log("Buzz");
     } else {
         console.log(i);
     }
  }

Well, That is easy fizzy ūüôā

Day 17: Work (Animated banner) & Eloquent Javascript Exercises

6th of September

Below is my solution to the quiz “Hash triangle”

   var note = '';
   for (var i = 0; i<7; i++) {
      note += '#';
      console.log(note);
   }

Day 18: Work (Animated banner) & Coding Dojo

7th of September

I attended the Thursday coding dojo session. I was at the intermediate session and the session was about refactoring the code clearer.

If you want to try to clean the code by yourself, here is the code source you can see.

https://github.com/node-girls-australia/coding-dojo/tree/master/katas/tennis-refactoring-kata

Day 19: Coding Kata submission to the dojo session and my code solution on it.

8th of September

Half of day, I worked for my current main job. Rest of the day, I was looking for beginner kata source.

So today I found good quiz from eloquent  JavaScript and submitted my quiz to here

https://github.com/node-girls-australia/coding-dojo/commit/fd8aef223c67510dee1031a66b6b88de5b51bee9

Below is my solution to the quiz “chess board”

var boardSizeEach= 8;
var boardFilling = "";
for (var yAxis = 0; yAxis<boardSizeEach; yAxis++) {
for (var xAxis=0; xAxis<boardSizeEach; xAxis++) {
if((xAxis + yAxis) % 2 == 0)
boardFilling += " ";
else
boardFilling += "#";
}
boardFilling += "\n";
}
console.log(boardFilling);

Day 20: Eloquent Javascript Exercises

9th of September

Reversing an array(http://eloquentjavascript.net/04_data.html)

Not quite solved. I don’t know what I’ve done wrong on my code.

http://jsbin.com/mubobiv/edit?js,console


function reverseArr (arr){
var newArr = [];
for (var i=0;i<arr.length; i++) {
newArr.unshift(arr[i]);
}
return newArr;
}

function reverseArrInPl(arr) {
var temp = [];
for (var i = 0; i < Math.floor(arr.length/2);i++){
temp[i] = arr[i];
arr[i] = arr[arr.length -1 -i] = temp[i];
arr[arr.length -1 -i] = temp[i];
}
return arr;
}

console.log(reverseArr(["A", "B", "C"]));

var arrValue = [1,2,3,4,5];
reverseArrInPl(arrValue);
console.log(arrValue);

Day 21: Eloquent Javascript Exercises

10th of September

A list (http://eloquentjavascript.net/04_data.html)

http://jsbin.com/gafasi/edit?js,console


function arrayToList(array) {

var list = null;

for (var i = array.length - 1; i >= 0; i--) {

list = {
value: array[i],
rest: list
};
return list;
}
}

// console.log(JSON.stringify(arrayToList([1, 2, 3, 4, 5])));
console.log(arrayToList([1, 2, 3,4,5]));

 

#100DAYSOFCODE Week 2

Day #8: Work

25th of Aug:

My current job is making web animated banners. I have built AVIS, BUDGET, NSW transport campaign banners for months. Most of the banners¬†are built and implemented into Sizemek or DoubleClick studio. I am a huge fan of GASP. In my opinion, GSAP is the best library to animate assets within JS codes. Some may tell me to try pixi.js and create.js. I heavily choose libraries based on how the community responds well to different matters and issues. So far GSAP wins. I plan to upload my animation works on my personal sites. The volume of works is massive since I have made animations for 5months. I am just not sure which ways are best to go. I don’t want to expose my codes(Indeed, I am not sure I am allowed to) via code pen. I may need to look for a way to generate gif files out of from web animation. Any thoughts?

Day 9: React CRM app practice1

26th of Aug:

I wondered how Redux works on React Native App. I never built React App before so I started to play lynda.com‚Äôs tutorial called ‚ÄúReact Course Material Writing 3‚ÄĚ by¬†Emmanuel Henri. I have followed his tutorial and It was a good tutorial to follow what is CRUD & Redux pattern is about.

Day #10: React CRM app practice 2

27th of Aug:

It is same day to proceed. One thing I got is to inject firebase into React correctly. I had so many troubles to implement firebase before. A lot of old React tutorial explains old firebase way and that timing is way too far before firebase merged into google. I’ve got a problem to render my code at the moment. The problem I assume is from the timing when I tried to install React Native Redux Debugger. The course’ guide didn’t work so I tried to implement the modules by myself. It seems it doesn’t render anymore. I went back to my previous working repository and the result was same. I may ask Manny about it later. It is such a good instructor.

Day #11: TDD practice 1

28th of Aug:

I have the struggle to solve about the Promise. I want to learn ES6 deeper because React is now highly relying on this syntax. If you want to try here is the website. http://es6katas.org/

If you want to help me to solve es6 promise katas on creation, you are welcomed to pull request. I am stuck at the moment…

https://bitbucket.org/digitalspacecat/fecodepractice/src/52dea474e4d8316faf3aa86cef224c87acde89ec/Fundermental%20Practice/ES6Katas/Promise_creation/test.js?at=JSFund%2FES6Katas&fileviewer=file-view-default

Day 12: Work (Animated banner)

29th of Aug: Same as usual. All of sudden, the production work flow swamped me over. I have to build new AVIS campaign banners again. I have used GSAP to build the animations on the canvas. Without GSAP, I couldn’t achieve any tricky animations. Thinking of coding all movement with vanilla javascript. Ew. At some point, I will update my previous works. It is quite fun to make something really creative works with codings. The only problem is there are¬†not many jobs like this unless you are an expert on something up-to-date framework. It used to be Angular and it is now React. Such a framework war saga.

Day 13: Work (Animated banner)

30th of Aug: Sames as usual. This part will be updated at some point. For instance, attaching gif file of my web animation. I have built AVIS banners for the quarter 4.

Day 14: Work (Animated banner) & Writing React state example codes

31th of Aug: Sames as usual for works. Although I have written something about state. I am currently writing NodeGirlsSydney React workshop “Intro to React”. The concept of props and state was quite confusing to me when I first faced to React – I still do. I wrote some basic components to explain “state” and here is my codepen for it.

This article gave me heaps of ideas to write my workshop. I recommend you to read it.

https://medium.freecodecamp.org/all-the-fundamental-react-js-concepts-jammed-into-this-single-medium-article-c83f9b53eac2

 

 

 

#100DAYSOFCODE Week 1

This starts from 4th of June. Day # Tasty road in Seoul with d3

5th June

Day #1 Tasty road in Seoul with d3

The D3 Practice

I did practice D3 structures. All code references cited. (Original code credit to Lucy Park. The blog is cited in the post link). It was very inspirational and I had a brief gasp of D3.

Since from the June, I kept coding because, you know, I have been an interactive developer for years. Unfortunately, I lost my own track of records in the regards to my #100-day challenge principle. If I didn’t write what I’ve done, It is not worth to put my 100 days code challenge bucket. So I decided to start again from scratch.

Day # 2 React Course Material Writing

19th Aug: I wrote the proposal of “Intro to React” beginner workshop. I did research of some simple app that I can show attendees how to build a react app. I quickly coded the weather app but I felt that it may be too much for beginners. React becomes really complicated too to develop in these days.

Day # 3 React Course Material Writing 2

20th Aug: I kept writing about Intro to React session. To do this, I looked at some materials from CodeSchool and the official page of React. React is heavily following ES6. I felt that I need to learn more of ES6. Especially when React uses maps and reduce method, I was very confused. A long time ago, Coding on React was not that difficult since it claimed that it is a very tiny library for only rendering virtual DOM. While I am away from Web UI, a lot of things seems changed far.

Day # 4 React Course Material Writing 3

21st Aug: I kept writing about the state on React. For myself, I do now understand what is the difference between props and state. The thing is…¬†Can I explain somebody well? Nah..My process of understanding is very abstract and imaginary. It is just how my brain works. I am good at picking up correct one or wrong code. I, however, am horrible to describe with wordings, especially within the second language (My first language is Korean).

Day # 5D3 Practice 1

22nd Aug:

The Seoul tasty road’s code was basically for understanding how D3 works from looking at someone’s code. Most of the codes¬†were based on Lucy’s code. At this time, I grabbed ¬† D3 APIs and StackOverflow forums and Scott Murray’s lecture. The data source is from NAB Index table about online retail shop growth. (Table link)

What I applied on this chart:

  • Highlights
  • Transition
  • Tooltip as labels on the bars
  • Hover changing fills with JS

Day # 6 D3 Practice 2

23rd Aug:

So far I browsed D3. My thought? D3 is not that much spectacular. It is just a library you always need to look at the API document just like others. Is D3 useful? Yes, In some ways. I personally don’t think it is absolutely kicking benefits for me. To make a quality of charts, D3 requires so many lines of codes. It is a double side of a sword. If you are very passionate about making your own interactive chart with detailed design thinking, D3 is definitely to go. Otherwise, D3 is too much hustle to draw charts. If you are still interested in D3, then follow Shirly Wu. She is a senior ninja of D3. I am not heavily into the mode of customising charts out of data. Chart.js is enough if I need to integrate with React. Otherwise, there are a ton of chart tools. While working in Macquarie Group, I used AMchart, which was absolutely okay. When I just do data visualizing for my personal data journal, I only used dimple.js and I am happy about it. Using a¬†chart with other JS framework? Chart.js was simple enough to use along with Vue.js and React.js. Don’t get me wrong. D3 is awesome and grant you limitless flexibilities. In other words, you are going to have a big learning curve, which I still do on the way.

Resource: http://htmlcolorcodes.com/color-chart/

Data table: Scott Murray’s intermediate data visualization reference

Day # 7 Coding Dojo

24th Aug: My favorite meetup! If you are living in Sydney and want to improve your JavaScript skills, I highly recommend coming to this meetup. You must study basic JavaScript beforehand. I observed this meet up a couple of times and many of people had no idea about how JS works or how programming works. If you fall into this case, please join the beginner team. The advanced team is a bit hard to catch up because we wouldn’t explain how JS method(and syntax) or TDD of Mocha works. I am regularly attending the Advanced team. My team did the banking kata together and we almost solved the goal. So much progressive. Kudos for Nik, Tanya, and Reenah for organizing coding dojos.

 

 

 

 

WordPress Underscore based theme

It has been a while to work on WordPress. I am still trying to boost my hands back on WordPress. It seems like there are a lot of tools and method for WordPress. I feel very behind about this. Maybe this is time to recover my memory.

At this time, I tried to use Bootstrap and Underscore theme.

I installed WordPress on Scotch box vagrant box. I normally use the vagrant box for PHP basis development – simply I don’t want to mess anything up.

If you go to underscores.me you will have the forms you need to fill out. Underscore also have the sass option(Which I much prefer) but I just downloaded the basic mode at this time since this is the first time to use underscore.

 

 

Data Vis Practice – The Tasty Road (Ver.Seoul)

*This falls under the #100DaysOfCode challenge.

** Source code references belong to Lucy Park(D3 code) and Seoul open source project(Seoul TopoJSON map). This is the post to note on how D3 and TopoJson works.

The Data visualisation, especially data scientific appliance to storytelling and journalism, has been a fascinated topic. I had been thinking to start my own project on my career path, but there were not much of demands of it. Everyone wants to hire developers to work on SPA, Full SSAS, or whatever product is but not for story tellings. Perhaps because I am from artistic backgrounds or I am very active on political issues – the web development and new techs for up-to-date service based products were not fascinating me. Don’t get me wrong. I love web stuff and all new innovational approaches. I just am not into all the hype that forces me to hop on it. 2015 I was a kind of useless developer because I am not a seasoned angular developer. 2016 now I am again an incompetent developer because I am not an experienced Angular2 or React with Redux developer.

What is a framework for? Isn’t it supposed to be a tool just helping you to draw your abstract ambitions into a real product? No one answers me about that, and I don’t want to waste my time to learn things it will become useless at any time. Again, don’t get me wrong. I think those tools are very useful and there are a lot of reasons why people are on the highest fever pitch. I am..I am just not into it. I need something more..more likely me. More inspirational¬†aspects of driving me to put my hands on and dig the craftsmanship.

From 2016 to 2017, I have seen three big elections. Presidental elections in USA, France, and South Korea. While observing those elections through media, there were a ton of delicate charts and data tables within the journalism platforms. While reading the articles, which is storytelling aside with insights, I was really into it. Lean into it, Put my emotions while reading articles, and observe the responses from crowds in the web. And finally, make changes. Some results were bitter, and some results were sweet to watch. That was the moment to give me motivation.

I decided to study more about data visualisation. It is going to be 100 challenges. It would sometimes be interactive infographics, or it could be my assignment after following some tutorials or books. Whatever would be, I think it is a good start to give myself to do something steady.

So, here is my challenge one.

I used to go to various tasty restaurants. I pinned locations on the Google map. The thing is there is an expiration date on the each pin, and I just lost my pins when they expire.

The thing is there is an expiration date on the each pin, and I just lost my pins when they expire.

So I decided to take a note where I have been in Seoul and tried to map them via d3.

There was a blog explaining how to put the pins on the maps by using TopoJson and d3. I will put all the references at the end of this post.

http://bl.ocks.org/DigitalSpaceCat/ee4aebbc1acf83e47abbb39560a77fb4#file-index-html

Screenshot 2017-06-02 15.43.02

I grabbed what Lucy built for making her own chart. The difference between my chart and her chart is how to grab and pin the restaurant. The main goal of this chart is learning d3 and how to use it. I didn’t use Python as she does for generating JSON because my main aim is to see how the coordinate location pins work on the d3 chart. I manually googled the restaurant and entered the location coordinates manually in the CSV file.

What I learned from this work is,

  1. D3 is a just tool for drawing data. It is a drawing tool with javascript code. It is not anything about data.
  2. To draw a map and transfer to topoJson, you need to know Python or R to some of the levels. You cannot do this with javascript
  3. For the data cleaning and grabbing some visualisation ideas, at least you need some other tools like MS Excel and Tableau.

I will try to make Sydney and Busan version next time.

Reference: Lucy Park’s tech¬†blog (https://www.lucypark.kr/blog//)

Setting up WordPress environment on vagrant

It has been a while away from WordPress development.

First, my previous works normally have used other backend frameworks or languages. Second, my role of front-end development has been always for big products. I haven’t worked from scratch last 2 years. Now my current job will end soon – it was a very great environment to work there- and WordPress seems to have a rising curve again.

I wasn’t really trying to recover my memory on WordPress. There were no work or developer friends who mention how WordPress workflow has been changed. Furthermore, many of developers developing WordPress using old passion way to develop. I didn’t want to mess up my user library on my Mac – I have a horrible experience while I tried to learn Ruby on Rails. I am also not a big fan of MAMP either along with PHP admin stuff.

The thing is, even though everybody hates PHP, it will survive for a quite long time. You cannot really be out of scope in this industry. Perhaps PHP is not so great for enterprise or government campaign but PHP has absolutely great CMS frameworks. WordPress is top of them, I reckon.

I still hesitated to set-up WordPress development environment. The main reason is due to my laziness, but what sort of developer would love repetitive and patient (&tedious) works? I haven’t written plain CSS¬†since I started using SCSS and Compas. Even I haven’t write plain javascript and HTML on one single file since I have used task runner. Yeah. Task runners and processing compilers ruined me. I cannot write long and tedious codes. I will hurt my eyes to read them. Yeah..I am not that hard working type or patient. I am not a superman-developer either. I am just an average level front-end developer, and I have worked fine for projects. (Cheers to Australian IT economic woohoo!)

Good thing is, there are tons of lovely developers in the world who share their intelligence and leave their codes open on GitHub. And I highly benefit from those. hehe. I googled some open stacks for WordPress and found two containers for WordPress. http://vccw.cc/ and https://box.scotch.io/

First I tried https://box.scotch.io along with https://github.com/flurinduerst/WPDistillery

It was not WORKING. When I installed the scotch box first, it successfully loaded up index.php. It seems like developing pure PHP or Laravel project looks fine. But I want my FREAKING WORDPRESS happen on this container and the connection has failed.

This is what the initial page looks like when you load up scotch box.

68747470733a2f2f73636f7463682e696f2f77702d636f6e74656e742f75706c6f6164732f323031352f31312f53637265656e2d53686f742d323031352d31312d30332d61742d312e33312e35322d504d2e706e67

and once you rolled up wp distillery,¬†it just fucked up everything. I thought I did something wrong in the vagrant box bash. I tried to successfully install WordPress in the scotch box by command line what WP distillery says but no. It didn’t happen.

So I move back to vccw. When I firstly loaded the vagrant up, it took ages. Once you’ve set-up everything, it looks alright. All pre-setup just beautifully showed up without any hassle.

The image below is from a vccw review blog (Japanese http://tonari-it.com/vccw/). My environment looks same.

060-vccw-dev

Alright. Let’s install some base WordPress theme boilerplate. I need gulp, foundation6, bower, and so on. I am so excited to use these foundation theme structures

 

Oh..wait. What is the version of NPM?

Screen Shot 2016-08-26 at 1.48.05 PM

..Are you fxxxing kidding me? The node is now v5 out..and this still uses v.10.36..?

No fucking way to use this box. I gotta find another way to work on WordPress. Since the Scotch box is fully for LAMP stack..there must be a way to install WordPress in the VM box. AND I FOUND THIS BLOG. THIS IS WHY I LOVE INTERNET!!! SHARE AND LOVE!

http://dobsondev.com/2015/04/10/scotch-box/

Following the instruction on the blog post, it was very simple Tick-and-go.

http://jonathanbossenger.com/setting-up-a-local-development-environment-with-scotch-box/

I downloaded WordPress zip file(v4.6) and paste into the public folder.

Screen Shot 2016-08-26 at 1.56.10 PM.png

Heck ya! It is working! ūüôā Scotch box was much faster than VCCW when booting up and now also I can install WordPress too! Awesome! Now I guess it is development time.

Also look at the node and npm version. Perfect!

Screen Shot 2016-08-26 at 2.24.13 PM.png

I will review the new theme development base themes in next post.

If you want to upgrade php5 to php7, please go to this page https://github.com/scotch-io/scotch-box

These are the base theme that I am going to review next time.

https://github.com/olefredrik/foundationpress/ http://jointswp.com/docs/gulp/ http://underscores.me/

and thanks for the inspiration
http://watch-learn.com/

Reference site while I tried to develop WordPress again.
http://buildwpyourself.com/how-to-build-a-wordpress-theme-part-1-theme-files/

 

 

 

 

 

 

 

 

 

 

 

Quick View: AMPScript and Marketing Cloud

(This post is a draft. The content will keep being updated)

It was very long time ago to use Salesforce cloud service. At that time the exact code was a tool only a few agencies chose. Now they changed their name from exact code to Marketing cloud.

I, unfortunately, missed the chance to register developer edition.Which is the shame? If the developer needs to study to work on the automate task projects such as matching landing pages and EDM, how a developer or producer practice before they mess up with clients receiving all unrefined craps :/ Luckily, I still have force.com for practicing subscription detects.

While I developed the XML form which is associated with Salesforce APEX environment with angular directive markup, I tested the value detects from user’s subscriber request. So I guess the marketing cloud is very customised and personalized environment for all the marketing activities.

For mapping all essential user data dynamically injected to the EDM and Landing page, ¬†Marketing cloud recommends highly to use AMPscript. (well they also say developer can use server js but they don’t provide any document or tutorial based on the task stories)

It seems like they’ve done a great job of documenting. Their document is quite explaining that how a developer can code AMPscript based on the task stories. So it won’t just kick you off to the limbo of unfinished learning curves. (I hate the high learning curves when I jump to the new products or new task frameworks)

http://help.marketingcloud.com/en/documentation/ampscript/getting_started_with_ampscript/ampscript_101/

https://help.marketingcloud.com/en/documentation/exacttarget/ab_testing/standard_ab_testing_overview/how_to_create_standard_ab_tests/

Framework Review: Zurb Foundation INKY2

(This post is not done yet. I will keep updating my draft.)

While I work as a freelancer, I often used to have EDM development tasks. The tasks required sometimes just one day to build whole a landing page or EDM. And of course, Whatever I build, The page should be responsive as well.

Quite crazy huh? That could be a month long project if the project codes are quite spaghetti within a big code container. For example, the main campaign landing page on Carsguide.com.au(Launched sep. 2014 – so the new campaign landing page is no longer there..lol) took a month to finish it. Of course, It was based on the Drupal CMS and all menu, theme style guide, API protocol surely have to work perfectly so it is a bit different story..but still one day of landing page completion or EDM sounds crazy.

Only good thing is, those types of works do not require clean codes or designs. The agencies requiring those tasks just want to get stuff done. Afterwards is not my(or their) business.

To make the things easy, I started to gather the code and design patterns. Furthermore, I started to look up some frameworks. There were a couple of frameworks and design patterns. While I work on a couple of responsive EDM development task from media agencies, I started to apply to them. The result was quite good. The development working hours got more shorten.

People are so awesome. Especially, the developer working in marketing process share a lot of know-hows.

This is the site I used to refer a lot. Pretty much covers what I need to develop from PSD slices.

http://responsiveemailpatterns.com/

http://emailframe.work/

http://responsiveemailresources.com/

and I sometimes used Inky ver.1 of foundation czurb email template (http://foundation.zurb.com/emails/docs/v1.0.5/index.html).

The thing is, I want to dynamically test on the each of small steps. Yes, I can test the codes on litmus but it is still annoying to make sure all your inline CSS codes are laid on each of markups and you gotta make your template up to a certain degree to paste your code into their test builder. Plus, uploading to cloud space is not so..fast..you waste your every single minute..or minutes until it compiles. I wanted to have such an automation task tool. I mean, everybody on product development uses the auto task tool like gulp or grunt. Even I have used gulp for my prototyping designs. (I make prototyping and UI animation via framer studio and the framer.js library can be used in gulp.)

And..voila! The zurb foundation made the ultimate task runner template! Woohoo!

The stacks required for this ultimate template is “Gulp”, “Handlebar”, “SASS”, and “NPM”.

Okay. Not a problem. I know a little bit of Gulp. I often used handlebar(panini) template while I am working in Tourism Australia project. SASS? Phssess…Most of my CSS development is done by SASS and Compass. NPM? ¬†I already installed the ruby gem “Homebrew” and installed Node and NPM via homebrew. Everything is pretty much already setup.

So I went to the getting-started page (I choose the SASS version)

http://foundation.zurb.com/emails/docs/sass-guide.html

and just follow their baby step guide.

I won’t explain how I installed the template since the guide covers everything.

This is what my current template base looks like. The layout/default.html is the main layout. Under the centre table, you will see “{{> body}}”

This body mustache is bringing all the body(the greatest outer container page..I would say) pages under the pages. Once you run your localhost, the default template is index.html. If you parallelly develop another page, simply go to http://localhost:3000/the new page name.html.

Screen Shot 2016-08-05 at 1.54.27 PM

I will show you how it turns out. Once you type “npm start” It will initially install all related node package modules. If you built something and have watcher mode, you can type “npm run build”

Screen Shot 2016-08-05 at 2.05.29 PM

On the terminal, you see that Gulp is doing his job quite fast.

And, if you go to localhost, you will see the default index page. That was a bit ugly but it was tjust simple test..hehe. I also consolated the inky sample snippets for different EDM marketing template like a grid catalogue. I made this catalogue page separately at pages/inkBoilate.html. You don’t need to change any path variable.

Screen Shot 2016-08-05 at 2.02.58 PM

Just type the page name at the end of localhost port number.

Screen Shot 2016-08-05 at 2.04.43 PM

 

Another awesome feature of this ultimate template is that you can develop all the template as module object oriented style by using panini layout (Handlebar or called as a mustache) I will show you what I mean. The inkBoilate.html page above is just one module compiled the page. I want to see another module continuously landing out.

I built new partial components “hero” and “drip” under partials/inkBoilerate/hero.html and ¬†partials/inkBoilerate/drip.html ¬†(Others for my convenience. You will see the full code on my bitbucket at the end.) After that, I injected these two components into inkBoilate.html like this

Screen Shot 2016-08-05 at 2.13.22 PM

Tada~~! Now you can see the new modules are compiled and landed at the localhost:3000/inkBoilate.html. It is quite awesome.

Screen Shot 2016-08-05 at 2.14.14 PM

You can test your development directly via using Chrome inspector tool. I, however, recommend you experience the browsersync. It is a really useful tool for grid testing.

The testing server is set-up at localhost:3001

and I will turn the CSS outlining option.
Screen Shot 2016-08-05 at 2.21.10 PM

And now you will see the grid outlines on your template.

Screen Shot 2016-08-05 at 2.21.19 PM

Okay Okay, all sounds good. I cannot be still sure to use this ultimate task. The email is very fiddly development and you have to entirely make sure all grids are remained firmly even in outlook. So far the I didn’t use any of super loooooooong table tags and I didn’t write inline CSS code either. How the heck then I can use this template to test in litmus?

Ah..wait a minute. After I type “npm run build” on my terminal, the gulp task runner generated another folder and files. Haha. Look at this. They compiled all the codes into minified version. The CSS code written in SASS file or separately in the block <style></style> is all injected into markups.

Screen Shot 2016-08-05 at 2.31.27 PM

I am still very negative that the compiled code is still working. I cannot be sure until I test the code on litmus. So I decided to make a sample e-mail template and test in litmus.

Here is my new code for order-shipment confirmation. I grab the reference from send with us but the HTML file was just manually written with all inline CSS. I have to re-write them in the Inky 2 format.

The additional positive feature of inky2 is shortening your code much more. I like this feature a lot. Normally when I write the EDM manually without any supported library or tools, it is always over 200 lines and so hard to read them. It also affected to de-bugging when the e-mail template is not laid precisely. Look at the screen shot below. The total code lines that I wrote is just 77. Much shorter than before.

Screen Shot 2016-08-05 at 2.34.57 PM.png

This is the result of the default size.

Screen Shot 2016-08-05 at 2.32.22 PM

and this is mobile view. My code seems okay both on the localhost.

Screen Shot 2016-08-05 at 2.32.43 PM

I grabbed the minified code into litmus checklist section. Since I am a free user, I can only test Gmail, Outlook 2013, and Iphone6. As long as it is not breaking in Outlook 2013.I think It is good to go.

Screen Shot 2016-08-05 at 2.43.17 PM

Oh wow. The minified code works. Through the thumbnail, the grid looks good.

Screen Shot 2016-08-05 at 2.45.33 PM.png

First, Outlook 2013

Screen Shot 2016-08-05 at 2.47.42 PM

Second, G-mail

Screen Shot 2016-08-05 at 2.48.00 PM

Last, Iphone6

Screen Shot 2016-08-05 at 2.48.17 PM

Seems like there is no breaks on the grid. I wonder why only the background value is not injected as inline CSS…Well, I guess that is the debugging part that I need to do next.

 

PS. I am continuously updating my e-mail template pattern into INKY2. Come and see my bitbucket repository.

https://bitbucket.org/ChloeGyuriKim/edm-development