Stefan Cosma

The Shifting Value of Frontend Engineering

Stefan Cosma — Thu, 21 May 2026 10:37:00 GMT

It is mid-2026, and if your social media feeds look anything like mine, you have probably seen some variation of the "AI is replacing developers" doom-posting. But if you actually spend your days building complex web applications, you know the reality on the ground is completely different.

The relationship between frontend engineering and artificial intelligence has settled into a pragmatic rhythm. AI isn't taking our jobs, but it is radically shifting where our value lies as engineers.

I recently came across an excellent visual breakdown that captures this exact dynamic perfectly:

┌───────────────────────────────────────┬───────────────────────────────────────┐
│             AI IS GREAT FOR           │           STILL VERY HUMAN            │
├───────────────────────────────────────┼───────────────────────────────────────┤
│ • Boilerplate & Setup                 │ • Messy business logic                │
│ • UI scaffolding (MUI, Tailwind, etc.)│ • Unclear or moving requirements      │
│ • Straightforward refactors           │ • Scaling frontend architecture       │
│ • Writing unit and integration tests  │ • Hunting down performance bottlenecks│
│ • Generating basic documentation      │ • Making complex UX feel simple       │
│ • Debugging obvious syntax errors     │ • Navigating real business context    │
└───────────────────────────────────────┴───────────────────────────────────────┘

The takeaway here is incredibly clear: The value of a frontend engineer is shifting from writing code fast to making good technical decisions.

The Automatable Stuff

Let’s be honest: nobody actually enjoys writing mundane boilerplate.

If I need a quick component structure, a standard form setup using Formik, or some repetitive TypeScript interface definitions, handing that off to an AI model is a massive time-saver. It’s excellent at scaffolded layouts and churning out the first draft of unit tests.

But generating lines of code has always been the easiest part of our industry. Typing speed was never the bottleneck in software engineering. The real challenge has always been knowing what to type, and more importantly, why.

Where the AI Hits a Wall

Where the algorithms completely fumble is where the actual engineering begins.

Real Business Context & Messy Logic: Software doesn't live in a vacuum. It lives in a complex ecosystem of legacy code, specific company goals, and deeply nested logic that cannot be neatly summarized in a prompt. AI doesn't know why your API returns a mutated data structure because of a legacy backend decision made five years ago; you do.
Scaling Architecture: Deciding how to structure a large-scale frontend, how to manage state across a massive monorepo, or how to design a resilient system that a team of twenty developers can contribute to without breaking things—that requires architectural vision. It requires empathy for the team and an understanding of longevity.
The Empathy of UX: A machine can build a functional interface based on a design system. But it doesn't understand the friction a human feels when navigating a complex workflow. Making the complex feel simple is an art form rooted entirely in human empathy.

The True Craft of Frontend

If you are just getting into web development, or if you are a senior engineer trying to find your footing in this new landscape, do not panic about the sheer volume of code AI can generate.

Instead, lean into the craft. Focus on understanding design patterns, performance optimization, system design, and communication. The ability to sit down with stakeholders, decode vague, conflicting requirements, and translate them into a stable technical blueprint is the most valuable skill you can possess.

AI is a fantastic co-pilot for the tedious bits. But the architecture, the decisions, and the soul of the application? That is still very human.

What are your thoughts? Have you noticed your daily developer workflow shifting away from raw coding and more toward system design lately? Let's talk about it.

Why I ditched traditional CMS platforms for a custom-built stack

Stefan Cosma — Tue, 28 Apr 2026 12:03:00 GMT

Just as the title implies, this post covers what it takes to move away from rigid, off-the-shelf CMS solutions in favor of a bespoke architecture. I wanted a setup that combined the speed of a static site with the power of a modern cloud infrastructure. To do this, I landed on a stack featuring Astro, Vercel, Cloudflare, and Supabase, with Resend handling the communication layer.

The Frontend: Performance-First with Astro

The core of the site is built on Astro, which I chose for its "zero-JS by default" footprint. While many modern frameworks ship megabytes of JavaScript for a simple blog, Astro lets me keep the frontend lean.

However, I didn't want a purely static site that requires a full rebuild every time I fix a typo. I’m utilizing Astro SSR (Server-Side Rendering) to fetch content dynamically. This gives me the best of both worlds: the SEO benefits of a static site with the real-time flexibility of a database-backed application. Everything is built using TypeScript and React, styled with Tailwind CSS, and kept clean using Biome for linting and formatting.

The Infrastructure: Cloudflare & Vercel

For the plumbing, I’m pushing my code to GitHub, which triggers an automatic deployment to Vercel. Vercel handles the SSR logic and global distribution perfectly, but I've also layered Cloudflare on top.

Cloudflare acts as the primary gateway, handling DNS and providing an extra layer of caching and security. By having Cloudflare sit in front of Vercel, I have granular control over how traffic hits the site and an added layer of protection against the usual web noise.

The Content Engine: Custom CMS & Supabase

To manage the blog, I built a Custom CMS with its own admin interface. Instead of being locked into a specific CMS provider's UI or API, I handle the full CRUD lifecycle myself.

The CMS communicates with Supabase, which acts as my database and authentication provider. When I save a post, the data is stored in my tables and instantly becomes available for the Astro frontend to fetch via SSR. It’s a seamless flow that keeps me in total control of my data schema.

Automating the Newsletter with Edge Functions

The part of this project I’m most excited about is the automated notification system. I wanted a way to notify subscribers the second a new post goes live without any manual intervention.

The logic follows a clean, event-driven pipeline:

Trigger: A new row is inserted into the posts table.
Webhook: Supabase detects the change and triggers a webhook.
Process: The webhook calls a Supabase Edge Function.
Broadcast: The function hits the Resend API, which sends a templated email to my "General Segment" of subscribers.

Final Thoughts

This rebuild wasn't just about changing where my text is stored; it was about building a cohesive system where the frontend, backend, and delivery layers work in sync. I applied the same logic to my contact page, using Resend with Audience Segments to ensure messages are categorized and formatted before they even hit my inbox.

This setup gives me total control over my content pipeline while keeping the user experience fast and accessible. If you're looking to move beyond a basic WordPress or Ghost setup, building your own stack is a challenge worth taking.

If you have any ideas on how to further optimize this infrastructure, let me know. You can reach me on most social media channels!

Beyond the Code: What I Learned Contributing to Zed’s Open Source

Stefan Cosma — Thu, 02 Apr 2026 00:00:00 GMT

If you’ve been following my work, you know I’m a bit of a stickler for my development environment. Whether it's automating Plex with Google Scripts or fine-tuning my terminal, I firmly believe the tools we use should work for us, not the other way around.

Recently, I’ve been spending a lot of time in Zed. If you haven't tried it yet, it’s a high-performance code editor built from the ground up in Rust. It feels incredibly snappy because it renders everything on the GPU at a synchronized 120 FPS—basically, it handles your code with the same fluid precision a modern video game handles graphics.

But moving to a new editor often means leaving behind the little things that make a workspace feel like "home." Instead of waiting for someone else to build what I needed, I decided to scratch my own itch. I’ve recently released two extensions: Relaxed Zed Theme and Loupe Zed.

Why Open Source Matters (Beyond the Code)

Contributing to open source is often framed as "giving back," which is true, but it’s also one of the best ways to grow as a developer. When I started working on these extensions, I wasn't just writing JSON or Rust; I was learning the internals of how a modern, high-performance editor manages buffers, themes, and sandboxing.

When you submit a Pull Request to a project like Zed, your code is vetted for performance and security. This kind of peer review is a professional "cheat code." Plus, there is a certain psychological reward in knowing that a tool you created to solve your own eye strain is now helping thousands of other developers stay focused.

Porting a Classic: The Relaxed Zed Theme

My first project was porting the Relaxed theme. Originally created by Michael Kühnel for VS Code, it uses muted, warm tones on a deep grey background to reduce eye strain during long sessions.

The technical challenge here was mapping the original TextMate-based scopes to Zed’s theme schema. Zed uses Tree-sitter for parsing, which is much more precise than the old regex-based systems we're used to in other editors.

Every Zed extension starts with an extension.toml. Here is the manifest for the theme:

id = "relaxed-theme"
name = "Relaxed"
version = "0.1.0"
schema_version = 1
authors = ["Stefan Cosma <hi@stefancosma.xyz>"]
description = "A port of the Relaxed VS Code theme. Dark theme with easy on the eyes colors."
repository = "https://github.com/stefanbc/relaxed-theme-zed"

The heart of the theme is the color palette. I spent a lot of time ensuring the hex codes matched the "relaxed" feel.

Precision Tooling: Loupe Zed

After the theme, I wanted something more functional. Loupe is a utility that shows the latest available version of your dependencies as inlay hints. It currently supports package.json (npm), composer.json (Packagist), and pyproject.toml (PyPI/Poetry).

Performance & Security

Zed extensions are sandboxed using WebAssembly (WASM). This keeps Loupe isolated and incredibly fast. To keep it from being a resource hog, I implemented a TTL cache:

Auto-refresh: Versions are cached for 5 minutes.
Manual override: Just save the file to force an immediate refresh.

Built for the Community

I kept the architecture modular. If you want to add a new registry (like Crates.io), you just implement the RegistryHandler interface. You don't need to touch the core LSP wiring.

Note: Inlay hints are off by default. Enable them in your settings (cmd+,):

{ 
  "inlay_hints": { 
    "enabled": true 
  }
}

Just Start Somewhere

If you’re on the fence about contributing, my advice is to start with something visual. A theme or a simple set of snippets is a great way to learn the packaging and distribution process without getting bogged down in complex logic.

Open source isn't just for the "elite" developers; it’s for anyone who wants their tools to be 1% better tomorrow than they are today.

Check them out on GitHub:

If you have any questions or ideas on how to improve these, let me know. You can reach me on most social media channels!

The YAGNI principle, as explained by AI.

Stefan Cosma — Thu, 23 Feb 2023 00:00:00 GMT

The bellow article is an experiment. It was written entirely by an AI to better understand the capabilities, comprehension of user inputs and reliability of current AI language models. Enjoy!

When it comes to software development, it's common for developers to overthink and over-engineer their code. However, sometimes less is more. That's where the YAGNI principle comes in. In this article, we'll take a closer look at what YAGNI is, how it can be applied in JavaScript development, and why it's an essential principle for writing clean, efficient, and effective code.

What is the YAGNI Principle?

The YAGNI principle is a development principle that encourages developers to only implement features or functionality that are essential to the application's current requirements. In other words, if a feature or functionality is not currently required, there's no need to implement it because, "You Ain't Gonna Need It." YAGNI is closely related to the KISS (Keep It Simple, Stupid) principle, which advocates for simplicity and clarity in code over complexity and cleverness.

How YAGNI can be applied in JavaScript?

The YAGNI principle can be applied in every stage of the software development process, from planning and design to implementation and testing. In practice, this means developers should only implement the features that are necessary to meet the current requirements of the application. This allows developers to avoid overcomplicating their codebase with unnecessary or premature functionality.

To see YAGNI in action, let's consider an example. Suppose we're building a simple web application that allows users to register and login. Here's some code that violates the YAGNI principle:

In this example, we have a User class with a large number of fields and methods, many of which may not be needed in the current version of the application. For example, isDeleted and updateProfile may not be essential at this stage of development. The result is an overly complex and difficult to maintain codebase.

A better implementation of the User class would be to only include the essential fields and methods required for the current version of the application. Here's a YAGNI-compliant implementation of the User class:

In this implementation, we only include the fields and methods that are necessary for registering, logging in, and logging out users. This results in a simpler, more maintainable codebase that's easier to read and understand.

The YAGNI principle is an essential development principle for writing clean, efficient, and effective code. By only implementing the features and functionality that are essential for the current requirements of the application, developers can avoid overcomplicating their codebase with unnecessary or premature functionality. By applying YAGNI in JavaScript development, developers can create a simpler, more maintainable codebase that's easier to read and understand.

As we can see in the above text, the AI managed to do a pretty good job in explaining the YAGNI concept, but as any good AI language model that uses advanced machine learning algorithms, it needs a really good input so that it can return the most accurate result. With that in mind, these "magical" tools that popped up on everyones radar, since Nov 2022, are becoming increasingly better at understanding user inputs and generating the appropriate responses.

What are your thoughts on the matter? I would love to hear them.

How To: Interview a developer, as a developer!

Stefan Cosma — Thu, 10 Nov 2022 00:00:00 GMT

Author note: This article focuses on the interview process for a Frontend position and was inspired by a post, I interacted with, on LinkedIn.

You now have a new responsibility within your company. The HR/Recruiting department needs your help in assessing candidates, for a technical position. Luckily they've come to the right person because they know you have the soft skills and technical expertise to do just that.

But you, a senior developer, know nothing about interviewing other developers. Fortunately, for you, there are several resources on the web that can help you with that. From using CodingInterview.com as a basis for your interview or requiring that the candidates finish a certain challenge on LeetCode.com, there are multiple ways you can create your process of assessment. You could even use this great article as a starting point.

Of course, if you work in a big tech company there is a procedure for coding interviews. Still if you work for a small company then most probably that procedure is missing and you have to help the Recruiting department implement it.

My approach

Below is my process, for assessing the knowledge of a candidate. I have "perfected" this approach throughout many many interviews.

Since I'm not interested in the recruitment part, I assume that the candidate has already been screened by the Recruiting department, so depending on the time allotted for the technical interview, I structure the discussion so that it does not exceed more than 1 hour. I receive in advance a resume and hopefully a public Github or some VCS, to look over some code written by the candidate.

If the person is of Senior level, then it is more a technical discussion rather than a coding interview. So far, from what I have experienced, a Senior level candidate not knowing what they are talking about has never happened, but it doesn't mean it will never happen.

If they are of Junior or Regular level, then the coding interview process begins.

Setup

I use Notion (which is a great tool by the way), where I have the whole process structured on several pages. This includes a database for evaluation (I don't store any personal data, I score the candidate from 1 to 5, set a skill level, type of focus: Frontend, Backend, FullStack, and finally some notes), technical questions for different programming languages (usually JavaScript and PHP), frameworks and lastly coding challenges that help me in determining the candidate's ability to solve a problem or if they can explain a particular solution.

Process

The whole discussion is very informal. I start by asking the candidate what tools, frameworks, and libraries they use and what they prefer to focus more on: frontend or backend. I ask these things so that I can get an idea of what the person knows, not what is written in the resume, since we all know that resumes are sometimes bloated and because I want to know if the person might be a good fit with one or more of the ongoing projects within the company.

As I mentioned at the beginning of the article, the interview is for a Frontend position, so depending on the above answers, I either start with basic JavaScript questions, and depending on the resume we go through questions about Angular / Vue / React, move on to CSS, or start with questions about PHP, databases, and OOP. Finally, I ask about a VCS, usually about Git.

Here is an example of a fundamental JavaScript question I usually ask in interviews:

Basic JavaScript question

Another question I could ask is:

What is the difference between undefined and not defined in JavaScript?

Here is a great article explaining this.

If I can't form an educated opinion about the candidate, since the above questions were language focused, I can switch to more agnostic things like Data Structures or Algorithms. Depending on the candidate's skill level I could also ask about stuff like Hoisting, Closures, or SOLID. If they focus more on the Backend, then I could be asking about stuff like Singletons, Prototypes, or even deadlocks.

The above was more theoretical, now I move on to ask practical code questions.

I start by showing the candidate a piece of code and ask them to solve a certain problem for me, and I make sure to mention that they can write pseudocode, because I'm more interested in assessing analogical reasoning, problem-solving rather than exact code, my reason being that the time allotted for the interview might not permit it and also:

Remember - the goal isn't to see how fast they write the right answer. I'm trying to learn about how they work and communicate.

Here is an example of a problem I would be asking, in an interview:

Practical code problem

If they know how to solve the above problem, then it's all good, if not, I propose several solutions and ask them to explain how they work. This will allow me to understand their "train of thought" from start to end.

Conclusion

If the candidate doesn't know about a certain paradigm/concept or how to solve a practical problem, I try to briefly explain it, if the time allows it. I do this because the person is already stressed and I try to leave them with more knowledge than they came in with.

If there is still a need after the coding interview session, I have prepared some homework, for example: develop a small app with whatever frameworks, or libraries they want, put it on a public VCS, CodeSandbox, or StackBlitz so that I can evaluate it and see that it works correctly.

After the interview session is over, I provide feedback to the recruiter in a short, concise email, that covers all the assessed points.

This is my interview process. I know it's not perfect but so far it seems it got the job done and I helped in hiring some great developers. Please feel free to point out any flaws you might see in this approach or if you have any feedback you can find me at @stefanbc.

How To: Clean up Plex with Google Scripts

Stefan Cosma — Fri, 29 May 2020 00:00:00 GMT

Just as the title implies, this tutorial is going to cover what it takes to automatically cleanup a Plex media server, using Google Scripts. I am aware there are other ways to do this, but this tutorial is tailored specifically for Google Scripts.

Table of contents

Setup
Code
Execution
Notifications

Setup

Head over to the Google Script dashboard and create a new project. Before we start writing any piece of code we need some prerequisites, for our project.

Open the View menu and click on Show manifest file. This will allow us to add dependencies and other scripts to our project. Now you can open the appscript.json file and add this line before the last }.

"oauthScopes": ["https://www.googleapis.com/auth/script.external_request"]

This line gives us the ability to make external requests from our script to the Plex media server.

After adding the line above, open the File menu and click on Project properties and open the Script properties tab. You will need to add multiple key/value properties.

TOKEN
BASE_URL
IFTTT_WEBHOOK

The last one is optional and we will cover it in the last point of this tutorial.

I'll start with number 2, which represents the Plex media server base URL. The server needs to be accessible via the Internet or else our script won't work at all. For point number 1 you'll need to do a bit of digging.

In Plex, open the page of any piece of media (this represents the last child of that media, whether it's a show or a movie). Next to the Edit button you should see three dots. Clicking on those should open a menu like in the bellow picture.

Plex Interface

Click on Get Info and then in the modal that pops up, in the bottom left click on View XML. This will open the media metadata in the form of XML, in a new tab. From the URL of that tab you can extract the X-Plex-Token which coincidentally is the last parameter in the URL.

After we have points 1 and 2 we can start writing the actual code, for our script.

Code

I'll paste the code in it's entirety and then we can go over it line by line.

This first things we need to get are the script properties we setup in the first step, of this tutorial.

Notice there is a variable called section. That represents the ID of the library in the Plex media server. You can get that, by opening the desired library you want to clean and from the URL get the value from the source parameter (hint: it should be the last one).

Next up, we start building the actual function that does the cleaning up.

Using the UrlFetchApp library and the fetch method we call the Plex media server to retrieve all the contents of our library. We parse the XML response to JSON using a method that you can find here. You can add the parsing method to the same file, if you want.

If the videoContainer object was correctly parsed we need to check its type, because Plex will return an object if there is only one child in the library, instead of an array of objects. We're going to check for the viewCount if it's true and add everything we find to an array of objects.

While iterating through the whole array, we make a DELETE type call to the Plex media server, passing the TOKEN, in the headers, and using the baseURL and videoKey as the URL for our call.

That's it. You can run the script by clicking the Run icon and the checking the logs in the View menu. You should see a list of all the items deleted.

Execution

We can automate this script to run at certain times in the day. We can do this by setting a trigger.

In order to set a trigger, open the Edit menu and click Current project's triggers and add a new trigger. Bellow is an example of how you could set it up.

Google Scripts

There's no need to run it too often if you don't watch a lot of shows.

Notifications

This step is optional, so you don't have to follow it. I wanted a way to get notified if the script ran and what items were deleted from Plex.

I decided I was going to use IFTTT but you can use Zapier, Automate.io or even one of Google services to send an email.

The code is rather simple for IFTTT. You can find it bellow

// Notifications
watchedTitles += `${video.grandparentTitle} - ${video.title}`;
watchedTitles += "\r\n";

if (index === watchedVideos.length - 1) {
    Logger.log(watchedTitles);
    Logger.log("Notification sent!");

    let notification =
        `${watchedVideos.length} watched episodes were removed!` +
        "\r\n" +
        watchedTitles;

    let options = {
        method: "POST",
        contentType: "application/json",
        payload: JSON.stringify({ value1: notification }),
    };
    UrlFetchApp.fetch(webhook, options);
}

Add this code inside the iteration (after the DELETE call. It's already in the code I shared above). This will create an array of media titles and send them to a webhook in IFTTT that has a recipe set up to send a notification to my phone. You can customise it however you like.

Some points before I end this tutorial:

This project is running on the new Apps Script runtime powered by Chrome V8
If you have any ideas on how to improve the script let me know.

That's it. You can also find the code here and if you have any questions let me know. You can reach me on most social media channels.

How To: Run Ghost inside a Docker container on DigitalOcean

Stefan Cosma — Mon, 01 Apr 2019 00:00:00 GMT

Recently I created a new theme for Ghost, that you can find here and can currently experience on this website. I wanted a way of showing it off, so anyone that wants to contribute to it or just plain use it, can get a feel of what it looks like in a live environment.

Initially I looked at Heroku, but I soon fell into a rabbit hole of errors, because Docker doesn't play nice with Heroku and I didn't like that I would have to jump through hoops just to keep the app online. Keep in mind that this is an open source project and having to pay for keeping the Heroku app was not something I was prepared to do at that moment.

But, Stefan, you already have a server, where you host your website! Why don't you use that? Initially, I wanted to keep my server clean off other systems and just use it for my website. I changed my mind and here we are.

Enough backstory, let's get to the actual implementation. Bellow is my current stack and the process I followed that works for my setup. It may work differently for you and your stack.

My whole stack is like this:

I have the stefancosma.xyz domain registered and I use Cloudflare as a DNS provider.
The website itself is hosted on a DigitalOcean droplet, that runs their Ghost image (an older version but I keep it up to date).

Nothing fancy, right?

So, the first thing I did was to get Docker working on my droplet. After running apt-get update I installed Docker using this:

apt-get install docker.io

Once that was done, I just spun up a new Docker container for Ghost. Luckily there is already a Docker image for Ghost. You can check it out here.

Now the tricky part. I ran this command to expose the Ghost instance in the Docker container, to the outside world.

docker run -d --name name_your_container -p 3001:2368 -e url=https://ghost_url ghost

So, what this command does, is that it runs a new container with a custom name and it exposes the Ghost port 2368 on the host's 3001 port. Of course you can use a different port on your machine, if you so desire. Another cool thing is that this Docker image accepts, as parameters, any Ghost configuration parameters, found here. The Docker image name is ghost.

So now, if you access your droplets IP followed by the 3001 port, you should see a new Ghost instance up and running.

The last thing I did was to spin up a new subdomain inside Nginx and add it to Cloudflare. The configuration I used for Nginx is similar to the one bellow:

server {
    listen 443 ssl http2;
    listen [::]:443 ssl http2;

    server_name subdomain.domain.com;

    ssl_certificate certificate.cert;
    ssl_certificate_key key.key;
    include conf.conf;

    location / {
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header Host $http_host;
        proxy_pass http://127.0.0.1:3001;

    }

    location ~ /.well-known {
        allow all;
    }

    client_max_body_size 50m;
}

Besides the above configuration, I've added a CNAME record with the subdomain name that points to the root domain.

And that's it. All good and done.

Nothing out of the ordinary. How would you have done it differently? Tweet @stefanbc or email me hello@stefancosma.xyz.

Until next time, code long and prosper.

How To: Organise a web developer meetup

Stefan Cosma — Fri, 23 Nov 2018 00:00:00 GMT

Disclaimer: This post was automatically published a few hours after the event so let's hope everything went according to plan.

I recently had the opportunity to organise a meetup, that revolved around the idea of knowledge exchange and community building. I've had this idea for a very long time. Ever since I was working with the team over @koding, where I helped grow the community and before that, when I was in collage, because I couldn't find any clubs or meetups of like minded people around my hometown.

But you may ask why a real life event, instead of creating an online community? Because when you're meeting people face to face you have a better understanding of what they're trying to communicate with you, whether it's feelings of disagreement or just want to share knowledge with you.

This was my first time organising an irl event. Bellow are the steps I followed when I organised the Sibiu Web Meetup.

Overview

In the case of the meetup I organised, I wanted it to be free, with limited seats (because, well, it's not a conference), for anyone interested in web development, web design and all other web related topics. All skill levels are welcome, this includes students, juniors and senior devs. It should be a meetup that revolves around the idea of knowledge exchange and community building. Also this could be a monthly meetup or every two months (still haven't decided on this aspect).

When you start putting the event together, make sure you inform your attendees about all the things that you want to achieve with your meetup and share as much details as possible (when, where and why).

Details

Now let's talk about the actual details of organising a meetup.

The first thing I did, was to see if anyone wanted to talk about the web, at a local meetup. Luckily I have some friends that have held talks in the past and have extensive knowledge about the web. I presented the idea and told them that they're free to talk about anything web related and after some proposals, we came to some consensus on what the talks should be about.

Ok, talks, checked. Now I needed a place to host the meetup. Enter the local university, that was more the gracious into providing a room for the meetup and as an added bonus the students from the Computer Science major would be invited and would get a chance to meet professional developers and gain some knowledge from the field, something I didn't have when I was in collage. Students being able to connect with professional developers is something beneficial to both parties. On one hand the students learn something new and on the other hand professional developers get to share their knowledge with someone else. I know you can find people online that are more than willing to help out but it's something different when you actually meet someone in person.

Place, checked. It was now time to let people know about the meetup. So a small social media campaign was started. This included sharing on all the social media channels and printing some ads for the university to use, so that students could find out about the event. In terms of attendance, I wanted it to be a small gathering of people, not a full fledged event, like a conference might be. If you let them know about the event they will come, even if it's just out of curiosity.

Bellow is a checklist that I've put together, with ideas that I implemented for the meetup, things that you should not forget about, when organising an event.

Speakers

The most important aspect of the whole event.

3 speakers - with ~30 min max per talk + QA session.
Diverse panel of speakers.
1 host - to keep everything in check.
2 hour time frame - have a break after the first two speakers.
Networking with the speakers at the end of the meetup.

Place

Any place is a good place. If it's sunny and warm you can have it outside.

Find a classroom at your local University, a co-working space or even your local pub or cafe. Start small and grow.

Attendance

Make sure that the people who attend are the actual target audience, people that can actually help you into building a community and share knowledge.

Maximum of 30 places. Make sure you have the possibility of growing based on popularity.
Students have priority. Because we want as many of them to actually learn something from the professionals.

Social media marketing

The more people know about it, the larger the community and the more knowledge is exchanged.

Promote on LinkedIn, Twitter, Facebook (Instagram), Reddit etc. Create an easy to remember hashtag and create a Facebook event. Also don't forget to choose a cool title for your meetup.
The social media marketing process will be a collaboration between the parts involved. Get you attendees to share the event if they want to do so.
Use meetup.com as a platform to organise everything.
Use speakerdeck.com to host the presentations.
[Optional] Setup a weekly newsletter with useful web links.
[Optional] Print and pass QR stickers around with a link to the event.

Extra

Anything that can improve the whole experience for everyone.

Creation of a Slack group to share extra knowledge and ask the pros for help with certain areas. Pro-bono mentoring program through Slack.

I want to wrap this app with just a few mentions.

Choose the topics very carefully and try to keep them interesting. Ask the attendees if some of them want to host a talk at the next gathering. Plan your next meetup before the current one takes place. Make sure you choose an easy to remember title for your meetup. And lastly make sure everyone has fun.

If you have any other ideas that you've implemented at your meetups, do let me know @stefanbc, I would love to hear them.

Until next time, code long and prosper!

Image credit: Guillaume Kurkdjian

How To: Use Tomcat in Intellij IDEA Community

Stefan Cosma — Mon, 01 Oct 2018 00:00:00 GMT

Recently I started working on a project that required me to have the backend part installed locally, instead of using a remote backend. The project uses Maven as a build tool and it deploys the code to a Tomcat server.

I got cracking and started configuring the project on my local machine. The first thing I noticed is that Intellij IDEA Community does not have a Tomcat plugin, unlike the Ultimate edition, that has one out of the box.

Many Google searches later I found a few plugins that might do the trick but when I tried using them, the famous NullPointerException happened and I started looking for an alternative. I found some inspiration on Github, but not in the form I wanted, but it was good enough to get me started.

Bellow is a short tutorial on how to setup Tomcat in Intellij IDEA Community to run/debug, and how to use Maven to build your project and then deploy it to Tomcat.

Prerequisites

Install Intellij IDEA Community.
Install Tomcat - For my project I've used Tomcat 8. You can get it from here.
Install Maven.

Tomcat Configuration

Make sure you install Tomcat in a place that doesn't require admin access, for example next to your project.

After that, open File -> Settings and expand Tools and select External Tools.

You can add a new tool with whatever name you want. I named mine, Tomcat. For tool settings, select the catalina.bat file, usually located in the bin folder of your Tomcat installation. For example mine is C:\apache-tomcat-8.5.34\bin\catalina.bat. And last but not least set an argument with the command jpda run. The working directory should be set automatically.

Tomcat External Tool

Start Tomcat

If you go to Tools -> External Tools and click on Tomcat, it should start the Tomcat server.

Maven build and deploy to Tomcat

Now that you're done with the Tomcat configuration you want the ability to build using Maven and deploy to the now working Tomcat server.

To achieve this you'll need to head over to Run -> Edit Configurations, click the "+" and select Maven. Don't forget to name your new configuration. Select your project location and add the following command line.

war:war org.codehaus.mojo:wagon-maven-plugin:upload-single -Dwagon.fromFile=D:\work\project\backend.war -Dwagon.url=file://C:\apache-tomcat-8.5.34\webapps\

What this line does is that it builds the project, using Maven, and then gets the file from the specified path (that's usually configured in your project) and copies it to the webapps folder in Tomcat. Tomcat then knows it has a new version of the file and redeploys it.

Build and deploy to Tomcat

Tomcat Remote Debug

Like all applications you want the ability to debug your backend. To achieve this you'll need to add a new configuration like the previous step. The only difference this time is that when you click "+" you'll need to select Remote.

Give your configuration a name. You'll need to set the Debugger mode to Attach to remote JVM, the Transport to Socket, the Host to localhost and lastly the Port to 8000. That way when you start the configuration, Intellij will connect via Socket to the Tomcat server that emits via port 8000. You can change the port for Tomcat, to something else, in the Tomcat server.xml file, in the config folder.

Tomcat Remote Debug

Once the Tomcat server is started you can run this configuration. Just click on Run -> Debug and then select the newly created configuration.

If you want to keep a record of all the logs when debugging, you can achieve this by going to the Logs tabs in the newly created Remote configuration and set the Save console output to file to the logs folder of your Tomcat installation. In my case it was C:\apache-tomcat-8.5.34\logs*.*.

Tomcat Remote Debug Logs

That is it. @ me on Twitter if you think I've missed something or if there is another way of doing this without installing Eclipse or purchasing the Ultimate edition of Intellij IDEA.

Until next time, code long and prosper!

Just Another Cluster #6

Stefan Cosma — Sat, 14 Jan 2017 00:00:00 GMT

I'm gathering stuff, interesting articles, useful tools or amazing videos, and then make a list with all of them with comments for each one.

This is issue number #6.

You can checkout the previous issues if you're interested.

If you find any interesting tools or articles that I might have missed, let me know @stefanbc and I'll share them in the next cluster.

So, here are some interesting links and articles!

Code dependencies are the devil.
This article tries to tackle the subject of dependencies and why we make them central in our applications even if they will become obsolete in a few years, as the technology advances.
Orthogonality and CSS in JS
Should JavaScript, HTML and CSS files be bundled and managed completely separately? Kept in different files and imported together into JavaScript component files? Or can we remove HTML and CSS files entirely and generate everything in JavaScript?
From Sass to PostCSS
It seems there is a new trend rising these days. Trying to replace perfectly working things with something that just came out of the oven, that is hot and you can't quit taste yet.
Clean Code concepts adapted for JavaScript
This is a very well written guide to producing readable, reusable, and refactorable software in JavaScript.
Creating Fractals
Have you ever wondered how you can create fractals in JavaScript, well wonder no more because someone actually took the time to write an article on how you can achieve that.
Improve the Look of Links with the CSS Text Decoration Module
Did you know about the text–decoration–skip and text–decoration–color CSS attributes? Checkout this article to learn more about what you can do with them.
Kiss my classname

Nonsemantic classnames that refer to visual styles will always be a bad idea.

PostCSS: Sass’s New Play Date
Another article about PostCSS, because it's the new kid on the block that needs attention from everyone.
A Beginner’s Guide to Pure CSS Images
Did you know you can create images entirely out of CSS? This handy guide is a great basis for anyone interested in this subject.
The type snob
A brilliant article by Pablo Stanley about how anyone can become a type snob.
How to write a JavaScript package for both Node and the browser
Not sure if this article needs any intro, because it's pretty self explanatory.

Until next time, code long and prosper!

Image credit: Guillaume Kurkdjian

Visual Studio Code - Tips & Tricks

Stefan Cosma — Sun, 08 Jan 2017 00:00:00 GMT

If you're following me on Twitter you probably know how much I enjoy using Microsoft's Visual Studio Code. So much, that one of my tweets is currently featured on their main page.

But this article is not about how much I enjoy my code editor, it's about what things you can do with this code editor. From useful extensions to shortcuts you probably didn't know about or even making your code editor more light on the eyes, this article is going to showcase some awesome stuff that I found while using it.

Extensions

We begin our showcase with some awesome extensions. Now, I'm not going to share all the extensions that I use because some of them are really project focused, but instead I'm going to share the ones that are more generic and make my life as a developer much more easier.

Auto Close Tag - Automatically add HTML/XML close tag.
Git History (git log) - View git log, file or line History.
HTML CSS Class Completion - Provides CSS class name completion for the HTML class attribute based on the CSS files on your workspace.
HTML Preview - An extension to preview HTML or Jade files while editing them.
HTML Snippets - Full HTML tags including HTML5 Snippets
JavaScript (ES6) code snippets - Code snippets for JavaScript in ES6 syntax.
JavaScript Atom Grammar - The Atom editor's JavaScript text mate grammar.
jQuery Code Snippets - Over 130 jQuery Code Snippets
jshint - Integrates JSHint into VS Code. JSHint is a linter for JavaScript.
Settings Sync - Synchronize Settings, Snippets, launch, keybindings, workspaces and extensions Across Multiple Machines using Github Gist.
Spelling and Grammar Checker - Uses a web service to detect mistakes and suggest fixes - great for Markdown or any text file.
SVG Viewer - Pretty self explanatory.

The extensions that I listed above are some of the ones that I use on a daily basis. If I were to choose that ones that I couldn't live without it would be #1, #2, #6, #9, #10.

For example #10 is a life saver because I'm always switching between my work MB Pro and the MB Air I have at home, so by having a system in place that helps me synchronize my settings is textbook awesome.

Shortcuts

Next up are shortcuts. I usually have a few shortcuts that I absolutely can't live without. For example CTRL + D for multiselect is a must have.

When VS Code came along with it's integrated Terminal and introduced shortcuts for it, I was hooked. If you're like me and hate to always have to switch between the code editor and the Terminal then you're going to enjoy this. I usually tend to avoid to use the trackpad when I write code that's why I'm going to share some shortcuts that will help you while you code and need a Terminal at the same time.

CTRL + ` - with this shortcut you can toggle the integrated Terminal.
CTRL + SHIFT + ` - this shortcut will add a new Terminal instance, so you can easily work with multiple things at the same time.
But what if you want to switch between terminal instances? I added a few key bindings so I can easily switch between terminal instances. Of course you can customize them to your liking.

[  
   {  
      "key":"ctrl+shift+=",
      "command":"workbench.action.terminal.focusNext",
      "when":"terminalFocus"
   },
   {  
      "key":"ctrl+shift+-",
      "command":"workbench.action.terminal.focusPrevious",
      "when":"terminalFocus"
   }
]

CTRL + Q - In a recent updated the team behind VS Code introduces a new feature. The ability to switch between the different views in the sidebar. Using this shortcut you can easily switch between the Explorer view or the Github view or even the search view.
CMD / WIN + B - I for one like to keep things as light as possible when I'm writing code. With this shortcut you can easily show or hide the sidebar.

The shortcuts I outline above are the ones that I use most often. There are lots of them, that I didn't even mention, and if I did it would overlook the whole purpose of this article. If you know any more, that you think are really useful, let me know and I'll add them to the list.

Misc

Since I can't end the article by talking about shortcuts, here are some more cool things you can do in VS Code. Did you know you can hide the activity bar from the View menu? Well, now you do. This feature was added a recent updated and I can say that it is very helpful, even if one has enough real-estate on his/hers monitors.

What about looks? I, for one, prefer the Spacegray theme. I liked that theme ever since I first found it available while I was using Sublime Text 2. Luckily someone made it available for VS Code as well. Check it out here.

And last, but certainly not least, did you know you can compare files out of the box? I recently needed to compare two different versions of the same file and because they were not on Github, I needed another easy way to achieve this. After a few searches and some extensions later I stumbled upon an article that outlines how you can do that directly inside VS Code. And because I like to give credit where credit is due here is the article in question.

Now, don't get me wrong, I know the things I shared in this article are just a small taste of what VS Code can do, that is why I'm extending an invitation to anyone who is using VS Code to share their experience and their tips and tricks.

Until next time, code long and prosper!

Image credit: Guillaume Kurkdjian

Just Another Cluster #5

Stefan Cosma — Fri, 06 Jan 2017 00:00:00 GMT

I'm gathering stuff like interesting articles, useful tools or amazing videos, and then make a list with all of them with comments for each one.

This is issue number #5.

You can checkout the previous issues if you're interested.

If you find any interesting tools or articles that I might have missed, let me know @stefanbc and I'll share them in the next cluster.

So, here are some interesting links and articles!

10 things I learned making the fastest site in the world
This Medium articles is about performance techniques. This should come in handy for anyone who's obsessed with website performance and speed.
regexgen
A pretty nifty tool that helps anyone generate regular expressions that match a set of strings.
A.W.E.S.O.M. O
The really big list of really interesting open source projects.
Loading web fonts asynchronously
Have you ever wondered how you can load web fonts async? Well Bram Stein tries to explain the process in great detail.
Exploring functional JavaScript
How can functional programming improve the developer’s experience when one works with JavaScript. A really interesting subject that this article will explore.
Let’s use const! Here’s why.

ES6 offers let and const as new flavors of variable declaration, and part of the value in these statements is that they can signal how a variable is used.

Interpolation in CSS without animation
Interpolation is the estimation of a new value between two known values. This simple concept is vastly useful and it’s commonly seen in animation on the web. But how can one use it CSS without animation?
Replacing the Jet Engine While Still Flying
Jen Simmons explains how the team behind Firefox will try to replace the current browser rendering engine, Gecko, with the new one, codename Servo.

Until next time, code long and prosper!

Image credit: Guillaume Kurkdjian

Building a project - workflow, development stack.

Stefan Cosma — Fri, 30 Dec 2016 00:00:00 GMT

Sometimes, I need to calculate the aspect ratio of an image to make sure I resizes it correctly and because I'm to lazy to actually do the math (but I ended up doing it anyway!) or use something found on the web, I decided to build an aspect ratio calculator, because why not.

Enter arca - a simple aspect ratio calculator.

I built this project in the course of a few weekend hours, and during this time I've cemented my own basic workflow and deploy process.

For the rest of this article I'm going to talk more about the stack and the deploy process I've used rather then the actual project, since, well it's an aspect ratio calculator, there's not much to talk about it anyway.

Build stack

For the actual build process I'm using and will continue using GruntJS. Now, I know there are a lot of debates at the moment on what one should use when building an app. Whether it's Grunt, Gulp or npm scripts, people seem to forget the most important thing, it doesn't matter what you use as long as it gets the job done.

I prefer Grunt because it's much more easy to set up and to understand, when for example, someone else comes along and tries to understand the logic behind your project.

The Grunt modules I generally use are as follows:

grunt-contrib-clean - to clean up everything in the build folder before a new build starts
grunt-contrib-pug - templating system, instead of placing everything in HTML files. Very versatile because it gives me the ability to use blocks and mixins.
grunt-contrib-sass - Sass or LESS? Sass all the way!
grunt-contrib-coffee - instead or writing everything in vanilla JS, I decided to use CoffeeScript, for the sake of readability and how clean the code looks.
grunt-contrib-uglify - after all that good looking code I compress everything.
grunt-contrib-jshint - because the files actually need to be valid.
grunt-contrib-watch - it triggers when a modification has been made to a file. I like to call it the Eye of Sauron.
time-grunt - I use this one to monitor how long a certain task takes to run.

Now, that we've gone through the Grunt modules that I use the most often, I'm going to share some of the things that I've added to my Grunt configuration to make it more usable.

For example I wanted a way to pass certain configuration variables to my HTML files. Luckily Jade (sorry Pug!) knows how to do this, as you can read bellow.

jade: {
    build: {
        options: {
            data: function(dest, src) {
                return require('./lib/settings.json');
            }
        },
        files: {
            './bin/index.html': './lib/views/index.jade'
        }
    }
},

By passing a .json file into the data parameter, I can easily configure anything I want.

Another thing that I found useful was to add the option to build the project while I issue a grunt watch command. I did this like so:

watch: {
    options: {
        atBegin: true
    },
    ...
    [rest of the config]
    ...
}

I'm not going to go through the whole Grunt configuration file, that's another article for some other time.

Now on to the language part of things.

Language stack

I try to keep the language stack as small as possible. I don't like to mix and match too many languages when working on a project. Bellow are the languages I use on a general basis when starting a new project. In the future I may introduce new ones but for now I'm sticking to these ones.

CoffeScript

As you're already aware, from what I've written above, I'm using CoffeScript instead of regular, good old vanilla JS. The main reason behind this approach is that the code is much more readable than regular JS. At least that's how I perceive it. And using GruntJS allows me to easily compile that CoffeScript into regular JS.

Sass

I won't start a debate why Sass is better than LESS. I use Sass because it's easier to handle, there are a lot of mixins out there or frameworks that already have support for Sass and the community behind it is amazing. Probably in the near future when the support for CSS variables will be improved I'll switch, but until then I like my nesting, variables and mixins.

Jade

Or Pug, as it's now called. I prefer using a templating system because it offers me the ability to modularise each section of the application into more manageable pieces. For example I want to have a mixin for a certain component.

Pug allows me to use logic inside HTML and thus minimizing the JS code that I write. It also gives me the ability to pass certain constant values to the actual code. I usually generate a settings.json file that will help me use a name, a description, a color in multiple places without having to copy/paste that value everywhere.

PHP

When I started working on uptimey I was still developing a lot of WordPress websites and eCommerce platforms so naturally I went with something I already knew and could easily handle and maintain. So for server side scripting I generally used PHP to handle anything that I might need.

PHP is a vary versatile language and I enjoy writing code in it, but if I were to start a new project now, I would probably use something else.

Dependencies

The dependency list isn't that long either. A must have for me is require.js, so bellow I'll explain how I normally use it.

require.js

Because require.js gives the ability to load scripts based on their dependencies, it's a real life saver when it comes to speed and loading times. Bellow you'll notice the actual configuration file that I normally use when starting a blank project. The main script file will, usually, require jQuery and because of that, jQuery is the first thing loaded before the actual app.

requirejs.config({
    baseUrl: 'js',
    paths: {
        jQuery      : '//ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min',
        app         : 'app.min'
    },
    shim: {
        'app'       : {
            deps    : ['jQuery']
        }
    }
});

moment.js

Another example from the uptimey project is moment.js. Moment allows anyone to easily work with dates. We all know dates and formatting them can be a hassle, that's why moment.js is a must have if you're planning on working with dates.

Segment.com analytics

Instead of using good old fashion Google Analytics or GoSquared, I'm using the services provided by segment.com because they allow me to integrate almost any tracking service by adding just a single script. Using only a single script and sending all the params through that, I can hook up things like Pingdom and Mixpanel, that allow me to visualise how things are going.

Structuring

I spent a lot of time thinking about a projects structure and how to best implement it. I finally came to the bellow formula after many hours of trail and error.

Jade (Pug) structuring

In terms of structuring the templates, I usually use this type of structure:

footer.pug
head.pug
index.pug
layout.pug
meta.pug

The footer file contains the analytics, require.js scripts and sometimes the copyright info. The head file has all the CSS references. The index files ties everything together. The layout file is the most important one, because it's the actual structure of the whole project. Sometimes the layout file might be the basis for other pages, if the project requires it. And last but not least the meta file has all the meta tags that the project I'm working on needs.

All these files receive constant values from the settings.json file while they're compiled via Grunt.

Folder structuring

The basic folder structure that I use, is as follows:

- bin # the destination folder when things are compiled
 -- css
 -- img
 -- js
 index.html
- lib # the source folder contains all the files that will be compiled
 -- controllers # files that define what the app can do
 -- helpers # files that contain functions that I use in multiple places
 -- models # all the files for server side scripting
 -- style # all the Sass files
 -- views # all the Pug files
 settings.json

Deploy

The deploy part of this workflow I've only just finished perfecting. When I discovered how useful Travis CI can be, I stopped searching for an alternative. I was able, using a single configuration file, like the example bellow, to test and deploy in a matter of minutes.

env:
  global:
  - ENCRYPTION_LABEL:
  - COMMIT_AUTHOR_EMAIL: "your@email.here"
language: node_js
node_js:
  - "5"
  - "4"
  - "0.12"
  - "0.10"
before_install: 
  - npm install -g grunt-cli
  - gem install sass
install: npm install
before_script: grunt
after_success: 
  - chmod a+x deploy.sh
  - ./deploy.sh

The above configuration is just an example that I've used on multiple occasions. You should try modifying the above params and see how they best work for you.

You'll notice that after the build is finished I run a script for deploy. That script will deploy the project, in this case to Github pages, if all tests have passed successfully. You can find an example of a deploy.sh here. Basically what it does is, it will clone the repo into the Travis CI VM and then replace the files in the gh-pages branch with the ones from the bin folder and then push the updated files to Github without me having to intervene. You can add anything you want to the deploy.sh file so you can deploy to your choice of environment.

If you want a more in-depth look on how that script works, have a look here, at this brilliant tutorial, where the whole process is explained.

Conclusion

I hope this article will be the basis for a discussion that we can all contribute to. I'm saying this because, many beginners, when starting in our field don't have the slightest idea where to start. So with this article I'm hoping to get people to share there own workflows and development stacks so that we can all benefit and improve. If you've written an article that describes your flow, hit me up @stefanbc, I would love to read it.

In a future article I'll describe my hardware stack and the way I set up my code editor. but until then code long and prosper!

Image credit: Guillaume Kurkdjian

Just Another Cluster #4

Stefan Cosma — Tue, 27 Dec 2016 00:00:00 GMT

It's that time again, when I post interesting links / articles / tools.

This is issue number #4.

If you've read the previous ones you might have noticed that I have changed the title of the series from Weekly Cluster to Just Another Cluster. The reason behind this is that I don't have time to post on a weekly basis, so I set up an IFTT applet that sends me an email every now and then with stuff I added to Buffer or Pocket. Once I have a good amount of interesting stuff to share I'll add them to an article and post it.

If you find any interesting tools or articles that I might have missed, let me know @stefanbc I'll share them in the next cluster.

So, here are some interesting links and articles!

CSS Shorthand Syntax Considered an Anti-Pattern
Harry Roberts talks about why shorthand CSS syntax is bad when it’s affecting properties that you don’t actually need to modify.
You Wouldn't Base64 a Password - Cryptography Decoded
This article serves as a good introduction to cryptography concepts, so read it!
When everything's important, nothing is!
Do libraries and frameworks prioritise components on boot? If so, how, and if not what can we do? That is the question this articles tries to answer.
Why Inline SVG is Best SVG
This video by the guys over at Front End Center will try to explain why inline SVG is better than any another form of SVG.
Who said javascript was easy?
To paraphrase the author of the article here’s a few tricks and traps that javascript beginners should probably know of.
What is the difference between CSS variables and preprocessor variables?
Chris Coyier explains the difference between native CSS variables and the ones you would use within Sass or LESS.
FORC: The Fear of Removing CSS
There is a genuine fear of removing CSS from legacy code. I have it and I believe most of front-end developers I know have it. This article tries to remove that fear.
A Lifetime of Learning to Code
The title is pretty self explanatory. You should definitely check out the article.
20 Years of CSS
20 years of CSS, people! 20 ... years! I've been working with it for about 8 years and it's been a hell of a ride since there's so much to lear and so little time to do it.
Front-End Developers Are Information Architects Too
As the author already said this article isn’t about what you may consider an information architect to be: someone in the user-experience field, who maybe studied library science, and who talks about taxonomies.
The truth about traditional JavaScript benchmarks
Another self explanatory title. The ideas and statements in this article are very valid and worth checking out.
Front-End Performance Checklist 2017 (PDF, Apple Pages)
Vitaly Friedman talks about front-end performance and shares with all of us a wide array of useful things that we should all consider when we think about performance.
Memories from six years of open source.
I joined Github in 2011 and it has been an amazing tool and resource hub. This article will go through what 6 years of open source mean for anyone involved.

Until next time, code long and prosper!

Stefan

Image credit: Guillaume Kurkdjian

Changing teams - the good, the bad and the ... future

Stefan Cosma — Sun, 28 Aug 2016 00:00:00 GMT

So, you decided that it's time to change teams, and by that I mean you decided to either leave your current job and pursue another one or within the same company you're switching teams.

Whatever maybe the case, you'll be faced with some decisions and things that you'll need to deal with. If you've done this before then you know what I'm talking about and maybe you'll want to continue reading about my experience. If, on the other hand, this is the first time you're doing this then I'll try to explain what challenges you'll face and what things to watch out for, from my own experience.

As was my case, I had to part ways with a team that I've worked with, for the past few years.

So what are the things that you'll face when you're switching teams?

The good

The best part of changing teams is that you'll start working on new and exciting things, as part of your new team. You'll have a fresh start on how you think, implement things and communicate with others.

As part of the transition process you'll have a short window (maybe more) to review all the things that you've built with your old team. Why is this a good thing? Self analysis is always a good way to improve your abilities and to improve yourself.

During my transition period, I reflected on all the great things that I achieved during the years working with the former team. From establishing development workflows, to learning how to maintain certain systems, to introducing new technologies and apps into the flow of things. I had a feeling of pride in all the work that I did. If doesn't matter what things you achieved or didn't with your former team, as long as you have respect for what you did.

Another great thing to look forward to, is you'll get to work on exciting new things, this of course may include working with new, up to date, technologies, that you haven't worked with before.
I'm mentioning this because from my own experience, during my time with my previous team, I worked with outdated technologies, that in most cases weren't the best way to implement things, but I made the best of it and adapted to the situation.

The bad

As with all things in life, there are aspects that you can't avoid and you'll need to deal with before you can move on.

For example, I was in charge of certain workflows and systems within my old company. One of the downsides that I faced when I switched teams was that the transition process involved a lot of knowledge exchange. Of course this can be a good thing because it will give you an opportunity to review all that you know. Keep in mind that this process can and will be very time consuming.

Make sure that if you were in charge of certain workflows, when you leave, your team can handle it.

But this raises another question, are you expandable? Should you be? Well it's a two bladed discussion, because if you're expandable then the transition process will be much easier, if you're not then it's a whole different cup of tea and you're going to reach the above, time consuming process of exchanging knowledge.

The ... future

When if comes to the future of things then my suggestion would be to always leave a door open for future endeavours. If you've formed strong bonds with your former teammates then be confident that they can handle it when you leave. Of course this applies only if you were a non expandable part of the team.

Always look forward to what comes in store, for you, next. Whether it's just a small project that lasts only a couple of months or a full time position at a new startup, make sure you have a clear head when you start a new project.

So in order to wrap this up, I will only leave you with this: be confident in your abilities and your knowledge, don't worry to much on how you'll adapt within your new team, just do your job and things will fall into place. Also keep in mind that your former team will have to overcome your absence in one way or another.

Until next time, code long and prosper!

Stefan

Image credit: Guillaume Kurkdjian

Are you bikeshedding? Probably!

Stefan Cosma — Thu, 03 Mar 2016 00:00:00 GMT

You have no idea what I'm talking about, right? That's because not many people use the term bikeshedding. It's not a usual term that people just throw around all the time.

Bikeshedding is when you argue about some meaningless thing and tend to avoid the more important issue at hand.

For example Urban Dictionary tells us this:

Technical disputes over minor, marginal issues conducted while more serious ones are being overlooked. The implied image is of people arguing over what color to paint the bicycle shed while the house is not finished.

Let's take the above image as an example. You see the stick men trying to dump all the water out of the sand castle but avoid the fact that 1. the castle is made of sand and 2. they have a river below their castle that floods said castle.

In some ways it's like procrastination. You waste your time doing/talking about things that should not be your main focus in the first place.

This is a growing issue in the tech community. I've worked on projects where the more important issues, like scalability, were overlooked because we couldn't decide how many items should a query contain.

So, I propose, as Chris Coyier already said in his article, next time you're in a meeting and you see two people arguing about some meaningless thing, yell bikeshedding!

Until next time, code long and prosper!

Stefan

Image credit: Guillaume Kurkdjian

Just Another Cluster #3

Stefan Cosma — Wed, 02 Dec 2015 00:00:00 GMT

Well, well, if it isn't that time of the week again, where I post interesting links / articles / tools and then comment upon them.

If you haven't read the first ones, I suggest you do.

This is issue number #3.

As always, if you find any interesting tools or articles that I might have missed, let me know in the comments below and I'll share them in the next weekly cluster.

So, here are last week's interesting links!

Hacker Scripts
There are lazy people but then there's this guy. It kinda' freaks me out to be honest. I won't share too many details about this link, just click it and see for yourself.
Learning Regular Expressions: The Practical Way
Hugo Giraudel explains, with practical examples, regex. His explanations are on point and you could actually learn something from this guide.
Being a Full Stack Developer
What does a being a full stack developer mean in today's industry. Well it turns out you have to know a lot of things. Back in the old days, knowing PHP, SQL and HTML / CSS would have been enough, but that's not the case today. Do you consider yourself a full stack developer?
Do We Actually Need Specificity In CSS?
Philip Walton tries to answer the question: "If we lived in a world where specificity was never added to the cascade, would things be better or worse?".
jQuery tips everyone should know
In the era of Angular, Ember and React who the hell uses jQuery anymore? A lot of people. If you have a project that requires some jQuery then check this out for a quick refresh of tips.
cloc - count lines of code
As the name already suggests, this tool will help you count lines of code from files and entire folders for a wide spectrum of languages.
Scaffolding kd.js with Yeoman
Koding's very own Gökmen Göksel was bored one weekend and decided to create a yeoman generator for kd.js and it’s super fancy. A little bit of background on this. At Koding we’re using our own framework to build Koding. It’s called kd.js.
Hugo - A fast and modern static website generator
Hugo is a really cool, fast static site generator built using Go. The creators describe it as a general-purpose website framework.
musicForProgramming();
Bored of your Spotify playlists? Here's a series of mixes intended for listening while programming to aid concentration and increase productivity (also compatible with other activities).
So how does the browser actually render a website
Ryan Seddon explains, in this great talk, at JSConfEU 2015, how the browser actually renders your websites. Really interesting talk, you should check it out ... since ... you know ... you're developing stuff for the browser.

Until next time, code long and prosper!

Stefan

Image credit: Guillaume Kurkdjian

Yak shaving. A short definition!

Stefan Cosma — Mon, 23 Nov 2015 00:00:00 GMT

Have you ever started to work on a task and suddenly you realized that said task requires some other little task(s) to be finished beforehand. That's yak shaving for you, the tl;dr version.

You've probably done this multiple times and you did even realize it.

Back in 90s a Ph.D. at MIT by the name of Carlin J. Vieri produced this term to describe

what you are doing when you're doing some stupid, fiddly little task that bears no obvious relationship to what you're supposed to be working on, but yet a chain of twelve causal relations links what you're doing to the original meta-task.

Let me give you an example, that you can relate to.

You're working on an older project. Let's say that you're ready to deploy, but you suddenly realize that you forgot to set up the Digital Ocean droplet. You start setting that up, but it dawns on you that you need a certain version of PHP. Before you start downloading and setting that up you realize that there are some security issues that need addressing with your droplet.

And thus you find yourself in an ongoing spiral of never ending little tasks that divert you from the main task. Another comparison would be something like side quests in an RPG type game.

Why do we do this?

I think it has to do with the human nature. We're not a species that does things instinctively. We don't know what things can come up at any point in time. At least that's how I see things. Any other thoughts on this?

Until next time, code long and proper!

Stefan

Just Another Cluster #2

Stefan Cosma — Sat, 21 Nov 2015 00:00:00 GMT

It's that time of the week again, where I post interesting links / articles / tools and then comment upon them. This is issue number #2. If you haven't read the first one, I suggest you do.
As always, if you find any interesting tools or articles that I might have missed, let me know in the comments below and I'll share them in the next weekly cluster.

Without further adieu here are last week's interesting links!

Firefox OS 2.5 Developer Preview, an experimental Android app
The guys and gals over at Mozilla have launched the Firefox OS in the form of an Android app. Basically you can now get a taste of the Firefox OS without the hassle of actually buying a new phone.
Microsoft Project Oxford Emotion APIs
This one is actually really cool. Someone at Microsoft decided one day, that it's about time to find out what their customers actually feel when buying Microsoft products. This set of APIs allows anyone to detect what emotion is present in a photo. How cool is that!?
Koding's Global Virtual Hackathon 2015
Between December 12th and 13th Koding is hosting the worlds largest virtual hackathon. Last year there were around 60k participants, this year that number will be left in the dust. Did I mention, the grand prize is 100k? Yeah, that too.
Please, don’t commit commented out code
Kent Dodds explains why it's bad practice to commit commented out code. The explanation won't surprise you, because it makes sense.
Screenshots from developers & Unix people (2002)
Curios how famous developer's desktops looked like, back in the day? This very insightful article will showcase just that. How does your daily screen look like?
Dark matter
No, we're not talking about the hypothetical kind of matter that cannot be seen with telescopes but accounts for most of the matter in the universe, we're talking about the dark matter developers that don't read a lot of blogs, they never write blogs, they don't go to user groups, they don't tweet or facebook, and you don't often see them at large conferences. Where are these dark matter developers online?
Developer’s Guide to Open Source Licenses
You're starting a new project and you want it to be open source, but you're not sure about the kind of license to choose. Worry not, this handy guide will help you in your quest for open source awesomeness.
How to work with SVG text
Steven Bradley explains why working with SVG text is the best of both worlds. On one hand it’s rendered like other graphic elements and on the other hand it's packaged as XML character data, which means it’s real text.
The art of debugging
In this article, Remy Sharp explains why it's crucial to learn every tool that's available to use, use it as you need it.
Things to avoid when writing CSS
Here's a list of things that you should avoid when writing CSS. From nesting in Sass to multiple files, @heydonworks explains why.
Legofy
This neat little tool will transform any image to make it look as if it's made out of 1x1 LEGO blocks. It's made in Python.
React Cheat Sheet
React.js is the hottest trend now, and in case you haven't tried it yet, I suggest you do. If you ever get stuck this useful cheatsheet should help.
ECMAScript 6 (ES6): What’s new in the next version of JavaScript
You heard of lot of rumours, but you're not sure what new things are coming to the newest version of JavaScript. Checkout this article to put aside all those rumours.

Until next time, code long and prosper!

Stefan

Image credit: Guillaume Kurkdjian

Basic security. Let's talk about that!

Stefan Cosma — Mon, 16 Nov 2015 00:00:00 GMT

Disclaimer: I'm not a security expert, nor do I pretend to be one. This article just highlights some of the things that I've learned over the years, when it comes to basic security measures. I cannot be held responsible for the bad things that could happen to your app.

When I started out as a developer I didn't take into consideration the security aspects of my websites / apps. As most of my developer friends, I just loved to code.

It's the same story with every other new developer out there. We can safely assume that when it comes to building your first app or website, as a new developer, you won't think about basic security measures, because you ... still trust the world.

As someone who has been hacked, I've learned a thing or two about how to deal with certain things. So, how does one get on the path of a secure web app? Below are the do's and don'ts of what you should consider when building / setting up your app.

Don't ...

... save passwords in clear text in the database

This is quite common among new developers, even professional ones. I've encountered cases where passwords were saved in clear text in the database and everyone had the same password, with no difference between them whatsoever.

Imagine someone suddenly gains access to your database, either forcefully or you've added a new developer to the team. You have to be very trustworthy to actually let people see that information. They could use that information to gain access to other services.

If you continue reading you'll learn how you can solve this and why this is a bad habit.

... use admin as the default username

When you deploy your website or app, make sure you don't have the default username, or the first username saved in the database, as admin. Just make it to something else. You can't imagine how many bots I have encountered that targeted the admin username and tried to forcefully break into the app.

Someone can basically try to guess the password, since assuming the default username is admin, taking every combination possible and filling the input field with it, is really easy. Imagine how many server calls that takes and how it can affect your server's performance. In some cases it can even take your server offline.

... use the default table prefix

When it comes to websites or apps built using some form of CMS / e-commerce system, it's bad practice to use the default prefix when making the initial setup of the app.

If, for example, your app is vulnerable to SQL injection then an attacker can easily target sensitive tables in your database since they know the structure of your database and the prefix you're using.

My suggestion is to always use a different prefix, then the default one. If you're using something like WordPress, that the default prefix should be changed to something custom to the app you're currently building.

... use O (zero) as the first user ID

It's basically the same situation as the previous one. An attacker could possibly take control of the first user and rake havoc in your database and your app, because we all know that, in most cases the first user is also the admin and the one that has the biggest security clearance.

... use weak passwords

This should be common practice for everything not just the apps you're building, but the ones that you use as well. Enforcing strong passwords for all your users can increase your security tenfold.

Suggesting they use a password generator before they sign up or you generating a strong for them should to the trick.

This is a much broader discussion, that I'm not going to tackle in this article, however below there are a few suggestions on how you can fix this issue. My suggestion is to implement at least some of them.

Do ...

... enforce folder / file writing permissions

This is one of the most basic things you can do. Make sure your folders / files are owned by the right user:group combo and have the proper write permissions. Here is a great guide on how you can get started with that.

If your files and folders don't have the right permissions, then an attacker would be able to inject problematic scripts that could disrupt your setup and could endanger other users.

My suggestion, for starters, is to use 644 for files and 755 for folders, as write permissions, if you're using a Linux based system.

... use encrypted passwords

I've already explained what can happen when you save passwords in clear text. Now, I'm telling you, how you can solve that issue, because when it comes to passwords, you should always, always encrypt then, however you want, just do it.

I hope I don't need to enumerate why this is so important, just read this. But I can advise you, on how you can enforce a basic encryption system.

If, for example, you're using PHP you can use the hash function to encrypt the passwords. This is the first and most basic step. The next suggestion continues to improve upon this one.

... use a salting method for passwords

As mentioned above this is an extra step, to ensure that the passwords you save in your database are kept clear of prying eyes. This method is quite common and really easy to implement.

The Wiki explanation states the following:

In cryptography, a salt is random data that is used as an additional input to a one-way function that hashes a password or passphrase. The primary function of salts is to defend against dictionary attacks versus a list of password hashes and against pre-computed rainbow table attacks.

In case you didn't understand what the above words mean then here is the explanation for web applications.

You can implement this by generating a random string, that you have saved somewhere in a private file, you can take that string and concatenate it to the password, before you save it in the database, and then hash the whole thing. When you want to check if the user filled in the correct password you use the random string, that you generated, and you have saved in a secure file, add it to the value you get from the input field, hash it and compare it to the password that you have saved, in the database, for that user.

The benefits of using a method like this one is that it takes a very long time to crack a password using conventional methods.

... escape your data

Always, and I mean always escape your data, weather it's data that you output or something that you save in your database. You don't want malicious data saved in your database that in return you output to your users.

Why is this so important? The most common attack, if you don't escape your data, is an XSS attack. XSS will allow an attacker to inject client-side scripts into your app. When users view that they'll get injected with whatever is in those scripts.

Based on the language and database of your choosing, a method will be available that can help you achieve this. If you're using PHP, google for php escape and you'll find multiple methods.

... enable 2FA

Or if you prefer the long version, two factor authentication. This is a bit in the realm of high security apps. You don't really need to implement this right away, when building your app, but make it so that it's easier to integrate later on. So, what is 2FA?

It's an extra layer of security that requires not only a password and username but also something that only, the user has, for eg. a piece of information only they should know or have immediately on hand.

Since we're talking about web apps, the most common practice of implementing 2FA is to generate a QR code that contains some data. That data is saved in a token app that generates a one time token.
Each time a user fills in their username and password they should also input the token generated by the authenticator app. It's basically a second password that is generated on the go by the user and only they can see it. The system doesn't know it, so if an attacker tries to break in they'll have another layer to bypass.

This can also be achieved either by sending a token via SMS, via a phone call or via email. It can also be a token generated by some piece of hardware or the one that I described, a token generated by a piece of software.

What can be the main benefit of this? Well, the use of two distinct authentication factors can eliminate security concerns, that a system admin may have, around granting access based on a single, knowledge-based factor.

So there you have it. A list of do's and don'ts that you can follow when you build your app. Now, don't get me wrong, I know there are a lot more things you can implement, that I might have missed, but I just wanted to write a short overview of the things that you could implement inside your app. Should you consider them? Yes. Should you be paranoid about security? I would say, no. Or at least, not from the very beginning.

I'll just leave you with something to think about before I wrap this article up.

Distrust and concern are the parents of security.

~ Benjamin Franklin

Until next time, stay secure and don't forget to code long and prosper!

Stefan

Image credit: Guillaume Kurkdjian

Just Another Cluster #1

Stefan Cosma — Mon, 09 Nov 2015 00:00:00 GMT

Welcome to the first ever issue of the Weekly Cluster.

I decided that it's time to put together a list of useful tools, interesting articles, that I find during a week. Weather it's a cool new CSS tool, a wonderfully written article by @SaraSoueidan or a masterfully crafted pen by @anatudor, I'm going to share it.

This is how we're going to do this: I'm going to gather the stuff I mentioned above, make a list, write a few words about each one of them and then share it with the world. You don't have to subscribe to any newsletter or any of that jazz.

If you, for example find any interesting tools or articles that I might have missed, let me know in the comments below and I'll share them in the next weekly cluster.

Without further adieu here are last week's interesting links!

CSS vs. SVG: Shapes and Arbitrarily-Shaped UI Components
In this article Sara Soueidan explains a few techniques for creating arbitrarily-shaped UI components using CSS properties and SVG’s capabilities, and a mix of both!
Firefox Nightly starts marking login-forms in HTTP as insecure
Mattias Geniar shares some insight into why you should switch to HTTPs if your site has any kind of login section because now Firefox is giving you even more of an incentive to do so.
Diving deep into SVG animations
Daniel O'Connor is going undercover to unmask all the secrets of SVG animations.
Gulp for Beginners
If you're a beginner with Gulp (you know, that tool all your developer friends now use to optimise their .js files) then you might want to checkout this great intro tutorial on CSS Tricks.
Virtual Machine to test MS Edge and IE6 through IE11
I'm not sure why I'm sharing this one, since Edge is still a work in progress and everybody dislikes IE. But hey, maybe someone out there will find this useful in some way or another.
Is it maintained?
... that is the questions: Whether 'tis nobler in the mind to suffer - The slings and arrows of outrageous fortune, Check if open source projects are still maintained.
How to Keep Web Animations From Slowing You Down?
Have you ever thought about how you can keep web animations from slowing your app down? Jordan Wade has and he come to some interesting conclusions that you might want to consider when building or rebuilding your app.
clipboard.js
Is a modern approach to copy text to clipboard because it uses no Flash, no dependencies and it's just 2kb. Yes, just 2kb. You know what else is 2kb, your old dial-up connection.
Checklist for your new Open Source JavaScript Project
So you're building an open source JS project. Have you thought about everything? What about creating a package.json file or what about adding a .gitignore? I thought so. This checklist might come in handy.
Ludicrously Fast Page Loads - A Guide for Full-Stack Devs
Your website is slow, but the backend is fast. This guide will teach you how to diagnose performance issues on the frontend of your site.
Styling a Server-Generated File Directory
One word, Apaxy. Also I have a project for this.
Chrome Devtools Tips & Tricks
You think you know how to use Chrome DevTools? Think again. For eg. did you know that you can jump to a specific file, by name, using ctrl-p?
httpie: A CLI http client that will make you smile
httpie is a command-line http client, much like cURL or wget. Written entirely in Python (using requests for the backend and pygments for syntax highlighting) and above that it's working on multiple platforms.

Until next time, code long and prosper!

Stefan

Image credit: Guillaume Kurkdjian

Switching domains. Is it worth it?

Stefan Cosma — Fri, 23 Oct 2015 00:00:00 GMT

This past month, my personal website has been offline. The domain expired and I didn't do anything to prevent this from happening.

There are multiple reasons why I ignored that aspect.

The most important one was that, the domain provider doesn't have a business plan that includes customer focus and satisfaction. In other words, they do not make sure the customer is always informed and up to date with everything that happens to their account.

For eg. I did not receive any prior notice that the domain will expire soon. The only thing I received was a notice that stated the following: your domain has expired, we tried contacting you via the phone number you provided in your account, and you need to pay this X sum of money in order to get it back.

/start rant

They did not try to call me. I have my phone 24/7 on and next to me. I did not receive any call from them.

Secondly, just by providing your customers with a bill after something expired, without any prior notice, is not a good business tactic.

I know from experience that, people don't like it when you don't send them updates regarding things they're paying for.

So, I'm assuming, that their business model is not focused on costumers, at all.

/end rant

After that whole fiasco was over, I still had a droplet that was in a dire need of a domain.

While I was on the lookout for a new domain name, I started turning off all the services that kept my website in a working condition.

This means that I turned off the droplet, cleared out the nameservers, turned off all the monitoring services that I have active (for some reason I'm using multiple ones, instead of just one) and paused the mailing system.

So powering down everything was easy. This impacted a lot of things. For starters, from an SEO point of view, everything went haywire. It was like my website went of the grid.

This was the situation for about a month or so. Then, about a week ago, I came across this domain, and following in the footsteps of Alphabet I registered it.

The fun part

It took about 3h to get everything back up. Since it was a new domain, and I'm the first owner, the DNS propagation took about ~3h. This was good for multiple reasons and here's why.

First off, hats off to Ghost for making it easy to change domain names. Just by replacing the domain name in the config file and restarting the service was enough.

The Cloudflare setup was just a few clicks and ... done!

Turning on, all the monitoring services, took a bit longer because the domain name was different and I basically had to add every check again.

Setting up the mail service, since I'm using a third-party one, was again just a few clicks.

Now that everything was back up and in working order, there was only one issue left. The SEO aspect. I wanted ... scratch that ... I had to update every public account that I owned to feature the new domain name. This meant that I spent about ~2h editing every account and modifying the website. Twitter, G+, Github and so on and so forth. Don't get me wrong, I'm not complaining about this aspect, because it was a chance for me to get up to speed with every account that I own and has a public profile attached to it.

In terms of website SEO, there was not much I had to do, just adding the necessary things to Analytics and Webmaster tools was enough.

Conclusion

The question still remains, is it worth it? Does switching domains impact you as a person, as an individual that has created a brand around him / her?

Initially I would say, yes, but it all depends on your case. It could mean a brand refresh from a marketing stand point but a nightmare for a technical point of view.

You have to think very hard before making a decision like this and put everything into perspective from a SEO point of view and from a technical stand point. If it's to difficult to change the domain name then stick with it and you should increase your visibility, but that's a whole different discussion.

What's your opinion on the whole matter? What issues have you faced when switching domain names.

Until next time, code long and prosper!

Stefan

Working remotely? How to be awesome at it!

Stefan Cosma — Sun, 26 Jul 2015 00:00:00 GMT

You may find yourself at some point in your career when you'll be given the opportunity to work for a company that is not based in the same city or region as you are, but instead, said company is located abroad. So, now you're going to work remotely. This means, that you and your team are not going to be in the same physical office space, but each in their own personal "office".

Now we all know the benefits of working remotely and I'm not going to outline them in this article but instead I'm going to list a few things that can help you achieve greatness when working remotely.

Whether you're working from home or from a co-working space there are a few things that you can do, to make the whole experience more pleasant and to make sure that you and your team are as productive as possible.

Timezones

Make sure you know all the timezones, in which every teammate is working from. Using apps like time.is you make sure that you won't ping your colleagues while they're having their sleepy time. Of course this doesn't apply if there is an absolute emergency, like failed deploys or huge merge conflicts, that require the assistance of a colleague that is in a different timezone.

Schedule

Since we're on the topic of time, you might as well make sure to keep a very transparent schedule. If your colleagues know your daily working schedule, then you won't have any problems. This is really easy to achieve, just set up a public Google calendar with your team and you're good to go. If you keep a very tight and neat schedule then things won't go all haywire, in case of an unforeseen emergency.

While on the same topic, it's worth mentioning that you should differentiate your work schedule from your non-working schedule.

When you're not working, make sure to go outside, experience the world. That will get your creative juices flowing. Weather you're having an intensive creative job or not, going outside will reset your mind and you'll be more productive when returning to work.

Never force yourself to work late hours and always make sure you get enough sleep. As I already mentioned above, you should have a clear schedule that outlines your working hours and your non-working hours. This, of course, only applies if there is no immediate emergency, that requires your attention.

There are a lot of studies out there that explain the benefits of sleep. Of course we don't know the exact reason why we need sleep, but you should be aware of your circadian rhythm and have a clear idea about your sleep pattern. I won't go into details about this, but I recommend a very interesting article on the whole matter.

Office

It doesn't matter if you're working from home or from a co-working space, however it is important to have a proper working space. Now, there are a lot of choices out there to choose from. Here are some of them:

A standard desk and ergonomic chair. I, for one, prefer this chair, from Ikea, and any table that has enough leg room.
A standing desk. This can be any normal desk, where you can place something to keep your computer on a rise and you just ditch the chair.
A combination between a standard desk / chair combo and a standing desk. To be more specific, I'm talking about this
A treadmill desk? Well, you need to get your daily exercise, right? You do. And what better way to achieve this, then running and working at the same time. Personally I don't recommend this one, because your brain won't be able to focus on that many things, while working, and you'll tend to lose focus fast.

Another important thing to remember when working long hours at a desk is to always stay hydrated. Some recommend that you should drink a certain amount of liquids, in any given working day. Personally I believe that you should drink as much as your body asks for. And when it comes to drinking containers I absolutely love this canteen.

Staying connected

We were bound to reach this subject at some point. Now I'm sure everyone has their preferred social networks to stay connected with friends and family, but how does one stay connected with their co-workers?

There are a lot of good apps out there, that offer a lot of features for staying connected with your team. The most popular are Slack and Hipchat. But one has a slight advantage over the other as outlined in this Medium article, that I recommend you read.

It's always good to have a team meeting with your team on a weekly basis. That way you can verbally outline your current tasks and what you're planning on working on. Having short 1 hour sessions with the entire team will give you a clear idea about the things that are getting done. You can use apps like Zoom or UberConferance to host team meetings.

I don't recommend using Skype or Google Hangouts for team meetings because the quality for those is very poor, when it comes to video / audio and the drop-off rate is very high (at least from what I experienced).

Another important aspect when working remotely is to have a access to a good bug / task tracker app. Now, I know each company has it's own system of doing things. Whether you're using an internal build app or something public, that anyone can use, it's important to keep it up to date with tasks and bugs. Make sure your team knows what you're working on and also you'll need an easy way to report bugs and discuss upon them.

I don't have any favorites, but I can recommend a few good apps, that I've crossed paths with. You could try Asana, Pivotal Tracker, Trello, Jira and let's not forget Mantis. All of these are multipurpose, so you can use them for either tracking bugs or tracking tasks.

Recommendations

Before I wrap this up, I have a few extra recommendations.

Make sure that at some point, while working for the company you're working remotely for, you arrange a meet-up with your team face to face or IRL. There's nothing like meeting people in person. Sure, you see them via video but it's something different when you actually meet a person. You observe their body language and thus you'll be able to understand them better, when working on something.

And last but not least, try to use social media to stay connected. you'll find that socialising with your team outside the work realm is going to be beneficial for your work relationship.

Conclusion

In order to be awesome at working remotely, you need to make sure that you have a well established schedule and you're office space is properly organised. I'm not saying you should follow my recommendations, it's your life, you can what ever you want, these are just things I came across while working remotely, that worked for me.

As an added bonus I highly recommend this article, on Lifehack, about making the most of working remotely.

What other things did I miss? Let me know in the comments bellow.

Until next time, code long and prosper!

Stefan

Gedit on steroids!

Stefan Cosma — Fri, 17 Jul 2015 00:00:00 GMT

Programming ...

For me it started out as a passion, when I wasn't even in highschool. I used to doodle small animations, in ASCII, for the Windows command line. Notepad was the tool I used to achieve this. Why? Because that's the first thing I encountered on my fresh install of Windows 95.

Notepad was my first ever real "code editor". Don't get me wrong, I've used it to edit text files and any other type of files that are supported but I mainly liked using it as a code editor.

Now, along the years I have come across a lot of code editors, some good and some not so good. But sometimes you encounter one that amazes you through it's simplicity and usefulness.

Imagine you have a stick. Now, you can tie a sharp pointy rock to that stick and use it as a spear or tie a string to it and use it as a bow, but in the end it's just a stick.

I'm not sure if you understood my analogy but what I'm trying to say is, the more simpler the base is, the more extensible it becomes.

Along comes Gedit

For those of you who aren't familiar with Gedit, this is the Wiki description:

gedit (/ˈdʒɛdɪt/ or /ˈɡɛdɪt/) is the default text editor of the GNOME desktop environment and part of the GNOME Core Applications. Designed as a general purpose text editor, gedit emphasizes simplicity and ease of use. It includes tools for editing source code and structured text such as markup languages.

Basically Gedit comes by default on some Linux based systems. We could say that it's the Notepad of Linux based systems, though this may be a bit far fetched.

I'm saying it's a bit far fetched because your can do whole range of great stuff with Gedit that with Notepad you just can't.

It all stars with a simple Terminal command.

sudo apt-get install gedit-plugins

Once you've installed those plugins, a whole world opens up. Your "stick" suddently has the ability to morph into anything.

For example, you now have access, based on the plugins plackage you just installed, to a whole range of tools. Tools like:

Bracket completion
Code comment
Color picker
Embeddded Terminal. By far my favorite one.
Modelines - Emacs, Vim-style modelines
Multi edit. Another very usefull one.

and a whole lot more.

Basically your simple text editor just transformed itself into a full fledged IDE. Of course it doesn't have all the capabilities of Sublime or Atom but for a beginner this is perfectly fine.

Did I mention it's blazing fast. In comparison to Sublime or Atom, Gedit load instantly almost anything.

Conclusion

In the end it doesn't really matter what you end up using, as long as it gets the job done. I'm not saying we should all ditch our current workflow and switch to Gedit, I am just trying to point out the fact that some simple tools can be transformed into great things, that can be useful and practical.

Until next time, code long and prosper!

Stefan

How To: Auto increment a custom post type title

Stefan Cosma — Sat, 28 Feb 2015 00:00:00 GMT

You're working on a new project with WordPress. You enjoy yourself. You're confident in your abilities but then all of a sudden you realize you need a bunch of custom post types and the user is not allowed to edit the title to one of them but you need to find a way to auto-increment the title because that was a client request.

So, you pull up the functions file, scratch your head and copy / paste the bellow snippet and hope for the best.

// Use a filter to make the change
add_filter( 'wp_insert_post_data' , 'modify_post_title' , '99', 2 );
function modify_post_title( $data , $postarr ) {

	// Check for the custom post type and it's status
	// We only need to modify it when it's going to be published
	$posts_status = ['publish', 'future', 'pending', 'private', 'trash'];
    if( $data['post_type'] == 'penguins' && !in_array($data['post_status'], $posts_status)) {

    	// Count the number of posts to check if the current post is the first one
    	$count_posts = wp_count_posts('penguins');
		$published_posts = $count_posts->publish;

		// Check if it's the first one
		if ($published_posts == 0) {

			// Save the title and the slug
			$data['post_title'] = date('Y-m') . '-1';
			$data['post_name'] = sanitize_title($data['post_title']);

		} else {

			// Get the most recent post
			$args = array(
			    'numberposts' => 1,
			    'orderby' => 'post_date',
			    'order' => 'DESC',
			    'post_type' => 'penguins',
			    'post_status' => 'publish'
			);
	        $last_post = wp_get_recent_posts($args);
	        // Get the title
	        $last_post_title = $last_post['0']['post_title'];
	        // Get the title and get the number from it.
	        // We increment from that number
	        $number = explode('-', $last_post_title);
	        $number = intval($number[2]) + 1;

	        // Save the title and the slug
	        $data['post_title'] = date('Y-m') . '-' . $number;
	        $data['post_name'] = sanitize_title($data['post_title']);

		}        
    }
    return $data;
}

But what does this code do? Let us begin from the top, shall we?

We start from the premise that the user is not allowed to edit the custom post type title entitled penguins.

To be able to identify the post we'll need to add a title manually, after the post is published. We can do that using the, very useful, filter wp_insert_post_data. This will enable us to grab the data that is send to the database and alter it.

After we grab the post data we need to check the state that the post is in. Because we don't want to modify the title if the state is altered in any way. We just create a simple array of all the post statuses and check the current post status with that array. We also want to make sure we're modifying the correct post type, so we check for that as well.

If the test passed then we need to count the number of posts and see if the current one is the first one for this custom post type. We do this using the wp_count_posts function and then grabbing only the published ones.

If there are no published posts then we save the post_title with the current date (Y-m) and the number 1.

Now this next step is where the magic happens. If we do have posts then we need to get the most recent one using the wp_get_recent_posts functions. After that, we get the title for that post and since the title is partitioned using the - character (you can use any character you want) we just need to explode it (the title that is) and increment the number it results to form the new title and save that as the new post title. We also apply the same thing to the post slug, represented here by post_name.

Return.

And that folks is how you auto increment a custom post type title, until next time, code long and prosper!

Stefan

Koding everything ... in the cloud!

Stefan Cosma — Sat, 11 Oct 2014 00:00:00 GMT

You thought I made a typo didn't you? No, I did not make a typo, I am actually talking about Koding.

But why am I talking about Koding?

For starters this article was in my writing queue for some time and also because I am one of the two community managers that handle the Koding community. By community manager I mean, I handle the support channel, engage with people to make the environment more pleasing for everyone and I help build everything that doesn't involve the Koding core, for example stuff like the Koding University.

So what is Koding? Well let me shed some light onto that.

Koding is a developer community and cloud development environment where developers come together and code in the browser – with a real development server to run their code. Developers can work, collaborate, write and run apps without jumping through hoops and spending unnecessary money.

Ok now that you're up to speed with everything we can cut to the chase.

Introducing the all new Koding. The best one yet!

We wanted to improve stability for our users because we had a lot of issues in the past with downtime and such. But we couldn't just improve the back-end and leave the front behind so we overhauled everything and made it more user friendly.

And that's why the whole team got together and rewrote Koding from the ground up.

You may ask yourself what changes have been made besides the visual ones. Let me explain some of the new features that come with the new Koding. I promise I'll be concise.

Improved Stability

We have improved stability a ton!!

The major improvement here is that there are no more hyper-vised VMs. Now every VM is a real VM, and there shouldn't be anything to prevent you from working on your awesome project because of VM downtime. So in other words, no more crashes.

Another great feature that comes along with the non-hyper-vised VMs is the fact that every VM comes with a public IP that changes every time a VM is turned on. How awesome is that?

The all new IDE

An important part of our platform, besides the awesome ever growing community, is the IDE. The IDE is the gateway to the VMs and is the main driving force for any projects.

We thought it was time for a much needed redesign overhaul and so by combining the the powers of developer fairy dust and user's feedback we managed to put something awesome together, that we are very very proud of.

Some of the features that come with the new IDE include:

Split panes. This has been a much requested feature. Best of all you can split into how many panes you want, you are only restricted by the readability of each pane and your screen size. And because we know how important the Terminal is for a developer we made sure that by default the IDE is split into two: the editor and the Terminal.
Drawingboard. This feature has been implemented in the new IDE because we knew how important it is when you want to make a quick mind map of what's going on in your head or you want to quickly sketch a feature for your awesome app.
New keyboards shortcuts. If you're one of those developers that uses only a keyboard like in the early days prior to the invention of the mouse then we made sure you can work your way around the Koding IDE using only keyboard shortcuts. Cool, right?
Awesome new search. What happens when you need some feature from a different project, do you start opening every file you can get your hands on until you find it? No. You search that entire project because you now have the ability to search in files and and replace anything if needs be.
Workspaces. If you're working on an important project and you set up the IDE the way you liked it, you can now define a workspace. If each project requires a custom setup then worry not because you define how many workspace you want that best suits every project that you’re working on.
Other visual improvements. We also made a lot of usability improvements to the IDE and Koding as well. You can customize Koding how it suits your best. You can collapse all sidebars, there is an all new setting sidebar integrated in the IDE and let's not forget about the file tree that can now be collapsed to save you precious screen space.

There are some of the features that come with the new IDE. If you want more in depth stuff, open up the new Koding and give the new IDE a spin or head over to the Github project page here.

Socializing

What's better than a free VM with root access? A large community of developers that will help you implement awesome projects. Because Koding's users are our number one priority we implemented some awesome features that have been requested for a very long time.

By popular demand we implemented chat. You can now chat with your friends or teammates via the new chat feature and will. Whether you're sharing ideas with just a friend or a whole team, the new chat works with everything you throw at it.

We also gave the activity feed some love. The markdown capabilities have been improved on the feed and among the various other things you can do with markdown in a post you can now comment in markdown, because who doesn't love to reply with a quick code snippet to a hard development problem. Btw, this has been one of our most requested features, you can now comment on any post on the feed using markdown. so it was bound to happen at some point.

Channels, channels everywhere! The new channels feature will help you manage what interests you the most. Whether you're interested in basic HTML, CSS or advanced programming, you can follow only the stuff that are important to you.

En fin!

Some people may ask why the change, well we knew things weren't going in the direction we wanted them to go so we gathered the whole team and started brainstorming ideas on how to improve Koding. We made a plan and we stuck to it until the very end. This meant that every new feature that we wanted to implement in the new Koding would have to go through a thorough testing process.

What should you expect as a user from the new improved Koding? Stability, performance and a more awesome community of developers.

With this new change we're expecting the community to grow and also because we now don't have to worry about stability, on our systems, we can now shift our focus on implementing more cool awesome features for our users.

That is all for now, until next time, code long and prosper and see you on Koding!

Stefan

An open letter to WordPress devs about standardization

Stefan Cosma — Tue, 16 Sep 2014 00:00:00 GMT

Dear WordPress dev community and Automattic,

I've been working with WordPress for the past 5+ years. In this time frame I have worked with a lot of stuff, from free crappy open source themes to high-end premium ones. I've built plugins, themes, you name it. In all my years as a developer, that uses WordPress as his main work platform, I've tried to standardize my workflow and the stuff that I use when I'm developing new things.

All this time, I came across some stuff that in my opinion should have a standard. These things obstruct the way a developer interacts with certain aspects of a theme and / or plugin from a development perspective.

For starters, I believe that every developer, that wants to build a theme and / or a plugin, needs to follow some strict guidelines or standards that should be either imposed by the community or by Automattic.

Standards

When I say guidelines I'm not referring to the ones here, these are guidelines on how to write and structure code.

I am referring to standards on how a theme is structured. For example, I am working with a theme that doesn't belong to me, code wise, and I want to be able to export the options of that theme for either backup purposes or to use them with a different installation of that theme. Now, the problem arises, not every theme offers this ability. This is because there is no specific standard set for this and developers are either to busy to add this features or don't know how to do it. This should be a must with every theme.

I know it's hard to set a standard like this and I agree it's bit far-fetched but maybe we can work something out. For example, the community (myself included) could establish an initiative that builds a theme options framework, that is the starting point for every theme developer. This should include the most basic things, like for example:

Export / import theme options,
Naming conventions. Sections in the theme options should have the same name across all themes.
Same options names in the database.
etc...*

*I'll add more to the list in the future

The second to last point, from the above list, is another thing that should be considered as an important standard.

The theme option name set in the database is different for every single theme. It's very confusing when you're working with different themes all the time. This should be a global thing set by WordPress itself. Something like "Hey, if you want to save your theme options, use this option name instead of your own naming conventions!".
Why should this be a standard? Because when working with multiple themes and child themes you need to have a clear view of what's saved in the database and the best way to this is by having the same name or prefix used for all themes.

I propose something along these lines:

theme_options_[Theme name]

Now this option name is clear and you know what to look for in the database when searching for theme options.

Conclusion

In the end, I'll just say this, yes I am aware WordPress is an open source project and not everyone can conform to the same things because every developer has his / hers way of doing stuff, but keep in mind that standards are important. Standards are what got us here in the first place.

Theme developers, I'll only say this, have other developers in mind when building something, not just the end user, because other developers are first and foremost users and if they can't use your product properly then what's the point of all this?!

Bonus

There are also some other things that need to be standardized in WordPress and apparently the community is already working on a initiative. Custom post types and taxonomies are also something that needs a standard, but I won't talk more here, maybe in another article. In the meantime go ahead and checkout this article and this one for more info on the matter.

Until next time, code long and prosper!

Regards,

Another WordPress developer

WordCamp Romania 2014 | Conference Adventures – Episode 3

Stefan Cosma — Wed, 10 Sep 2014 00:00:00 GMT

It was bound to happen at some point in time. It was on my wish-list ever since I heard that the WordPress community is organizing events that gather the most talented and most inspiring people, people that work with WordPress.

After I attended last years WordCamp in Cluj, RO (which was my first WordCamp ever) I knew that someday I'll be on that stage speaking about one of the things I know best, WordPress.

Planning

When I saw the call for speakers, within 10 minutes I submitted a talk proposal and surely my talk was accepted, within a week or so. Of course I was super excited about the news and I stared planning the talk and also the whole trip.

This time around the WordCamp Romania edition was held in Timisoara. A beautiful city in it's own way, to bad the historical part of the city was under construction when I was there. I wish I could have seen the real beauty behind all that rubble.

The date was set, on the 28 June I was to speak on a stage before 100+ people about WordPress development anywhere. In case you missed the page on the left where I talk about me speaking at conferences and share the slides to each of my talks you can find the slides to this talk, here.

In short I talk about how developers can start a WordPress instance in just seconds with Koding and how they can collaborate, in real time, to get the best results.

The talk

I won't get into any trip details, because this time around everything worked as expected and I got there in one piece.

The day of the talk came around and I was the first of the speakers to arrive. I should mention I arrived a day early to do a bit of sight seeing and to find out where exactly I was going to speak.

After some breakfast and some awesome swag from the swag table I started mentally preparing while listening to the people that had talks before mine. Everyone was awesome and it was an absolute pleasure to talk on the same stage with people the are much wiser then me and that have worked with WordPress for a very long time. A big shout-out to @danstefancu for the encouragement and support before and after the talk.

The actual talk went great, the Q&A session was impressive, and as always the demo was rubbish, but it doesn't matter because I already made my point. I got a lot of pertinent questions and I hope I answered all of them. If I didn't I apologize.

En fin

So as to wrap this up, I had an amazing time at this years WordCamp Romania. The organizers did an amazing job with the event. The food was out of this world, the people were really kind, welcoming and supportive. I can say that it was by far the best conference experience I ever had.

Needles to say, now I'm planning on doing a WordCamp closer to home, it probably won't be as awesome as the one I just attended but who knows.

What experience have you had with WordCamp so far? Have you participated at any, as a speaker or attendee? Let me know in the comments bellow.

And before I forget, in a future article I'll post some of my tips on how to have an awesome talk, so stick around if you want to find out more.

Until next time, code long and prosper!

Stefan

What's my uptime?

Stefan Cosma — Wed, 10 Sep 2014 00:00:00 GMT

So I wrote a small project over the course of a few days.

What started out as a small internal thing has turned out to be something more complex but in the end very satisfying.

Initially it started as something simple that I used on daily basis at work. I wanted a way to monitor the local server that I have just 6 feet away from me. It's a crappy old machine that doesn't do much, other then store some files.

Because I have the luxury of having an external monitor attached to my laptop, I could just glance over the it and see if everything is working properly. The idea behind it came after I saw that popular Linux Dash project on Github.

Enter uptimey, a beautiful server monitor!

I wanted something that looks good (the ones that I found didn't impress me at all), is fast and updates automatically without having to hit a button or anything else.

Now let me tell you a little about the features that uptimey has:

Easy install. Just clone the repo and your done. Works out of the box.
Updates automatically. It auto-refreshes the values each 60 secs.
It's beautifully designed. It grabs the Bing image of the day automatically and uses a clean readable font with a simple UI wrapped around it.
Works everywhere. Or at least is should (if you find a place where it doesn't work, please by all means open up an issue on Github).It has been tested on Linux, Windows and Mac servers.
Share it everywhere. If you're proud of your uptime you can share it o Twitter.
Bonus feature. If it just hangs you can hard refresh using the provided button.

I should mention that for this to work you need some stuff on your server:

An internet connection.
PHP installed.
Some type of server, like Apache or nginx installed.

For developers

For starters it's open source. You can find it on Github and contribute to it.
In the repo you'll find some stuff to help you develop it, like a Vagrant file and gruntjs file. If you don't know what Vagrant or Grunt are, google them.

The Future

I have some upcoming features that I want to implement as soon as possible. For example:

Showing the server load.
Make it responsive.

If you feel like contributing, please by all means fork it.

I hope you enjoyed this brief presentation of a small project that I built. If you have any feedback or issues / questions please leave them in the comments bellow or drop a note here.

Until next time, code long and prosper!

Stefan

Meeting the locals!?

Stefan Cosma — Mon, 08 Sep 2014 00:00:00 GMT

A more appropriate title would be: should I meet the locals or do I have any locals that I should meet and when I say locals I'm referring to local developers / web designers around my area or even around the country.

I have a big issue with this topic.

How so, you may ask?

Well for starters, around my city there is a lack of social gatherings and a shortage of developer communities. Either there are some that are so underground that not even the NSA knows about or they simply don't exist. I prefer the latter.

Not having these type of communities means that I can't share my knowledge or learn from others that work in the same field as me and share the same mother tongue. This is a major issue for me because by nature I'm a social person and I love pushing myself to newer hights with the help of the stuff I learn from others.

Sure I have Twitter, Github, G+ etc but that's on the interwebs. I'm old school, I like face to face interaction.

But there is a silver lining to all this, I found one such place where I can share the stuff I find interesting, the stuff I know about and where I can learn stuff from others. This place is a digital one in the form of devforum.ro. Devforum.ro has finally fulfilled my desire of having a place where I can talk to people that appreciate what I do and where I can learn new amazing things, that's not Twitter or any other social medium.

Above all this, I should mention that thank the web gods for all the amazing conferences that I attend. Thank the web gods for those! If it weren't for those, probably I would have gone mad and locked myself in the highest room of the tallest tower.

Still there is an issue. How can one engage with local people that have the same interests as you? I have searched the web relentlessly for events, meetups, social gatherings around my area that I can take part of. And still nothing! Why is there such a lack of socialness in small towns / areas? Are the developers scared of something? I know there are developers around the city (I attened university with 30+ of them).

Got any ideas on how to fix this? What do you do in your area? Do you organize meetups yourself? Let me know in the comments bellow.

Until next time, code long and prosper!

Stefan

Docked or undocked? That is the question.

Stefan Cosma — Sun, 07 Sep 2014 00:00:00 GMT

So I ran a poll. And people answered and the results surprised me, to say the least. The question was simple. Developer Tools docked or undocked?

74% of all people that answered my question said that they prefer to use the developer tools docked. I was a bit surprised because this means that either they have small screens or they don't know they can undock.

The other 26% said they prefer to have it undocked because they know they can have docked but choose not to.

So what do these numbers actually mean? Well from what I understand and from my personal experience, it all depends on the case. If you're like me and at the office you have two monitors then, yes, you can afford to undock your developer tools and on one monitor have the browser and the other one have the developer tools. But if you're only using your small 1366x768 laptop rez (like I do at home), then undocking the developer tools is not such a great idea.

This issue is case depended, as I already said before, but that doesn't mean we can't talk about it further.

The developer tools are there to help you and as every tool you have to use it to it's full potential, thus undocking it is the best approach, in my opinion. Looking at the DOM properly and fiddling with it is as awesome as it sounds.

I'm not saying I'm not using the developer tools docked but it most cases it's the other way around, just because it feels more comfortable and it helps me read the code or console comfortably.

This is also browser dependent. Why? Well because if you're on Chrome, then my suggestion is to just try it undocked and the same goes for Firefox. On Firefox for example if you're using the 3D view to visualize your page then having something docked at the bottom or on the right is not the best choice.

What is your opinion on this? Let me know in the comments bellow.

Until next time, code long and prosper!

Stefan

Bonus: the poll is still up: http://votes.io/if3d

Mozilla Open Source Iasi | Conference Adventures – Episode 2

Stefan Cosma — Sun, 11 May 2014 00:00:00 GMT

It all started on a gloomy fall day, last year. The air was warm and I just finished writing a long(ish) email to someone who now has my utmost respect and appreciation. In case you were wondering I’m talking about one of Mozilla’s representatives around here, Andreea.

Andreea is the mastermind behind one of the industries most “underground” events. I kid of course! The event I’m talking about is under the Mozilla flag and it couldn’t have been more well prepared and organized.

I knew she was putting something together, this year, because, well we talked about it and she explained how this event would go. She had lists over lists of stuff that needed to be done. I had my small contribution to the overall organization of the even, of course.

When she finally decided on a date and topic for the event, she asked me if I knew anyone who was willing to speak at this event. If you haven’t figured it out by now, I was also going to speak at this event. Of course, my first choice was my good friend Jakob, who has a long experience in speaking at events.

The date was set for 15 March in the lovely city of Iasi and the topic was open source.
Reservations were made and finally the date came around.

I forgot to mention, the topic of my talk was how can Koding help the Open Source community and the developer community in general.

If you’ve read my previous post about my adventures at a conference you probably know that I’m not very lucky when it comes to getting to a far away place. I was set to depart on the 14th by bus. It was a long 8 hour drive. But in the end I got there in one piece.

Check-in at the hotel? Check! Meet up with the rest of the speakers, including Andreea and Jakob? Check!

After the pre-conference fun was over, the conference day came around. The venue for the whole event was a conference room in one of Iasi’s biggest malls. And thus the stage was set!

The event started and everybody had their goodies to play with. (Thanks Mozilla and XWiki for the goodies!)

The first one on the stage was Jakob. He indulged us with some funny anecdotes and explained why you should develop stuff embracing the open source concept. The audience, still fresh, was captivated by the humours talk.

Up next was Andreea, that showed us ways to get involved in the Mozilla movement. The only thing I can say about the talk is that, I am now a more frequent user of Mozilla, not only because of the talk but because Chrome is stubborn and refuses to work properly.

Sabin and Flavius, had some great talks about 5 star data and WoUSO (World of USO). The latter made me want to actually play the game if it were available for everyone.

A short break and I had the stage. After some technical difficulties with navigation, I managed to keep the talk going. When the demo time came around, I had some more technical difficulties because of the WiFi, but the audience didn’t seem to mind it. The Q&A session was amazing. I had a lot of questions about Koding and the overall vibe of the audience was awesome.

The rest of talks were incredibly interesting and informative with a few worthy mentions.

The Mozilla reps, Alex and Ioana shared some info about the new Firefox OS (I had a chance to play with a Firefox OS powered phone) and about women in open source, well not just in open source but in the programming environment also.
The latter transformed from a talk into a full-fledged debate about women in technical areas. Amazing debate and amazing people with different opinions and ideas!

And thus the end came around. Pictures were made, hands were shaken, hugs were given and everybody left with a big smile on their face.

In order to wrap this up, I would like to thank everyone that joined us on that lovely March day and especially to Andreea, for her guidance and the opportunity of allowing me to speak at the event she put together, Jakob for his guidance, friendship and awesome tech support and my girlfriend for putting up with me in that time frame.

You can find bellow some goodies from the event, including my presentation, some pictures and the website where you can find it all.

Until next time, code long and prosper!

Stefan

How To: Setup a simple file server

Stefan Cosma — Sat, 10 May 2014 00:00:00 GMT

The author of this tutorial should not be held responsible for any loss of data or hardware that one may encounter by following this tutorial. You have been informed.

We’re developers! We have projects, a lot of projects. We don’t want to store the old ones on our dev machine, because you know, storage and organizing stuff is important. Oh, who am I kidding, go rent yourself 20TB of space at Amazon, you’ve earned it.

But if you don’t want to do that, what can we do about it? A simple answer would be to get that crappy old machine you used to develop stuff in 9th grade and make a file server out of it.

Whether you’re archiving your old projects, storing images of your ex or just downloading huge collections of cat videos, you’re in a point in time when your information is your main concern. You may have a large fast drive but that doesn’t mean you can keep all your information on it.

Sure you can set up a cloud environment or an external hard-drive but that doesn’t mean you should. What if the internet goes down, or you lose the hard-drive and besides that who doesn’t love SSH and its ultimate supreme powers.

That’s why in this “short little” tutorial, I’ll show you how to set up a basic file server using some basic knowledge of Linux commands, some magic and a lot of patience. Follow the steps bellow in order to complete this awesome “little challenge”.

Step 1 – Setup the USB drive

Get a hold of an old USB drive with at least 2GB of free space on it and a crappy old machine that is held together by duct-tape and your hopes and dreams. You already have them? Awesome. Plug in the USB drive in your computer (not your lame excuse of a machine) and let the awesomeness begin. We need to prepare for the setup ahead.

Download the latest LTS of Ubuntu in the form of a mini version. You can use any other distro, but for this tutorial I’ll use Ubuntu 14.04 (I like to stay up to date). You can get one here or choose from the list here.

After that, you need to download an app that allows you to set up the ISO on the USB drive. Due to the fact that it’s a minified version of the original ISO, it doesn’t have all the crap that the original Ubuntu has, it’s just basic Ubuntu. You can use this app for example, UNetbootin, to set up the ISO on the USB drive. Follow the steps bellow to write the ISO on the USB drive.

Open up the app.
Select the Diskimage radio button.
Choose the Ubuntu mini ISO you downloaded previously.
Choose the USB drive.
Click ok.
You’re awesome!

After you finished writing the ISO on the USB drive, unplug it from your computer, and plug it into the machine you want to set up the file server on.

Step 2 – Install Ubuntu, the mini version

Now comes the fun part.
After you plugged the USB drive into your crappy machine, enter the BIOS setup and set the USB drive as the first boot device, save and boot from it. I can assume you already know how to do this.

When the Installer boot menu comes up, select the first option, Install.
Next choose the language, followed by selecting your location.
You can choose to configure your keyboard or auto-detect it. In most cases you let it auto-detect by choosing No.
The next step will ask you to set a hostname for your server. This name will identify your system on the network so you can access it more easily. Set a simple, recognizable name, like “the_google_server_for_ads”, because it’s a local network, you don’t need to worry about anyone making fun of it.
The following step allows you to choose the mirror you want to download the updates /required files / libraries that the OS may need. Choose one based on your current location.
Leave the PROXY field blank, because you’re on a local network. After the installer gets all the files it needs from that mirror, head over to the next step.
The next screen will prompt you to reformat the hard disk. Let’s assume that you are going to use the whole hard disk, just select “Guided – use entire disk”. If you are not going to do that, you can select “Manual” and configure the partitioning accordingly.

Choose Yes to confirm the settings.

Let the installer do this job.
Next, choose a username and password for the new machine and then choose if you want to encrypt your home folder or not.
Again, you let the installer do his job, because he’s a good installer and he knows his place.
Do you want security updates installed? You sure do.
The next step asks you to select the software you want to install. Select Ubuntu Server.
You can install the GRUB loader on the master boot record.
Unplug the bastard from the machine and reboot the machine.
Et voilà! You have a new Ubuntu machine set up. You can now login.

Step 3 – Configuring Samba

It was fun until now, right?
Alright, but you need to allow access to this server from the network. How do you achieve this?

You use Samba. It allows you tho share files between Ubuntu, Windows and Mac with no problem.

Run the following commands, on your newly installed Ubuntu server machine, to install Samba:

sudo su

Enter your root password.

apt-get install samba

This will install the Samba server on that machine.
After that you need to configure it. Run the following commands:

mkdir /home/%YOUR_USERNAME%/Public
chmod 777 /home/%YOUR_USERNAME%/Public 
cd 
gedit /etc/samba/smb.conf

You can use any editor you want, of course.
The first thing you need to enable is the Windows support. Find the following line in the Global section and set it to yes.

[global]
  wins support = yes

After that head over to the end of the file and add the following lines. Remember to replace %YOUR_USER% with your actual username.

[Public]
  comment = Public Folder
  path = /home/%YOUR_USERNAME%/Public
  browseable = yes
  read only = no
  guest ok = yes
  guest only = yes
  create mask = 0755

Safe the file and reboot Samba using the following commands:

restart smbd
restart nmbd

That’s it for this step. Basically you should already see you machine on the network and perform actions inside that folder. Of course you can modify the options in the Samba config file as you please, but be careful before you do that.

The last steps are optional and should be followed only if they are actually needed or if you want to have some fun and learn something useful.

Step 4 – Configuring SSH

Since it’s a local network and you don’t actually go out into the world with that server you can install OpenSSH, so you can manage it from your own computer instead of using a keyboard and a monitor connected to that machine.
On the server run the following command:

apt-get install openssh-server

and you’re done with the server, SSH is now installed. Now back on your own machine! If you’re using Ubuntu or Mac run the following commands in your Terminal.

You need to generate a key that allows you to ssh into the server machine. Run the following command to generate one.

ssh-keygen -t rsa

If you want to avoid the login you can set up a configuration file. In your Terminal run:

cd /home/%YOUR_USERNAME%/.ssh/
nano config

add the following line to the file and then save it.

User %THE_USERNAME_YOU_SET_ON_THE_SERVER%

You can now connect to your server via SSH using the following command and the correct IP address, that your server has on the network. You can find this, by visiting your Router dashboard or by heading over to the last step of this tutorial.

ssh 192.168.1.xx

Head over to the next step for more useful commands that you can use on your server.

Step 5 – Bonus Commands

Besides the commands I have already mentioned in this post a while back. Here are some bonus ones that you can use to scan your network for other computers and to find your own IP.

First you need to install a package that allows you to do that. Run the following command:

apt-get install arp-scan

After that, you can scan the network using the following command, if the machine is on a WiFi network:

arp-scan --interface=wlan0 --localnet

or just

arp-scan -l

if it’s an LAN connection.

Another useful command that is used to configure the system’s kernel-resident network interfaces is the following:

ifconfig

And that was the end of this step.
Congratulations! You have finalized this tutorial! You are an awesome human being! :)

I hope this tutorial was useful, because it was fun for me to write and to experience it. I spent a whole day trying to get this right on the first try. I had a really crappy old machine with only 256Mb of RAM, that for some weird reason didn’t die on me.

Please, by all means correct any mistakes I might have made in this tutorial and please share your experience on this topic. What configurations do you use? Leave a comment below.

Until next time, code long and prosper!

Stefan

A hosting malfunction.

Stefan Cosma — Sat, 26 Apr 2014 00:00:00 GMT

If you’re reading this article, it means the website is up and running as it’s supposed to.

I should put a notice like this everywhere, but why would I need to in the first place? If you’re a regular on my website, then you might have noticed some changes in the past week.

A new design, some tweaks here and there but the most important thing of all is the fact that I have changed the hosting provider. Why would I need to do this?

The time has come! Switching hosting providers! *sigh*

— Stefan Cosma (@stefanbc) April 24, 2014

By the time I posted the above tweet, my website was down and my hosting account suspended because of one issue.

It all started with an email I got. I received one of those automated emails, notifying me that CPU quota limit has been exceed. Weird! After some investigating, plugin disabling, cache enabling and some server monitoring I came to the conclusion that everything was good to go. I was so wrong!

Two days later, boom, another similar email. Investigated the issue and tried optimizing the website even more than before.
All was good until one day when I was doing a random visiting on my website that I found out what happened. I have Port Monitor set up to notify me when something happens. I noticed something was different when I only got one email from Port Monitor telling me that the website was down. Usually I get 2 of them, one that says it’s down and another that says it’s up.

It was a dreadful 403, a developers nightmare! Alright it was time to take action.
Opened up a support ticket on the hosting provider’s website and 5 hours later got a response. I should mention that I had only an old local backup of my website and I asked them to activate my account so I can at least backup it up properly. I managed to back it up properly and after 20 mins it was suspended again.

I knew I had to do something about this so I started looking for a different hosting provider. After many hours of searching and reading reviews I found one.

I immediately started moving everything to the new hosting but there was a problem. The old account was suspended so I could not access it and remove it so I could register the domain to the new hosting. Ticket time again. They fixed the issue and 1 hour later all was set up on the new hosting. But…

DNS propagation, I loathe thy! :(

— Stefan Cosma (@stefanbc) April 24, 2014

It was 1am when everything was back to normal. After almost 24 hours of inactivity it was then and there I decided it was time for a new look, a new start.

So what can we learn from this story? For starters, choose your hosting provider carefully. Chose one that can resolve your issues quickly without any hassle, that can provide easy solutions and best of all on that suits your needs, and if all else fails you can always set up your own VPS!

I hope you won’t have to go through all the stuff that I went through to get my website up and running properly but if you already did I would love to hear your story. Just drop a line down below!

Until next time, code long and prosper!

Stefan

Reading other people's code.

Stefan Cosma — Sat, 05 Apr 2014 00:00:00 GMT

It's more of a question actually. What's it like to read other's people code and why you should be prepared?

Well, the evil doers over at the powerful and evil Abstruse Goose Corporation made this into a bloody good comic. Go read it and then come back, so we can understand what's really going on here.

waiting for the reader to come back

Well if you made it to this sentence it means we can continue with our philosophical pondering of random stuff about computer programming.

In order to answer our questions we first have to look at the standards of code writing. I'm not referring to language standards but to actual writing of code. The developer community has standards, in terms of code writing, right?

We can all agree that we do, in some way or another. The problem with these standards it that there is no proper authority that tells the developer how to write his or hers code.

The lack of proper standardization from developers is appalling. Yes, if you work in a big company, you have certain guide lines that you must follow, but if you're an open source developer, like most of us are these days, then you don't give a rats ass about guide lines, because you write code the way you feel comfortable writing code.

Maybe you're opening the brackets on a new line after the class name, maybe you're using tabs instead of spaces and above all that you use 4 tabs.

As much as I hate to play devil's advocate, with myself, contradicting my own words, I have to agree that all of the above are standards that people adhere to. There are standards, but there's too many of them and people still write code the way they feel comfortable.

Unity. That is what we need. We need people to collaborate more than they do now. Github is doing a marvelous job at this. How come?

Well imagine forking a project, modifying it and making a pull request. You, for the sake of the project and others like you write the code in the original style. Or maybe someone else has this job of formatting all the code in that project. But let's get back to collaboration.

Why is collaboration so important? Because the more you talk and work together with other developer the more you learn from them, they learn from you and both sides start using the same style of writing and conceptual thinking.

You start to write code with a style that is shared by your developer friends / collaborators. As everything these days, unity and standardization also have a different side. When you apply unity and standardization you automatically take out the individualism of each person and you create a kind of dictatorship out of code writing.

If everyone would conform to the same style of writing code, we'd be North Korea of code writing. And we don't want that don't we? It's a treacherous path to follow, this standardization of code writing, and in the end it's a matter of choice for each developer.

So, in order to answer our questions we had to look at the way people work and the conclusion we can come to is this: reading other people's code is a bad if you don't have enough experience in the field. You should be prepared to read, interpret and think like the original developer of the code, because it all revolves around your ability to adapt to certain situations. But the human race is built to adapt and you should have no problem in deciphering some lines of code.

Until next time, code long and prosper!

Stefan

Are we too dependent of the tools we use?

Stefan Cosma — Tue, 01 Apr 2014 00:00:00 GMT

A few weeks ago, I had the unfortunate chance or let's say "opportunity", of working on something without going through my usual workflow. And what did I learn from that experience?

Well, that you are as good as the tools you use and the most important thing, that stuck with me, is that the whole process sucked. And when I mean it sucked, I mean it was so horrible that I felt I was in the middle ages, where they had to copy books by hand. I mean not only was I out of my comfort zone, but as strange as that may sound, I started with my mind-set on doing something out of my comfort zone.

As developers, we have an established workflow and we usually stick to that until something better comes along. But if for some weird reason that workflow is suddenly broken, by some unfortunate events, we are left stranded like Tom Hanks in Cast Away.

So, are we too dependent on the tools we use? I would say yes. Why? Well, for one simple reason. Just a like a blacksmith needs a hammer to forge an armor, we also need a code editor and a terminal to create something.

But this can be a two-sided blade. On one hand, the tools we use, help us make great things, that we can share with the rest of the world, and there is also a "dark" side to this.

If we get too attached to these tools we might not be able to evolve. And it's in the human nature to evolve.

How can we overcome this? Well for starters try using / testing a different set of tools. Lets take for example a code editor.

We all have that favorite one. Whether it's Sublime, Coda or whatever, we all have that special one.

My advice is to try using not one, but two or three on a regular basis, just to make yourself comfortable with as many environments as possible.

Use Sublime, Atom, Brackets or even an online one, like the one Koding has, which is based on Ace. That way you won't feel so uncomfortable when, lets say, you change you job and the new job has a mandatory code editor that you need to use.

Alright, but, that's not all. Try changing your workflow from time to time. Yes, I am aware that you can be unproductive if you do this way to often, nevertheless a change is always welcome, if it's for the better. I for one, try to change my workflow, at least once a year, by introducing new tools and getting rid of the old ones.

A good example would be, on my Windows machine, I used to use the GUI version of Github but now it's all command line.

So, what's the conclusion? I believe that no matter how dependent you are of the tools you use, it's important to remember one thing: the tools you use were made my developers, like you and me, and some of them may be good or some of them may be bad, but as long as they work for your projects, you feel comfortable using them and you're productive, then you can be as dependent as you want of them.

Until next time, code long and prosper!

Stefan

When is autoplay music acceptable on a website?

Stefan Cosma — Fri, 21 Mar 2014 00:00:00 GMT

Interesting question, don't you agree? I would like debate a bit about this subject, because I ran a poll on Twitter and I believe we all encountered this on our endless endeavors around the Internet realm.

Music. Love it or hate it, it's a part of our lives. It doesn't matter if you're an avid listener or just the average Joe that listens to it occasionally, the point is that music is all around us.

Just open up a window, close your eyes and hear the world. But our lives are split between a life we have in the outside world and one in the world we call the Internet. And believe it or not, there is music on the Internet, and lots of it. Mind blow, right? My thoughts exactly.

We have a lot of websites that let you listen to music directly online and that's nice and all but what happens when we encounter a website that is not a music streaming service, but it has music playing in the background? You close the tab and move on with your life. Haha, I wish it were that easy.

For some it might be, but that's why I ran a poll and wanted to get others opinion on this. You can comment on this article, because I would like to see what you think about this.

First of all I would like to say that it's the client's fault for all this debating. If a client wants something, chances are the developer or the agency will comply and implement those requests. So if the client wants music on his/her website he or she will get music on said website. Do we, as developers and ordinary people, find this acceptable? Well some of us do, some of us don't.

According to the poll, 81% of you said that background music that autoplays is unacceptable and you hate it.

There are two paths here. One is to a have a button and let the user choose if they want music or not or just autoplay the bastard. Usually it's the latter, but there are some exceptions.

Alright, but what about the rest of the results? 19% of you said that you find it acceptable sometimes, eg. a Chrome Experiment, and 0% said it was acceptable. Chrome Experiment.

My opinion of the matter is as follows. As long as I expect something to be interactive and has the word experiment in its title I automatically assume it may have music in the background, so I turn my normal music down, but in some cases when I came over a random website that has songs of birds and rivers in the background that autoplays, I immediately close the tab in question.

Why? Well, because knowing that something is thought of as an experiment, implies the fact that the guys and gals behind it, experimented with video as well as audio. But if something has the word flower in its title, I won't expect it to have music in the background. That is just my opinion on the matter, but I would like this discussion to go further. What are your thoughts on this?

Is autoplay music acceptable on a website disregarding the title?

PS. You can find the poll results here and still vote. :)

Until next time, code long and prosper!

Stefan

Maps API or X marks the spot.

Stefan Cosma — Mon, 06 Jan 2014 00:00:00 GMT

No, we're not making fun of Apple Maps, but we could if we wanted to. Let's just say I don't want to jump wink wink into the whole Apple Maps conundrum.

This article, in particular, is focused on describing my adventures with Apple Maps's older and more experienced brother, Google Maps.

Now, I'm sure you don't want to know how Google Maps came to be, I mean you can read that on Wiki, right? Lets get down to the nitty-gritty! Along my years as a developer I've had my fair share of experiences with the Google Maps API.

It all started on one summer morning. It was hot outside and the AC was running full steam. bing rang the email notification at the bottom of my screen. Oh look, a new project! As I read the short brief, I understood then and there that I would soon dive in the cumbersome world of the Maps API. And that was the beginning!

Tip: If you understand the Maps API from the very beginning, you won't have any trouble later on.

The basic principle of the Maps API is that you have a container and in that container, the map is loaded using JS. On top of that you can add an extra layer of interaction to the map, you can add markers.

The idea behind markers is that you can interact with them and point a user to a predefined location on the map. For example you have a website that promotes local businesses. But how can we achieve this, without staying too late and miss out beaut sleep? Well it's quite simple (It always is!). First of all we need to create a simple container, like the one below.

<div id="map-canvas"></div>

After we have this container, on our page, we can go ahead and start loading the Maps API. I should mention that for the sake of this example we are going to use jQuery to load some stuff, but don't worry there are other ways you can do this. In the head part of our page or in a different .js file we start initializing the map. We do this by using some basic JS.

<script type="text/javascript">
    var infowindow;
    var map;
    function initialize() {
        var mapOptions = {
            zoom: 13,
            minZoom: 13,
            center: new google.maps.LatLng(LATITUDE,LONGITUDE),
            panControl: false,
            zoomControl: true,
            zoomControlOptions: {
                style: google.maps.ZoomControlStyle.DEFAULT
            },
            mapTypeControl: false,
            scaleControl: false,
            streetViewControl: false,
            overviewMapControl: false,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            scrollwheel: false
        };
        jQuery.get("markers.php", function(data) {
            jQuery(data).find("marker").each(function() {
                var eachMarker = jQuery(this);
                var markerCoords = new google.maps.LatLng(
                    parseFloat(eachMarker.find("Latitude").text()),
                    parseFloat(eachMarker.find("Longitude").text())
                );
                var name = eachMarker.find("Name").text();
                var url = eachMarker.find("URL").text();
                var html = "<a href='" + url + "' title='" + name + "'>" + name + "</a>";
                var marker = addMarker(html, markerCoords);
            });
        });

        map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    }

    function addMarker(html, markerCoords) {
        var marker = new google.maps.Marker({
            animation: google.maps.Animation.DROP,
            map: map,
            position: markerCoords
        });

        google.maps.event.addListener(marker, "click", function() {
            if (infowindow) infowindow.close();
            infowindow = new google.maps.InfoWindow({
                content: html,
                minHeight: 300
            });
            infowindow.open(map, marker);
        });
        return marker;
    }

    function loadScript() {
        var script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&callback=initialize';
        document.body.appendChild(script);
    }
    window.onload = loadScript;
</script>

Ok, but what does the code above mean? For starters, we need some basic variables to hold the map itself and the info box for each marker.

The first function initializes the map with the options we want. These options can have a great impact on the map itself. I should mention that the ones mentioned in the code are not all the ones available, those are just the ones I find the most useful.

One important thing to remember is that the center map option, that needs longitude and latitude, is required when initializing a map. Without it, the map would be all over the place and we don't want that, do we? The next bit of code is for loading the markers. We achieve this by using jQuery, an external php file that outputs some XML and another JS function that creates the marker and adds the info box to each one of the markers.

We're using jQuery's get function to achieve this, but as I said earlier, you can use what ever you'd like to load the markers, this is just a solution I use.

After all this is done, we generate the map object, using the already created container and applying the map options. Each marker is generated from an XML output, but to add it to the map we go through all of them and call the addMarker function to add the info box.

After that we add them to the map, using the coordinates available. Basically each marker is an object that we add to the main object, which is the map. Last but not least, we load the actual Maps API using some basic JS. You may have noticed that I skipped the loading markers step. Well that's because that is a whole different story.

For this particular example I'm going to use the version of the markers.php file that I use in WordPress. This means that I use basic WordPress functions and some things that you may blame me for using, but I don't care about that at the moment because this is not a production project.

Before we begin, I should mention that I use the Advanced Custom Fields plugin to add a location field to a post. The latest versions of this plugin come with a Google Maps field that you can generate and add as a field just like you would with other custom fields.

Ok, so the basic concept of this markers loading is that we query for posts and we get the name, coordinates and the url, after that jQuery can come in and get them. These are just some basic stuff you can get. You can grab all sorts of stuff from a post, you're imagination or requirements are the limit.

<?php
    header('Content-type: text/xml');
    $parse_uri = explode( 'wp-content', $_SERVER['SCRIPT_FILENAME'] );
    require_once ($parse_uri[0] . 'wp-load.php');

    echo '<?xml version="1.0" encoding="utf-8"?>';
        echo '<markers>';
            $query = new WP_Query(array(
                'post_type' => 'post',
                'posts_per_page' => '-1'
            ));
            while ($query->have_posts()) : $query->the_post();
                $location = get_field("location");
                if ($location['address'] != "") {
                    $marker = '';
                        $marker .= '' . get_the_title() . '';
                        $marker .= '' . trim($location['lat']) . '';
                        $marker .= '' . trim($location['lng']) . '';
                        $marker .= '' . get_permalink() . '';
                    $marker .= '';
                    echo $marker;
                }
            endwhile;
            wp_reset_query();
        echo '</markers>';
?>

Ignoring the second and the third row, we start generating our XML output. Using the basic WP_query function, available in WordPress, we query for posts and we get all of them, but you can play with this as you please.

If we have posts, we go through each one of them and start outputting.
The beauty of the ACF plugin is that it provides a simple function (The get_field function!) to get the field values for a post and with that data you can do what ever you want. In this case we have an array that contains the latitude, longitude and the address. All we need is the latitude and longitude. The basic get_the_title and get_permalink functions are also present.

We reset the query and close the XML. Now, jQuery can come in and grab each marker and add it to the map.

And there you have it, simple and easy Google Maps API integration with marker loading.

I hope this “short” tutorial was easy to understand. This was my version of Google Maps API integration for WordPress and if you have any suggestions / comments just tell me.

Until next time, code long and prosper!

Stefan

Developers and holidays. A weird relationship?

Stefan Cosma — Fri, 20 Dec 2013 00:00:00 GMT

'tis the holiday season! Maybe you're coming or going home for the holidays. Whatever maybe the case, you rejoice the fact that you finally have a break from all the stuff that happened this year.

It doesn't matter how well this year went, what's important is that it's all over (Even if you don't want it to be!). We're developers and people say we are a special breed of people (Or so I've heard over the years!), and some of us (If not all!) are geeks (and some are even nerds!

But we don't like labels!) and we're proud of it. We wear this badge with pride even if people mock us for our enthusiasms when somebody makes a new discovery using CSS or does some crazy experiment with HTML5 (I'm looking at you Chrome Experiments!).

But what do developers like to do for the holidays? Well a certain comic strip comes to mind that can sum it up perfectly.

If you followed the link to the comic you'll know what I mean. Because of the social awkwardness that some of us have, we don't actually know what else to do when the holiday season comes. I'm not saying we don't socialize, I'm just saying that we just prefer the company of other fellow developers over the medium of the interwebs. It's a lot more fun to just stay at home and figure out a way to add holiday cheer to all your apps and code, maybe with the help of your other fellow developers. You enjoy spending time figuring out a new way to create a Santa hat using just one div tag.

As Pablo points out in his comic, maybe you enjoy doing funny stuff to your blog, like adding some snow using CSS or a Santa hat to your logo using :before or :after.

These are stuff we enjoy doing and nobody can tell us different. But developers are humans and we do have families (and some of us even have girlfriends / boyfriends) and these families need some material compensation for putting up with our shit all year-long, that's why we like to do our shopping online and get it delivered to our doorstep.

We also like to order stuff for ourselves for the holidays because that's how we roll.

Usually our wishlist contains stuff like the latest in books for developers written by developers, some super expensive gadgets, that we're going to use a few weeks and then forget about it.

Ok, now that we're done with the shopping we start placing hints for other people to see what we want to receive for the holidays, even if we already got ourselves a whole bunch a stuff in the first places.

You may ask yourself at this point in the article, do developers actually celebrate something when the holiday season comes for the rest of the world? Well it's a good question, my dear friend. Because we are surrounded by all the technology and we have all the information available in the world at the bottom of our fingertips we have a certain point of view when it comes to the holidays.

We acknowledged the evolution theory, quantum physics and string theory but for some reason we still like to celebrate something that started out as a pagan ritual. On the other hand we don't like to acknowledged the existence of certain bearded figure because the numbers wouldn't add up and it would be practically impossible for anyone to perform such a feat of strength and endurance in a single night.

So, in order to wrap this up on a positive note, I would say that we as developers have a certain way of doing things, even when it comes to celebrating something. I wouldn't label it as weird, just different and it's a shame because so many people misunderstand this concept and start pointing fingers, but that's just the human race, we like to point stuff out if they are out of the ordinary.

That is all. Until next time (whenever that is!), code long, prosper and Happy Holidays!

Stefan

Monitoring all the stuff!

Stefan Cosma — Mon, 16 Dec 2013 00:00:00 GMT

Despite the fact that we are being monitored day and night by an entity that knows almost everything (even what we had for brunch on Nov. 5), and yes I'm talking about moon people, we still have an unsatisfied need of knowing what happens to our belongings.

Be it a website or a web app, we need to know what happens with it, while we are away, disconnected from the interwebs. But often we ask ourselves how can we achieve this without paying a dime?

Luckily, nowadays there are a lot of tools that can help us in our quest for monitoring stuff, and when I mean stuff I don't mean that website you build in the 9th grade for Mister Snookums.

Right, let's get to it then. What do we have available at the moment and what works out of the box? Here's a short list I made with the ones I find more useful:

Ok. Now lets see what each one does and if it's any good.

New Relic

We all saw the ads and some of us even got a shirt from these guys, and so the question arises, are they any good? At first glance you might think that this tool is for sysops only. And you may be right to some degree. The guys and gals at New Relic simplified the whole monitoring your server process.

They made it in a such a way that anyone who knows how to open up a terminal or command line and type, can install the monitoring daemon and start monitoring their web app or website (And yes there is a difference between the two!). The amount of information that these guys can gather, from your server or app, is amazing.

Everything is monitored and is presented in a pretty nice UI and on top of it all its customizable, so you can checkout only the stuff you're interested in. CPU usage, memory usage, bandwidth usage, are among the few things that the guys at New Relic have prepared to monitor.

Port Monitor

is the brainchild of Francis Yáñez. This tool basically does what the name says and more. You can use it for website monitoring and server monitoring.

It also records uptime, response times (performance) and downtime causes. The awesome thing about this app is that you can generate your own custom reports and each time something happens it will email you the cause.

I've been using it for some time now and it is super accurate. I mean it sends me emails for stuff that happen to this website (and stuff do happen, believe you me!) in a matter of minutes, and I always see what usually causes the downtime (It's usually the host provider!). As featured on its main page you can see a short list of the features that Port Monitor has:

Check websites status
Monitor for content changes
Ping servers to test if they are alive
Check any service with custom TCP ports
Monitor DNS records
Automatic checks every 60 seconds

I would say that these are more than enough for a free service that on top of it all offers an API and is developer friendly.

Jetpack Monitor

The Monitor extension for Jetpack is one of the new kids on the block. This monitoring app is targeted towards WordPress websites, because as you may know Jetpack is a WordPress plugin that offers similar features to self hosted WordPress websites as the ones hosted on WordPress.com.

Clicky, clicky and Jetpack is installed. Activating the Monitor extension is as easy as typing this word. After you've done all this the Jetpack servers will start checking your site every five minutes. Which is good, because you'll get an email that says either Bad News or Good News.

isup.me

We all know you're busy like a bee, but what if you're away from your computer and you get an email from a friend that says: "Hey man, is it just me or your awesome website is down?", what happens then? Well you can use isup.me and see if the website is actually down or it's just him.

Of course it was just him!

Bonus Apps

hurl.it

Not really a monitoring app but you can use it to make GET / POST / PUT / PATCH / HEAD / OPTIONS / DELETE requests. You can also add parameters or authentication to your request. Useful on many occasions when you just want to a test a certain output of some feature you're currently building.

builtwith.com

And last but now least, our last mention of the day is not really related to the ones above but it's useful because you can check the technologies behind a website.

For example did you know that isup.me is built using Ruby? Or that YouTube uses Joomla (Wait what?).

One more thing before I sign off, some of these tools are really useful for anyone that has a website they want to keep an eye on, so my advice is to go and check them out because they are worth it.

Alrighty then, hope I haven't bored you to death, If you know any more tools, that I forgot to add to the list, please let me know in the comments.

Until next time, code long and prosper!

Stefan

*Note: This article has not been sponsored in any way by the services mentioned above (But if they want to, I don't mind!).

The great category conundrum.

Stefan Cosma — Fri, 13 Dec 2013 00:00:00 GMT

It all started on one December-ish looking morning. It was the year of our lord 2013 and the snow was nowhere to be found, keeping that mind, there was a slight smell of bugs in the air. You know the type I'm talking about? The ones that don't let you sleep at night and make you go to bed at 2AM. Those kind of bugs. Thankfully the so-called "bug", I am going to describe in the rows below, is not one of those.

This was a simple one. One that started from the bottom, from the inner core of all that is holly and peaceful. So what is then?

How in the world do you get a category that has a certain parent for a post (either specific post or the current one)? Yes it's a simple question but if you close enough you'll see that none of the WordPress inner core function offer a direct solution.

Well after a long quest on the realm of the interwebs I came across many that claimed they had the answer but all of them were shams. In the end I managed to gather enough knowledge to come up with a slight deviation of a solution I found along my voyage. You can check it out below.

// Save the names and the IDs of the parent categories you want in an array
$parents = array(
   'NAME_OF_PARENT_CATEGORY' => ID_OF_THE_CATEGORY
);
// The the categories of the current post
$categories = get_the_terms( $post->ID, 'category' );

// Output parent categories and their children
foreach( $parents as $parent_name => $parent_id ):
    // Output the parent name
    echo $parent_name;
    // Create an array to hold the children
    $links = array();
    foreach( $categories as $category ):
        if( $parent_id == $category->parent ):
            // Put the category link in the array
            $links[] = '<a href="' . get_term_link( $category ) . '">' . $category->name . '</a>';
        endif;
    endforeach;
    // Join everything and output it
    echo join( ', ', $links );
 endforeach;

Ok, now let's try to understand this snippet of code. For the sake of this tutorial lets say we have a review website that covers places to eat, places to drink and places to have fun. Each one of those categories is a general one, and we have a business that is categorized with restaurants (that has the parent, places to eat) and others, like location and availability, that have different parents. So we have 3 categories on the same post and we need to output only the one that belongs to places to eat.

First we create an array for the parents, because maybe we have multiple categories and we need the children for all of them.
Ok, after that we get all the categories of the current post (eg. restaurant, location, availability).
We go through the parent categories that we set up on step one (eg. places to eat, places to drink, places to have fun).
While we are doing that we build another array where we will keep the children.
The next step is to go through all the categories of the current post and check if the parent of each category matches one that is available in the array we created at step one. If we find one than we add it to the array of children.
Joining everything is the second to last step that we need to do.
Finally we can output our result.

And that's it. Simple, right? I hope you enjoyed this short, simple tutorial.

Let me know if you found another solution in the comments.

Until next time, code long and prosper!

Stefan

Developers and social media. Is it a good thing?

Stefan Cosma — Wed, 13 Nov 2013 00:00:00 GMT

Lone wolves or night owls, that's how you usually describe your friendly neighborhood developer. He doesn't travel in packs and usually you'll find him sitting at a desk tipping his fingers off on some piece of code that is either to stubborn to run or he has an idea he wants to get of his mind, because as you may know most developers are brilliant geniuses.

But why are developers so afraid of the outside world? Well my guess, as somebody on the inside, is that we don't actually like how this world works and we're not on the same page with current generations.

Ok, but at some point in our developer lives we need to interact with other people, either for some advice, or for some food. I mean what developer doesn't like food? Right? No, just me? Well, eventually we end up using social media outlets to get information, because nowadays everybody is connected in one way or another.

Off topic: I recommend a super funny comic by super awesome comic designer Pablo Stanley on the Pros and Cons of dating a Programmer, that you can find here. I guess it's a little bit related to the topic.

And so we find ourselves using a bunch of social media services just because we need help with something, we need more information on something or we have to develop something using a specific API from a social media service.

Whatever maybe the case, we're "forced" to use a social service. Ok, you might say, but it's everyone's choice if they join or not, and you would be absolutely right. But what if your boss comes into your office one day and says you need to join a social service in order to test a certain feature you embedded in your web application. What then? Do you risk losing you job because you ignored a task? No! You either postpone the task for an infinite amount of time, do the old switcheroo with a colleague or you just quit (You always wanted to be your own boss right?).

Social media and developers should be like oil and water, you can add one to the other, but they will never mix into a homogeneous liquid.

On one hand you, as a developer, you can get help, news and information about stuff you're interested in and on the other hand you can get lost in all that stuff that is out there and you could lose your focus on things.

There should be a fine balance between work and social media. Spending too much time away from your projects might have a bad impact on who you are as a developer.

I'm not saying don't socialize, I'm just saying, try to find some stability when you use the social mediums. I see a lot of developers these days that spend a whole lot of time using the social media outlets. Yes, you can make yourself know, but you also spend time away from your projects, maybe important projects, that are the result of great ideas.

If you have one eye on Twitter and one eye on Sublime Text, your focus is automatically split in half, and your productivity drops considerably. From my point of view (Wait, what was I reading until now?), having a social media presence has its benefits but you should always remember that there should be a balance between being a focused, productive developer and being a well know developer. Not all well-known developers are good developers.

I guess that's it for this article, a little shorter than usual but hey, it's the second one in just two days. Let me know what are your thoughts about this topic in the comments.

Are you a fan of the social media?

Until next time, code long and prosper!

Stefan

A developer's tools of the trade.

Stefan Cosma — Tue, 12 Nov 2013 00:00:00 GMT

You, me and your weird cousin that thinks he can make websites out of macaroni, well we're developers (At least some of us are!).

We rely on some sort of service or tool to get our work done, right? Right! Sometimes the tools we use are super complicated IDEs or maybe their just plain old simple Notepad.

Whatever maybe the case, we're as good as the tools that we use. If a tool is well-built, it performs as it should, it helps boost your productivity, and is constantly improved then I say it's definitely a tool worth keeping.

Along my years as a developer I've used a lot of tools to get my work done, and my guess is that so have you. There is an interesting discussion over on Coderbits about what people used over the years.

I've found that the best tools are often the most simple ones, in terms of UI. Having a simple UI, helps us, the developers. We don't need no fancy smancy (Is that even a word?) UI to get our work done. The simpler the better.

I've started, as many of you might have, with good old Notepad. It was a good enough "tool", and it still is (If you live in a cave and don't have access to the Internet!).

Notepad is like a training sword. You can hit stuff with it, but it won't conquer a citadel (Well maybe it will, if your MacGyver!). It's just a text editor, some may argue it's the text editor, but one thing is for certain, it helped many of us become who we are today.

After Notepad, I skipped a few steps and put on my big boy pants and started using Dreamweaver (The old Macromedia one!). At the time, it was amazing, I did everything with it. Stuff like design and development were done with just a few clicks. Want a button? Bo0om! Just insert one and there it is. My whole design process was done in Dreamweaver, and I'm not afraid of admitting it.

Soon after the Dreamweaver stage was over I had a weird phase when I used a tool called Net Object Fusion. It was one of my worst decisions. If you want to build a horrible tool, that people will hate, look no further. Net Object Fusion is one of those tools that after you install it, you immediately regret your decision, crawl under your desk and start banging your head to the floor. But don't take my word for it, check it out for yourself.

We now head back to the Dreamweaver faze, but this time its made by Adobe (Aaa, good pal Adobe!). Yes, it was a simpler time back then. I started using Photoshop to design and forgot all about the time I used to design using Dreamweaver. I think Dreamweaver was never meant as a design tool, but nevertheless it did its job as both a design and development tool.

Then somebody pushed the fast forward button and I had a weird fast phase. A quest phase if you will. The search for the perfect tool so I can do my work in peace. Notepad++, Aptana Studio, Eclipse, Blue Fish Editor were just a few of the tools I've used over the years as a developer.

From all of them, Eclipse was my favorite. I developed the HTML Encrypter app with it. You can see it's meant for Java development and nothing else. I tried using it for PHP development but something's not right with it. I was never a big fan of NetBeans so I was faithful to Eclipse when it came to Java development.

Blue Fish was my first editor when I added Ubuntu into my workflow. It performed well enough but not quite what I wanted.

Enter Sublime Text, stage left. At first I was overwhelmed by the sheer power and the amount of stuff it could perform. I don't want to make this article a fan boy story about how cool Sublime Text is. It is! You should definitely give it a shot.

I guess I've covered all of them. Have I? Yes I have. As I was saying at the beginning of this article, we as developers are as good as the tools we have available. You can't conquer a tower with snowballs (Stop it with the analogies! I'm trying to make a point here.). The idea is that if you want to get your work done right, use the right tools and make your workflow as smooth as possible.

What other tools have you used over the years, lets continue this discussion in the comments.

Until next time, code long and prosper!

Stefan

Let me CMS your stuff!

Stefan Cosma — Thu, 17 Oct 2013 00:00:00 GMT

Let's begin from the premise that you as a well established developer, know what a CMS is, so I won't lecture you on what one is because I'm sure you know a few, love one or loathe another, that's why I'll get straight to the point.

In all my years as a developer I've had my way around a few CMS's (Haven't we all?), hell I even tried building one myself (Disclaimer: It's still in development!), but some time ago I started asking myself what makes a good CMS? I know, I have weird hobbies, others think about pudding or world ... stuff (You thought I was going to say peace! Well think again!) and I fantasize about what makes a good CMS.

Alright then, what makes a good CMS? Can anyone answer that? Maybe you can, or maybe you in the back with "My Little Pony" shirt? In my own personal opinion, a good CMS has to fulfill a few basic needs (5 to be more exact) in order for the end-user and the developer, that is in charge of the whole developing process, to be satisfied and happy.

Good UI.
I'm referring here to the back-end UI and because this is a debatable point, I'm going to start with this one. We as developers don't care that much about UI, so it doesn't matter how it looks or how the whole writing / adding media process is performed as long as it just works, but for the end-user it's really important. The truth, weather you like it or not, is that the UI has to be minimalist, clean, make use of icons, but it shouldn't have just icons, it has to have text associated to each one of them and last but not least it has to be straight forward, no hidden menus, pages or ways to get a certain result. Using icons helps people remember stuff because our brain is wired in such a way that it's easier for us to associate a picture to an action, and then use that information to perform that particular action.
Another important aspect is that is has to use warm colors, that don't put too much strain on the users eyes.
Customizable.
If the CMS gives people the ability to customize the way their content or website looks they will love it long time. People like when they have some sort of power over the whole creative process, even if they don't know a thing about design. But some of you (Especially the designers!) won't agree with me on this one, because giving a user too much power over how the whole thing looks might break all the hard work that was put into it. Well for those of you who question my opinion I have a simple word for you, "Markdown" (Enough said!),_ _and a very interesting point made my Rachel Andrew at last years Smashing Conf, that you can visualize here.
Fast.
The speed factor is a rather important aspect. I'm not referring only to the way the whole thing loads, I'm also referring to the speed of a process or a user action. How much time does it take to perform a basic action? Just because the CMS developer uses Google Fiber and all of the websites they browse load at the speed of the Millennium Falcon doesn't mean they have to build a slow CMS. The end users will appreciate the fact that they won't have to reload a page each time they want to "Save" something. Some may say that this aspect may be outdated, because nowadays everything is powered by node, angular, ember or whatever you prefer. Well that's because people started to realize the use of building a dynamic, scalable application, that interacts with the server in real-time and provides information in the blink of an eye, to the end-user.
Developer Friendly.
Developers are friendly people! Well at least most of them are, but that's not the point here, the point is that when someone is building a CMS they should think about the developers and the torments they could go through if the CMS isn't developer friendly enough. The CMS should have a good, well structured documentation that covers all the functions, classes and variables that are part of it. Developers shouldn't wrap their heads around the documentation when they want to achieve something. The code should be well commented, because we, the other developers, tend to spend a very long period of time looking at other people's code, and maybe if it were well commented then we would be able to solve a simple request from the client. Plugins. Developers love plugins! They love using them and they love making them. A CMS without plugins or extensions is like a phone without a pair of earbuds. It's ok, you can listen to music using the built-in speaker, but that doesn't mean you should.
Sociable.
We are a sociable species. Starting from the earliest stages of mankind and ending today, in the era of the smart things, we as humans always had a tendency to group and share stuff. We have created a network and systems that are present on that network that connect almost the entire human population. Having said that, giving the ability, to an individual, to share something with others, has a major impact on the way they perceive the before mentioned individual. A good CMS shouldn't be only for managing content, it should also give a user the ability to share that content, if he or she so desires. Weather it integrates all the major social networks or just a basic comments system, people should be allowed to share their opinions, knowledge and in the end be able to share the content.

I guess I should wrap this up. In the end it's all about the power that a user has over his content. What abilities is the CMS developer going to provide the user.

Maybe the CMS will be restrictive and won't allow many action to be performed over the content, but we're getting into a whole different field, that I'm not going to elaborate now.

The important thing to remember is that, no matter what CMS you chose to manage your content you should be able to manage it with ease and have the ability to share it with others.

That is all for now. Let us continue this talk in the comments. What is your opinion on this?

Until next time, code long and prosper!

Stefan

Developers, stop hiding!

Stefan Cosma — Mon, 07 Oct 2013 00:00:00 GMT

Let's start this "rant" with a slight deviation from the main topic, but don't worry about it we'll get back to it, by quoting someone much wiser and more experienced than me, Scott Hanselman, who said something like this, in his article The Myth of the Rockstar Programmer.

Just because someone has written a blog, or a book, or speaks well doesn't mean they are a good developer.

Scott, raises an interesting point in the above statement, but is this statement true?

Having theoretical knowledge in a field definitely doesn't make you an expert in that particular field. In my opinion, a mixture of theory, theoretical practice and lot of time spent in the line of duty (Haha, I said duty!) can make an individual extremely good at something, in my case and I hope yours also, programming or web development or web design, it really doesn't matter what you call the field you practice your activity.

Don't get me wrong, knowing only theoretical facts isn't such a bad thing and I don't blame the ones that know the inwards and outwards of a programming book, that covers only theory, but not having practical experience doesn't make you a good, let's say for the sake of the argument, developer. And thus we end up once again at this aspect of every day life.

You need experience for somebody to hire you, but nobody will hire you in the first place, so that you can get experience. See where I'm going with this? Damn you, circular reasoning!

But I won't get into more details on this matter, in this article, maybe in a different one. Often, and I personally know a few cases, good, experienced developers are overshadowed by other "developers" that are full of theoretical facts but lack the practical knowledge to solve a problem, maybe even a simple one (eg. 1 + 1 = pie, the dessert not the mathematical constant!).

Why are those developers, overshadowed? Well a simple answer would be that, the evil goblins from the evil firey pits of Isengard, the marketing department, have their minds blackened by the worm-tongue of a "theoretical" developer. The later one blows a lot of hot air and "he huffs und he puffs", stating the an apparently simple problem can only be fixed using a complicated solution, because that's how the books he learned from, stated.

Well let me tell you something, last time I checked those books are meant to show you a hard solution, but that doesn't mean you have to apply it to a real life scenario. And thus the good, experienced developer is overshadowed by someone who lacks practical knowledge or field knowledge. Ok, but why hide, when you can clearly avoid the awkward situation and also save a lot of time and money for the company?

My thoughts are that, as all developers, most of us are introverts and only like to talk when there's something interesting to talk about and that's where the "theoretical" developer, that has a blog, is a good a speaker comes in and steals all the "glory".

So, I say to you, developers, please for the love of all that is holly in this cat-video filled world, STOP HIDING! If you continue to hide, others, that are far more inexperienced than you, will come along and create this environment where everything is based on theoretical solutions and not on practical solutions, that are easy to implement and inexpensive. You know your abilities, you know you're good and you know how to solve a complicated problem, even if it takes you a few days to come up with an answer. If you come out of hiding, I promise you, you'll be considered a somewhat of a hero among your fellow developer friends (If you had any of course!). So once again, repeat after me:

I am a good developer, I like ... developing. I will come out of hiding as soon as I finish this parallax website and if I don't may the firey pits of clients from hell consume my soul to eternal damnation!

Before I end this "rant" I would like to leave you with this thought and with hope that I convinced you to come out of hiding. Whether you're a "theoretical" developer of a practical one, just remember one thing, that we're all here to make the world of the web a better place, for everyone, to improve current technologies and your legacy to future generations will help define us as a predominant species in the universe, except maybe for the Borgs, that are just pure evil.

Until next time, code long and prosper!

Stefan

Koding Apps. Build one!

Stefan Cosma — Fri, 04 Oct 2013 00:00:00 GMT

Disclaimer: All quoted paragraphs are reproduced in their entire form from the awesome Koding University that you can find here.

Because you're an awesome reader, that already follows my awesomely written articles, you already know what Koding is, so I will not explain it again ... ok, ok, I'll tell you, just stop showing me pictures of naked rat moles. What exactly is Koding? Well it can be summarized in the following short sentence.

Koding is an online development environment with the goal of simplifying worldwide development and providing free computation and development to everyone.

Ok, let's get back to our sheep.(What?!) Now that I've captured you're attention and you know about Koding, what in the hell is a Koding app and why am I shoving it down your news feed?

When the good people (Devrim and Sinan) over at Koding invented ... Koding, they also came up with an awesome idea of having some sort of "desktop applications" made by the community. But wait, Koding apps are more than what I just said a few seconds ago, they

are basically clientside Apps that use the Koding Framework to communicate with your VM. This means that potentially any web-based and modular html/js/css app can be turned into a Koding App with some love! You can see this in the Koding Text editor. It's basically just the Ace Editor wrapped in the Koding Framework.

So you can basically have a simple app that loads Google (If it allowed being loaded in an iFrame!) and even a complicated one that makes diagrams or even one that can edit photos.

But what happens if an app you want to use isn't featured in the app catalog? (Yes, I forgot to mention, Koding has an ever-growing app catalog, that features all the apps made by the community.) You build it yourself (Or commission someone to build one for you because you have the brains but not the coding know-how!), of course, because you're a developer that likes to challenge himself/herself and you're one that can overcome any task, regardless the fact that it's like hacking NASA with a toaster.

First thing to remember when trying to build a Koding app is that the apps are usually coded using CoffeeScript, so if you're not that fluent in CoffeScript, I suggest you take a quick crash course before you start app building.

Another important thing to remember is that there are apps that help you build an app (app-ception!). Kodepad and Appmaker are there to help you in your endeavor to achieve Koding app building awesomeness.

Use them, they were built by awesome people and they should be recognized for this achievement. Ok, all that talk and still no code example of an app. Hold your "lederhosen", it's coming!

    class HelloApp extends KDView
        viewAppended:->
            super

            {nickname} = KD.whoami().profile

            button = new KDButtonView
                title      : "Hello"
                callback   : ->
                    new KDNotificationView
                        title : "Hello #{nickname}!"
            @addSubView button

        do ->
            appInstance = new HelloApp
            appView.addSubView appInstance

Boom! There you go! Simple as that. This short app generates a simple "Hello" button, that on callback shows a notification with your username, because you can get that info in an app.

Go ahead, try it and let me know in the comments if it worked. You saw an example but now after I have convinced you with my awesome convincing skills you want to start building and app of your own, what about some Docs? Well ... docs ... are in making.

Because it's a big framework it takes some time before their done and in a good, developer friendly way. In the meantime you can use the apps I mentioned to get some reference or download source code from others apps and start experimenting with that.

After you finish building your awesome app, that has a tone of features and can shoot unicorn dust out of its objects, you can submit it to the apps catalog, in order for all the world to see and lough at it (Joking! Or am I?). You can achieve that by following this great tutorial.

If you built an app, let me know in the comments, I would love to take it for a spin. But why should you build one? The shortest answer would be, because it's easy and you're also helping a community of hard-working developers that wants to make the world an easier place for other developers!

The long answer would be something like this: because developing one would help you learn (And who doesn't love learning new stuff? awkward silence) a new framework that is fresh, well-built, has a lot of potential (Koding has 400k+ users in case you were wondering, so it's a pretty big deal).

You, as a developer, would get a lot of recognition from all your developer friends (We all know you don't have any but it's nice to fantasize from time to time!) for your awesome coding skills and last but not least, you would contribute to the development of tomorrows technologies that will help future generations.

Did I mention it's also open source? Yes, you publish all your code to Github. Who knows maybe in 10/20 years everyone will code only in the cloud and hard disk drives will be a thing of the past, a thing that you'll frame and sell to a pawn shop. If I haven't convinced you yet, then you have some serious convincing issues to address. I guess that's all for now. When the Koding app Docs are finished I'll write some more adventure articles on how to build an app from start to finish, but until that happens, code long and prosper!

Stefan

Terminal, do you speak it?

Stefan Cosma — Sun, 29 Sep 2013 00:00:00 GMT

"What OS you from?" "What?" "'What' aint no OS I ever heard of! They speak Terminal in 'what'?" "What?" "Terminal, motherfucker, do you speak it?"

Well maybe you don't, what happens then? Good question, let's ask the almighty Wiki. Maybe it can answer what a Terminal is? Almighty Wiki, what say ye about Terminal! Deep aussie accent:

A Termi... what now? Ohh, a Terminal! Well a terminal emulator provides an environment for Unix shells, which allows the user to interact with the operating system of any Unix-like computer in a text-based manner through the command line interface to the operating system!

Ok, thanks! You heard the thing. Now back to the point in hand. Along my years as a developer, I have never ever met a more useful tool than the above mentioned Terminal. You can do almost anything with a Terminal. We're referring here to the web related stuff, because can do other stuff also, stuff like playing games, seeing a doctor, watching a movie (hint: telnet) or letting the Terminal talk back to you (If you're into that sort of thing, weirdo!). You can write code and save it, connect remotely to a database and modify it to your hearts desire or you can go as far as never leave the Terminal and build an entire website using it.

Disclaimer: This is not a crash course in Terminal, if you need one of those you can search Wiki's long-lost cousin Google.

But there is more to this than just fun and games. From my own experience with a Terminal, whether it's a Linux one, a Mac OS one, or even a cloud based one, like the one Koding has, I have found a few commands that every web developer should use or could use to make his/hers life easier. Maybe the most useful command I found is the following one:

grep -r "word" *

Using this command you can search for a word in any file located in the current folder and it's children. So if you're in the root folder, this command will search every nook and cranny for that word, until it finds it. If, for example you're to lazy or you don't have enough time (Because you're to lazy!) to move files around and you have a big project with lots of files, then the following command is here to help. This will move all files from sub-folders to their correspondent parent folder.

mv *.* ..

Ok, these were commands useful on a day-to-day basis, but what if you have your own server and root access to it (hint: Koding offers those for free!). What can you do then? Well there's a simple answer to that question. Let's start from the premise that you have an Apache server. A good, useful command would be the following, for when things get a little out of hand:

sudo service apache2 restart

Because any respectable command starts with a sudo, so does this one. Basically this is the equivalent to the restart button on your old Windows machine, that your grandma' still uses. But what caused the error, that needed you to force choke your machine? This command may come in handy:

sudo tail -n 50 /var/log/apache2/error.log

It displays, in an orderly fashion, what happened to your precious. Having seen what you did wrong to your precious server, you're now heading to the root of all things evil. Your ex's heart? Haha, nice try, but we all know she doesn't have a heart. No, I meant the Apache config file (the source of all that is evil in the world), the one that you can edit using this:

sudo nano /etc/apache2/sites-enabled/default

Pretty straight forward, if I do say so myself. If that didn't do the trick then you can always check with the Sisters of Fate over at:

sudo tail -n 50 /var/log/syslog

and see what went wrong there. And finally to check if your precious is still alive you can use the pulse checking utility:

ping -n 5 www.example.com

I guess that ends our list of useful commands that you could use in a Terminal. But why is a Terminal useful? Well, my opinion is that maybe it gives us more control over the stuff we do. It lets us access the core of our system. It's kind of a gateway to our computer/server's mind, in more laymen terms.

Now don't expect to learn Terminal in a day, but if you do start learning about what it can do and what are the benefits of using one, then remember one thing: With great power comes ... aaa ... penguins? Yeah, penguins are the answer to everything, even a terminal.

I guess that's it. If you have suggestions or you thing I missed something let me know in the comments below and I'll add them to the list.

Until next time, code long and prosper!

Stefan

Open Source. The story? The facts?

Stefan Cosma — Fri, 27 Sep 2013 00:00:00 GMT

A long time ago in a galaxy far, far away … ups, wrong tale!

Our story begins in the same place where all computer related stuff happen! China? No, somewhere between Palo Alto, CA , the great wizards castle of Bell Labs and IBM’s scary dungeon-forest headquarters, in a time when music was a state of mind and Internet was just a concept in a book.

Because every story evolves around people, this one starts with a particular group of people, more specifically the guys in the SHARE user group (It was one of the first groups that embraced the open source movement.), used to exchange software.

The software that used to be shared included IBM's source releases of its operating systems, witch was a big deal at the time! Why, you may ask? Well because sharing it, was in the end, a basic necessity. At that particular point in time there were no separate portable executable binaries (or .cpl, .exe, .dll, .ocx, .sys, .scr, .drv filename extensions, for all you mere mortals) to distribute software and distributing software as the source code was the only practical solution.

Skipping a few years ahead we reach a point in time when the Internet became a reality. Software was shared via networks like Usenet, IRC or Gopher. Around these networks, word spread like wildfire and people said that Linux became some kind of a knight in shinning armor for the open source community.

Spoiler alert: in the end Linux became the undisputed king of open sourceness.

We skip some more and we finally reach the year of our lord 1998. This was a good year for open source (Somehow it feels like wine is being brewed.). It all started with the release of the source code for the Navigator browser and continued with different summits and gatherings of sorts, and in the end the term “open source” got stuck and people started using it all around the developer communities.

Ok, I think that's enough history for one article so I'll try to get to the point.

There are, nowadays, two widely used terms to describe open source software: free open source software and commercial open source software. You as a tech-fearing developer probably have used one or the other in your projects or in your day-to-day use, because nothing says good software as being able to tinker with the code. Well that’s not always the case, but we’ll face that dragon another time and dimension.

Knowing that anyone can use one of the two let’s take a closer look (Not that close!) at what the average developer started using all around the web. Open source has become in recent years more than a way to share software, for free, with the community, it become a state of mind, a way of life, that developers all around the world embrace with ease. But what’s so good about open source that people start using it more and more?

Well for starters you get to share your work with other people (How cool is that!), and maybe you have some unresolved issues with your work, that's where the community members come in and maybe some of them see the issues you tried to overcome, in a different perspective and thus provide a different solution to your issues.

But, you know, multiple heads are always better than just a single one (Brace yourself, mythological analogy coming up!), just like a hydra can damage your armor (and in the end remove from the face of the earth!) more easily using it’s multiple heads.

It’s all about people collaborating and helping each other in times of need! But that's not all you get if you embrace the open source you can also get great feedback from the people who you shared your work with, as well and get more in-depth suggestions on how to improve things. Ok, so we established on thing, that we all can agree on: open source has a lot of benefits if you know how to “benefit” from them.

But let's not get ahead of ourselves, you simple, yet promising, young padawan! The evil wizard insert evil company name here has other plans for this open sourceness that everybody is talking about. How about they only open source half of the software or as the commoners would say, open source line by line. What? Can he do that? Yes, he can and he will (We’re still talking about the wizard!)!

But that’s not fair! Well companies these days, see fairness in a whole different light. They believe that if they release bits of code and keep others with a chastity belt around and locked up in a tower of the fanciest castle at the top of the tallest mountain, they’ll protected themselves from the evil dragon (best known for it’s common name, the common Internet troll, that does nothing but criticize the work of other not contributing to any of it in any way.) that eats code for breakfast. This practice is best known as “we’ll give only the stuff we want”ism and as you may have already seen the developers are not really big fans of this practice, because they don’t have access to the important stuff that really matters and that could really be improved.

Ok, so how do we wrap this up?

It doesn't matter what term you use to describe your open source project, whether commercial of free, you need to understand some basic things about open sourceness before people start engaging in your project.

First of all don’t abuse it (The open sourceness, of course!), because if you do it’ll come back around and bite that shiny new armor you just bought and you wear around your head.

The second most important thing to remember is to try to embrace the open source movement at an early stage in the development process. Stuff like, thoroughly commenting your code or organizing your files in an orderly fashion will make your software more friendly to a future developer that wants to help or one that tries to improve the stuff you did.

This mentality of “I’ll keep it to myself” is outdated and you as a developer or multinational company should not embrace it and you should root against this practice.

Why should I do this? Because nowadays the world runs on the following phrase: Sharing is caring. If you don’t open source stuff and don’t embrace collaborative software development you’ll get nowhere and you’ll end up somewhere on a deserted island in the middle of the ocean with nothing but a stick and a rock, to survive.

Until next time, stay open source and code long and prosper! Stefan

How To: Remove Custom Post Type URL slugs

Stefan Cosma — Thu, 26 Sep 2013 00:00:00 GMT

Disclaimer: This is a version I found useful and it worked for my particular case. It may not work for you, but you can post a comment bellow and maybe we can figure it out.

Interesting issue. If you're a WordPress developer than you might have come across this issue in your endeavors to become an ultimate WordPress ninja.

I came across this while working on a recent project for an in-house project at the agency I work.

Having a custom post type and wanting the slug removed from the URL is tricky and is case depended. I tried a lot of plugins and solutions until I came across one (Sadly I can't find the original link, but if you do find it, please let me know in the comments below.) that I later tweaked for my own personal use (The version you are about to read is my version!), because, as I said this issue is case depended.

So, let us get down to the nitty-gritty. All you need are the following lines of code, that should be placed in your theme's functions.php file, and your permalink structure should be /%postname%/.

_Advice: Before placing these functions in your file you need to replace each occurrence of CUSTOM_POST_TYPE_NAME and, depending on your case, replace this line _

$post_name = $query->get('name');

with this one

$post_name = $query->get('pagename');

_and you should be good to go. _

If you want a more detailed explanation on how this works, keep reading the rest of the article after the following code section.

                add_filter('post_type_link','custom_post_type_link', 10, 3); 
    function custom_post_type_link($permalink, $post, $leavename) { 

        $url_components = parse_url($permalink); 
        $post_path = $url_components['path']; 
        $post_name = end(explode('/', trim($post_path, '/'))); 

        if(!empty($post_name)) { 
            switch($post->post_type) { 
                case 'CUSTOM_POST_TYPE_NAME': 
                    $permalink = str_replace($post_path, '/' . $post_name . '/', $permalink); 
                break; 
            } 
        } 
        return $permalink; 
    } 

    function custom_pre_get_posts($query) { 
        global $wpdb; 

        if(!$query->is_main_query()) { 
            return; 
        } 

        $post_name = $query->get('name'); 
        $post_type = $wpdb->get_var( $wpdb->prepare( 'SELECT post_type FROM ' . $wpdb->posts . ' WHERE post_name = %s LIMIT 1', $post_name ) ); 

        switch($post_type) { 
            case 'CUSTOM_POST_TYPE_NAME': 
                $query->set('CUSTOM_POST_TYPE_NAME', $post_name); 
                $query->set('post_type', $post_type); 
                $query->is_single = true; 
                $query->is_page = false; 
            break; 
        } 

        return $query; 
     } 
     add_action('pre_get_posts','custom_pre_get_posts');

Ok, you got to code, you placed it in your functions.php file but you want to understand the ways of the force.

Ok, let's dissect this sucker. The first thing that we have to do is to remove the actual slug from the actual URL. We can do this by getting the permalink for the current post and dissecting it using parse_url function (Very useful function!).
In the end (See what I did there?) we get the post name from the URL. Now we check the post type and if the current post has the desired type we proceed in removing the slug using str_replace on the permalink.

In order for this function to work we need it to be attach to a hook. Luckly, good guy WordPress has a filter called post_type_link that is used

prior to printing by the function get_post_permalink.

Ok, you managed to get until this step but you get a 404, right? Right. Well that's because WordPress doesn't recognize that post as a custom post type anymore. But we can fix that and trick WordPress into thinking that the requested post is in fact a custom post type.

The last function does this very thing. We need the global $wpdb variable, because we're going to play with the DB a bit (Don't worry we won't break anything important!). After checking if we're on the main query we proceed in getting the name for the current post.

The next logical step is to get the post type for the requested post. We do this with a simple SQL select. And now for the fun part. If the post type is our desired post type than we do the following actions. We set the value for the custom post type, the requested post. The basic syntax for query set is this:

$query->set('key', 'value')

WordPress needs to know what type the requested post is. After that we need to specify that the post is indeed a custom post type. And now for some little developer fairy dust and magic. We remind dear old WordPress that our post is in fact a post and it should be treated like one, that's where is_single comes in and is_page walks away. In order for this little trick to work, WordPress has a nifty little action called pre_get_posts that is

called after the query variable object is created, but before the actual query is run.

You can change all the stuff you want using this hook, before "all the gates open".

Useful resources:

Debug Bar with WP_DEBUG and SAVEQUERIES set to true in wp_config.php

And that was our lesson in WordPress slug removing (Nasty little buggers!).

Until next time, code long and prosper!

Stefan

SmartWeb | Conference Adventures - Episode 1

Stefan Cosma — Wed, 25 Sep 2013 00:00:00 GMT

Disclaimer: This article is the start to a whole series about conference going. You can read about what usually happens when I go somewhere and there's a conference involved.

Maybe you Internet types don't like Episode I (You know what saga I'm referring too!) but I'll start with the first episode, not the 4th, like some people.

If I am in your following list on Twitter (If I'm not, then I definitely did something wrong with my social skills!) you may recall something about me going to a conference a few days ago (I should mention this is NOT my first conference!).

Well, I attended the SmartWebConf in Bucharest (weird city!) and let's start from the premise that is was awesome (And believe me it was super awesome. no irony intended), but I'll get to that in just a bit.

It all started in the year of our lord 2013 on the third day of the month of harvest at 11:17am. I was casually removing some slugs from a WordPress custom post type when, a good friend of mine, (Yes, him!) sends me the now famous, mentioned tweet.

At first I was reluctant in replying to the said mentioned tweet, but I said to myself (Well actually my inner Morgan Freeman voice said.) what the hell and did it anyway. The reply was, let's say, a cheesy one.

I finished my slug removing and didn't bother looking for the aftermath of my reply. Some time passed and my inbox was flooded with e-mails about my achievement.

All was well and the day before the conference came. In Romania, when you need to get somewhere and you don't have a car you need to rely on the mercy of private companies to get you around (Trains do exist, but for some reason they're not as often as you might think and not at a reasonable, late in the night, hour). That being said, I put my faith in humanity once again and booked a ticket for a bus with a private company.

So far so good. But wait, there's more! It was a late bus (The middle of the night, late!), my alarm didn't go off and you can figure out what happened next. I wake up right after the bus leaves. What to do, what to do? No seriously, what should I do? Book another ticket, right? Easier said then done. The next bus wasn't leaving for next 4 hours, but I booked it anyway. Get to the bus station. Check! Get the bus ticket. Check! Realize that the ticket is in fact the receipt for the ticket because that's how that company works. Check! Getting on the new bus. Check! Alright, the bus leaves.

So far so good, sounds familiar right? The bus makes about half the distance to Bucharest and guess what, it breaks down (Smoke coming out of the back and technical stuff like that!). The bus driver struggles to get the bus to about 75% of the way to Bucharest until it finally breaks down (The bus, not the driver, but maybe the driver also broke down.).

Getting on another bus. Check! I get to Bucharest and immediately find the nearest tube station. The distance from where I get off the tube to the conference place is about 20 min of walking, but I didn't knew that at that particular moment and I get a cab, and what do you know, the cab driver asks for more money then what the counter was saying.

I finally get to my destination with a 2 hour delay, just in time for the first coffee break (Good thing I don't drink coffee!) and miss the first two talks (Sorry @carlsmith and @stopsatgreen!).

But all was good, I check in and find myself a chair. And now the awesome begins (It was just puppies and unicorns until now!). I tip my imaginary hat (If I had one of those!) to the organizers. It was a well-organized event and the overall look and feel was impressive.

The speakers, that included @snookca, the one and only @smashingmag, @brucel and a few others that are just as awesome (@sickdesigner was the only Romanian speaker, but that didn't stop him!), were top-notch.

The amount of information was "over 9000" and the atmosphere they created was just as it should have been, immersive, fun and a bit technical (but not too much, I wanted a bit more). I found out about a lot I didn't know from Vitaly (That I'd like to thank for bringing Cody to me, all the way from Germany.), I laughed with Bruce and learned about usability testing from Dan.

After everyone said their goodbyes and the organizers thanked everyone and invited us for a well deserved beer, each of the attendees made use of the remaining time, doing what they enjoy the most (Drinking beer, of course! Myself included.).

Had a blast at SmartWebConf with everyone (Thanks to Jakob and Cristina for an awesome planned out evening!).

And I should wrap this up. Leaving the joking aside, my overall experience was good (With the minor incidents I experienced!) and I totally recommend, if you have the time and resources necessary, to attend a conference. You'll learn a lot, meet a lot of fun, smart people who will make you do stuff that you wouldn't try doing on your own and by yourself.

In our line of work it's good to socialize, so that we can eliminate that thought we all have in our back of our heads. Penguins? No. Not being accepted in the line of duty and being labeled as an anti-social person (We all know a few people like this.) by your fellow developer/designer colleagues.

That is all, until the next conference adventure, code long and prosper!

Stefan

Design the community and then the tool!

Stefan Cosma — Sat, 21 Sep 2013 00:00:00 GMT

What are you talking about? How can I create a community if I don’t have a tool to start with? Maybe if you keep reading you’ll understand.

For now, the only thing you really need to know is that you need a 60 feet long rope, some duct tape and that it takes a lot of time, effort and practice to get it done, but you’ll eventually get the hang of it. Let me start you off with a little bit of history to better understand this concept, that people adopted in the early days of software development.

Back in the days of Windows 95 and when JavaScript was first deployed, when people were still afraid of the Y2K, you as a computer-fearing user, were usually forced to install pieces of software on your slow, but still unbelievably reliable, computer. Those were times when things like the first PlayStation came out, and yes there was a first PlayStation for all you “Call of Battlefield” nerds, the USB became a standard and Netscape was the captain ruling the web.

Installing a program in those days meant you had to spend time actually reading the user manual and, bear with me on this one, reading the full Terms and Conditions and accepting it.

You were supposed to go to school and learn how to use the computer, not find tutorials on the Internet and use those (ok, maybe you could have done this, but that’s not the point here!). It took many years to master the computer and those particular softwares that you needed.

This going to school process and learning the stuff you needed to know to operate something meant that you socialized within a physical domain. You had to interact with other people, to share your knowledge and knowledge be shared with you.
Along these periods of time of interaction with other people, communities were being build. If one particular community was a computer related one then you can be sure that different tools emerged that were built inside that community, by that community, for the entire community.

But not all communities were built this way! No? No, communities were also emerging around tools that were used on a day to day basis. Let’s say, Netscape for example. It had a really supporting community that loved the browser and developed websites using it.

But what made, that community work? And more important why was Netscape such a loved browser and why don’t penguins fly? Because they’re too heavy! No! The community worked because it was “designed” from the start as one and then given the tools to work with. As somebody once said: “Don’t design tools, they are useless. Design a community and give it the tools”. And he’s right! Without a community built around the tool, your tool is useless.

Nowadays, in the era of iStuff and droids on other planets, we take tools for granted, not caring about features and other jibber jabber like a community would. A community is the soul of every tool because it actually gives a rats ass about the features and bugs that you, as an individual, don’t actually care about.

You, as a IE fearing individual, may be tempted to say stuff like: “Oh, I already have a photo album app and I also can send videos in an email, why would I need Facebook or Google+ (ok maybe not Google+!)” because Facebook for example isn’t all about photos and videos alone, it’s about sharing them in a community that you built - your friends.

People these days should try and integrate themselves in a community because once they achieve this they’ll see that tools are made for them with their help. Software making companies need not hide themselves behind big corporate walls, because if they do this communities will crumble and nobody is ever going to like their product, ever!

If you’re a software company don’t just build a tool and hand it over to the users. You need feedback from them and you need a community that supports your efforts in making your tool bug free and full of useful features.

I see more and more companies these days that don’t take into consideration the social aspect of their tools. Why am I saying this? Well because more and more stuff will be, in the near future, made available in a social setting. Users are no longer having school, home or college as a primary social environment because the Internet took over this position. Users want to know everything right in the heat of the moment, well because they can. They want to share stuff with the world and know what the world shares with them.

So if the app or tool you’re making hasn't got a social feature for your users then I suggest you think twice before you release it. Nobody will like it and nobody will use it because having social integration means that you can help your users create a community and be social.

I should wrap this up and I will. In the past, the developer focused on the tool and it’s features. He didn't actually care about the community because he had more important stuff to do, like protecting himself from Y2K (sigh) and to implement features that he thought were useful. Now, if you can’t share the stuff you make with the tools you are using or the output of those tools, you can’t get feedback from the people, from the community. Having an awesome tool, that can’t output stuff that you can share with the community, isn't enough to get the job done.

One last thing to remember: Imagine a community, design for people, make the best tools and give it to them, or you will fail.

Until next time, code long and prosper!

Stefan

Coderbits API Hacking

Stefan Cosma — Sat, 21 Sep 2013 00:00:00 GMT

Well hello there, dear reader, this the first article from a series of tutorial articles that will be featured around here. Let's get started then.

If you read the title but still haven't figured out what the hell I'm talking about, I'll try to shed some light.
What is Coderbits? Coderbits is, as the official description says:

Intelligent portfolios for developers and designers

Basically you sign up (Super simple stuff until this point!) and build your profile using data gathered from all your profiles you own, whether it's Github, Dribbble or even the ones with the weird name, like Work for Pie (that is shutting down, if you haven't heard). The community is great (If you build a great tool, great people will come!) and a lot of awesome resources are shared everyday by the community members.

But enough about the awesome community, let's get down to the nitty-gritty (Do we have to? Yes, yes we do!), the API. The Coderbits profile API

provides a simple JSON endpoint for every profile. It is accessed by issuing an HTTPS GET request to the profile URL with .json added to the end.

You can read more about how the API works by heading over to the official page and then the Profile API section. So how do we tackle the issue of using the Coderbits API with PHP?

Disclaimer: For the sake of this tutorial I will keep things as simple and as short as possible. If you have issues with this tutorial please report them in the comments bellow or at hello[at]stefancosma[dot]eu.

Well it's fairly simple (Aren't all things?!). We have some simple and basic functions that can be used to get information from the API and then display the information that we want in a page.

The first function is the one that gathers the info from the Coderbits API.

// Get the JSON file from coderbits
function coderbits_profiler_get_json($username) {
// jSON URL which should be requested
$json_url = 'https://coderbits.com/' . $username . '.json';

   // Initializing curl
   $ch = curl_init($json_url);

   // Configuring curl options
   $options = array(
       CURLOPT_RETURNTRANSFER => true,
       CURLOPT_HTTPHEADER => array('Content-type: application/json')
   );

   // Setting curl options
   curl_setopt_array($ch, $options);

 // Getting results
 $result = curl_exec($ch); // Getting jSON result string

 // Save the result into a local file
 $save_file = file_put_contents(dirname(__FILE__) . '/cache/' . md5($username), $result);

 // Close request to clear up some resources
 curl_close($ch);

}

This function gathers all the data from the API call, for the specified user, using cURL, and saves it in a cache folder with the name of the file being the username encrypted with md5.

The second function is the most important one of the ones that we are going to use. This function will output the data from the saved file.

// Get data from JSON file
function coderbits_profiler_data($type, $subtype = ' ', $username) {
// The filename path
$file = dirname(FILE) . '/cache/' . md5($username);

   // Check if the file exists
   if (file_exists($file)) {
       // Read the local file for data
       $json_file = file_get_contents($file);

       // Parse the JSON result from the file
       $output = json_decode($json_file, true);

       // Output the requested field
       $return = $output[$type];

       // Check if the field is array
       if (is_array($return)) {
           // If the type is badge do other stuff
           if ($type == 'badges') {
               // Badge limit counter
               $badge_limit_counter = 0;

               // Get all the items in the array
               foreach ($return as $items) {
                   // Each item has multiple arrays
                   foreach($items as $key => $badge) {
                       // Convert key => value arrays into variables
                       $$key = $badge;
                   }
                   // Check if the badge has been earned
                   if ($earned && !empty($earned_date)) {
                       // Build the badge
                       $data .= "< a title="' . $name . ' - ' . $description . '" href="' . $link . '" target="_blank">< img alt="badge" src="' . $image_link . '" width="45px" height="45px" />";
                       // Break the loop if we reach 15 entries
                       if (++$badge_limit_counter == 15) break;
                    }
                }
                // Get the badges count
                badges_count = coderbits_profiler_data('one_bit_badges') + coderbits_profiler_data('eight_bit_badges') + coderbits_profiler_data('sixteen_bit_badges') + coderbits_profiler_data('thirty_two_bit_badges') + coderbits_profiler_data('sixty_four_bit_badges');
                // Output it
                $data .= '< a href="https://coderbits.com/' . get_option('coderbits_profiler_username') . '/badges" target="_blank">view all ' . $badges_count . '';

            } elseif ($type == 'accounts') {
                // Get all the items in the array
                foreach ($return as $items) {
                    // Each item has multiple arrays
                    foreach($items as $key => $account) {
                        // Convert key => value arrays into variables
                        $$key = $account;
                    }
                    $account_image = 'http://coderbits.com/images/' . str_replace(" ","",strtolower($name)) . '32.png';
                    $data .= '< a title="' . $name . '" href="' . $link . '" target="_blank">< img alt="account" src="' . $account_image . '" name="" />';
                 }
             } else {
                 // Get all the items in the array
                 foreach ($return as $items) {
                     // Each item has multiple arrays
                     foreach($items as $key => $item){
                         // Check if the key from the loop is the chosen type
                         if ($key == $subtype) {
                             $data .= $item;
                             // Add comma after each element except the last one
                             if (next($items)) $data .= ', ';
                         }
                      }
                  }
              }
       } else {
           // If it's a normal field return it
           $data = $return;
       }
   } else {
       // If the file can't be read fill each value with NULL
       $data = "NULL";
   }

   return $data;

}

In order to use this function you will need to provide the type of the field you want to output, if the field has a sub-array you have to provided that (it's an optional parameter) and last but not least the username. Those are all the functions we need. To actually use these functions, you need to call** just once** the first function like in the example below:

coderbits_profiler_get_json('bit'); //Because who doesn't love Bit

and after that you can echo each field like in the following example:

echo coderbits_profiler_data('top_area','name','bit');

And now you know how to use the Coderbits API using PHP. Super simple stuff, just like Bit's name!

Useful advice

Call the first function just once, so not to burden your bandwith (it's a lot of data when you make an API call).
Try improving the functions and let me know in the comments bellow.
Read the comments I provided for each line of code.
Experiment!

What if your users are developers?

Stefan Cosma — Sat, 21 Sep 2013 00:00:00 GMT

Art they, or aren't they, that is the question: Whether 'tis Developer in the mind to suffer. That’s how Shakespeare would have written his words if the Internet existed at the time and developers would have been considered a noble part of society!

Nowadays, when the Internet is full of cat videos and bears jumping on trampolines, we can safely say that a developer is, to some degree, like a modern Shakespeare. He writes plays in the form of code, and some of them are good (the plays, of course), some of them aren't but that doesn't stop him from writing and creating great plays.

If you’re reading this, you might consider yourself as being a developer? Right? Ok, I’m glad we cleared that up! Your skills make stuff work and some of the apps you make are used by other people. Aaa, the magic word! Peanuts? No, people!

Without people your tools or apps are pretty much useless. Why you may ask? Well because for starters people are the core of the community that gets built around your app.

It might not be a finished product, it may be still in alpha stage of development, but it’s been written with great care by you, it’s your baby and you take care of it, you nurture it, just like a beaver takes care of its dam. Ok, but still, you’re a great developer and you made a great app that can breathe fire through it’s input fields and people don’t appreciate it. Well maybe because it’s been written under the pressure of time and building something under the pressure of time isn't a great idea. I mean look at the pyramids, they got build over a very long period of time (20 goddamn years!), and I’m not saying that you should do the same but no need to hurry. Or maybe the technology isn't advanced enough for your awesome ideas. Who knows? You certainly don’t.

Let’s start from the premise that you’re honest about your work and your work reflects your skills as a developer. You accept the fact that your app has flaws, you know them, you acknowledge them and your users understand this to some basic level. They’re mere mortals, they can’t understand the powers involved in creating an awesome app like yours!

But what if your users were developers as well? What happens then? It ain't going to be pretty, I’m telling you! Developers as users are like bulls in a single china shop! It’s a curse and a blessing at the same time. Why?

Well because they might know how you build the app or tool, they will test the hell out of it and they will break every single “china in the shop”! But keep in mind that this way you’ll get rid of all the bad bugs (bugs = china, for anyone who asks) from the start even if that means you sacrifice a few good features!

They will click on every nook and cranny, every possible corner, until they find an error and when they do, because believe me they will, they’ll send you a screenshot of their desktop, that's full of apps and other gibberish, because they don’t know how to open MS Paint and crop the error out from their screenshot, and your Inbox will be flooded with screenshots of errors surrounded by lightsaber-wielding-kitties running around on flying walruses over a field of rainbows!

They start to complain about stuff not working and not being able to do this or that, comparing your app with others on the market that might offer similar services.

Nooo! That’s my baby, they can’t do that! Yes they can and they will, because developers, more specifically people, have a tendency to break stuff that doesn't belong to them, because you know, they can’t have it entirely for themselves and they want to know how it works even if that means that they are going to break it into a million screenshots.

As developers they should understand with ease that an app isn't going to write itself and that it takes time to get it right from the first try. This principle applies to all apps and tools out there (I’m looking at you, Apple Maps!).

I said it before, I’ll say it again, be honest about your work, accept all the flaws and don’t hide behind a made up title that you found on the Internet to cover your own issues and the issues you have with your app, because your developer users will transform from innocent users to an angry-app-eating-mob.

But having developers as users has it’s good parts, right? Right! They can provide valuable feedback about stuff you might have missed during your long debugging sessions in the dead of night. They also might help you in the process of rebuilding those “china's” that they broke earlier in the process. Because having multiple minds focused on a single subject can have a tremendous impact on the final outcome of the finished product. And we all want users that are happy about the app that they use.

Accept their suggestions or criticism (except those ones that cross the line, you can ban those bastards!). If you win a developer, you win everybody who listens to him. They will like you, they will like your product, and they will recommend you to anyone who asks.

If you messed up something, say you did, apologize and your developer users will understand and carry on. Don’t apologize 3 days later saying something like “Sorry if that may have caused inconvenience!” (I’m looking again at you, Apple Maps!). There is no “may” in this situation because it did cause something, and it wasn't very pretty. Your developer users aren't going to like it, not one bit and you’ll soon be surrounded again by that same angry-app-eating-mob (we just got rid of them, dammit!).

To end this article, because I know you got bored reading it and you want to return to your cat videos, I’ll leave you with this: having developers as users to your app or tool is difficult. They can be great users and provide useful feedback and suggest improvements but they can also be a big pain. If you can make this happen, it’s a wonderful thing and the web is going to get more awesome than you might think, if you can’t, it may hurt.

Until next time, code long and prosper!

Stefan

Hello world!

Stefan Cosma — Fri, 20 Sep 2013 00:00:00 GMT

I bid you hello, dear reader, welcome to this website, that for some particular reason I own it.

What is the purpose of this website, you may ask? Well for starters this is a website that is maintained by me, Stefan. This is a place where I, Stefan, share knowledge and sometimes adventures, with you, the reader.

I come here to write about topics that can vary from stuff like hacking NASA with a toaster and a paperclip to Quantum chromodynamics (look it up it's an interesting topic).

Why should you read the articles featured on this website, you ask? Well, as I said a few sentences back, this is where I share knowledge and sometimes adventures.

Maybe you, as me and so many other these days share a common interest in stuff like code, design and other jibber jabber, except cat videos! If you need those you can go to YouTube! That is all for now. Until next time, code long and prosper!

Cheers, Stefan.