fabiochiu/medium-articles huggingface dataset:
Citymapper
By: Pedro Vilela
Tags: Prototyping, Bootcamp, UX, Apps, UI

Let’s say we’re in Lisbon, Portugal, and we would like to go from Intendente to downtown by metro.

As we input the information on the app, it shows us suggested routes but this time with added prices on them. The metro ride would cost us 1.50€, and we click Go.

Because the app asks us to turn on GPS, as we would approach the station the ticket purchasing button gets highlighted, calling to action. It states the ticket type, in this case a metro ticket, and its’ price of 1.50€.

Clicking that button automatically starts an NFC/QR scan that clearly states what is happening and how much you will be spending. The cancel button allows you to interrupt the scanning process if you’re not yet ready to go through the gates. Scanning gives you a success message and a sound notification, and we’ll be back at the map.

The map now has a new button on the top left area of the screen that when clicked will open a Ticket History menu.

Also, you will notice the purchasing button is now an Exit the station button that is activated. This is because the app should not make you go through the whole route in order to exit on the last metro station. Sometimes things go wrong or you change your mind and you need to jump boat. If you exit, it’ll prompt back to purchase a new ticket.

I also made it so that you could go back to the main menu and plan a new route and have the app remember where you were, in this case inside the metro line. The new route takes this into account and prompts the Exit the station button and the following steps. We will be heading to the boat station.

We exit the metro line, passing through the gates using the NFC function.

As we’re walking towards the boat station the ticket purchasing button highlights and shows us how much it costs. We get to the gates and we start the validation, 2.50€ is charged.

All there’s left is to continue our trip until our destination. And since there will be no gates at the end, we’re simply shown the last few directions and our ticket can be reviewed on the ticket history.

Let me know what you think about this solution.

What would you make differently? Would this work in your city?

In the case of passes, I think this solution could be easily adapted to just prompt for a simple ticket validation instead of showing ticket prices. Maybe an extra step before the NFC validation where you could choose a daily ticket, for example, and have the app remember it the next time you use that one service. There’s a lot of possibilities.

Can’t wait to see what everyone else came up with.

This was a fun challenge!
Case study: Improving user’s grocery shopping experience
By: Vellicia Quinnita Wijaya
Tags: Grocery App, Bootcamp, Ui Ux Case Study, Case Study, Redesign

Methods

In this study case, I used the design thinking method. This method consists of 5 steps (Empathize, Define, Ideate, Prototype, Test). I will explain in detail step-by-step the design thinking process used in this challenge

Stage 1 — Empathize

To get a better understanding of user behavior, I started this project with research. I used online surveys, online interviews via Zoom, remote moderated usability testing

Objectives

Find out about user’s behavior when buying items as their daily needs Find out about user’s behavior and experience when using GrabMart to buy items (also similar apps that have been used before to gain some insight about it) Find out user’s pain points when buying items on the GrabMart app

The Research

First, the research is carried using an online survey via Google form. I began to share the google forms to colleagues and friends. After that, 17 people signed up ranging from the ages of 21–50 years old, and most of them are employees that work for 9–5 jobs.
redux 조금 더 파 보기 — part 1. redux를 공부해보려고 튜토리얼을 따라해 봤지만, 이해력이 딸려서…
Tags: Createstore, Getstate, Store, Reducer, Redux

redux를 공부해보려고 튜토리얼을 따라해 봤지만, 이해력이 달려서 그런지 개념이 잘 들어오지 않는다.

한 단계를 더 아래로 들어가서 보면 좀 더 이해가 쉬울 듯 해서 몇 가지 확인 작업을 해볼까 한다.

우선은 확인을 위한 기본 세팅부터 해야 겠다. index.html 부터 만든다. 기본 틀은 html5-boilerplate 로부터 만들면 되고, 여기에 redux CDN을 통해 스크립트를 로드하도록 한다.

작성한 html을 브라우저를 실행하여 오픈하고, F12 키를 눌러 console 탭으로 들어간다. 프롬프트 창에서 Redux라고 입력하면,

Redux의 멤버

튜토리얼에서 봤던 몇 가지 함수들이 보인다. createStore을 실행해봐야겠다.

Redux.createStore()

redux.js:123 Uncaught Error: Expected the reducer to be a function.

at Object.createStore (redux.js:123)

at <anonymous>:1:7

Redux.createStore()라고 입력하니, reducer가 필요하다는 것을 알았다.

reducer는 설명대로라면, 현재 상태와 action을 받아서 새로운 상태를 넘겨주는 역할을 한다라고 되어 있다.

console 창에서 입력하는 것은 상당히 불편하다. 가장 간단한 형태로 reducer를 rootReducer를 정의하고 Redux.createStore()의 파라메터로 넘겨봤다.

redux의 createStore() 실행

createStore()에서 리턴된 객체 내에 익숙한 함수들이 보인다. dispatch, getState 를 좀 더 살펴볼 필요가 있을 것 같다. 앞서 html 파일에 inspect.js 파일을 포함시켰던 것은 중간 단계의 확인한 내용을 보관하기 위해서였다. 지금이 중간단계를 저장해 둘 시점이다. store라는 상수에 생성한 store를 담아둔다.

function rootReducer(state, action) {

return state;

} const store = Redux.createStore(rootReducer);

다시 html을 로드하면, console 화면에서 store로 Redux.createStore() 결과를 접근할 수 있다.

console에서 store.getState()라고 입력하면, undefined 가 출력된다. reducer에서 뭔가가 제대로 리턴이 되지 않는 것이 예상된다. state의 디폴트 값을 지정하도록 rootReducer를 수정한다.

const initState = {}

function rootReducer(state = initState, action) {

return state;

}

다시 html을 로드한다. 이제는 store.getState()를 입력하면 빈 오브젝트를 리턴하는 것을 확인할 수 있다.

store의 state 얻기

이 state 값은 initState 로부터 온 것은 확실한데, store에 업데이트하기 위해서는 분명히 rootReducer()가 호출되었을 것이다. rootReducer()에 로그를 출력하도록 살짝 수정하고 html을 재실행한다.

function rootReducer(state = initState, action) {

console.log({ state, action });

return state;

}

rootReducer의 파라메터 확인

createStore()를 호출할 때, 최초의 action이 “@@redux/INITw.k.w.3.5.6” 이라는 type 값으로 넘어온다는 것을 확인할 수 있다.

결론

글이 장황해지고 있어서 일단 여기에서 끊고 정리해보는 것이 좋을 것 같다. redux의 store를 생성하기 위해서는 reducer를 필요로 한다. reducer는 현재의 상태와 action을 받아서 새로운 상태를 만들어주는 역할을 한다. reducer 의 최초의 상태와 action은 store를 생성할 때, 호출이 된다. 디폴트 state 는 reducer의 디폴트 인자값에 의해, action은 redux 자체의 초기화를 위한 action값으로 해서 넘어온다.
Angular ngRx store unit testing
By: Adrien Miquel
Tags: Ngrx, Angular, Redux, Unit Testing, Jasmine

Unit Testing our Store 🧪

Now it’s time to test! 💥

We will use Jasmine as Unit test framework but it’s not mandatory.

Actions 🎬

Testing actions is very easy since we just need to check the good creation of the action object.

Reducer 🔍

In our reducer, we will have 2 test cases:

The initial state

The SetData action

As we will set data, we need a little bit of configuration: resetting the data property from initialState to ensure it will remain the same at the very beginning of each test. Here, we use the afterEach method from Jasmine framework.

Effect️s 🌪️

Testing effects requires more configuration since we need to mock the store and the data provider, the DataService . To achieve, you will find the settings in the definition of the testing module (lines 20–24).

The lines 23–24 allow to define a mocked object DataService containing a list of functions. Then, line 29, we define what value a function will return.

Finally, we have to trigger the effect by adding an action to the action pipeline actions$ . The check is operated by subscribing to the effect as described lines 44–45.

Selectors 🎯

As selectors are just a way to browse into the store features, we can create a complex object similar to our store to check if the selector fetches the correct property.

Here, it’s easier to create states and entities thanks to factories to make it more adaptative to each test case.

What about Features Module State ? 🤔

Unit testing features module state can be done independently for each state as described above.

However, you will face some issues regarding unit testing selectors in a feature module. It requires to change the state to encapsulate our feature state into a root state.

Tip 🃏

The MockStore class provides a very useful property: scannedActions$ . This is an observable on which we can add a subscriber to check all the dispatched actions.

It could be useful when you dispatch several actions in an effect.

Final words 🔚

Unit testing a ngRx Store is really easy in fact, right !? Thanks to the Flux pattern, each part of the store is self-sufficient and can be tested independently.

Feel free to comment if you’ve encountered a specific case which is not covered in this article so far.
Use Of Redux With Real Example
By: Aparna Chinnaiah
Tags: Angular, Vue, Reactjs, Redux

Redux — State Management Tool

Always there is no need for Redux to maintain the state of application. The question that arises when to use it then?

Reason to use Redux:

It is good to use Redux when there is a need to pass the data back and forth between the components. Drilling down the data as props between nested components leads to data inconsistency and makes the complex project’s code less maintainable.

Example:

React UI Components

In the above example, Accordian (children2) should get opened only when the textbox in Accordian(children1) is filled with valid input. If the local state is maintained in children1, update of the children1 state is not visible to children2. Same applies for the children3, local state updation on children2 is not visible for children3. Also if the local state is maintained in all the children components then the state is not visible to the parent component.

Also If there is a need to gather all the inputs entered of the children components in the parent component then maintaining a local state or refs will not work. Implementing redux will cache the component state even after unmounting the component.

By emitting actions from the parent component it is possible to control the state of child components. It is good to use global state management for the above use case.

The same can be achieved using useContext + useReducer. It is upto the developer whether to use useContext/useReducer/Redux.

Summary:

Applications that require simple UI changes don’t need a complicated pattern like Redux.

As the state is immutable, Redux updates the state by returning the new state which can cause excessive usage of memory. Implementing redux will lead to the lack of encapsulation.

Therefore make sure to check the need of Redux before integrating its complexities.
Redux
By: Brajesh Kumar
Tags: React, Redux

Reducer

