Engineers spend a lot of time debugging and looking for performances bottlenecks. Memory leaks, split brains issues… You need to know, how to write good code but also predict which parts of service will need more power and eventually move them into separate microservice or create serverless function (eg. AWS Lambda).

PDF renderer engine is good case for using AWS Lambda, because it uses a lot of memory in comparison to the rest of my application. I want to share with you implementation of PDF news app which I have created based on AWS: EC2, S3, DynamoDB, Lambda.

Concept

Application renders news in PDF for chosen country and category. As a source of news I use newsapi.org REST endpoint. UI is simple React app and server is created by Express.js. Source code: https://github.com/machnicki/aws-pdf/tree/version/1

Workflow

The choice for a lot of programmers is quite obvious, but we should consider some cons of using Redux:

1. It’s not easy to switch to work with reducers
2. Don’t Repeat Yourself
3. Care about performance — render()

It’s not easy to switch to work with reducers

You will need to care about functional principles and always return new value based on previous state. Sometimes it’s easy (simple string, objects or array operations) as:

return {…previousObject, newValue: value}

but for more complex changes you probably would like to use Immutable.js or similar library.

During the work on large application you will need to think about combine reducers, higher-order reducers, separate UI…

I like using ESLint and JSCS with Airbnb preset, so code needs to be strict. Sometimes this is painful, but I definitely agree, that this kind of work keeps code more cleaner and helps cooperate with programmers, which very often have different coding styles.

If you don’t use ESLint, lets try and install also Airbnb package: https://github.com/airbnb/javascript/tree/master/packages/eslint-config-airbnb

Event handlers in React

If you work on component in React you probably need to create some custom events, callback functions. Popular convention in React is to name handler method similar as

handleChange() {...}

when your component looks similar as

render() {
   return(<MyInput onChange={...} />)
}

and…

What I really like in Sass and in similar CSS preprocessors is possibility to keep common reusable classes in one place and after extend or include them. The goal of this post is to show you, how easy is to create fancy background zoom effect on hover state.

As you see in code above zoom effect is done by CSS3 transform and transition properties. …