Forem: leanminmachine

git reflog saved my ass.

leanminmachine — Tue, 21 May 2019 18:56:42 +0000

I’m a git noob.

I was panicking as usual because I accidentally committed my changes on to the master branch. We’re supposed to just git checkout and create a new branch, opening a pull request before merging to master.

So i was furiously googling, and this came up:

git reset —soft

git checkout - How to revert a Git repository to a previous commit - Stack Overflow
git reset --soft <commit>

Revert back while keeping the changes.
Does not change the working tree.
Goes back to commit status such as unstage files.

I tried using git reset --soft HEAD^ . I’m still not sure what’s the difference between HEAD^ and HEAD. Apparently:

Use ~ most of the time — to go back a number of generations, usually what you want
Use ^ on merge commits — because they have two or more (immediate) parents

Source: What’s the difference between HEAD^ and HEAD~ in Git? - Stack Overflow

So it worked, my changes got unstaged. But when i switched to a new branch, it seemed to have disappeared?? So i was panicking because usually i use git status and git log to check for modified files, staged / unstaged etc. I was so scared that all my code went missing.

git reflog

Thankfully, after googling, i found this command: git reflog — Recovering a git reset —soft - Stack Overflow — which logs out commits that are not in my working tree anymore. Lo and behold, my commits are still there. Phew, all i have to do is to just reset back to that commit and make sure to push it up now.

Kinda weird why git log doesn’t show the commits.

Second-ever hackathon experience

leanminmachine — Sat, 16 Mar 2019 01:44:02 +0000

Took part in a hackathon!

Over the last weekend, I took part in a hackathon called HackRU at Rugters University, over at New Jersey.