After an action is created and dispatched, the redux store needs to know how to respond to that action. This is the job of the reducer function. Reducers are responsible to change the state inside the redux store based on the action that has been dispatched. A Reducer is a method that takes state and action as an arguments, and it always returns a new state. It is important to note that this must be the only role of the reducer. It is supposed to return a new copy of the state with the updated value, and nothing else, no API calls, no hidden surprises , etc. It is a pure function that takes in state, action and returns a new state.

Another key principal in Redux is that state is read only. So the reducer function must never update the state directly and always return a new copy of the state.

const defaultState = {counter : 0 } const reducer = (defaultState, action) => {

switch (action.type) {

case "INCREMENT": return { counter: defaultState.counter + 1 };

default: return defaultState;

}

};

Combining multiple reducers
Reduce React re-renders with mlyn.
By: Mikhail Boutylin
Tags: Immutability, JavaScript, React, Redux, Mlyn

The problem: you have an application, where a component updates state, that should be displayed in an absolutely different part of the app. The simplest solution would be to “prop-drill” the value through your components hierarchy.

Suppose the following app:

It has only 4 components:

App : application container (declares the state)

: application container (declares the state) A : Slider

: Slider B : div where the value of the slider is rendered

: div where the value of the slider is rendered C: container of B

Possible implementation in plain react:

import React, { useState } from "react"; const A = React.memo(({ progress, setProgress }) => {

return (

<input

type="range"

value={progress}

onChange={(e) => {setProgress(e.target.value);}}

/>

);

}); const B = React.memo(({ progress }) => {

console.log(">>> render B");

return <div>{progress}</div>;

}); const C = React.memo(({ progress }) => {

console.log(">>> render C:", progress);

return (

<div style={{ padding: 10, backgroundColor: "yellow" }}>

<B progress={progress} />

</div>

);

}); export const App = React.memo(() => {

const [progress, setProgress] = useState(0);

console.log(">>> render App");

return (

<div>

<A progress={progress} setProgress={setProgress} />

<C progress={progress} setProgress={setProgress} />

</div>

);

});

(You can run a full example on this sandbox)

If we want to update display value of the slide in B, this is what will happen on every update

Mlyn solves this problem by introducing proxy values called subjects. You can pass those subjects (or parts of them) to your children and subscribe / update only where needed. Let review the migration of the code above by steps:

export const App = () => {

const progress$ = useSubject(0);

console.log(">>> render App");

return (

<div>

<A progress$={progress$} />

<C progress$={progress$} />

</div>

);

};

Here in the App, we create a subject with an initial value of 0 . You can do following with a subject: subscribe to it value, write a new value to it, and pass it as a reference to another component.

const A = ({ progress$ }) => {

const progress = useSubjectValue(progress$);

return (

<input

type="range"

value={progress}

onChange={(e) => {

progress$(e.target.value);

}}

/>

);

};

To bind a subject value to a react component you should useSubjectValue function from react-mlyn package. And to update it, simply invoke it as a function passing a new value.

The value of progress$ subject can be passed through other components of your app. However, only the component in which you’ve subscribed to the subject will be re-rendered.

const B = ({ progress$ }) => {

console.log(">>> render B");

const progress = useSubjectValue(progress$);

return <div>{progress}</div>;

}; const C = ({ progress$ }) => {

console.log(">>> render C");

return (

<div style={{ padding: 10, backgroundColor: "yellow" }}>

<B progress$={progress$} />

</div>

);

};

This is how updating B diagram simplifies:
NGRX — Use Actions to create more reactive applications
By: Ryan Hoffnan
Tags: Web Development, JavaScript, Angular, Redux, Technology

The Issue:

With applications getting bigger and bigger we as developers need to find better solutions for passing data into our components and services, and this is where things get messy. When we look at Angular’s solutions we can see the upcoming growing pains.

1. Input() chaining — I hate seeing this. all components know exactly what state their child components have. this can be important and useful but usually, we just see one component getting data from Input and then passing it off to another. causing a lot of potentially breaking points.

2. Services — very easy, low maintenance, but data is still stored in memory and can causes files to become extremely large due to all the use cases we will create. and can be mistakenly reset by adding it as a provider in a component or module (without understanding why this may be done, there are valid use cases for this).

Nothing wrong with using the solutions mentioned above. but we can do better.

example of bad input chaining

Opinionated Solution

Ngrx is an amazing solution for storing and sharing data in our applications. In many applications, it becomes the single source of truth (as it should)

and is used mainly to make our UI react to data store changes as we go. Yes, we want to update our UI when the data we depend upon changes. But why stop at data changes? Why not “abuse” Actions?

Actions are our way to update our store and to initiate a process.

We usually use an *EffectsService and/or reducers for this. in which we listen to specific actions and run higher-level functions (HTTP calls for example, or normalizing the data before setting it in the store) in order to update our store and make our application react accordingly.

Fortunately, most Angular elements (Component/Services/Directives ) can listen to actions. this means that almost any element can listen to predesigned Actions made for it.

For example, if we have a button component, that listens to an action called ButtonLoaderAction and its props are props<{loading: boolean}> .

