Michael @ Work :: Space

Responsive design without media queries

This is absolutely awesome that it is possible to create responsive web-design without using media queries at all. Using the vh, vw, vmin and css properties. That's what I've done today: http://michaelatwork.space/projects/fcc-quote-machine/

Here is the codepen link: https://codepen.io/Glaux/full/KrRovx/

My Personal Portfolio page on Bootstrap

This is another one I did a week ago and even had no time to post it. I'm so excited with the new things I learn every day that I can't tear myself away from it )
http://michaelatwork.space/projects/fcc-portfolio/

Quote Machine

Working on my quote machine app: http://michaelatwork.space/projects/fcc-quote-machine/ and learning JavaScript, AJAX and JSON on the way.

All the design work in this project is also made from scratch. For the book and seagulls I used Adobe Illustrator and then saved it to SVG format. Then I used it as inline SVG so I could change it's colors with JS and CSS.

I need to redesign this blog (and probably the whole website) and fill my development and design sections with the stuff I've already created but can't find the time for it (

Having fun with bootstrap

http://michaelatwork.space/projects/front-end-developers-team/

Back-end stuff learning

Recently I had to reset my Digital Ocean drop let and setup everything from scratch. Here some new things I've learned on the way:

  • capistrano
  • unicorn
  • automatic database backups
  • zero downtime deployment

Upgrading Rails Foundation from version 5 to 6 (with Flexbox enabled)

Just updated Foundation framework in my Rails app and here is how it can be done.

PART 1: Updating foundation-rails gem

1) save your current project state (i.e. git commit)
2) gem update

bundle update foundation-rails
...
Using foundation-rails 6.2.3.0 (was 5.5.3.2)

3) install foundation framework...

Learning Front-End on freeCodeCamp

I decided to try freeCodeCamp and I like it. This was my first challenge today:

See the Pen FreeCodeCamp : Build a Tribute Page by Michael (@Glaux) on CodePen.

I decided to try to make it as close as possible to the original one (without peeking in the code itself). Otherwise this would not be much of a challange if I can do it in any style i want. And also i haven't used CSS styling and did inline HTML styling which was also intentionally and a part of a problem.

Centering content in centered flexboxes

Flexboxes are awesome :)

See the Pen Centered content inside centered flexbox items by Michael (@Glaux) on CodePen.

Starting CSS animation

Having fun with CSS animation

See the Pen Starting CSS animation by Michael (@Glaux) on CodePen.

Font face optimization

For those who really into app performance optimization this is must see video about embedding fonts: https://t.co/yCuBTcANy3
Until now I included my fonts like this:

But this does extra http request. And we don't need it. So here is what can be done to get rid of these requests:
1) I go to https://fonts.google.com and download my fonts
2) Then I go to https://www.fontsquirrel.com/tools/webfont-generator upload all of my fonts and choose expert settings. There I pick only Woff format, Custom subsetting (with only basic latin and punctuation selected). CSS Base64 Encode. And save my settings. That's it. Then I just click Download your kit.
3) And for one of my fonts I get 10 times less size (30kb against 350kb initially) and for another twice less size. And this is pretty cool thing. There is still slow internet in many places out there. And this is besides getting rid of http requests.
4) Next thing I open the stylesheet.css file which is downloaded along with the fonts and copy it's contents to my project stylesheet file.
5) And the last thing is for those browsers that still doesn't support woff. I go to https://css-tricks.com/snippets/css/font-stacks/ and choose the appropriate font stack for each font I use.

27th May learning log

  • Added Modific plugin to Sublime which shows differences to the last commit
  • Learned how to use Faker gem, which is very convenient tool for db populating
  • Learned how to remove files and directories from Sublime goto anything search
  • Started to work on AWD Depot app refactoring it to slim on the way
  • Watched a couple of screencasts on database populating subject
  • Learned how to change the default port of rails server

Sublime plugins day

Today was sublime customizing and learing day. But not only this.

  • Discovered AlignTab plugin for Sublime to make code align to desired character and look nicer
  • Discovered ColorHighlighter plugin to highlight color codes with respective colors
  • Discovered BracketHighlighter plugin ...

24th May progress

Today was a pure Ruby day :) I was solving the problems from a RoR junior developer position interview. It was kind of a challenge to me but I managed to solve them though not the best way and not very fast. But I really enjoyed doing it and that's what matters.

23rd May progress

  • Sorted out :: operator functionality and purpose
  • 15 pages of Agile web development
  • Watched videos 1,2 of Bootstrap training course and did some experiments with my blog design according to this new stuff I learned
  • Stumbled upon a great search engine for developers Symbolhound. And it is just what i needed

Active Admin defaults, DateTime stuff and Rails 4.2 new cool truncate_words() metod

Here is my today's progress:

  • Since yesterday's evening I was looking for a solution to a problem with setting the default value to the published_at field in my ActiveAdmin panel. And this morning I found it ...

21th May progress

  • Replaced tabs with spaces in the project for GitHub reading convenience
  • Added published_at field to the Post model
  • Learned how to rename a model column
  • Changed posts sorting to :id instead of :created_at as it indexed field, thus it is faster to operate with
  • Changed fonts ...

20th May progress

  • Removed CKEditor as it seems to be heave and hard to customize and added markdown with RedCarpet and Rouge instead of it
  • Learned some CSS styling
  • Read 20 pages of Agile Web Development with Rails 4

Fixing a problem with Rails server being slow in development

It started recently. Don't know what caused this. But it took around 7-8 seconds to load the index page. Which is almost empty at the moment.
So after some googling I found out that changing these two lines to false in development.rb solves this problem:

config.assets.debug = false
config.assets.raise_runtime_errors = false

Not sure if it affects on something important. Will keep it in mi...chaelatwork.space

Active Admin and CKEditor gems

When I started to build my website on Rails I didn't expect to find what I have found today. It is Active Admin and CKEditor gems which turned out to be extremely convenient and easy to customize. With them I already have the biggest part of my blog functionality ready. And what is also very nice is that Active Admin works with Devise almost out of the box.
And maybe even more important is that Active Admin would be a great gem to use in any real project, like online shopping app for instance.

Blog is Live!

Yay!

Finally I managed to launch my blog on Rails and (mostly) about Rails and all that dev stuff which comes along. This is my first experience both with Rails development and in creating my own website with all the hosting stuff. And I'am extremely excited about it. About implementing various features in it and creating its design. About learning lots of new interesting stuff.

I'm going to share my progress here mostly to make it more clear for myself but it would be also great to meet knew people here with similar interests.