Design sprints are a great way to allow a team a shortcut to learning without building and launching an application. Critical business questions are also answered through design during design sprint. I recently concluded a design sprint with our lead engineer and the situation was quite a learning experience. I will share what happened during the sprint and then share my reflections.<\/p>\n\n
The company I work for is currently based in the US specifically in Kansas City. They are a small startup of about 10 people. We had our first kick off on Monday. During this session, we had various introductions from both me and the lead engineer. In addition to this, we added something interesting about ourselves. Keep in mind the lead engineer, Ryan, is also the sole developer on the team. We then had a deep dive into product offered by the company and the problem it was trying to solve. I had a couple of questions that I asked him that allowed me to be on the same page for what we are solving for. It was a lot to take in for day 1.<\/p>\n\n
On day 2, we had another session where we discussed what we were going to build and how it was related to what he had built before. I had a few solutions on how to approach the idea. But then Ryan threw a few bits and pieces of information which had my ideas irrelevant. This led me to have a brainstorm session of understanding the problem. Why this approach? The team did not consist of a designer and Ryan had no working solution of what the system should look like but he knew what it should solve for. This immediately led me to think of a design sprint. I informed him of the same and told him how to best approach the situation to solve for the problem. I gathered a few resources relating to having a design sprint. The best resource I felt was from this link (http:\/\/www.gv.com\/sprint\/<\/a>)<\/p>\n\n Day 3 came in and we had already discussed much of the problem. The most bit was to follow the timeline given in the link. This is where we discussed solutions of what we were going to solve for. We used stickies.io to portray ideas for the solutions we had. What was difficult about this day was that Ryan added a few more pieces of information that I had not considered yet. We had to go back to the drawing board and discuss what the problem was. The problem was that we had to cover a wide range of issues he had when developing the system. After this session, we agreed that we were on the same page with the array of issues to be considered before solving the problem. We also allowed ourselves to break off and sketch up our own solutions.<\/p>\n\n On day 4, we discussed the mockups we had but, Ryan did not have time to sketch the mockups with the tools we had so he drew them on paper. I went through the mockups I sketched and explained what I had in mind when I had drawn them up. He gave me feedback about the different sketches. This was also a hard day as Ryan quickly realized he had not communicated all the issues well. We discussed them again and we moved to a much clearer approach of how to solve the array of issues. There were ideas he wanted to address but he realized that an MVP was more important and we discussed some ideas we could add for later.<\/p>\n\n On day 5, I had re-sketched the mockups based on the previous day\u2019s discussion. This day\u2019s discussion was much more fruitful but some mockups were still lacking on some issues that were not fully addressed. I suggested that we can iterate on the mockups that were not fully addressed. In addition to this, I also suggested that since there are some that are ready, we can go ahead and add task stories for them to be built rather than waiting for all the mockups. He agreed to this and the idea to iterate on the mockups that were lacking on the concept.<\/p>\n\n Some Key takeaways<\/p>\n\n I am curious to know, how have you approached a remote design sprint? Did you have a designer do all the work or did you involve them?<\/p>\n\n","category":"design"},{"title":"No, I don't know what closures are...yet","pubDate":"Fri, 15 Dec 2017 12:02:32 +0000","link":"https:\/\/dev.to\/hawicaesar\/no-i-dont-know-what-closures-areyet-568","guid":"https:\/\/dev.to\/hawicaesar\/no-i-dont-know-what-closures-areyet-568","description":" I want share an interesting lesson I learned on closures. The journey to this lesson all started when I commented on a PR and the author of the PR said he added the extra An interesting code snippet that baffled me though was this which you might think prints out This actually prints out 6 five times on the console. Try it out. Weird ? Not really. I simply wanted to see the above output. I played around with it and still got 6 five times on the console. Why did not continue reading is because I thought I knew that what I read at first was enough to try out the loop example without reading further. I even added a 0 to have to timeout not have any delay. No luck! I continued reading Kyle Simpsons book and found out he had a solution to this. It turns out what I (and many developers may have done) was trying to <\/p>\n\n Kyle Simpson provided a solution by either using an IIFE or the ES6 sibling of using an IIFE using I approached a senior dev and he explained the same issue only that emphasized how dangerous Finally what closures are:<\/p>\n\n Those who like to hook onto a definition, I did a little digging and a post by Eric Elliot who explains it well here<\/a>.<\/p>\n\n Eric Elliot I got access to one of Kyle Simpson videos and he explains as follows<\/p>\n\n I hope they make sense and I encourage you to read up more on I recently came across an interesting hurdle when testing async action creators. I was testing whether a delete action creator is called when the thunk runs. The code below shows a thunk and an action creator respectively. I used nock at first to mock requests.\n
()<\/code> to a function this.handleToggle<\/code> as the function was a closure. This scratched my brain for a while. I mean, I knew what closures were or at least an idea of it. I decided to write it down in my note book as I would come back to it later. I then remembered a friend of mine recommended I start here<\/a> when looking into js. I quickly went to this github repo and looked for the chapter on closures. The text book definition I thought I would find was not there. However, Kyle Simpson used examples and explained \"to me like I am 5\" I grasped the concept.<\/p>\n\n
\n<\/p>\n\nfor<\/span> (<\/span>var<\/span> i<\/span>=<\/span>1<\/span>;<\/span> i<\/span><=<\/span>5<\/span>;<\/span> i<\/span>++<\/span>)<\/span> {<\/span>\n setTimeout<\/span>(()<\/span> =><\/span> {<\/span>\n console<\/span>.<\/span>log<\/span>(<\/span> i<\/span> );<\/span>\n },<\/span> 100<\/span> );<\/span>\n}<\/span>\n<\/code><\/pre>\n\n<\/div>\n\n\n\n
\n<\/p>\n\n1\n2\n3\n4\n5\n<\/span><\/code><\/pre>\n\n<\/div>\n\n\n\nimply that each iteration of the loop \"captures\" its own copy of i, at the time of the iteration. But, the way scope works, all 5 of those functions, though they are defined separately in each loop iteration, all are closed over the same shared global scope, which has, in fact, only one i in it.
\n<\/code><\/p>\n\nvar<\/code>, let<\/code>.<\/p>\n\n
\n<\/p>\n\nfor<\/span> (<\/span>var<\/span> i<\/span>=<\/span>1<\/span>;<\/span> i<\/span><=<\/span>5<\/span>;<\/span> i<\/span>++<\/span>)<\/span> {<\/span>\n (<\/span>function<\/span>(<\/span>j<\/span>){<\/span>\n setTimeout<\/span>(()<\/span> =><\/span> {<\/span>\n console<\/span>.<\/span>log<\/span>(<\/span> j<\/span> );<\/span>\n },<\/span> j<\/span> );<\/span>\n })(<\/span> i<\/span> );<\/span>\n}<\/span>\n<\/code><\/pre>\n\n<\/div>\n\n\n\nlet<\/code>
\n<\/p>\n\nfor<\/span> (<\/span>let<\/span> i<\/span>=<\/span>1<\/span>;<\/span> i<\/span><=<\/span>5<\/span>;<\/span> i<\/span>++<\/span>)<\/span> {<\/span>\n setTimeout<\/span>(()<\/span> =><\/span> {<\/span>\n console<\/span>.<\/span>log<\/span>(<\/span> i<\/span> );<\/span>\n },<\/span> 100<\/span> );<\/span>\n}<\/span>\n<\/code><\/pre>\n\n<\/div>\n\n\n\nvar<\/code> can be. var<\/code> was hoisting the value of i and therefore the the value of 6 is always printed. What I forgot ask is this. For the first code snippet, is the whole loop running such that var does get to 6 and then run all the setTimeouts<\/code> later and then display 6 as the value of i ?<\/p>\n\n
\n
\nA closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment). In other words, a closure gives you access to an outer function\u2019s scope from an inner function.
\n<\/code><\/p>\n\nA closure is when a function 'remembers' its lexical scope even when that function is executed well outside it the lexical scope.<\/code><\/p>\n\n
\n\"You Don't Know Js, Closures\"<\/a>
\nMaster the JavaScript Interview: What is a Closure?<\/a><\/p>\n\n","category":"javascript"},{"title":"Moxios or Nock To Mock","pubDate":"Mon, 11 Dec 2017 17:06:11 +0000","link":"https:\/\/dev.to\/hawicaesar\/moxios-or-nock-to-mock-che","guid":"https:\/\/dev.to\/hawicaesar\/moxios-or-nock-to-mock-che","description":"
\n<\/p>\n\n\/**\n * Delete user contribution thunk\n *\n * @param {string} contribution for the contribution to be deleted\n * @return {(dispatch) => Promise<TResult2|TResult1}\n *\/<\/span>\nexport<\/span> const<\/span> deleteUserContribution<\/span> =<\/span> (<\/span>contribution<\/span>)<\/span> =><\/span> {<\/span>\n return<\/span> ((<\/span>dispatch<\/span>)<\/span> =><\/span> {<\/span>\n return<\/span> http<\/span>.<\/span>delete<\/span>(<\/span>`<\/span>${<\/span>config<\/span>.<\/span>API_BASE_URL<\/span>}<\/span>\/contributions\/<\/span>${<\/span>contribution<\/span>.<\/span>id<\/span>}<\/span>`<\/span>)<\/span>\n .<\/span>then<\/span>((<\/span>response<\/span>)<\/span> =><\/span> {<\/span>\n dispatch<\/span>(<\/span>deleteUserContributionSuccess<\/span>(<\/span>contribution<\/span>.<\/span>id<\/span>));<\/span>\n });<\/span>\n });<\/span>\n};<\/span>\n\n\/**\n * Delete user contribution action creator\n *\n * @param {string} contributionId for the contribution to be deleted\n * @return {IDeleteUserContributionSuccess}\n *\/<\/span>\nexport<\/span> const<\/span> deleteUserContributionSuccess<\/span> =<\/span> (<\/span>contributionId<\/span>):<\/span> IDeleteUserContributionSuccess<\/span> =><\/span> {<\/span>\n return<\/span> {<\/span> type<\/span>:<\/span> DELETE_USER_CONTRIBUTION_SUCCESS<\/span>,<\/span> contributionId<\/span> };<\/span>\n};<\/span>\n<\/code><\/pre>\n\n<\/div>\n\n\n\n
\n<\/p>\n\n\/\/ third party libraries<\/span>\nimport<\/span> configureMockStore<\/span> from<\/span> '<\/span>redux-mock-store<\/span>'<\/span>;<\/span>\nimport<\/span> thunk<\/span> from<\/span> '<\/span>redux-thunk<\/span>'<\/span>;<\/span>\nimport<\/span> {<\/span> expect<\/span> }<\/span> from<\/span> '<\/span>chai<\/span>'<\/span>;<\/span>\nimport<\/span> *<\/span> as<\/span> moxios<\/span> from<\/span> '<\/span>moxios<\/span>'<\/span>;<\/span>\n\n\/\/ fixtures<\/span>\nimport<\/span> {<\/span> sampleContribution<\/span> }<\/span> from<\/span> '<\/span>