The button is agnostic, it is decoupled from any other logic. it is completely independent, it will only update when the action is called by whoever calls it.

Actions don’t do anything but send events to anyone listening to it, usually our reducers and/or effects , we can take advantage and use them in order to make our website react not only to data changes but to developer decisions. We decide when our application reacts and changes.

Passing the power, of when our application reacts, to the developer is already an emerging concept with updating the changeDetection strategy to onPush for example.
React Context API : A complete guide
By: Pulkit Sharma
Tags: JavaScript, Hooks, Context Api, React, Redux

Without Context API

One of the major advantages of using React is you can break your application into smaller components (as per the need) for better reusability & maintainability of code. And, as the size of the project increases, these components will likely to grow in numbers.

Now, let’s assume if a user is interacting with one component somewhere on the UI and that information or input is required somewhere else inside a different component. What we can do? Yes, you are thinking in the right direction. We can pass a prop to that component. Then, what is the problem?

Let’s assume you have 10 components in your component hierarchy and the very first component updates something which is required by the last component (10th one). In that case, you have to pass the prop down the whole hierarchy so that it is available for the 10th component. This is where we can slow down our application and cause development issues.

This is what we call “prop-drilling.” This can slow down your development as the size of your application grows (assuming the number of components also grows).

This is one of the main reason why Context API comes into play.
PREDICTIVE ANALYTICS AND PRESCRIPTIVE ANALYTICS
By: Thisal Avishka Wijayasekara
Tags: Data Science, Dataanalys, Predictive Analytics, Prescriptive Analytics

When comes to the data analysis, it is primarily used for decision making as well as prediction with predictive casual analysis and prescriptive analysis. So here is a short discussion about predictive analysis and prescriptive analysis.

PREDICTIVE ANALYSIS

Think about you want to predict the possibilities of an upcoming broadband plan of the ABC Telecom in the future, so you need to apply the predictive analytics. So, you can build up a model, using the past patterns of usage of customers and predict the performances and needs of the customers. And also, here is another example, the future credit payments of postpaid customers on time is a matter of concern you. Anyway, you have to build a model using the history of the payments and predict if the future payments will be on time or not. That is all about predictive analysis. (Edwards, 2020)

PRESCRIPTIVE ANALYSIS

When comes to prescriptive analysis, that is all about suggesting a range of prescribed actions and associated outcomes. (Sisense, 2020) Think about an intelligence which is taking its own decisions. And also, at the same time, it has the ability to modify itself with dynamic parameters. Furthermore, with the aim of using decision making processes, prescriptive analysis collects data from various descriptive and predictive sources for its models. This includes combining existing conditions and possible solutions to determine how each one will affect the future. In addition, it can measure the impact of decisions based on several possible future scenarios. (Pierce, 2018)

References/

Edwards, J. (2020). Predictive analytics: Transforming data into future insights. [online] CIO. Available at: https://www.cio.com/article/3273114/what-is-predictive-analytics-transforming-data-into-future-insights.html [Accessed 17 April. 2020].

Pierce, B. (2018). Prescriptive Analytics Use Cases for Sales and Marketing. [online] Blog.riverlogic.com. Available at: https://blog.riverlogic.com/use-cases-for-prescriptive-analytics-in-sales-marketing [Accessed 17 April. 2020].
The Right Foundation Will Ensure Citizen Data Scientist Success
By: Kartik Patel
Tags: Citizen Data Scientist, Data Literacy, Predictive Analytics, Augmented Analytics

When you take on the mantle of Citizen Data Scientist, there is a lot to process! Much of the reason business users feel overwhelmed at the idea of the Citizen Data Scientist role is the anticipation of having to learn new tools and techniques to analyze data.

“I am not a data scientist”, “I don’t understand analytics”, “this new role is going to take up all my time”, “my manager doesn’t care about this stuff” — these are just a few of the arguments you will hear when you bring up the concept of Citizen Data Scientists, improved data literacy and data democratization. But, in the real world, the introduction of a Citizen Data Scientist initiative should not be intimidating or overwhelming.

There are many benefits to the Citizen Data Scientist evolution. Here are just a few:

· The business will base its decisions on facts

· It is easier to understand and address issues and opportunities

· Business users can add more value to the business

· Business users can add skills to their resume and advance their careers

· Businesses can improve their competitive stance

· Businesses will be more nimble and agile and ready to respond to the market

All of these benefits depend on the organization being prepared to change its culture and to support Citizen Data Scientists as they take on their new role. One of the most important aspects of this change requires establishing a foundation of augmented analytics solution and providing easy, intuitive methods to access and perform analytics without the need for data scientist or business analyst skills.

With the right self-serve augmented analytics, Citizen Data Scientists can leverage auto-recommendations, suggestions and guidance to choose the right algorithm or analytical technique and visualization techniques to receive clear results suitable for presentation and reporting.
week two
Tags: Ruby, Makers Students, Fizzbuzz, Coding, Codingbootcamp

Photo by Joshua Fuller on Unsplash

it’s the end of week two and i have just finished an intense emotional rollercoaster: i have been reintroduced to Ruby. i knew it would be a tough ride to learn a new language in such a short amount of time, but i feel like i have been hung upside down for fifty hours and all my prior Ruby knowledge drained from me.

