Productivity and getting stuff done

Justin Dumadag
Sep 1, 2018 · 4 min read

If you’re like me procrastination is almost an everyday occurrence for me. Whether it is studying, doing work or even getting out of bed it takes twice as long to complete the task that needs to be done. I have lost countless hours going “just one more episode” on Netflix, falling into hours of YouTube videos or scrolling through the endless page of social medias. There is one technique that i began to use to combat the evil of procrastination: The Pomodoro Technique.

What is it?

The Pomodoro Technique is a time management/ productivity method that breaks the work needed to be done into timed intervals. It emphasizes working in short bursts while taking frequent breaks.

There are only a few steps to use the technique:

  1. Pick a task that needs to be accomplished.
  2. Set a timer “the pomodoro” to 25 minutes.
  3. Work on the task till the timer rings (NO DISTRACTIONS). Put a check mark on a piece of paper.
  4. Take a short 5 minute break.
  5. After 4 pomodoros (checkmarks) take a longer (usually 15–30mins) break.

This method trains your brain to focus for short periods, concentrate with no distractions and it can lead to improved attention span. The breaks help keep the motivation and your creativity and prevents burn outs.

The beauty of this technique is its simplicity and that the only thing you need is a timer. Francesco Cirillo who invented the Pomodoro technique used a simple tomato shaped timer. Today you have so many options besides a kitchen timer. You have your cell phone, smart watch, use Google to set a timer, and you can even tell your Alexa(or Google Home) to set a timer for you. But using my knowledge in code (and it being good practice) I will show you how I made a simple timer using React.

This app is very simple with 2 components one of them a presentational component.

In the App.js page, I only made a few edits to the boiler plate code.

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Timer from './components/Timer'
class App extends Component {
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">Pomodoro Timer</h1>
</header>
<p className="App-intro">
This is a simple Pomodoro app
</p>
<Timer/>
</div>
);
}
}
export default App;

The Timer.js Component will hold everything in the code.

import React from 'react'
import Countdown from './Countdown'
class Timer extends React.Component{state = {
minutes: 25,
seconds: '00'
}
startCountdown = () => {
this.handleInterval = setInterval(this.tick, 1000)
let time = this.state.minutes
this.secondsRemaining = time * 60
}
tick = () => {
let min = Math.floor(this.secondsRemaining / 60)
let sec = this.secondsRemaining - (min * 60)
this.setState({
minutes: min,
seconds: sec
})
if (sec < 10) {
this.setState({
seconds: "0" + this.state.seconds,
})
}if (min < 10) {
this.setState({
minutes: "0" + min,
})
}if (min === 0 & sec === 0) {
clearInterval(this.handleInterval);
}
this.secondsRemaining--
}
stopCountdown = () => {
console.log('STOP');
clearInterval(this.handleInterval);
}
shortBreak = () => {
this.setState({
minutes: 5,
seconds: '00'
})
}
longBreak = () => {
this.setState({
minutes: 30,
seconds: '00'
})
}
session = () => {
this.setState({
minutes: 25,
seconds: '00'
})
}
render(){
return(
<div>
<button onClick={this.shortBreak}>Short Break</button>
<button onClick={this.session}>Session</button>
<button onClick={this.longBreak}>Long Break</button>
<Countdown minutes={this.state.minutes} seconds={this.state.seconds}/>
<button onClick={this.startCountdown}>Start</button>
<button onClick={this.stopCountdown}>Stop</button>
</div>
)
}
}
export default Timer

And the presentational component Countdown.js will just show the time remaining.

import React from 'react'class Countdown extends React.Component{
render(){
return(
<div>
<h2>{this.props.minutes} : {this.props.seconds}</h2>
</div>
)
}
}
export default Countdown

Note that this is very simple code, it still has a few bugs that I will be addressing as I continue to work and refactor this application. But it does its job in being a simple timer. Will add more features as well such as a place to keep track of your tasks and how many pomodoros have been used.

Who can use this technique?

Anyone who needs to get stuff done can use this technique from students, authors to office workers. It is often used by developers, designers or anyone who has to hand in any creative work.

Remember that this technique is a guideline. If you are heavily focused and the timer goes off, you can continue past it, just remember to actually take that break. Also keep in mind that this is just one method that you can use. It may or may not work for you.

Hopefully this can help you combat procrastination and get all the work you need to get done. I have used this method and it works for me. Just always remember to stay away from distractions and it will work wonders.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade