Logo

Curiosity and observation to understand the problem and imagination and creativity to develop the solution are fundamental skills for a developer.

But also to be a secret agent, chess player champion, fisherman and Sherlock Holmes.

That's why I've learned about a few tools...

Javascript

JavaScript (JS) is an interpreted programming language with first-class functions that conforms to the ECMAScript specification.

Alongside HTML and CSS, JavaScript is one of the core technologies of the World Wide Web. JavaScript enables interactive web pages and is an essential part of web applications. The vast majority of websites use it, and major web browsers have a dedicated JavaScript engine to execute it.

While it is most well-known as the scripting language for Web pages, many non-browser environments such as Node.js also use it.

Bootstrap

Bootstrap is an open source front end development framework for the creation of websites and web apps. The Bootstrap framework is built on HTML, CSS, and JavaScript (JS) to facilitate the development of responsive, mobile-first sites and apps.

More information here

Atom

Atom is a free and open-source text and source code editor built for macOS, Linux, and Microsoft Windows using Electron framework.

Atom has support for plug-ins written in Node.js, and embedded Git Control, developed by GitHub. Most of the extending packages have free software licenses and are community-built and maintained.

More information here

Babel

Babel is a free and open-source JavaScript transcompiler that can be used to convert ECMAScript 2015+ (ES6+) code into a backwards compatible version of JavaScript that can be run by older JavaScript engines.

Babel allows developers to use the newest features of the JavaScript programming language without having to worry about compatibility for older browsers.

To make the code compatible across a wide range of browsers, Babel transforms (transpiles) the source code into older javascript versions and provides polyfills that add support for new features in old browsers

More information here

CSS

Cascading Style Sheets (CSS) is a language used for describing the presentation of a document written in a markup language like HTML.

CSS is designed to enable the separation of presentation and content, including layout, colors, and fonts.

The name cascading comes from the specified priority scheme to determine which style rule applies if more than one rule matches a particular element. This cascading priority scheme is predictable.

D3

D3.js (also known as D3, short for Data-Driven Documents) is a JavaScript library for producing dynamic, interactive data visualizations in web browsers.

It makes use of Scalable Vector Graphics (SVG), HTML5, and Cascading Style Sheets (CSS) standards.

In contrast to many other libraries, D3.js allows great control over the data representation and final visual result.

More information here

Gimp

GIMP is an acronym for GNU Image Manipulation Program. It is a freely distributed program for such tasks as photo retouching, image composition and image authoring.

It can be used as a simple paint program, an expert quality photo retouching program, an online batch processing system, a mass production image renderer, an image format converter, etc.

GIMP is designed to be augmented with plug-ins and extensions and provides an scripting interface allowing from the simplest task to the most complex image manipulation procedures to be easily scripted.

More information here

Git

Git is a free and open source distributed version control system for tracking changes in source code during software development.

Designed to handle everything from small to very large projects with speed, efficiency and data integrity.

Every Git directory on every computer is a full-fledged repository with complete history and full version-tracking abilities, independent of network access or a central server.

Git can be connected to a server to share the local repository with remote repositories making the code available for all contributors and therefore providing a mechanism to work on the same project in a collaborative way.

However, nowadays there is no need to set up a Git server as several companies such as SourceForge, GitHub, GitLab, Bitbucket etc. provide hosting for git repositories.

Pug

Template engine for javascript applications where nesting elements are defined in function of the indentation, so that there is no need for open and closing tags

Pug supports inheritance and partials, provides logic controls for iteration and branching among other characteristics

The main advantage is that pug code is clean and easy to read

More information here

Less

Less (Leaner Style Sheets; sometimes stylized as LESS) is a dynamic preprocessor style sheet language that can be compiled into Cascading Style Sheets (CSS) and run on the client side or server side.

The indented syntax of Less is a nested metalanguage, as valid CSS is valid Less code with the same semantics.

Less provides the following mechanisms: variables, nesting, mixins, operators and functions and allows real-time compilation

More information here

Freemarker

FreeMarker is a Java-based template engine focusing on the MVC software architecture. Although it’s mostly used for Servlet-based Web Application development, it can be used for any other kind of text output, such as generating CSS, Java source code, etc.

Freemarker is highly suitable wherever there is a need to customize the output in various formats and dynamically.

More information here

HTML

HTML (HyperText Markup Language) is the most basic building block of the Web.

It describes the structure of a web page semantically. Other technologies besides HTML are generally used to describe a web page's appearance/presentation (CSS) or functionality/behavior (JavaScript).

"Hypertext" refers to links that connect web pages to one another, either within a single website or between websites.

HTML elements are the building blocks of HTML pages. With HTML constructs, images and other objects such as interactive forms may be embedded into the rendered page.

Inkscape

Inkscape is a free and open-source vector graphics editor. This software can be used to create or edit vector graphics such as illustrations, diagrams, line arts, charts, logos, business cards, book covers, icons, CD/DVD covers, and complex paintings.

Inkscape's primary vector graphics format is Scalable Vector Graphics (SVG); however, many other formats can be imported and exported.

More information here

java

Java is a general-purpose programming language that is class-based, object-oriented, and designed to have as few implementation dependencies as possible.

It is intended to let application developers write once, run anywhere (WORA), meaning that compiled Java code can run on all platforms that support Java without the need for recompilation.

Java applications are typically compiled to bytecode that can run on any Java virtual machine (JVM) regardless of the underlying computer architecture.

The syntax of Java is similar to C and C++, but it has fewer low-level facilities than either of them.

More information here

Node JS

Node.js is an open-source, cross-platform, JavaScript runtime environment that executes JavaScript code outside of a browser.

Node.js lets developers use JavaScript to write command line tools and for server-side scripting—running scripts server-side to produce dynamic web page content before the page is sent to the user's web browser.

Consequently, Node.js represents a "JavaScript everywhere" paradigm, unifying web-application development around a single programming language, rather than different languages for server- and client-side scripts.

More information here

nunjucks

Nunjucks is a full featured templating engine for javascript, heavily inspired by jinja2.

Rich Powerful language with block inheritance, autoescaping, macros, asynchronous control, etc.

More information here

React

React is a JavaScript library for building user interfaces. It is maintained by Facebook and a community of individual developers and companies.

React can be used as a base in the development of single-page or mobile applications.

However React is only concerned with rendering data to the DOM and so creating React applications usually requires the use of additional libraries for state management, routing, and interaction with an API. such as Redux, React Router and Axios.

More information here.

Sass

Sass (short for syntactically awesome style sheets) is a style sheet language that uses SassScript, a simple scripting language used in Sass files.

Sass is a preprocessor scripting language that is interpreted or compiled into Cascading Style Sheets (CSS).

SassScript is the scripting language itself. Sass consists of two syntaxes. The original syntax, called "the indented syntax," uses a syntax similar to Haml. It uses indentation to separate code blocks and newline characters to separate rules. The newer syntax, "SCSS" (Sassy CSS), uses block formatting like that of CSS. It uses braces to denote code blocks and semicolons to separate lines within a block. The indented syntax and SCSS files are traditionally given the extensions .sass and .scss, respectively.

More information here

tailwindcss

Highly customizable, unopinionated and low-level CSS framework that provides all of the building blocks to build bespoke designs.

It provides wide range of utility classes that allows to set the styles in the HTML, a mechanism to abstract common patterns and is highly customizable. Allowing and easy way to set consistent designs and avoiding the CSS bloat.

More information here

webpack

webpack is an open-source JavaScript module bundler primarily for JavaScript, but it can transform front-end assets like HTML, CSS, and images if the corresponding loaders are included.

webpack takes modules with dependencies and generates a dependency graph allowing web developers to use a modular approach for their web application development purposes.

It can be used from the command line, or can be configured using a config file. Which is used to define rules, plugins, etc., for a project.

webpack is highly extensible via rules which allow developers to write custom tasks that they want to perform when bundling files together.

More information here

  •  
    ireland weather app

    • heroku

    • d3.js/visx

    • react

    • redux

    • express

    • nodejs

    Check the application here »

    Simple app built using d3.js, react and express that shows the weather in ireland.

    The frontend is built using react, redux and d3 libraries and connected to a simple express application (nodejs framework) hosted on heroku. the backend uses the weather api openweather and the geocoding api nominatim.

    the backend also caches the daily requests so that the requests to the apis are minimized

    to see the aplication code, you can find the frontend repository here and the backend here

    How to use the application:

    The application shows a map of Ireland where the user can select any location on the map to show the weather for that area in particular.

    The user also can search for a place in ireland using the input box at the top right

    If the user is only interested in an area in particular, it also can hover over the weather icon to see more information about that area or select it in the side section

  •  
    Webpack Boilerplate Landing Page

    • Webpack

    • Babel

    • PostCSS

    • Javascript

    • HTML

    • CSS

    check the test landing page here »

    A simple landing page built from the template Notify PSD Theme from 365psd.com.

    The motivation of this project is to test the Web project Boilerplate, which I built using Webpack, Babel and PostCSS to have a starting point on future projects for static websites.

    The boilerplate provides a basic webpack configuration to quickly get the project running and allow the developer focus on the website code instead on the configuration.

    Among other characteristics, the boilerplate provides a live server with hot reloading, brotli compression and javascript and CSS polyfills using postCSS and babel for old browsers compatibility.

    The landing page is set on the Netlify platform which provides a node environment to build the webpack project. Netlify pulls the code from the master branch of the github repository and compiles it every time there is a new commit.

  •  
    Portfolio Webpage

    • Webpack

    • Babel

    • PostCSS

    • Javascript

    • Pug

    • tailwindcss

    This webpage has been built on top of the web project boilerplate which includes libraries such as Webpack, babel and postcss to bundle an efficient and small deliverable that works in a wide range of browser using as well the las technologies

    The project has been built using ECMAScript 2018 syntax and last CSS features such as clip-path and mask-image relaying in Babel and PostCSS Preset Env to make it compatible with a wide range of browsers

    It uses Pug template engine and tailwindcss CSS framework. Therefore the developer can see the structure (markup) and styles (tailwindcss utility classes) in the same file

    The page has been divided into layouts: unique parts of the page, components: parts that can be used more than once and across different sections, styles with general styles and scripts with general javascript helpers and code

    Either components and layouts have a pug, style and css file. The content of those files are specific for the component/layout but also general styles or javascript code might be required. The CSS or JS required might be in the scripts or styles folders but also imported from libraries such as tailwindcss or interact

    The content is abstracted from the markup, css and javascript in the folder data, which contains a cson file for each section with all the content. So that to manage content is relatively easy without having to do changes in the code files

    The code is minified in the deployed version , therefore to see a readable version just visit the Gitlab repository here

    The page has been hosted using Netlify which pulls the code directly from the repository and compiles it every time there is a new commit into the master branch

Antonio

I've always been extremely curious and when I was a kid I use to open all kind of devices that fall in my hands just to know how they work. By the age of 15 I knew how different devices such as TVs, fridges, cars and computer work. I also developed a good problem solving skills as I always had to fix them which was easier than explain it to my parents.

I decide to study environmental science and learn how that incredible machine called life works. but at the same time I learn how to build a computer, or turn my console into a media player or install linux. Basically I realized that my real passion was coding

During my years at college coding and solve computer issues was in my list of hobbies, sharing the same position than cycling, swimming, enjoying a good movie in the cinema, make a good meal (or enjoy the good meal in a restaurant) and catching up with your friends while having a beer

In 2012 I decided to move abroad to learn English. I move to Ireland where I found fantastic opportunities to develop my coding skills and become a Web Developer

Today I feel lucky as I can say that my work is my hobby.

Web Developer

In my opinion a good developer should be curious with a strong ability to observe and find possible issues. It also needs a strong imagination to create and apply the possible solutions.

Beside those soft skills, a developer needs dedication to learn and experiment about new technologies, libraries and frameworks as Information Technology is a sector where everything move fast and applications quickly get outdated

As a Web developer I use my curiosity and problem solving skills that I have since I was a kid and I also apply the scientific techniques and methods that I learnt at college.

But that is not enough, I studied a higher diploma in software development and I became a fan of online learning platforms such as udemy or coursera where I keep updated about new libraries and frameworks.

I focus on quality and I always try to get the most simple an efficient solution believing that this is the way to get reusable and maintainable code

When I'm not working in new projects, I go back and rewrite the old ones, trying new frameworks and different ways to achieve the solution. So that, I always keep gaining experience and learning about new technologies.

Why and Who is Silveste?

When I started college I had to set my user to get access to the IT services. I had to choose a nickname and obviously Antonio was already taken. Luckily in the college IT room, in front of me there was an old poster of the movie Demolition Man, I remember asking myself how that poster ends up in that room and then I took Silvester (leaving Stallone) as a nickname.

However, the system required max 8 chars so I got rid of the "r" and it end up being Silveste. Since then, I kept using it for other accounts following the principle don't change something that works.

The avatar came later, when a group of friends and me ordered to Helena Bermejo a drawing with all of us as a present for another friend

Helena created an individual drawing of each of us and then put all together. she did such a good job that since then, I started to use my own drawing as my avatar for all my accounts.

Nowadays the main reason of Silveste and the avatar, is that is better SEO strategy than Antonio Fernandez. Silveste is less common, easier to find and unlike my photo, the drawing will never change.