experience

TOPICS

#backend #bash #cli #cmder #code #commit #credentials #css #databases #disk space #docker #experience #ffmpeg #frontend #git #iis #image #jquery #js #mobile #mssql #net #netcore #network #os #post #quote #react #recycle #script #ssh #ssms #swift #syntax #tools #video #vs #vscode #windows

January 2019

  How this blog was built
January 1   |   Post

Here is a list of the resources I've used to build this blog

HUGO - The world’s fastest framework for building websites
Built using HUGO. A very interesting framework that uses GO Language. In my humble opinion HUGO is versatile, rewarding and fun. It has a helpful community not as big a another frameworks but enough to help you not to get stuck.

Logo
I appreciate the generosity, patience and creativity of MagMagnolia to create the Logo. Follow her on her social networks for great and inspire content.

Developer Icons
For the developer Icons I'm using two different libraries Devicon by Konpa and Devicons by Vorillaz. To make it work on CCS I use @font-face, font-family and content property specifying the unicode character code.

@font-face {font-family:'devicon';
src:url('../fonts/devicon.eot');
src:url('../fonts/devicon.eot') format('embedded-opentype'),
url('../fonts/devicon.woff') format('woff'),
url('../fonts/devicon.ttf') format('truetype'),
url('../fonts/devicon.svg') format('svg');
font-weight: normal;
font-style: normal;
}

.cat-Csharp {
position:relative;
font-family: "devicon";
padding-left: 35px;
}
.cat-Csharp:before {
content:"\e637";
position:absolute;
top:0;
left:0;

    font-size: 1em;
    color: blue;

}

Theme
For the theme I've been inspired by Inbox by Google, a project that sadly is not active anymore. I use Material Admin Responsive Theme, Paper Collapse and a lot of CSS code and tweaks. The site icons are from Material Design Iconic Font

Stickers
Inside the post you'll find some stickers images, these images are in the modern webp format, the source of some of them are from Telegram community and the rest is just a cartoon of myself. To make it easy to work within HUGO, I've created some shortcodes so it could be embedded inside the markdown.

Auto Scrolling
This blog don't use traditional pagination instead it will load the post using scrolling, to implement this I rely on Infinite Scroll, make it work was an interesting challenge. In HUGO i've created a partial layout where I use a mix of javascript code along with HUGO pagination syntax, furthermore I've to activate the paper collapse on the new dynamically loaded elements.

Hosted at Netlify
Hosted at Netlify, pleasantly surprised with the quality and speed of netlify.


It has been an engaging and appealing challenge, and that's something we should always look for in our projects, to have fun and learn

#post #experience