this week at Makers, we have gone back to basics and started again. we have been tasked with learning Ruby, the hard way. re-wind 2 weeks ago when i received the good news that i had been accepted onto the bootcamp. i was so chuffed with myself for passing the technical interview that i mistakenly took for granted my knowledge of the language. i thought this Ruby thing is easy, how wrong i was.

the study material that Makers provide on Ruby dives in deep and focuses more on computer science based theory which is great. at the start of the week i panicked that everything i knew was basic surface level and i would have to spend so much time re-learning, but as the week progressed i recognised various theories and syntax references and things started to click. its amazing how the brain works, it just needs a gentle nudge.

so, what is Ruby anyway?

Ruby is a language developers use to write code and develop programs. there are lots of different languages that are suited for different needs but Ruby is praised for its elegant syntax that is logical to read and write. AirBnB, Twitter and Netflix were created using Ruby which if you think about it, is pretty impressive. Ruby was born in the 90’s, created by Yukihiro “Matz” Matsumoto, who was quoted as saying:

I hope to see Ruby help every programmer in the world to be productive, and to enjoy programming, and to be happy. That is the primary purpose of the Ruby language.

here are some examples of what i have been building this week using Ruby.

Magic 8 Ball: every time you run the program the ball provides a different output to your question. you can test the program here, just click run, and type a question on the right hand side of the page.
How I Got a Job Two Weeks After My Coding Bootcamp
By: Randall Kanna
Tags: Bootcamp, Coding, Tech, Technology, Codingbootcamp

Photo by Émile Perron on Unsplash

Two weeks after I graduated my coding bootcamp, I had an offer. Two weeks after that, I started my first engineering job at a small startup.

Here are some of the strategies I used.

Treat your job search like it’s your job.

I was exhausted after I graduated from my bootcamp. But I had spent more than$15,000 on tuition and living in San Francisco so I knew I needed to get a job quickly to prove the financial investment was worth it. It was so tempting to just spend those two weeks napping on my couch and recovering from the most grueling process of my life but using the momentum I had from graduating the bootcamp was critical. I had read about a lot of students that had let their skills get rusty and it had taken 6–12 months for them to find a job.

From the hours of 9AM to 6PM, I was job hunting. I was obsessively updating my resume, finding new jobs, reaching out to connections, finding meetups to attend, and honing my skills. After 6PM, I wouldn’t respond to recruiter emails or do any prep work for interviews. I used that time to recuperate and prepare for the next day.
Back Against the Wall — Coding Discovery
Tags: Productivity, Life, Coding, Codingbootcamp

Ever since I’ve started coding, I’ve noticed this one thing. A good percentage of the time you’ve got your back against the wall. No one is going to do the work for you or make sure every little detail in your code is perfect. Sometimes you’ll get help, sure, but most of the time you’ll have to do it yourself and don’t even think of copying and pasting because you’ll only hurt yourself that way. When something goes wrong, you have to research, read, and experiment with different methods of code until you can get that app, that program, or that software to work.

There have been times where I have wanted to give up and just say forget it, but then I remember the “why”. The “why” for which I’m doing this all for. It’s not because of me paying all this money to go to school for it, it’s not because of me watching some “cool hacker movie” or The Social Network (2010), and it’s not because of the money I could possibly make in this profession. It’s because I love the challenge and the feeling of accomplishment I get from solving the problems that occur when I make mistakes. The chance for me to be actually good at something and actually contribute something to someone one day is what keeps me going.

“Why does being good at something matter?” Well, it matters to me because I have never really been good at anything and I always felt that I was just existing and not living. I never felt like I ever contributed to anyone’s life, especially my own. All I have done is watched from the sidelines and try to live a life that is comfortable and whenever I would really think about that, it would make me angry and disappointed at myself. That’s why I started coding and why I started coding with a college course that if I just backed out of then I would be in a pretty bad spot with nothing to show for it. I put my own back against the wall. Because when you have your back against the wall, you have nowhere else to go but forward.

So all I’m saying is make sure you always keep your back against the wall or you’ll get complacent and think that being lazy and comfortable is okay. It’s not. It is what keeps you stagnant and it is what keeps you wishing you could do more. Less wishing, more doing.
PinMe with a touch of Anime.js
By: Phillip Chang
Tags: Web Development, JavaScript, Animejs, Codingbootcamp

New Technology Incorporated — Anime.js

Anime.js is a javascript library used to make animations for websites.

Anime.js Website Link

I used anime.js on our pinMe project to add a different dimension to our website by introducing a transition page once the visitor enters our website.

How was this possible?

Through the awesomeness of Anime JavaScript and some countless hours of hard work this was made possible.

D own and Dirty with the coding

While I can just paste a entire block of code, I decided to dissect the coding behind this process.

Step 1: Creating the foundation of the code

The foundation of success

The basic foundation of the anime.js transition begins on line 44 with our timeline variable. Note: the “anime” command is what makes all the magic happens. This command initiates the entirety of the code.

Line 45 and 46

Easing: dictates how fast the animation starts and stops at the beginning and at the end. Here I used easingOutExpo which starts the animation fast at the beginning by increasing the timing exponentially but keeps it at a constant at the peak.

Duration: gives user control on how long the animation should last in seconds. Here 750 denotes milliseconds and 1000 equates to 1 second.

Step 2: Creating Targets

Lines 49–54

Each “tl.add” specifies a block being added to our main timeline variable.

‘Targets’ denotes the specified element you wish to manipulate. In our case this is the class ‘div’ if it was an id it would be as follows: targets: ‘#div’.

Following line 50, we can change different css properties of the target element. Here I chose to manipulate the width to 100% making the .div expand to 100% during the animation.

On line 53, we choose the type of animation we want to perform. You can reference different anime.js animations from their website. For the purpose of our website, I used a staggering effect being performed over 100 milliseconds.

Lines 56–80 repeats our process of manipulating different elements as we did in block code 49–50.

Step 3: Add your own style

We implemented a gradient color scheme for each of our div elements to give a black to white fade across the 10 divs by creating a variable rgb css element using a setInterval() to gradually implement and decrement the rgb values.

We also implemented a fade animation using UIKit to create a slow fade out effect for each div.
Embrace the Chaos.
By: Lauren Raczkowski
Tags: Follow Your Intuition, Education, Codingbootcamp, Journey Of Life, Life

We’ve all heard the phrase, “Life is a journey. Just enjoy the ride.” Well, for nearly 15 years I have been journeying. As much as I want to say I’m ready for it to stop, I’m not quite sure that is true.

When I started taking full-time college courses my junior year of high school, I was crystal clear that I wanted to go into the IT field. Fast forward 2 years as I entered a 4-year institution at 17 as a second semester sophomore. I sat in my first higher level computer programming class and looked around at everyone else in the room at thought “What am I doing here? I don’t belong here. I’m not like these guys. I’m a fraud and they will all find out.” That was the beginning of my extended journey.

Between that moment in 2006 and today in 2019, I watched the economy crash just before I graduated, I graduated with a degree in business and marketing, I became a nanny, I was introduced to a career in health care, I graduated with my masters degree in occupational therapy, I have moved between 4 different states chasing different job opportunities.

Life has been chaotic.

Ironically enough, here I am 15 years from the moment I chose to work with computers actually becoming educated in computers — however, I finally have the confidence and belief in myself to complete it. It may have taken me a roundabout way to get back here, but that’s the beauty of life.

We all have different experiences and journeys that our lives take us on. Personally, I believe each of those have a precise meaning that has led us to where we are now. Within these last few years, I have learned to laugh with the chaos, listen to my intuition, and follow my soul.

Here’s the thing, I am bored with my current career. Coding and web development challenges my brain in ways that it hasn’t been in years. This, is where I belong. This, was my calling.

This program has been anything less than easy. There have been many moments that I want to throw in the towel after a sob fest to my husband. Each and every time this happens, I focus on why I began this; I look back on everything I have already accomplished; I look forward to all the potential that this can bring to my family.

Life has been chaotic. But I choose every day to embrace the chaos.
The similarities between coding and a teenage crush
By: Therese Hagelin
Tags: Technigo, Learning To Code, Coding, Codingbootcamp

How would you describe coding in four words? Creative and very useful? Something used to create? A language for computers? There are so many ways to describe it, but do you know what I would say? Like a teenage crush. You didn’t see that coming, did you? Well, it might sound weird and totally irrational, but I can actually motivate those words, so listen up!

Photo by Dayne Topkin at Unsplash

When you look back at those teenage crushes you might have had, how would you describe them? Exciting, wonderful and something that could make you jump of joy one day, just to make you cry and feel unsure about everything the next day? Probably. Something that gave you butterflies every day and that made you feel you could conquer the world when everything went your way? Surely.

And then again, how would you describe coding? If you ask me, it would be pretty much the same. Exciting, wonderful, scary and something that gives you butterflies whenever you succeed. Like something that can make you excited like a kid at Christmas, but also make you cry and feel like you don’t know anything for sure. So, with that said, coding is very much like a teenage crush. It’s something you will always look back at with a warm feeling in your heart, that will help you grow as a person, and it will bring a lot of fun moments and days to celebrate.

As soon as you have entered the world of programming, you will face moments where you search for that feeling of being certain, without being able to find it. You will face times when it’s obvious that you’re on top of the world, and could create a fantastic piece of code art. The peaks will be higher than K2 and the valleys will be deeper than Mariana Trench. There are three things you can do in order to overcome these issues, at least the way I see it:
I completed an 8 week dev mentorship with The Collab Lab — here is what I learned
By: Dani Poplin
Tags: Web Development, Dev, Coding, Codingbootcamp, Code

I completed an 8 week dev mentorship with The Collab Lab — here is what I learned Dani Poplin Sep 8·3 min read

Over the last 8 weeks I worked on a team of 4 early career developers to complete a smart shopping list web app with the guidance of some amazing mentors at The Collab Lab. I learned a lot about React.js, Bootstrap, and where my technical strengths and deficiencies lie. More importantly, I learned how those technical skills don’t really matter.

Yes, I learned where my weaknesses are in a technical stack. Yes, I also learned where my strengths are. When I say that doesn’t matter, what I mean is that working on a team means working with diverse technical knowledge and diverse thought processes — because of this, each person brings unique perspective and skillsets to the project.

Having an amazing proficiency in one tech stack is great, but it doesn’t necessarily mean that you are more or less equipped to tackle a project. Any developer who has taken the time to learn a tech stack can likely learn another. What you are really learning when you take the dive into programming is figuring out how to convey your idea to a computer in a logical fashion. The syntax for an individual language is secondary to understanding the progression of tasks the computer will need to complete.

So given that, why do I think The Collab Lab is one of the best experiences of my life? It gave me the confidence to say “Hey, maybe I don’t know how to do this yet. But let’s figure it out together.” And you know what? We did the damn thing, as a team. Every single member of our team contributed different ideas and different technological strengths to produce our final outcome. The Collab Lab also gave me so much practice in communicating my ideas and then presenting them to a group. I couldn’t be more proud of what we accomplished.

As for individual learnings on my strengths, I can now say that decisions I proposed for our database make the app much faster and more scalable. Through a decent amount of trial and error, some of the design decisions implemented also make me super proud. In terms of weaknesses, I know that React.js is still not the framework I’m most comfortable in. Dealing with statefulness is hard — And that’s okay!

I know that I will always be learning something new, or maybe relearning something I’ve forgotten and that excites me. I’d much rather be learning than get bored with doing the same thing everyday. Who knows how those skills you picked up will translate to your next project.
Why do you need to learn to code?
Tags: Computer Science, Why Programming, Coding, Computer Science Student, Codingbootcamp

For example, once a group of software engineers in Boston during a snowstorm realized they could use coding to make the city safe. They discovered a problem that firefighters were wasting time trying to find fire hydrants buried in the snow. The software engineers then created a program that identified the location of every fire hydrant in the city. Then they created a website called Adopt-a-Hydrant. Now, on the website, residents of Boston can volunteer to shovel out a nearby hydrant when it snows, improving the neighborhood’s safety in the event of a fire.

Isn’t it exciting enough?

You should be a math genius…

I guess, the biggest misconception around coding is that you need to be a math genius. There are many areas where math skills are not required. You’ll usually do just fine with basic algebra unless you work on special projects which require sophisticated algorithms and advanced math. Instead, it would be really important for every programmer to have good problem-solving skills, logic, and a lot of patience.

Do you think your computer is smart?

The computer cannot do anything without instructions. It isn’t smart but can execute instructions carefully, very fast, and without getting bored. For instance: given the task of adding up all numbers from 1 to 1 million, a human probably wouldn’t make it past 100 without making some mistake and getting bored with it. A computer happily performs this task in a couple of milliseconds. So, coding is a way to give detailed instructions to the computer, telling it what to do.
Export data from elasticsearch to mysql with Apache Spark
By: Thomas Decaux
Tags: Spark, Elasticsearch

Elasticsearch is a search engine based on the Lucene library. It provides a distributed, multitenant-capable full-text search engine with an HTTP web interface and schema-free JSON documents. MySQL is an open-source relational database management system. Apache Spark is an open-source distributed general-purpose cluster-computing framework. Spark provides an interface for programming entire clusters with implicit data parallelism and fault tolerance.

Ok, now, you know these 3 things 👊 let’s play with it!

Here the use case:

“I have a ton of data in elasticsearch, with nested structure, and I want to export it into MySQL, of course, as fast as possible”

Why Spark?

Spark supports elasticsearch and MySQL very easily (just a plugin as a JAR file to provide)

Spark divides the work as stages/tasks, so it can work in parallel, with elasticsearch as the input, the “parallel unit” will be a shard, Spark will read data of all shards in the same time (1 task = 1 shard)

Spark can create MySQL schema for you! as a good developer, you are lazy, and always looking for automatic stuff, cool!

Spark can understand Python, Java or Scala

Apache Zeppelin

One more (very cool) techno is Apache Zeppelin:

Web-based notebook that enables data-driven,

interactive data analytics and collaborative documents with SQL, Scala and more.

Spark is seamlessly integrated, so we are gonna use Zep’ as a note book to write our tiny Spark (Scala) program.

The (Scala) code

Read elasticsearch data

Here we got a DataFrame from “clicks” index:

2. Flatten schema

Elasticsearch speaks JSON, it loves nested structure, whereas MySQL does not. So we must flat our data schema:

3. Write to MySQL
Ways to delete documents from elasticsearch
By: Prashant Khunt
Tags: Elasticsearch

Elasticsearch is a widely used indexing and searching tool. To search documents from the elasticsearch, we need to index those documents first, but sometimes while doing indexing, we may have done mistakes or after some time some of the documents are not useful for us in those cases we need to delete documents from elasticsearch.

Once the documents have been deleted searching will not be performed on those documents.

Let check documents which are available in my index: http://127.0.0.1:9200/document-index/_search

Here index name is document-index which have two documents as below:

Let’s learn different ways to delete documents from elasticsearch with different examples:

Elastic search provides ways to delete a single document as well as delete documents in bulk using _delete_by_query query.

1. Delete single document using document id

