DEV Community: Antonio Radovcic

Detecting Hover and Touch in CSS and JS

Antonio Radovcic — Wed, 02 Oct 2019 08:13:03 +0000

It's dead simple to detect Hover and Touch nowadays thanks to Level-4-media-queries.

@media (hover: hover) {
  //Insert Styles for Hover-Devices
}

Detection of non-hover-devices:

@media (hover: none) {
  //Insert Styles for Non-Hover-Devices
}

For IE11-support, extend the media-query with a IE11-hack:

@media (hover: hover), screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  //Insert Styles for Hover-Devices and IE11 here.
}

You can further specify which device you like to target with pointer:

@media (pointer: fine) {
  //…
}
@media (pointer: coarse) {
  //…
}

In JavaScript, the exact same method works thanks to matchMedia:

const canHover = window.matchMedia('(hover: hover)').matches; //true or false

Dev-Log #4: Lander-game. Putting it on hiatus.

Antonio Radovcic — Tue, 16 Jul 2019 10:06:38 +0000

My little lander-game will be put on hold for some time.

I like to keep my plans and ideas small and short, but I can't figure out how to make it fun in the little time I have available.

The main idea is that the player is assigning incoming space-ships to landing-pads. There are 5 pads. Every ship is owned by one of three fractions (police, corporate, mob). Those fractions like, dislike or are neutral to each other. When you place two ships from disliking fractions next to each other, your reputation with that fraction suffers, and vice versa. Better reputation means more money from the ships, which you need to keep the port running.

The latest idea was to leave it to the player to find out, which fraction likes/dislikes which other fraction. The other variant is to introduce those relationships one by one to the player.

There would also be further effects and events, like losing the game if every platform is occupied by mob-ships. Or getting extra money from the mob if there are no police-ships in the port.

All of this already works in the game, but it's still not fun to play. It feels like work, and I don't really enjoy playing it.

It was still a great way to get my feet wet with Elixir and Phoenix, and if anyone would like to see the code, or try the game, please comment!

