Forem: Ivan Szebenszki

Yup

Ivan Szebenszki — Sun, 24 Nov 2019 21:03:10 +0000

Yup is a simple object schema validator I came across recently. It is inspired by Joi, but smaller than that, so it is probably a better fit to the client side.

Install

npm install -S yup

It is recommended to install the types if you want to use it with TypeScript.

npm install -D @types/yup

Usage

First we can define a schema, then call validate method to validate the passed data. It is asynchronous, it returns a Promise that going to be fulfilled with the data or rejected with ValidationError.

validate can take a second parameter: an options object. By default validation returns on the first error; if we need to all of the errors returned we must set abortEarly to false.

import { object, string } from 'yup';

const schema = yup.object().shape({
  firstName: yup.string().required().max(10),
  lastName: yup.string().required().max(10),
  email: yup.string().email()
})

schema.validate({
  firstName: 'Usagi',
  lastName: 'Yojimbo',
  email: 'usagi@yojimbo.jp'
}, {abortEarly: false}).then(valid => {
  console.log('valid:', valid)
  // { firstName: 'Usagi',
  //  lastName: 'Yojimbo',
  //  email: 'usagi@yojimbo.jp' }
}).catch(err => {
  console.log('err:', err.errors)
})


schema.validate({
  firstName: 'Usagi Yojimbo',
  //lastName: 'Yojimbo',
  email: 'usagiyojimbo.jp'
}, {abortEarly: false}).then(valid => {
  console.log('valid:', valid)
}).catch(err => {
  console.log('err:', err.errors)
  // err: [ 'firstName must be at most 10 characters',
  // 'lastName is a required field',
  // 'email must be a valid email' ]
})

We can easily validate a number or a string...

const schemaNumber = yup.number().truncate('floor').positive().notOneOf([11,2,3])

schemaNumber.validate(-11.2).then(console.log).catch(err => console.error(err.errors))
// err: [ 'this must be a positive number' ]

schemaNumber.validate(11.2).then(console.log).catch(err => console.error(err.errors))
// err: [ 'this must not be one of the following values: 11, 2, 3' ]

schemaNumber.validate(1.6).then(console.log).catch(err => console.error(err.errors))
// 1

const schemaString = yup.string().min(2).max(5)

schemaString.validate('yup').then(console.log).catch(err => console.error(err.errors))
// yup

schemaString.validate('yupyup').then(console.log).catch(err => console.error(err.errors))
// [ 'this must be at most 5 characters' ]

schemaString.validate('').then(console.log).catch(err => console.error(err.errors))
// [ 'this must be at least 2 characters' ]

...but the yup shines the most when we have to do something more complicated. Let's say our object has to have student_id key when the age is under 18, otherwise we don't care about it.

const schema = yup.object().shape({
  name: yup.string().required(),
  age: yup.number().required().min(1).max(100),
  student_id: yup.string().when('age',{
    is: age => age < 18,
    then: yup.string().length(8).required()
  })
})

schema.validate({
  name: 'Usagi Yojimbo',
  age: 22,
}, {abortEarly: false}).then(valid => {
  console.log('valid:', valid)
}).catch(err => {
  console.log('err:', err.errors)
})
// valid: { name: 'Usagi Yojimbo', age: 22 }

schema.validate({
  name: 'Usagi Yojimbo',
  age: 17,
}, {abortEarly: false}).then(valid => {
  console.log('valid:', valid)
}).catch(err => {
  console.log('err:', err.errors)
})
// err: [ 'student_id is a required field' ]

schema.validate({
  name: 'Usagi Yojimbo',
  age: 17,
  student_id: '1234',
}, {abortEarly: false}).then(valid => {
  console.log('valid:', valid)
}).catch(err => {
  console.log('err:', err.errors)
})
// err: [ 'student_id must be exactly 8 characters' ]

schema.validate({
  name: 'Usagi Yojimbo',
  age: 17,
  student_id: '12345678',
}, {abortEarly: false}).then(valid => {
  console.log('valid:', valid)
}).catch(err => {
  console.log('err:', err.errors)
})
// valid: { name: 'Usagi Yojimbo', age: 17, student_id: '12345678' }

We can even remove the unnecessary key.

const schema = yup.object().shape({
  name: yup.string().required(),
  age: yup.number().required().min(1).max(100),
  student_id: yup.string().when('age',{
    is: age => age < 18,
    then: yup.string().length(8).required(),
    otherwise: yup.string().transform(x => undefined)
  })
})

schema.validate({
  name: 'Usagi Yojimbo',
  age: 22,
  student_id: '12345678',
}, {abortEarly: false}).then(valid => {
  console.log('valid:', valid)
}).catch(err => {
  console.log('err:', err.errors)
})
// valid: { age: 22, name: 'Usagi Yojimbo' }

I found yup very useful when I have to validate user inputs in React. I just update the form values in the state, call the validation when user types something and render the error messages next to the form elements.

Thanks for reading it. Happy coding. ❤

Say hello.
LinkedIn | Github | Instagram

My first Coderetreat

Ivan Szebenszki — Sun, 17 Nov 2019 11:58:00 +0000

This Saturday I attended my first Coderetreat and I had a great experience attend. Unfortunately it is an annual event, so if you missed it this year you have to wait one year. 😩

What is Coderetreat?

Coderetreat is a day-long, intensive practice event, focusing on the fundamentals of software development and design. By providing developers the opportunity to take part in focused practice, away from the pressures of 'getting things done', the coderetreat format has proven itself to be a highly effective means of skill improvement. Practicing the basic principles of modular and object-oriented design, developers can improve their ability to write code that minimies the cost of change over time.

Hard to add anything to this, it's a pretty good summary of what we were doing all day. We tried to implement (Conway's Game of Life) in pairs over five 45-minute sessions. Working with a new pair in each sessions, ideally using another language and - after the first warm-up session - adhering some extra rules...

For each session we had 4 rules of simple design.

My code pass all tests
My code express intent
My code doesn't have duplications
My code is small

I am sure most of the coders implemented Game of Life at early career stage, here's mine from a few years back, using React and generating the board as an SVG... Not very effective I guess.

The first sessions

The first session was about learning the rules of the game, get comfortable with the environment. I used my main language - Javascript - in the first two sessions, but we had very different approach.

In the first session we had a board with a limited size, and we stored the board in a 2D array. Every cell was a string - either 'empty' or 'alive'. 🤯 Well, it was a warm-up session...

In the second session we wrote a class and passed the coordinates of live cells to the constructor as pair of numbers. We treated the board as infinite, so we just iterated over the living cell in the step method to decide the cell lives or dies in the next generation.

In the second sessions we had to follow an extra rule form a list. E.g. no mouse, text editor only, use REPL. We chose ping-pong - one person writes a test, the second one the code, then the second one writes a test and the first one writes the code.

Third session

In this session I worked in Java and Groovy for writing test. Apart from a small code challenge for a job last week, I have not used Java for 3-4 years and never touched Groovy. I cannot remember which extra rule we followed, but the biggest challenge was getting used to my pair's Ultimate Hacking Keyboard. I must say it is a great keyboard, I liked it, but using a Windows labeled keyboard on a Mac without a mouse extension... It was really challenging. He suggested many times getting a normal keyboard for me, but I refused.

The last two sessions

In these session we cheated a little bit as I worked with the same pair and we did not delete the code after the forth session. As I want to learn Python I was happy to work in it and we just bumped into a problem that both of us wanted to solve. In the forth session we followed Object Calisthenics. At least we tried...

In this sessions we also treated the board as infinite. We were very close to fully implement our step method, even checking the neighbours of the living cells if they can come alive having exactly three neighbours.

Conclusion

It was a very good day with lot of fun. It was good to meet nice people, doing pair programming with them. I believe I learned a lot about how to approach problems, it was good to do some coding in languages I hardly or never use. I was thinking about learning Python and after doing two sessions in Python I am definitely going to do it by the end of this year.

About 50-60 people came, we formed a big circle at the end and shared our thoughts about what we learned, if there was anything that surprised us during the day.

I recommend everyone attending Coderetreat next year. As it is a global event, anyone can easily find an event nearby. If not there are virtual events where coders usually use VSCode Live Share to do pair programming.

Thank you for Codurance for hosting us. Big kudos.

Thanks for reading it. Happy coding. ❤️

Say hello.
LinkedIn | Github | Instagram

Handling objects with Ramda

Ivan Szebenszki — Sun, 10 Nov 2019 18:09:28 +0000

I recently started learning functional programming and found this awesome library: Ramda. In this post I will show how easy handling objects is with Ramda.

What is Ramda anyway?

Ramda is a functional programming library that emphasises pure function style, immutability and side-effect free functions. It is build of a bunch of small functions that can work effective together.

All these functions are automatically curried, it other words they can called with less argument than they expect. In that case they return a function that holds the argument already passed and expects the rest.

prop, propOr

Let's say we want to log the maths grade of each student or log 'No grade' if they don't have maths grade.

import * as R from 'ramda';

const student1 = {
  name: 'Alice',
  grades: {
    english: 'B',
    history: 'C',
    biology: 'D',
  },
};

const student2 = {
  name: 'Bob',
  grades: {
    maths: 'A',
    english: 'B',
    history: 'C',
  },
};
const student3 = {
  name: 'Cecile',
};

const students = [student1, student2, student3];
students.forEach(student => {
  const grade =
    student.grades && student.grades.maths ? student.grades.maths : 'No grade';
  console.log(`${student.name} \t ${grade}`);
});

// Alice    No grade
// Bob      A
// Cecile   No grade

I can't say it is easy to read and if we had more deeply nested objects the code would become very ugly very quickly. With Ramda the same code would look like this.

import * as R from 'ramda';

const gimmeTheGrades = R.prop('grades'); 

students.forEach(student => {
  const grade = R.propOr('No grade', 'maths', gimmeTheGrades(student));
  console.log(`${student.name} \t ${grade}`);
});

// Alice    No grade
// Bob      A
// Cecile   No grade

gimmeTheGrades is a function that returns the grades property of the object I pass to it, if no grades then it simply returns undefined. propOr takes an extra argument - default value. If the result is falsey, it returns the default value.

If I needed a grade with default value somewhere else later in my app, I would have done this.

import * as R from 'ramda';

const gimmeTheGrades = R.prop('grades');
const gradeWithDefault = R.propOr('No grade');

students.forEach(student => {
  const grade = gradeWithDefault('maths', gimmeTheGrades(student));
  console.log(`${student.name} \t ${grade}`);
});

// Alice    No grade
// Bob      A
// Cecile   No grade

path, pathOr

What if we need a value of a deeply nested property? We can use path or pathOr. It works the same as prop and propOr, but takes an array of stings, instead of one single string.

import * as R from 'ramda';

const gradeWithDefault = R.pathOr('No grade');
const gimmeTheMathGrade = gradeWithDefault(['grades', 'maths']);

students.forEach(student => {
  const grade = gimmeTheMathGrade(student);
  console.log(`${student.name} \t ${grade}`);
});

// Alice    No grade
// Bob      A
// Cecile   No grade

getter/setter

It is very easy to define getter and setter functions for a property with lens function. The first argument a function that gets the property, the second is the one that sets it. The setter should not change the data structure.

import * as R from 'ramda';

const gradeWithDefault = R.pathOr('No grade');
const mathsLens = R.lens(
  gradeWithDefault(['grades', 'maths']),
  R.assocPath(['grades', 'maths']),
);

console.log(R.view(mathsLens, student1)); // No grade
console.log(R.view(mathsLens, student2)); // A

const newStudent1 = R.set(mathsLens, 'F', student1);
const newStudent2 = R.set(mathsLens, undefined, student2);

console.log(R.view(mathsLens, newStudent1)); // F
console.log(R.view(mathsLens, newStudent2)); // No grade

console.log(newStudent2);
// {
//   name: 'Bob',
//   grades: { maths: undefined, english: 'B', history: 'C' }
// }

Note: new Student has grades.maths property, but it is undefined.

objOf, mergeLeft

objOf creates an object with a single key:value pair, which can be merged with another object, so if we want to create an array with student objects we can do it like below.

import * as R from 'ramda';

const names = ['Alice', 'Bob', 'Cecile'];
const defaultStudent = {
  grades: {
    english: null,
    history: null,
    biology: null,
  },
};

const createSudents = R.pipe(
  R.map(R.objOf('name')),
  R.map(R.mergeLeft(defaultStudent)),
);

const students = createSudents(names);

console.log(students);

pipe takes functions as arguments and call them in order, passing the result of each function to the next. First we map through the names and create objects with a name property.

[ { name: 'Alice' }, { name: 'Bob' }, { name: 'Cecile' } ]

Then we feed this to the next map and merge each one with defaultGrades.

[
  {
    name: 'Alice',
    grades: { english: null, history: null, biology: null }
  },
  {
    name: 'Bob',
    grades: { english: null, history: null, biology: null }
  },
  {
    name: 'Cecile',
    grades: { english: null, history: null, biology: null }
  }
]

Thanks for reading it. Happy coding. ❤

Say hello.
LinkedIn | Github | Instagram

VSCode tips and tricks

Ivan Szebenszki — Sun, 03 Nov 2019 16:44:43 +0000

From time to time I spend some time with playing tools I use everyday in order to be more productive. It's easy to keep using the features I already know, even though there is a better way. This week I played with VSCode, here is what I learned.

Shortcuts

Navigation

I usually used the touchpad or Cmd + P to select a file from the sidebar or navigate between open files, but using shortcuts made it much quicker. You can switch between the editor and the sidebar by pressing Cmd + Shift + E, then navigate by cursor key and open the selected file with Cmd + Down. To switch between open tab Ctrl + Tab or Ctrl + Shift + Tab can be used.

Insert line

I did not know that I can insert a new line below or above the current line by pressing Cmd + Enter and Cmd + Shift + Enter respectively. Usually I navigated to the end or beginning of the current line and pressed Enter, but it is much easier with these shortcuts.

Go to/peek definition

This is not new for me, but I put it here as it is very useful feature. If you press F12 VSCode jumps the definition of the symbol under the cursor. If you press Alt + F12 VSCode does not jumps there, but open the definition as an overlay, so you can have a quick look. It is worth to mention Cmd + Shift + O that opens a list of symbols, so you can jump to any of them very quickly.

Others

Ctrl + Shift + G Show Git
Ctrl + K, P Copy full path of the current file
Ctrl + K, W Close all open files
Ctrl + K, R Reveal current file in explorer
Cmd + Ctrl + Shift + Right Expand selection
Cmd + Ctrl + Shift + Left Shrink selection

Extensions

Overtype

I always missed overtype mode from VSCode, but finally found this extension. It shows the current mode in the status bar and by pressing Cmd + Shift + I you can switch to overtype mode and back.

TODO Highlight

I usually use TODO and FIXME tags in comments to mark what I have to do later, and just use VSCode 'Find in files' function to find these marks later. Of course there is a better way: TODO Highlight. It is a very simple, but very useful extension. By default it highlights TODO: and FIXME: in your code, but it is highly configurable: other tags can be added, files can be included or excluded. It also can give you a list of all tags in your project.

Thanks for reading it. Happy coding. ❤

Say hello.
LinkedIn | Github | Instagram