From Logic to Code

Hello!! long time no see! 

I’ve just created a Playlist on Spotify with the Garage Inc. Original Songs, for fans like me, which loves Metallica but also the 80′s Hard Rock/Punk/Metal songs.

You can find the playlist here: 

https://open.spotify.com/user/javisperez/playlist/4dKGfbqSSQ6fva1fnOx7PI

And feel free to follow it or even improve it, if i’ve missed something.

Hey, i made 6 css only, single element, loading animation, you can see the demo here:

http://javisperez.com/experiments/singleelementsloader/

And fork it here:

https://github.com/javisperez/singleelementsloader

Hello again! i've just added a new experiment to my portfolio, please check it out. 

The idea is to animate the amplitude and frequencies of a given audio file by using html5's AudioContext API.

I've integrated the Irregular Shapes library to "shake it" a little when a beat is detected and also is integrated with the average amplitude.

Opacity is dynamic too and based on amplitude. And finally, color is based on opacity but is not so dynamic.

You can check the experiment here:

http://javisperez.com/experiments/stereosplit/

Hope you like it. Also you can fork it on github, here:

Recently i had to work with some tables for a responsive website, for some reason people might think its kinda hard to get a responsive table; and it might get hard if you try to replicate it without having in mind that responsive needs layouts modifications to work on those little screens, and tables are no exceptions.

So the first idea was to think how should the table behave on responsive (in layout terms) maybe not as a table or grid, but as cards and that was what i did. So i made a demo, hopefully will help someone.

DEMO:

http://javisperez.com/experiments/responsive-table.html

There are a lot of posts about the difference between a boss and a leader and all that stuff, but i want to post my own differences based on my real life experience. 

Hopefully your manager is not like this, enjoy.

1. You never say "thanks"

A boss, not a leader, feels like you've been paid to do your job so there is no need to say "thanks", thats part of your working conditions, and well... thats stupid :-). As employee, we all know that we must do something, but there are two ways of doing it:

A. The one who gets the employee involved as he feels part of the greatest team in the world and feels like his work is unique

B. The way where the employee just do it because the boss says so and he's there for the money

Never saying "thanks" gets you a lot of B. People want to feel gratitude for what they do, and feel like they did something to the greatest team in the world.

2. You never say "Please"

The same again, employees are there to do their work, but we all are humans (well...) and we like to feel like it, not like some robot from the Jetson.

Remember, you need more A and words like "Please" and "Thanks" are the one who'll help you.

3. You think "the employee must earn those stuff"

Ok i know, the employee must be first self motivated and shows a full engagement with the company, then you can motivate them too.

That's some of the most stupid thing i've ever heard (and i have a lot...), when you hire a person, you must trust him as the right person for the job and start your work as a manager and team motivation right the way. If that work is so hard to do, then you have a problem. It is that simple.

4. Theres no time for planing

Oh really? are you saving the world from an alien invasion? if no, then theres always time for planing, the problem is that not having a plan feels good to inexpert people.

For a plan you have to document a lot, test, get meetings and all those boring stuff that you, as the super boss you are, hate and can do all on your own in your head, so, there is no need of write it down, thats a time that can be used working, not "writing", right?

5. You never say the whole information

As you're saving the world from an alien invasion, theres no time to explain the whole ideas to your team, so, people will just know the necessary to do they slavery work, right?

Again, that's just stupid. When bosses do that, the employee doesn't know what is he doing, why is doing it, why is that important and why he needs to engage. So, the result of your clever idea is again, another B work, which means (come on kids, say it with me) NO ENGAGE.

6. No body exactly knows what you do

You're all the time saying your doing a lot of stuff, but as you're the one with the whole information all the time, no one is clear about what YOU, the super boss, do, and that makes people hates you a little more everyday.

People see a guy, that doesn't have manners (don't say thanks or please), doesn't or plan anything because theres never time (aliens are really close!) and just push em to work like horses. Again, lost of B.

7. You have like 1,000 projects unclosed together

Bad bosses feels like multi-tasking in projects is a great idea, i mean, you start 6 project at the time and then when all end you'll have 6 projects closed. Wow! that was fast! huh?

Eerm, no. Again, thats stupid. Multi-tasking is not a good idea in project management, why? because, you need to plan every single project with a timeline, gantt chart and sometimes even a pert chart, to handle times and dependencies. With multiple open projects, you cant handle time as a whole, and instead you just move tasks from time to time and "fix" in your multi-tasking world. But when time runs out, you'll left behind 6 unclosed projects, and a lot of wasted time.

8. You don't update your team

This is like point #5, but after the alien invasion project started together with the perfect pancake project (remember point #7) you give the minimum needed information to your team, and never say a word about it again unless is time to make another task.

Team needs to know "ok guys, this is done and is working as expected, good work" or "ok guys the client is happy, we did it".

Your team is more than just bad things and slavery task, needs also good feedback of a project, to motivate them and convert those B's into A's.

9. You never say "good work", "well done" or those things

Yes, "those things" like motivation words, are stupid to you, because if you say it people will stop working, right? right?! ...

You need more A's, remember that.

10. You're mad because people in your team makes fun about leaving the company or getting another work.

Well, you earned it, you have a lot of B's in your team that just goes there to do their work and leave. Don't blame them, blame you, because you are too busy saving the world from the aliens that you forgot some BASIC management stuff.

That's it for now, i have a lot more in my head but i don't want this post to be larger than this, so, wait for part 2 some day!

I can't belive, that after 15 years, i still get so happy when one of the sites i'm working on, get to production environment!

Digital product design discourse over the last few years has become literally superficial. Much (most?) of the attention has been on issues like 'flat' vs 'skeuomorphic,' the color scheme of iOS7, ...

Ok, the DB settings are working as expected, i just found al ittle problem which was that i created the droplet first, without the private network enabled (stupid me), so i had to configure it after. Thankfully, DO also had a tutorial for that, here:

https://www.digitalocean.com/community/tutorials/how-to-enable-digitalocean-private-networking-on-existing-droplets

I did it and worked like a charm! the connection with the DB host and the files droplet are amazingly fast!

So, moving on, i registered another droplet to host files only, that will be my EC2 equivalent, generated the ssh keys, created the proper configurations in bash_profiles, alias and stuff and of course installed the packages i need :D:

- Apache

- Mercurial

- PHP and tons of extensions

- MySQL (the client only)

- Tons of PECL things

Set proper permissions, hosts and i thing that basicly was everything.

Then, after configuring the virtual hosts and applications, it was time to just clone everything.

After so, i crossed my fingers and repointed my domain name dns and ip and BOOM! the dns refreshed almost instantly (great!) and the sites were up and running with no problem or bug, of course, my first though was:

But after a while, it was real! i was moved on, no bugs, no problems, a clean and transparent move :D

I love when you have a great process that really works, is so nice!

Recently i decided to move from my current cloud hosting (amazon) to Digital Ocean and try all that new thing.

First off, the terms, Amazon's instances are called droplets, so thats the term i'll be using for it :)

I registered two droplets as i have a RDS service for database and EC2 for system file, so i'll do the same.

Something really interesting is to have the domain pointing to the file server and from there, a private network connection to the database.

"Hey! Private Netwok what?!"

Ok ok, i'll explain better. Digital Ocean offers the service of private network between two or more servers in the same zone, amazing huh? So, as both of my servers are on the same zone, i can treat it like a LAN, pretty amazing!  so the connection between the file server and the database will be a LAN and not a remote connection (which is a lot slower).

First was enabling the private network while creating the droplet, like says in this tut:

https://www.digitalocean.com/community/tutorials/how-to-set-up-and-use-digitalocean-private-networking

Then, i followed some steps of this tutorial:

https://www.digitalocean.com/community/tutorials/how-to-set-up-a-remote-database-to-optimize-site-performance-with-mysql

To install my database and secure it a little bit.

While looking for an small library to make responsive websites that doesnt want to make everything for me, i've found responsive boilerplate, a tiny  library made with less that have all the basic classes to start a responsive website. Its awesome!

So i download the library, copy the css to the right place and after a little catch up to the classes names it all start working, is awesome, its like 3kb small and works like expected. It includes a cutomization are with some common media queries.

I just found a little detail that i needed and didnt have, but was really easy to add, and it was push classes (like in bootstrap) to move son elements from column to column without too much effort. 

I quickly modified the .less file, compiled and test, it worked great! :D I'm so happy!

So, like that go and test responsive boilerplate, you wont be dissapointed.

Here's the link to the original repo in Github:

https://github.com/newaeonweb/responsiveboilerplate

And here's mine with the push classes:

https://github.com/javisperez/responsiveboilerplate

Today i'll be explaining the 5 most important synthesis modules, which are:

Oscillator

Filter

Amplifier

Envelope

LFO

And instead of using Logic pro as usual, i'll be using an educative synthetizer called eduSynth, used in the course as example, because of its simplicity.

Oscillator

Also called VCO (Voltage Controlled Oscillator) is the module where the sound is created, you set some parameters and you can create a "base" sound for you to shape later and use in your synthesis.

The VCO uses algorithms that creates the sound, but because is a mathematical generation instead of a sampled solution, it uses functions to create the sound. The basic functions (or curves??) are: Sine, Triangle, Square, Sawtooth and Noise. As they're mathematical functions, their names are based on the function curve's shape.

Please remember that the sound generated is related with the voltage (VCO) which allow us to get different pitches based on voltage variations. This means that the generated sound can be of a desired frequency, allowing us to generate well tuned tones (for example 440Hz is the A note).

Filters

Something good to know is that as VCO are the sound source, it makes a lot of sense to add filters to this, that way we can EQ the sound to shape it to the timbre we want.

For example, we can add lowpass or highpass filters to the sound for a specific idea. We also have bandpass and bandshelf but the most common uses are the lowpasses because the sound generated can have too much highend and that can result in some "sound tireness".

Amplifier

Also called VCA (Voltage Controller Amplifier) is the one responsable to manipulate the gain of the sound based on voltage control (like the VCO). Its basicly an amplifier for the amplitude.

As the amplitude changes with these control, there's something called Envelope, to shape the sound volume in a more natural way, with more control of what sound and how it does it. We'll see about it right now.

Envelope

It shapes the volume to a given pattern.

The envelope has 4 importants controls which are kind of helpers that assist you pretty well. These controls are:

Attack, Decay, Sustain & Release

I think that describing those controls might be a little off-topic but in a short way:

Attack: controls the time when the sound begins, from nothing to it's maximum volume, like somekind of fade-in.

Decay: controls the time for volume to drop after the attack (that's after the volume is at 100%) to the sustain level.

Sustain: is a volume to which the note will keep playing until the note-off signal is given.

Release: controls the time for the volume, from the note-off signal to the complete silence. Like some fade-out.

LFO

The Low frequency oscillator is somekind of VCO but works at a frequency so low, that can't be hear by the human ear (lets say.. 4Hz, 1Hz or something). You might ask "why is this useful then?" well, this usually modulates the VCO, and add a little frequency that changes the whole sound. 

This little sounds are changing over time, based of a function (like the VCO) and this new sound is added to the VCO's generated frequency, creating a great sound effect that varies overtime.

I'll be explaining how to mimic the default mixers EQ controls into our favorite DAW: Logic Pro :).

The idea is to have an EQ preset to load by default so helps you to handle EQ in a "almost realistic" way.

The main idea is:

1. Set controls for frequencies:

High pass  @ 75Hz

Low shelf   @ 80Hz

Band pass @ 400Hz

Band pass @ 2KHz

High shelf  @ 12KHz

2. Save as a preset for easy access

3. Load the preset whenever you need to use it (hopefully, everytime you need to apply EQ)

I'll use the default Channel EQ plugin, that can be found in:

EQ > Channel EQ

To use a  High / Low pass filters in the Channel EQ, toggle these options, respectivly:

To use Low / High shelf filters, toggle any of these options, respectivily:

To use the 4 band pass (also called bell pass) toggle the remaining 4 buttons:

So, first, disable all bands and buttons (low pass, high pass, etc.) this way we'll ensure that only the really used buttons are going to be enabled, the rest is best to let it disabled, so we can save some CPU.

For all the settings, please set your Q on the bands to 1.00 and the gain to 0db, for the Low/High pass we'll use a Q of 0.6, that way when you need to use a band just change the gain as you need.

Lets add a High pass filter at 75Hz, you should have something like this:

Then, add the other frequencies as we said, this order:

Add a Low shelf   @ 80Hz Add a Band pass @ 400Hz Add a Band pass @ 2KHz Add a High shelf  @ 12KHz

You should have something like this:

To use it, just boost or cut the wanted frequency with the wanted amount. Also, i almost forget to mention that band frequencies are in a middle value from a range, the range is:

For the 400Hz band, you can change it based on your need from:

100Hz to 2Khz

For the 2k band, you can change it from:

400Hz to 8Khz

Based on your need mostly.

Also, you can adjust the Q values based on your need, the 1.0 and 0.6 values are just starting points to have a standard value, but is not a rule, your ears set the rules and you must is the EQ based on your needs and intentions.

This is an example of this preset being used:

Creating the preset

To create the preset is a good idea to save it with all the bands disabled, that way it wont cost us CPU if we load it and dont use it completely and just enable the one needed, can be just 1 band or the whole 5 bands.

After disabling all bands, open the presets menu and choose "Save preset as":

Call it as you want (i called mine "Mimic") and that's it! to load it, just go the presets menu again and choose your preset:

And enable the bands you want, in my case i changed the frequency to all the bands that i pretend not to use with the preset to 20Hz, that way i know that bands with 20Hz are not intended to be used.

That's it for today guys, see you next week!

Riding the fader is a term that refers to make some kind of "manual compression", used commonly to do vocals compression.

As you might know there's downward and upward compressors, usually we have downward by default in our DAW, which are the ones that lower the volume after it pass some given threshold, and upward compressors which rises the volume when it lowers below the threshold.

Sometimes we just want to "middle" the volume by getting the high volumes down and rising the low volumes up so this is were riding the fader might get useful.

The idea is to draw some volume automation with the pencil tool by following the trace of the lower part of your oscilloscope signal:

If you see that image well, the yellow line over the lower part of the oscilloscope kind of "follow" the amplitude of the signal, but just the lower part (below the signal).

To access the pencil tool in Logic 9:

Press ESC key > Press 2 or choose the pencil from the menu

This way when the volume is low, it gets higher, when its high it gets lower, simple right?

I won't cover automation as that's from a past class and we all are supossed to handle that information already, but i'll just refresh your mind and show you where the automation button is in Logic Pro 9:

This technique is useful and easy, but have some minor bad points:

What if you want to change the gain of the whole track?

Its time consuming (a lot)

You might be forced to bounce your track to be able to change some things.