(It's in private repos on GH and it consist of the core-game, a CLI for the game, and the Phoenix-Web-App (no JS))

Holler if you like the idea and/or have other ideas how to make it more fun. Also feel free to steal this idea if you like.

When NOT to use a tool/paradigm/workflow

Antonio Radovcic — Wed, 12 Jun 2019 20:36:53 +0000

Using the right tool/paradigm/solution/library/workflow for a job is widely regarded as a good idea.

It's the opposite of cargo-culting, which means blindly using a tool because others do, without necessarily knowing their reasons.

< / obvious >
< point >

Everyone who is selling tools will usually praise theirs as silver bullet for a wide range of use-cases.

What is missing is the information, when not to use it, or cases where that tool is not a good choice.

Lately I have come to appreciate tool-authors, vendors, experts and teachers who clearly state that…

…our book may not be for you.
…you should use a simpler approach.
…this library introduces too much overhead for your project-size.

It's an act which might prevent some purchases or downloads, but…

…it immediately builds trust.
…it provides usable information.
…it can prevent frustration in the long run.

Positive examples I came across more or less recently:

"You Might Not Need Redux" by the author of Redux
"When and Why to Use Docker"

I'm curious about more examples of "do not use our product if…"!

Dev-Log #3: Elixir-Game, now with 1000% more interface.

Antonio Radovcic — Wed, 29 May 2019 20:27:46 +0000

I'm half-seriously making a game about spaceships landing in a hangar.

It's primarily a way of learning Elixir and Phoenix. I want to make something fun with this, though. It's still kind of boring and hard to understand.

The player is the person responsible for placing the ships strategically, in order to keep their reputation with the fractions (Police, Corporations, Cartel) as high as possible. Better reputation means more income from the platform-lease. The player pays a fixed maintenance-cost each round. The goal is to not run out of money.

Placing a police-ship next to a cartel-ship will improve reputation with police and worsen reputation with the cartel. It's rock-paper-scissors, only with police-corporate-cartel.

The current issue is, that everything is still too balanced, in a sense that I can just focus on improving reputation with one fraction and ignore the rest. The fractions have no special effects.

That's why I introduced the restriction that you can't place the cartel on each platform, because if there's nobody stopping them, they will take over the hangar. I'm thinking currently about effects like those for the other fractions.

Those could be that reputation can't fall below a certain treshold, otherwise they will just stop coming, and you'll have fewer ships to make money from. Or the police could stop paying lease if they don't like you.

On the technical side, the whole thing is an Elixir-App with a Phoenix-based front-end. It works really well and is fun to develop. Right now, every player-action is a form-submit. There's no JS yet. It's amazing how far you can get with CSS-animations. I want to use Live-View at some point, though.

Learn to recognise the important bits

Antonio Radovcic — Mon, 06 May 2019 13:05:08 +0000

The most useful thing I learned in Uni was to tell the important from the trivial.

I studied Design. The professor who oversaw my interaction-design-projects was ruthless about calling out fake progress on my presentations.
The shiny, fashionable, trivial, yak-shaving, turd-polishing parts.
Everything that didn't further or reinforce the core ideas.

The reason was simple:
If the core ideas and content aren't good on their own, no amount of sugarcoating will make them good. So don't waste time on paint until the house is standing.

Yak-shaving is dangerous, because it creates the illusion of progress. Keep it for when you answered the hard questions.

Of course it's important to have a good looking poster, but the people are not attending your show if you can't dance.

Next time you're working on a project, ask yourself whether you already solved the important bits.

Which way of centering via Flex do you prefer?

Antonio Radovcic — Wed, 24 Apr 2019 09:31:30 +0000

Given you want to center an element horizontally. Which one would you prefer?

.parent {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.parent {
  display: flex;
  justify-content: space-around;
}

Dev-Log #2: Lander-Game, we have a loop!

Antonio Radovcic — Fri, 29 Mar 2019 20:27:01 +0000

The lander-game is still figuring itself out piece by piece, but it already has some rules and a loop. This is mostly a scratchpad for myself and rather hastily written.

Current state:

The player is looking at a space-hangar-management-software and has to manage approaching ships. The hangar has four landing-platforms in a row. Ships pay a fee for each round they stay landed.
The arriving ships can be from three different fractions: Police, Corporate, Cartel.
The player has a reputation with each fraction. A positive reputation means the player gets a bigger tip from that fraction.
The reputation changes based on how the player places ships from certain fractions next to each other.
Example: Putting Police next to Cartel will improve the rep. with Police, and lower it with Cartel. Corporate next to Cartel means a minus with Corporate and a plus with Cartel. Think rock-paper-scissors.
A ship will remain on the platform for 3 to 6 rounds.
Sending a ship away prematurely by placing a new ship on that platform will decrease reputation with that fraction.
The player is paying a fixed maintenance fee each round.

Current ideas and struggles:

Should a ship pay for each round, or just on landing, or just on leaving? With pay-on-leave I could add that the player won't get payed if the ship gets "sent home" prematurely.
An arbitrary number of platforms. Start with one or two, and buy additional platforms as the game progresses. Currently, 4 are hardcoded into the game.
A lose-condition is still missing. Maybe lose if you run out of cash?
Game-objectives may be: Get n money by round 50; Don't get a negative reputation with the cartel; survive 50 rounds; start with a negative rep. with the police and get it positive by round 30;
A fourth fraction, "Leisure" or "Private", which does have effects on neighbouring ships, but doesn't have a reputation with the player. Could be useful as filler for empty slots, I don't know…
A second dimension. The platforms aren't just 4 in a row but maybe 3x4, and the reputation-effects go up and down.
Events! This will spice up the game and add story. Example:
- Cartel offers you money if you don't let police land
The game currently has instant state-changes, since the interface is still a CLI. That means every change happens instantly and the player has no transitions to help visualise consequences. It's waaaay to early to think about final visuals etc. but I would want this to be a browser-based game if it ever goes public. Of course I had to do a little yak-shaving and put the CLI-game into Cathode.app, for a little trashy Sci-Fi-Cyber-Vibe:

Things To Consider When Applying And Interviewing

Antonio Radovcic — Wed, 20 Mar 2019 14:23:26 +0000

Part of my work as senior-consultant is to pick applicants and be part of recruitment and interviewing. I'd like to share a couple of easy things to mind when applying at tech-agencies. All of those I noticed throughout the years.

Context:
I'm a senior-consultant in a digital agency in Europe. The situation may and will differ for product-companies or start-ups. I have no experience with those. Most points are applicable everywhere, though.

When in doubt, overdress

Lots of people pay too little attention to their looks. One of the questions I ask myself about an applicant is: Could I send this person to our clients? Will they make a good impression? If you don't know the agency's dress-code, go for business-casual. No shorts. No worn-out or stone-washed clothes.

Don't rate your skills in ⭐️⭐️⭐️⭐️

I have seen lots of CVs with lists of technologies and skills, with an Amazon-style rating next to them. Don't do this. Nobody knows what it means, and you don't have room on the CV for a manual. When I read "JavaScript ★★★☆", does it mean that you're almost perfect? Or that you almost used it in production? A better way to communicate your skills is to list your main ones and add a short description of your experience in them.

Example:

JavaScript: Four years experience architecting JS-Apps and mentoring junior-developers

Erlang: Used in two personal projects

Show some presence on the web

If you apply for a web-related position, it's a plus if you have a website, a GitHub-Profile (if it's not dead) or a custom email-address (@johndoe .com instead of @gmail.com).
It's not vital, but it shows that you live in the medium. Make your CV available online, too.
I have seen personal-website-urls on CVs that lead to "under construction"-sites or were't available in some way. This is a huge red flag.

cv.contents.sortByRelevance()

Place the relevant items of your CV on top. With "relevant" I mean relevant for the position you're applying to. That means you might have to change it a bit for each company. If you apply to "3+ years experience developing for Android", and "Android" is one of the last items in your CV, or has only ★★☆☆, or I need to use the search-function to find it, it does not look good.

Negativity

Be careful with negativity in your communication. With that I mean: Talking sh** about former colleagues/bosses; criticising the company's website; questioning the validity of the recruiting-process; and so on.
Your points may be true and valid, but in a situation where your advancement depends on making the others feel good, you may want to reconsider bringing them up.

Gesture and Posture

Read up on behaviour that might be interpreted negatively in the cultural context you're applying in.
Mind your body-language. Sit up straight. Talk and ask. Don't interrupt others.
While waiting for the interviewers to pick you up in the lobby, don't sit down, so they won't have the "high ground" when they come get you. I learned this one in a seminar about talking and presenting, and I'm noticing it ever since.
Meeting the interviewers at eye level in all parts of the process is crucial to success.

Dev-Log #1: Lander-Game

Antonio Radovcic — Fri, 15 Mar 2019 22:10:45 +0000

I like to work on games from time to time. The last thing I released was Dubiduh in 2016, a short puzzle-game where you control a snaky-ghosty-thing through levels.

That has beed some years ago, and I'd like to release something small again!

I have no idea where this is going, or if there will be a Dev-Log #2, I just felt like writing some words down.

The idea is as follows:

The player is responsible for the utilisation of landing-platforms in a space-hangar. The hangar has a couple of those platforms.
Every few rounds/iterations there's a ship arriving.
The player decides where it may land, or whether to send it away.
Ships pay for landing, and for each round they are in the hangar.
Each ship leaves after one or a few rounds.
Each ship belongs to a fraction: Police, Corporate, Cartel.
The player has a reputation with each fraction.
Placing a police-ship next to a cartel-ship will improve the reputation with the police, and worsen it with the cartel. Rock-paper-scissors in space.
All combinations will have some effects like the one above.
The better the reputation, the more that fraction will pay for landing/staying.

So the main goal is to place/send away the incoming ships strategically, to reach a certain financial goal, or to construct additional platforms (but not in a cookie-clicker fashion)

The platforms could be 4 in a row, or even a 2D-Grid with different ship-sizes.

There could be events, like a cartel ship promising you a large amount of money for not allowing police for n rounds.

But let's lay low for now. I'm working on a prototype where the player should be able to place incoming ships, get money for their stay, and have varying reputation based on described effects.

Since I have had a crush on Elixir for some time, I'm picking it for the initial code. I'm keeping the interface as ASCII for now, since I'd like to figure out the rules before drawing a single pixel. I imagine this would also work well with paper and dice.

I'm calling it "NEORAID", because I mistyped "niorad" and liked the word.

(Updated) Minimal Gatsby-Starter with REST-Api

Antonio Radovcic — Fri, 22 Feb 2019 12:16:07 +0000

UPDATED, here's the original post

Hi Dev.to peeps,

I'm looking for an article, example or tutorial to get a minimal Gatsby-Site started, with JSON-data from a public REST-Api (like a list of Marvel-Heroes from their Api, with a detail-page for each).

Thanks!

At first I thought it would be much more complicated to wire up a custom REST-API to Gatsby.

Turns out it's not that hard. I followed the steps on this Stack-Overflow-Post. Thanks to Arden de Raaij for posting this in the comments!

Shoutout to Danilo Miranda and Petro Liashchynskyi for their links to also very insightful getting-started-articles!

DevLids 200-Milestone & Help Needed

Antonio Radovcic — Wed, 05 Dec 2018 12:12:44 +0000

See the last paragraph for the part I need help with

Yesterday my little hobby-project DevLids.com reached 200 contributors. (There are some people with more than one, so the total number of images is a bit higher)

Where did I get 200 lids?

I got lots of content (especially in the beginning) from dev.to-users, so thank you all for sticking paper on your horribly expensive machines! Also thanks to Ali for her shoutout.

Most lids I get from searching and asking on Twitter. I had lots of SalesForce-folks tweeting me in the last days. (They do have some cool stickers! Where do I get those?).

Last week I did a short talk about DevLids at the React-Day in Berlin, at the GitNation-Open-Source-Stage (it starts at 05:08:30-ish). From there I also got a few submissions.

For me it's more important to keep it running slowly but steadily. The most interesting thing will be to look back in five years and giggle at the old stuff ("hihi, remember EDGE?" or "remember LAPTOPS?").

I don't have many followers on any platform, so I don't expect any bursts of submissions, anyways.

How popular is DevLids?

As little as I care about popularity (I just want something I can look at when I can't sleep), sometimes I'm curious about the reach.

DevLids has no analytics, but my hoster is providing some basic insight, and it looks like there are at least a couple hundred visitors a month, which is way more than any other project I did before.

What else is happening in the Lidiverse?

Slight updates of the layout, with a (hopefully) clearer and bigger how-to-sumbit-section.
There's a React-version of DevLids, but it's just a playground for learning, it won't replace the current version.
There's an alphabetic list of contributors.
I had some stickers made! I can't send them to everybody, albeit if you really want some, DM me on Twitter.
I'm looking into ways to add tags to the lids and make it sortable by stickers. The Google-Cloud-Logo-Detection works OK, but I guess I'll have to tag by hand.

Want to submit your lid?

Send me a photo on Twitter, or just post it in the comments.

I need help!

I'd like to be able to edit submissions in the browser. I would have to be able to do perspective-cropping for this, which currently I can only do in Photoshop.

If somebody knows a way to do perspective-cropping in the browser, please let me know in the comments. It could be a JS-plugin, paper, or an algorithm which gives me the pixels after defining four points in the source-image. Any hint on what to look for is appreciated.

Thanks for reading!

Thoughts on doing side-projects while short on time

Antonio Radovcic — Wed, 24 Oct 2018 14:00:11 +0000

As my personal free time shrinks to a minimum, I'm thinking about how I can keep doing some fun projects and learning on the side. Currently I can do around half an hour on evenings, and 1-2 hours on weekends. So there's no time to waste! My goal is to work on fun and useful stuff, and to find out early when something isn't worth continuing.

In General:

The more precise the goal, the better.
Learning programming-languages and frameworks worked best for me when I had a clear use-case or goal for them. Learning a language for its own sake is a great experience, too, but I gets hard to keep the momentum going, esp. once I get to the harder parts.

Only one new thing at a time.
If I have an idea for an app or game etc., the worst thing to do would be to also learn a new language or engine at the same time. After inspiration hits, pragmatism is key. I'm using what I know, not what I want to know.

The less mental load, the better.
If I need 15 Minutes to remember where I left off the day before, and to get in the zone, the project won't last very long.

The more simple and stable the dev-environment, the better.
Fewer external libraries means less time spent setting up and upgrading. Do I really need Webpack from the start? I don't want to spend five sessions in a row with fixing an esoteric bug caused by a library.

The quicker the results, the better.
The momentum is easier to keep if there is regular positive feedback in the form of results on screen and/or from other people. That's why I like Construct2 and GameMaker.

For Online-courses:

The shorter the lessons, the better. The smaller the example-projects, the better.
The Android-course on Udacity hits the nail on the head. The videos are a couple of minutes long, and every new video has the current code as downloadable project-file. It's quick to download the latest code, open it in Android-Studio, and start coding.

Overcome the sunk-cost-fallacy.
I paid 50$ for a course, just to find out that the pace is not right; the instructor is unsympathetic; the subject-matter isn't that interesting. Do I continue just because I already invested time and money? Just like with bad books: No!

Negative* examples

I had a vague idea for a game which was "Papers, please" but at a space-hangar for arriving ships. Plus I wanted to learn Unity and Playmaker. Have you seen the game on Steam?
Me neither.
I picked up the idea at a later time, prototyping with React and Redux, where I was more at home and was able to reach the "point of no idea" much quicker.
I started doing interpreterbook.com which is super-interesting, but it's something you need to spend some hours at a time on.
Started learning Kotlin, Erlang, Haskell, Lisp, Rust, Qt, JavaFX, Swift, Express, Unity etc. I learned a lot from this, and it improved my daily work as frontend-developer too, but without a use-case the motivation and momentum stopped eventually.

*(Don't get me wrong. Almost all those were fun and I learned a lot. They just didn't go anywhere.)

Positive examples

https://DevLids.com was built pretty quickly with software I know well (Kirby CMS, plain CSS, no JS, shared host & FTP). I started right away after having the idea and rough design. It went live after a week or so. It's also pretty easy to maintain. It takes ~3 minutes for adding a new entry, including getting in touch and editing in Photoshop.
The game I did for our wedding. I didn't code it from scratch but used Construct2, which is a HTML5-Game-Maker. I had some experience with it from smaller trials and got a working prototype pretty quickly. It was perfect for the scope and level of polish I went for (http://10-5.de/game/).