To delete a single document using document id, we should have an id of the particular document. Here is an example of deleting document using document id. Make sure that here request a type is a DELETE.

In the above REST API, document-index is the name of the elasticsearch index. _doc is document type and 1 is a document id.

2. Delete all documents from the index

We can delete all the documents from the index using _delete_by_query. when we pass “match_all”:{} then it will match all the documents so _delete_by_query will delete all the documents from the index.

3. Delete documents based on the query or specific criteria

Elasticsearch provides _delete_by_query REST API to delete multiple documents based on a specified query, Here we need to pass JSON as the request body with POST method, It will delete those document which fulfills by specified query.

2.1 Delete using range query, It will delete all the document whose id is great than or equals to 1.

2.2 Delete using match criteria, Here it will delete all the document whose firstName is Prashant.

Concussion

In this article, We learned about different approaches to delete the document’s indexes, another important point is that elasticsearch is using Lucene index and as per Lucene characteristic t will not directly delete and document from index but only mark as delete and after sometimes rearrange the documents at that time it will remove from the index.
How we stopped memory intensive queries from crashing ElasticSearch
By: Angela Zhang
Tags: Distributed Systems, Elasticsearch, AWS, Software Development, Tech

Our team takes dress codes very seriously.

At Plaid, we make heavy use of Amazon-hosted ElasticSearch for real time log analysis — everything from finding the root cause of production errors to analyzing the lifecycle of API requests.

The ElasticSearch cluster is one of the most widely used systems internally. If it is unavailable, many teams can’t do their work effectively. As such, ElasticSearch availability is one of the top SLAs that our team — the Data Science and Infrastructure (DSI) team — is responsible for.

So, you can imagine the urgency and seriousness when we experienced repeated ElasticSearch outages over a two-week span in March of 2019. During that time, the cluster would go down multiple times a week as a result of data nodes dying, and all we could see from our monitoring was JVM Memory Pressure spikes on the crashing data nodes.

This blog post is the story of how we investigated this issue and ultimately addressed the root cause. We hope that by sharing this, we can help other engineers who might be experiencing similar issues and save them a few weeks of stress.
Elasticsearch in Go
By: Rajat Yadav
Tags: Golang, Go, Elasticsearch, Gin

In this article, we are going to study implementation of Elasticsearch in Golang.

Elasticsearch is NoSQL database written in Java and it is a real-time, distributed, and analysis engine based on the Lucene library.

Elasticsearch Installation

Before installing Elasticsearch, Java must be installed on your system on which you are going to use Elasticsearch.

You can download Elasticsearch from official website Link. At the time of writing this article, I am using Elasticsearch version v8.0.0.

To run Elasticsearch, cd .\bin\ and run elasticsearch.bat file. This will take time start Elasticsearch service. You can check by requesting localhost:9200 with GET method, 9200 is default port for Elasticsearch service.

Now we will create one Index (similar to database) named employees by firing the query localhost:9200/{database_name} eg. localhost:9200/employees.

Lets get started with Go!

First, we will initialize our ES Client connection. you can set the URL configuration using config struct.

Initialization of Elasticsearch

For setting custom config.

We need to make a struct for our model, here we are going to use Employee struct.

Insert Operations

For Inserting one single document in Elasticsearch, we will marshal our data then configure the Index API request using IndexRequest and execute the request.

For inserting multiple documents, we can use same request in loop. In this article, we are going to insert 1000 record in one go. so we needed a JSON file containing such entries.

Lets create one function to read a file and return array of struct EmployeeDetails.

Now lets insert multiple documents.

Search Operations

Now we can search for any document, for that we need to create a search query first and then create an request then execute that request.

Now you can check the response!

You can find the entire source code of this application in the Github Repository.

Thank you !!! .. Feedback will be highly appreciated.
Centralized Logging Solution on Elasticsearch
By: Akhil Jain
Tags: Elasticsearch, AWS, Programming, DevOps, Anomaly Detection

Centralized Logging Solution on Elasticsearch

Logs are the holy grail for a company to react to any technical issue, identify the root cause, and fix the issue for the customer. More and more companies are moving towards predicting the issue and fixing it beforehand so as to improve the customer experience and reduce their costs in reactively fixing it.

I once worked with a company that had to fly a technician to the customer to inspect the product, identify the malfunctioning part, fly back and take the new part again to the customer. The end-to-end process from getting the call from the customer to finally fixing the product took around 5–8 days, 4 flights, and all the associated expenses.

Imagine the frustration of the end-user during this whole time.

At this customer, we implemented a solution to stream the logs from the product in real-time to the cloud. On the cloud, we implemented advanced analytics and ML models to predict the potential issues and also identify anomalies in real-time. The technician could now fix the potential problems during routine maintenance visits. ML models would predict the potential problem, its probability and the part to be replaced. The technician would take the part along and replace it during the visit. By switching to pro-active maintenance and repair, this company saved significant $$, reduced product downtime at the customer, and in turn, improved customer experience and satisfaction.

Since then, I have worked with various customers (IoT and Big Data) across domains and geographies to implement such a solution. Below is a high-level overview of such a solution that you can implement or experiment with.

The solution uses the following key services: