Lego, Fistfight, GraphQL, & Observable – React in Silicon Valley

Real World React had its first Silicon Valley meetup. As a React newbie who enjoys the Silicon Valley cities, naturally I attended!

Held at Atlassian, this is the Meetup “GraphQL with REST APIs | RxJS & Redux-Observable“.

Real World React at Atlassian

We started off with the Lightning Talks, and the first one up is Joshua Nelson from Atlassian. His original topic line is “Component libraries and React as a platform”. The final version of his topic? “Why Lego is Great”!

I concur! Lego is Great!!!
More Legos!

Lego have a rich history and culture, which Joshua started his talk with and eventually turned it around to Atlassan’s component library, discussing its 3 key advantages: Clean API, Reusable, and Platform.

Then Michael Leung and David Katz talked about their Reactathon project. Utilizing the OpenTable API, their project BrokenTable determines which bar is most likely to have bar fight.

Yep, bar fights.

All while the developers are students too young to even step into a bar.

Those orange dots are fist!
That black thing is actually a broken table. A non-broken table means no fights

Needless to say, the idea was hilarious, and the duo succeeded in giving a presentation that was both funny and educational. I particularly enjoyed their presentation of how their code works and how they implemented React Native and Redux in the fast-paced environment of a hackathon.

After a brief break, Feature Talks started, with the first one being on of my main goal for attending this Meetup: “Going GraphQL First on Web and Mobile” by Jon Wong from Coursera. I am considering GraphQL for the next on my to-learn list, so this is perfect timing!

Jon discussed about the task to implement GraphQL in an existing project – a task he found similar to what Justin Bachorik mentioned in the Reactathon talk regarding NPR’s transition from legacy code to React. Both are accomplished through the process known as incremental adoption.

Speaking of, I have been studying Redux, and I don’t envy the future me that will eventually adopt Redux for my React project. Incremental adoption indeed.

Jon touched on how Joshua talked  API contract earlier in the Lightening Talk and stated that GraphQL inverts API contract back to client, who is the the one to actually build product. Such schema-first approach helps create better contract.

For someone planning to learn GraphQl, his description is helpful in giving me an idea of what and why I should learn it. His diagrams also did a great job in graphically representing how GraphQL works with React’s Component-focused system.

GraphQL & Server.
GraphQL and React working together in Coursera. The visuals and the way he presents really showed why they interact well with each other!

The last but not least (oh, definitely not least) is Berkeley Martinez, CTO at freeCodeCamp. Perhapes a reflection of his work, he is quite excellent in teaching – seriously, I have zero clue of what Observables when I started. Yet, I wasn’t lost with the amount of codes he displayed, and I came out with a pretty good understanding. He was very good at being precise yet informative and to the point.

I love the definition here.
Once again, concise but to the point.

I must say, this Meetup was one of my most satisfying I had. Meetup that shows lots of codes and teaching materials can be dull if it is not a tutorial everyone can follow. Not a lot can be fun, inspirational, and technically informative. This definitely hits all the spots. I can’t wait to attend another one!

Estimating, Mobile, and Websocket on Django

Recently, I went to my first Django Meetup and it was totally worth the trip, even the part where I accidentally took a wrong turn and ended up in Treasure Island instead.

…..

What? The highway entrance to the bridge is literally next to the building! It actually wraps around it, which I thought was pretty cool, but anyway – tip to those going to Four Point: Don’t go up the ramp!

I like the inside too. The Meetup area where the group ate pizza is beneath an interior overlook. Some of the employees had paper decoration hanged up, and they range from pizza to Powerpuff Girls (They really like their pizza, don’t they?). There were rows of wooden benches to the right for the presentation, but for the first half hour, everyone is just enjoying the food.

Having finally started to learn Django and on my first web developer job hunt, it was pretty fun to hear from working Python developer at the table talk about how a Python project typically progress. For example, I got to hear about the typical requests from ecommerce clients and how there are features that most ecommerce clients eventually decides to get even if the clients didn’t thought of it at first. There were discussion of language version craziness (one had a client that use all version of Django starting from… 1.4 I think? Django is 1.10 right now, by the way). Of course, framework differences were also brought up, though being a Django meetup, everyone had found Django to be fairly likeable.

I wouldn’t go into detail about the presentations, since all notes and videos are available to the Meetup event site, Django + Ionic & REST Websockets API with Django Channels , but here are some thoughts:

The first talk was about a Python Estimator. With the name, at first I thought it have to do with finance or concurrency. Turned out it was more about improving the way data scientist shares data with back-end engineers.

The second talk have more to do with the presenter’s journey through building a well-functioning web app via Python and Ionic that tracks food truck – on his spare time. Talk about discipline!

Sam’s talk was about RESTful Socket. I had not read too much about the event profile until the day of the Meetup, so I was surprised to realize that Sam was an engineer at HouseCanary, the company that hosted the hackathon I participated. He was also one of the guys at the table I was sitting in. Realizing that makes me look even more forward to the presentation, since he sounded very knowledgeable at the table.

It is definitely the most technical talk of the day, leaving me much more educated and slightly awestruck about how much more there is to REST and websocket. I had used a bit of REST APIs before, but while I have read some definitely of both of REST and websocket, the definition in relation to their application plus their differences have never really sunk in until this talk. Though I have yet to learn channel, signal, and websocket, the talks today left me eager to learn more.

SFHTML5 Meetup: Emoji Art & Web API

My second SFHTML5 Meetup, “Emojis, Art & Web APIs with Monica Dinculescu and Zeno Rocha”, was full of fun surprises.

For one, I have never used emoji outside of Facebook, but Monica Dinculescu certainly know how to make it fun and showcase emoji’s ability to become a medium of art.

Raining Emoji
It’s raining emoji here!

When I first signed up for the Meetup event, I thought it was going to be about how she creates emoji art, but it was actually the other way around – it was about how to use emoji to create art! Emoji brush is now a new term in my vocabulary! One of my favorite slide was when she pixellated an image of baby dragon with emoji as the pixels.

Emojillated baby dragon
The emojillated baby dragon, whom Monica termed the Polymer mascot.
Emojilated Lemon
More emojillations – this time with some lemons!

The first panelist was hilarious and inspirational, while the second panelist, Zeno Rocha, was informative with a dash of fun in his talk “Web APIs you [probably] didn’t know existed…”. Epic moment involved a cute ghost image that was smiling ever so sweetly, only to murmur “I will kill you~~~” whenever the light dimmed. There was also a rotating Donald Trump involved somewhere in the talk.

Here a list of Web API he talked about:

  • Page Visibility
  • Online state
  • Network info
  • Vibration
  • Device orientation
  • Clipboard
  • Ambient Light
  • Generic Sensor API
  • Battery status
  • Web Assembly

But just writing about the presentation don’t do the panelist justice. Lucky for everyone, SFHTML5 records video for all their presentation. Here is the list for this event:

Monica’s talk: https://www.youtube.com/watch?v=e6lrUZWUxos

Zeno Rocha’s talk: https://www.youtube.com/watch?v=NCGLPp778JY (Note: Go to 19:07. Go to 19:07!!!)

Q&A with both panelists: https://www.youtube.com/watch?v=RYWH_iarCNM

Elm Workshop: Day Two

Day Two!

  • Richard start off with some Q&A, and we got some site recommendation when someone asked about learning tools. Although it was only a day (albeit an 8 hour day…), I got enough info that I can imagine applying it to one of my idea for a side project, but I definitely need some information to actually implement it.  I particularly like the article Building a Live-Validated Signup Form in Elm by noredink. Richard is also in the process of writing a book, Elm in Action, to be publishing by Manning. He also mentioned Egghead.io as a possibility, though he haven’t tried it himself. If I remember correctly, it is a paid subscription service, so I will probably try the noredink articles first.
  • Triple Quotes (“””): multiline string
  • Decoder Integer: Decoder check a JSON string and returns a “Result”, which should hold “Ok” if the decoding process is run smoothly (it can be decoded into a integer), “Err” if not.
  • decodeString is a shorthead for Json.Decode.decodeString after importing with the command import Json.decode exposing (..). Much better when you are doing a bunch of decodeString.
  • Int is a decoder. List is a function that takes in a decoder such as an Int, and returns another decoder.
  • Shelf (at [“name”] string) <— Find value at list key name, which should return a string to function named Shelf. The list key is in square bracket because it can hold nested keys.
  • Decoder
    • decode User
    • |> require “id” int <— Need to be id holding int
    • |> option “name” string “(falllback)” <— optional. If key not there, use the value in fallback.
    • |> hardcoded 1.0
  • Side Effect: unlike JS, Elm don’t have side effects.
    • Instead, it have Manage Effect.
  • GetString: takes in String, returns Task Error String <—The Error holds a Network HTTP error. UnexpectedPayLoad gets return if JSON decode fails. Task is like a to-do list – list by don’t do. Notes that this doesn’t invoke network traffic – GetString is a Task.
  • andThen and sequence: takes a Task and chain to others, building a full Task.
    • Some task cannot be chain together. Ex: random number generator.
  • Command messages (type Cmd) do not have error handling, unlike Tasks (type Task). Tasks is very general.
    • HandleSearchResponse(List SearchResult) and HandleSearchError Http.Error are both functions that returns Cmd.
  • Let … in expression: intermittent value (like variable) are defined with tasks (like value). No outside scoop outside see the value, until the code reach in, where the in scoop can call anything in the let scoop.
  • Maybe: in Elm, there is no undefined or null, it have a Maybe type container, and the type returns a “Nothing | Just a”. (Indecisive little guy, isn’t it?)
    • Attendee asked “Why Maybe exist?”. Answer was that it was to prevent error.
    • Just precedes a value to apply a wrapper.
  • Access JavaScript by sending to its port
  • Subscription is synchronize.
  • Elm packages
    • dependencies: used github repo.
    • elm is very strict on having the latest version. Reject if its old
    • testing project: project-fuzzball ????
  • Expect.equal compares 2 values for equals.
  • Left pipe ( <| ): calls a function. Eliminates parentheses. foo (bar baz) in JS is foo <| boo baz in Elm.
  • Unit ( () ): seriously is just a parentheses. Indicates that there is nothing happening. Tells function that it pass to that nothing is being done. Delays evaluations of test.
  • Fuzz Testing: do a test multiple times with randomly generated input.
  • Shrinking: when encounter error, the program tries to find something small and minimal to present to coder for debugger. Thank you Elm!
  • Set: a set of unique values. Get rids of duplicates.
    • Set.member will find out if the arg exist in the list
    • Set.insert – obviously, insert value.
  • Dict: dictionary of keys and values (Richard jokes “Careful how you pronunciation that.” Indeed, indeed…)
    • Key type and value type must be consistent throughout the dict.
    • .get returns Maybe types, meaning a Nothing or Just.
    • Maybe.withDefault { —Fallback Json } (Dict.get “key” DictName) <—This give a fallback value when the key is not found in the Dict list named DictName.
  • result -> result.id can be shortened to {id} ->
  • { model | results = resultsById } ! [] is equal to { model | results = resultsById } ! command.none
  • Compose ( >> ): sibling to pipe (|>). Do one action to another item. The arrow can go either way.
  • React all about component. Elm uses component only when needed because it keeps simplicity, but takes more effort when encapsulation is needed.
  • Further Studies: Look up tail-recursion for fast performance optimization. Html.Lazy is another one good for performance optimization.

Elm Workshop: Day One