At the beginning, I was really not looking forward to it. I had a really bad week emotionally (some minor fuck ups at work, being careless etc), and wanted nothing more than to just curl up in a ball and sleep off the weekend. Even though I learnt a lot through work like get used to ES6 syntax which i've known for quite a while but wasn't actively using in my projects (it has been around 2 months since i moved here to do an internship ... shall elaborate more in a separate post), i felt like i had a long way to go as a front end dev and felt slightly burnt out at this juncture. =(

Plus, the commute was pretty long (1 hour subway ride to Penn station, and 1 hour train ride to the venue). But I am so glad my friends encouraged me to go for it anyway (since we had already RSVP-ed a few weeks back and I was on the confirmed list of attendees).

Unfortunately (or expectedly) I ended up being the only one coding, cos I knowingly went to the hackathon with my friends who didn’t know how to code and wanted to just experience it.

I was pondering if i should stick to something familiar like build a mobile app, use Google Maps API etc, or try to learn something different. Thanks to my friends, I ended up building a Telegram bot with node.js, using a wrapper for API calls that i found on GitHub called botgram. A few hours in and I was regretting my decision because the wrapper uses a pretty old version of the Telegram API. The syntax was pretty easy to use though.

I also used request and ofc dotenv.

.env

I was pretty curious about .env as I was wondering how in the world do i use my env variables without directly passing in from the command line.

I was reading tutorials furiously at that point and they were telling me to pass in my bot token through the command line, which isn’t wrong per se.. but I needed something that would be able to do so by itself because I wanted to deploy on to a server online and just run a command like node index.js.

Tbh it was the first time I was more conscious of .env or environment file outside of work context. I also found out it was quite easy to setup the .env file by just :
TELEGRAM_BOT_TOKEN=TOKENHERE. Then I need to use dotenv.config()
and then destructure them to use it as such: const { TELEGRAM_BOT_TOKEN } = process.env;

Also, I had to remember to add it into my gitignore file. Which I conveniently forgot to do so for stuff like node_modules etc too :(

This is a way more informative read about this topic: Node.js Everywhere with Environment Variables! – Node.js Collection – Medium

Deploying live to Google Cloud

I wanted to try other services such as Now, since this tutorial recommends me to do so: Part 2 How to deploy a Telegram Bot using Now (Building a Bookmark Manager Bot series). However I think some changes in their services meant that I had to be constantly making requests You tried to create a Now 1.0 deployment. Please use Now 2.0 instead · Issue #1843 · zeit/now-cli · GitHub and there was no way to use Now 1.0 which was what the tutorials recommended. It was super frustrating because within a span of a few months, the recommendation became 'obsolete'... and i spent hours trying to figure out if there's a workaround but nope.

After trying several other services, I tried out Google Cloud. And it worked like a charm (well, iirc it ‘stops’ after 5 minutes of inactivity.. but at least that’s better off).

I just followed the instructions to setup via the Documentation for Google Cloud SDK:
Google Cloud SDK documentation | Cloud SDK | Google Cloud

Download SDK
Place unzipped SDK contents in your root directory for the app you want to deploy
run command in correct directory: ./google-cloud-sdk/install.sh

After installing the SDK, install the Command Line Tool on your machine.

Quickstart: Using the gcloud Command-Line Tool | Cloud Functions Documentation | Google Cloud

Just follow steps on this website.

Also ensure before deploying app, you need to set up a app.yaml file where you state your runtime env: Example for nodejs

runtime: nodejs10

Conclude

Unfortunately, this project didn't win any prizes haha. But I really learnt quite a bunch of stuff during the hackathon, and it brought back fond memories of me coding overnight for school projects. I'm glad to have tried out something new, and I was quite amazed by how much i learnt in just a day. I felt motivated/recharged to go back to work to continue coding and learn more things!

*To improve on my project… *

use async await (unfortunately i couldn’t get the hang of it during the hackathon itself).
Implement Dialogflow for sentiment analysis
Just use Telegram API direct!

Need help understanding: Filtering an array of objects in Javascript

leanminmachine — Thu, 04 Oct 2018 02:54:17 +0000

I am still trying to wrap my head around filtering an array of objects in Javascript; spent a couple of hours figuring this out.

I have this array of objects being returned to me from my backend. Inside each object, there is a key that has an array of objects as its value. AND inside this array, there's another array of objects, with another array... Yeah it gets pretty confusing.

So something like this:

{
menuEntities: Array(1)
0:
categoryEntities: Array(2)

0:
categoryId: 1
categoryName: "Main"
menuItemEntities: Array(1)
0: {customisableItemEntities: Array(0), description: "Full of delicious beef", enabled: true, foodItemEntities: Array(0), imagePath: "", menuItemName: "Burger"}
length: 1
__proto__: Array(0)
__proto__: Object


1: {categoryId: 2, categoryName: "Drinks", menuItemEntities: Array(1)}
length: 2
__proto__: Array(0)
isSelected: true
menuId: 1
menuName: "Menu 1"
__proto__: Object
length: 1
__proto__: Array(0)
}

What I wanted to do was build a filter function to return true if my input text includes a particular menuItemName. For example, type in burger into my input field and all the restaurants that contain burger would show up in my search results.

I came across this post on Stack Overflow that suggests to use some

After a bit of tinkering, I got this:

      this.sortedRestaurants = this.sortedRestaurants.filter(function(
        restaurant
      ) {
        if (_.isEmpty(restaurant.menuEntities) == false) {
          return restaurant.menuEntities[0].categoryEntities.some(category =>
            category.menuItemEntities.some(menuItemEntity =>
              menuItemEntity.menuItemName
                .toLowerCase()
                .includes(val.toLowerCase())
            )
          );
        }
      });

And that works for the current use case!

But I don't understand why when I tried forEach initially, this didn't work:

this.sortedRestaurants = this.sortedRestaurants.filter(function(
        restaurant
      ) {
        if (_.isEmpty(restaurant.menuEntities) == false) {
          return restaurant.menuEntities[0].categoryEntities.forEach(e => {
            e.menuItemEntities.forEach(menuItemEntity => {
              menuItemEntity.menuItemName
                .toLowerCase()
                .includes(val.toLowerCase());
            });
          });


        }
      });

To me, wouldn't includes still return a true or false value for the case of the forEach function..?

How would you guys write this function better too?

Looking for an internship at NYC for a year!

leanminmachine — Tue, 02 Oct 2018 01:12:18 +0000

I AM SO STOKED YALL. I got accepted into my school's programme which lets me work at NYC for A YEAR. I am going to be situated there from the first week of Jan 2019 to Dec 2019.

Am so stoked because even though I originally wanted to go to SV instead, NYC is great too!!! I'm gonna have my fill of streetwear there :P

If anyone has internship positions open for front-end dev in 2019, HMU! I am still in the midst of rewriting my online resume site (because it's sort of a requirement to follow a template given to us by the programme manager, things like writing out modules I took in school which may be relevant to my internship, and writing a narrative of what i can contribute to startups etc). But I do have a pdf resume & github.io link to my existing portfolio ready.

Meanwhile, I have been super busy coding for projects in school, using Angular & Ionic. Been learning a couple of new stuff about the intricacies of javascript and angular 2+ itself that I'd post up soon :D

Went for my first hackathon!! :D

leanminmachine — Sun, 29 Jul 2018 10:49:17 +0000

GUYS!! I'm feeling so happy right now, I just spent 1.5 days putting something together. It's nothing too impressive (basically just a react-native application where user fills in some information, then the information is compared to other users' informations, and returns appropriate matches based on a scoring formula). I'm kinda rusty on React atm when the last time I've touched it was 1 year ago and tons of things have changed since then!

STILL. I'm really so happy because I haven't been coding a lot (have been busy with user interviews!). This was one of the few days that I really could spend 12h a day coding (miss those days man), and made me realise that wholeheartedly investing my time on a side project can allow me to learn so much in a short span of time. Although without a hackathon i feel less motivated to do so :(

Anyway, here's the basic stuff I've learnt/refreshed from my memory, from building my tiny little application.

this.setState is executed asynchronous, need to use a update arrow function in order to actually setState properly https://reactjs.org/docs/faq-state.html

    handleSubmit = () => {
        const value = this._form.getValue(); // use that ref to get the form value

        this.setState((prevState) => {
            return {mentor: value}
        });

        console.log('state', this.state);

      }

Setting params on one screen and passing to next screen: javascript - React Native: How to pass props navigating from one screen to another - Stack Overflow

From previous screen:

this.props.navigation.navigate('Results', {mentor: this.state.mentor});

Store the object within local state of the screen first.

From next screen:
In render method:
this.props.navigation.state.params

Import JSON from a local file

import menteesData from '../data/mentee_data.json';

I didn't know it was that easy lol.

for functional methods javascript - How to skip over an element in .map()? - Stack Overflow remember to return element within the callback, and outside the callback as well for the array result from the functional method

    filterByTiming = (mentor, mentees) => {
        let matches = mentees.filter(mentee => {
            console.log('*** mapped mentor ***', mentor);
            console.log('*** mapped mentee timing ***', mentee.timing);

            if (mentor.timing == mentee.timing) {
                console.log('matches currently: ', matches);
                return mentee;
            } else {
                return false; //skip
            }

        }).map(mentee => {return mentee; });

        console.log('matches : ', matches);
        return matches;
    }

Checking if a key exists in a Javascript object arrays - Checking if a key exists in a JavaScript object? - Stack Overflow

You should instead use the in operator:

"key" in obj // true, regardless of the actual value

Sort an array of objects by property using the sort function Sort an Array of Objects by Property Using sort(fn)

Sort comparator function!

    // returns a sorted list, from highest score to lowest score
    sortByScore = (arr) => {
    arr.sort(function(obj1, obj2) {
        return obj2.score - obj1.score;
    });
    return arr;
    }

Interestingly, other than using slice (which reads array) and splice (which mutates array), i can also use .length to truncate an array?! jquery - How to easily truncate an array with JavaScript? - Stack Overflow
When to use this keyword vs no this? When I load some params from the previous screen, and store it in a variable inside the render method, then I don’t need to use the this keyword? Using this gives me an error. Hmm this i need to read up more about!
Useful tutorials: https://medium.com/react-native-development/easily-build-forms-in-react-native-9006fcd2a73b for forms!

Wordpress: ACF Repeater & Flexible Content fields

leanminmachine — Wed, 18 Jul 2018 14:58:42 +0000

So basically, one of my clients wanted me to do something like having a content field (repeater: ACF | Repeater) where he can add any amount of rows and have it show up on the front-end.

Just an example of what I was supposed to do… basically my client wants to have multiple sections and I wouldn’t know how many sections he would want, its a variable number

All the while, I’ve been shamefully using pre-fixed names because what I had intended for my clients to do was just edit the content within the pre-defined fields itself. And because I was lazy. :(

After a few hours of researching about this, it seems like I’ve managed to solve my issue..?

Firstly, I used the handy-dandy Google, and I got this as one of the search results: List All Sub Fields in a Repeater or Flex Field - ACF Support. I’ve learnt that oh, a Repeater field actually consists of an array. So it means I can iterate through to display the subfields that I want!

The problem is, how do I exactly go about doing this? Using php’s var_dump($array) to ‘inspect’ the array seemed to return me this (for the repeater array):

array(1) { [0]=> array(2) { ["performance_parameters"]=> string(35) "
Performance parameters here

" ["application_area"]=> string(29) "
Application area here

" } }

Somehow, the array structure doesn’t seem to be like the one that was shown on the ACF support page :( Trying to further access the array led me to this (using $array[0]):

array(2) { ["performance_parameters"]=> string(35) "
Performance parameters here

" ["application_area"]=> string(29) "
Application area here

" }

And if I use $array[0][0], I get back NULL.

To be honest, I am still not completely sure why. I’ve tried reading up on index vs associative arrays. But if my field / key names are not pre-fixed, how would I retrieve the values?

More googling turned up these few search results: How to echo an array in PHP? - Stack Overflow & the more precise one for my use case, wordpress - how to list a repeater sub fields with label and value in Advanced Custom Field? - Stack Overflow. In the end, the main idea was to use a foreach to iterate and extract the values, in the following structure:

foreach($array as $key=>$value) {
    // do stuff
}

So this settled the first problem of getting values from a repeater field.

                    <?php

                    $fields = get_field(‘flexible_content’);


//                    $keys = array_keys($repeater);

//                    $repeater2 = array_values($repeater); // does not work, nests another layer of array


                    if($fields){

                    foreach($fields as $field_type => $field){

                            foreach($field as $row) {
                                echo($row);
                            }

                        }
                    }
                    ?>

Next, was the problem of the flexible content field. Strangely, the first field of the flexible content would be its name. I didn’t want to display its name (for now), so I was wondering how to get rid of the first element… As usual I var_dump and look inside what I’m facing:

array(1) { [0]=> array(3) { ["acf_fc_layout"]=> string(8) "row_name" ["test_1"]=> string(14) "
Test 1

" ["test_2"]=> string(428) "
Test 2

I came across this: How to get the first item from an associative PHP array? - Stack Overflow which says to use reset() to retrieve the first element of the array. So I accessed the object itself, and then used reset() as such:

                    <?php

                    $flexibleContent = get_field('flexible_content_2');


                    if($flexibleContent){


                        // A bit of a hack to not display the first field, which is field name
                        $firstValue = reset($flexibleContent[0]);


                        foreach($flexibleContent as $field_type => $field){


                            foreach($field as $row) {

                                if($row === $firstValue) {
                                    // do nothing

                                } else echo $row;
                            }
                        }
                    }
                    ?>

I’m still a bit hazy on how these php arrays actually work, so if anyone can shed some light on this, it’d be great! But I’m pretty happy I learnt some useful stuff like var_dump(), reset(), and iterating through the arrays in general :)

Test Driven Development 101 and JS testing

leanminmachine — Sat, 14 Jul 2018 11:04:18 +0000

Test Driven Development Cycle

TDD Cycle:

Write a test case which will obviously fail in the beginning. Do not have more than one failing test case at a time. Implement the simplest algorithm first, then generalise it when you identify some patterns.
Write code that makes test case pass
Refactor code on code base. Do not refactor when your tests are failing. Make test cases pass first.

I’m honestly still trying to get the hang of testing and I am still trying to familiarise myself with js in general.

Writing tests in Jest

Setting up is pretty straightforward.
Just npm install jest.
Remember to change in package.json,

  "scripts": {
    "test": "jest"
  },

Name test file [file name].test.js
First, we write our test.
The test would require the main module.
We can assign it to a variable name.
For example:

const arabicToRomanNumbers = require(“./arabicToRomanNumbers”);

Following that, we can start writing our test.

The first test would be something like,

test(“I is 1”, () => {
expect(arabicToRomanNumbers(“I”)).toBe(1);
});

Name file name [file name].js
Main js file: Just write the function.

function arabicNumber(string) {
if (string == “1”) {
return 1;
}

export.modules = arabicNumber;

BTW: export class MyClass doesn’t work for nodejs. I have to use the module.exports keyword :( Or use babel npm package to transpire ES6 into commons target.

You can write all your function declarations first and then export them in an object:

function bar() {
   //bar
}

function foo() {
   //foo
}

module.exports = {
    foo: foo,
    bar: bar
};

There's no magical one-liner though, you need to explicitly export the functions you want to be public.

var exported = {
   someFunction: function() { },
   anotherFunction: function() { },
}

module.exports = exported;

Writing tests in mocha:

Somehow, I have to name my test file test.js. Not sure why yet.

Need to also declare assert.
const assert = require('assert');

Otherwise, the structure is pretty similar.
Write a function, and then use the function during the test itself.

describe('romanise', () => {
    it('should be less than 4000', function () {
        const result = romanise(4000);
        assert.equal(result, 'invalid input');
    });

// write more it and asserts here.

});