Braving the Pride Weekend commuter traffic, I just attended day one of Elm Workshop, presented by Richard Feldman from NoRedInk, hosted by Women Who Code, and located at Pivotal Lab (yep, a lot of people went into this). Learning a functional programming language for the first time is a truly fascinating experience, especially if one does in 8 hours straight! Most of what I learned are from the in-workshop exercise, but here are some notes for day one. Note that this is from a very compacted 8 hours course, so I can only hope I didn’t misunderstand something:

  • Compared Babel to Elm: both translates languages
  • if-else is a statement in JavaScript, but expression in Elm. The last line in a function is a return value.
  • Uses then instead of {}.
  • Arguments are separated by space.
  • Only have double equal (==). No triple equal (===). Slash equal (/=) instead of bang equal (!=).
  • When calling functions, space are used instead of parentheses. Parentheses are used for grouping, not indicating function call.
    • instead of text( pluralize (“self”, “shelves”, 5)), do text (pluralize “self” “shelves” 5)
    • in the above sample, parentheses are used to ensure the result of function pluralize is passed as argument for function text, not all 4 item (function pluralize, string “self” and “shelves”, and integer 5).
  • Elm is not good with tab – change to space.
  • String are always double quotes.
  • Pro: good in debugging. When compile, error message occurs and points developer to where the problem is.
  • Single plus (+) in Elm is resolve for arithmetic. For concatenation, double plus (++) is used.
  • For HTML output, square brackets are used for each tag, in general. Text are precedent by text. Comma help separates. For HTML output, the functions – named as HTML tags such as div – takes 2 argument: list of attributes and list of children.
    • Comma is placed at the beginning of a statement instead of end. That’s a convention in Elm to make sure commas are not forgotten.
  • List: all elements in list for Elm must be the same type of value, unlike JS.
  • Type Indication: To declare the value of a variable, add : Type Type-of-type, such as apple: List String or shelves: Html a
    • Empty list type is undefined. Calling it in various name will work. If the first type is undefined, a can be places.
    • Type indication can also indicate the return type with an arrow, such as pluralHtml : number -> Html a (Format: function: type-it-takes -> type it returns).
  • Partial Application: When a function only give partial information regarding the argument for another function.
  • List.map(: grabs the list, runs though the list and apply something.
  • Anonymous function are defined by slash ():
    • List.map(function(shelf) { return viewShelf(shelf); })
    • (List.map (shelf -> viewShelf shelf) shelves)
    • Ext-function(anoy-function-arg -> return-function/value), Ext-function-arg2
    • But we can also pass the function directly in cases where it is just a function being passed to another function.
    • List.map viewShelf shelves
  • Interactive:
    • onClick{} instead of Eventhandler
    • Msg instead of Callback
  • True/False is capitalized in Elm because it is a uni-type in Elm, unlike JavaScript which is all lowercase.
  • Record and UniType
    • Records data are called use using dot (.): model.data
    • UniType are called using case:
      • case arg of
        • uni-type-class1 uni-typevalue1-> { function or changes }
        • un-itype-class1 uni-typevalue1 -> { function or changes }
  • Debug.log: wrap it around what you want to log. Acts like console.log.
  • For imports, exposing(..) means bring everything in.
  • Pipeline Encoding: [ “list”, “items ] |> variableType.function1 /> variableType.function2  <= runs multiple function with a set of argument. ( Example: [“apple”, “orange”] /> List.reverse /> List.map String.toUpper means List.map String.toUpper(List.reverse [“apple”, “orange”]). )
  • Type Alias can take in arguments and return a record if the type alias has the variable defined by type only (the variable is not assigned values or expression)

WPSFO: Nginx

Yesterday was my third time attending the SF WordPress Meetup. The main presenter was Floyd Smith, who co-authored the book WordPress in Depth with Michael McCallister. With him is pre-sales engineer Kunai Pariani, product marketer Faisal Memon, and digital marketing manager Patrick Nommensen.

There is a lot of Nginx people in the room that day.

Several terms were repeated several time during the talk, including how Nginx works with WordPress, microservice, performance, and redirection. Floyd mentioned that htaccess is the greatest and worst thing ever invented, which was hilariously true in so many ways. Nginx is suppose to help with that, plus ops, which all sounded pretty neat. Prior to the talk, the only thing I know about Nginx is that it is some sort of server, and that Docker supports its deployment (They use it as an example practice in its tutorial, if I recall it correctly).

Ok, let’s hear about Nginx.

There are apparently 2 level of Nginx – open source and Plus. Most of the services are in the open source, though. The original developer started it for his website. He set out to solve a specific problem, and he wanted others to use his solution, so he made it open source. That practice have remained consistent to this day. The solution did took a while for the community to catch on, since he was from Russia and everything was typed in Russian! It had since greatly expanded, and now part of their office is just 2 blocks away from us at the Automattic HQ!

So what’s Nginx about and what problem does it solved?

It was designed originally to solve the mathematical problem C10K – how to handle large amount of web traffic all at one time. It is a web server that also have various other uses, including serving as reverse proxy server that handle communication between clients and web servers. Architected for high demand, over 48% of the top 10,000 most visited websites uses it. Even WordPress itself is powered by Nginx.

So, umm, what does does it do other than being a web server?

Performance was mentioned several time throughout the talk. Nginx’s features often relates to that. Floyd talked quite a bit about load balancing and caching. One action that Nginx does, for load balancing, is that it performs health check and distribute traffic to the least busy server. There are two type of caching. The first is static file caching where static files is saved into a separate server and display when needed. The second type is dynamic caching, which create a cache after a user access the site, and that cache are what other users sees for a certain amount of time. With the later, though less loading are used, the method is not suitable for sites where each seconds matter. One of the example Floyd provided is stock market.

Another matter that he discussed is security and access control. Nginx can also act as reverse proxy server. The reverse proxy server can then become the main location for configuration changes and security implementation instead of the app server, adding an additional layer of security. In particular, Nginx also heavily encourages SSL, providing multiple SSL features, including implementation of SSL between microservices.

For a stack system that uses Nginx, Floyd calls it the LEMP Solution. (For eNginx, since LNMP is not pronounceable).

A system that uses Nginx has four benefits:

  1. Use of permalink instead of .htacess: easier to change path
  2. Ngnix can be configured for FastCGI: better caching.
  3. Security on Ngnix: allow the use of revise proxy server as a place for configuration changes.
  4. Nginx works great with WordPress Multisite in setting up proper file structure.

We talked about history, features, and stack system. But, how do Nginx fair in a multi-server environment?

Floyd asked the room if anyone have a Hardware ADC, the immediate response was “Heh?”.

One person did raised his hand, then promptly answered “Yea, as a paperweight!”

Predictably, the whole room laughs. Turns out ADC stands for App Delivery Controller. From the talk, it sounds like its some sort of device that allocates overflow of network traffic. A quick google reveals a wiki page that states ADC:

is a computer network device in a datacenter, often part of an application delivery network (ADN), that helps perform common tasks such as those done by web sites to remove load from the web servers themselves. Many also provide load balancing. ADCs are often placed in the DMZ, between the firewall or router and a web farm.

Tom’s IT Pro also have a detailed and more technical article on it: A Guide to Application Delivery Controller (ADC) Solutions.

Alas, the conclusion is that Hardware ADC is not exactly the most popular method. Most people prefer to use Software ADC so they can immediately get the service instead of waiting for a physical hardware to be mailed over.

This is where Nginx comes into play – it provides Software ADC services. For those who uses Microservices, that can be very useful.

I have been hearing a lot more about Microservices since I first learned about it during Devweek. It is definitely something that seems to be catching on, which makes sense. With the web expending, going microservices instead of monolith would give an large organization a much easier time of expending. According to Floyd, he believe that while WordPress and Automatic are not there yet, the two can make a blended approach of their existing monolith with microservice, especially since WordPress was designed to be opposite of a monolith approach to begin with. He then points to an Nginx article on microservices: Introduction to Microservices. He recommended WordPress users to read the last article there because we tend to be expert of modifying existing app, which is quite true in my case – my first job for WP is about working with existing site and plugins, after all. I’ve got Building Microservices by Sam Newman on Safari Online in my reading list (suppose to be pretty good), but for a quick read, this set of article seems good.

Q&A!

Things that caught my interest during Q&A:

  • For learning Nginx, in addition to Googling (the most useful skill for any self-learners!), Nginx’s mailing list are great. They also have official training for those whom prefer official things.
  • An attendee added that Apache and Ngnix are actually very similar, so learning it with an existing background in Apache would help.
  • WordPress approach tends to be more experimental, while Ngnix tends to be more strict. If there are users who wants to experiment it, containerized them may be a good idea.
  • Nginx does not intent to support htaccess – it is oriented to larger site.
  • Nginx is also not intended for real time, End-to-End Optimization. An attendee added – pretending to be whispering loudly – that if real time is needed, WordPress wouldn’t be used. Generally, people would use something like WebSocket.

Well, that concludes a quick basic info session on Nginx!

 

WPSFO: Pivotal Blog Case

Second time I attended a WordPress Meetup. I am overdue for a blog post! I was going to post my last WP MU, but my schoolwork pretty much murdered my brain cell for the the week after that MU, so…
Originally, another presenter, Hass, was suppose to be there to talk about SEO, but something came up so he can’t made it. Shannon Dunn, being the great host that he is, throw himself into the spotlight with his coworker Stacey Scheider and Bruno Carreço remotely joining in. Thus, the birth of the presentation, Pivotal Blog Case. The later presenter deserve an extra round of applause because he is actually in another country – with a timezone that resulted in him, oh, speaking with us at 4AM!
I am not sure I can be that coherent at 4AM.
In fact, I don’t even makes coherent notes during presentations that I attends, this one included. It was just a bunch of keywords and incomplete sentences… but here are my bullet notes after I clean up them into readable statements. It’s midnight, please forgive me on my verb tenses…:
  • Pivotal’s blog have a main editor that oversee the blogs created by its bloggers. After receiving the contents, the editor does the editing, graphics, and social media. However, some of the bloggers are able to do all of the process without much problem. So they can become “Channel Admin”, which means they do get to do all those processes. Pivotal actually customized their Dashboard so only certain users can publish, while the rest can type in the content but not publish. Very neat…
  • They uses a 2:1 ratio for their post, which is good for mobile view. At the same time, I was reading about responsive design in Drupal. Talk about coincidence.
  • The plugin they use is known as Edit Flow. Bruno does the customization of the plugin. He places the customization in another plugin as much as he can to reduce the problems that can occur during plugin updates. Though I have only recently started consulting other people on their WP site, that seems to be a common good practice.
  • Apparently, WordPress have much more frequent updates now. I did not realize that.
  • They created a plugin to set permission for custom taxonomy, designed to work their use of Channel Admin. Yesterday, I was sitting in my Linux listening to my professor talking about the still-somewhat-recent SELinux’s category of user, role, and type, and I thinking about how it  reminds me of a previous discussion with another developer about incorporating WordPress’s taxonomy and category in relation to user’s assigned member type. Now I am listening about WP taxonomy with permission. Defining user’s various identify then combining that with security management can be a handful as user base and types increases, but it seems to an important need as technology becomes more prevalent in the business world.
  • Shannon talked about why taxonomy was used instead of category. Apparently, first it was because they are already using category for something else, but secondly… well, someone just decided and it works! Simple and clear!
  • CDN created latency issues for the site that affects users in different location. Seeing how they have blogger from all parts of the world, that means problem level are different for everyone.
  • They require blogger to pick a photo from a pre-selected set of pictures. Great for when someone shares the blog on places like Twitter.
  • By the sounds of it, code rendering in post is obviously a pain point.
  • The square social media share buttons that I have been seeing turns out to came from Elegant Themes.
  • Vocabulary of the days:
    • CTA means Click-Through-Action.
    • CDN means Content Delivery Network.
    • Bandwidth throttling: According to Wiki, “…is the intentional slowing of Internet service by an Internet service provider. It is a reactive measure employed in communication networks to regulate network traffic and minimize bandwidth congestion.”