Label as input-placeholder and autofill

Benjamin Wehner — Mon, 27 Apr 2020 09:48:00 +0000

Everybody knows the fancy input placeholders that will move out of the input-field if you set the focus on it.

So it's relatively easy:

input:focus ~ label {/* ..do stuff*/}

<input id="user"><label for="user">Input</label>

The problem

If your page is ssl encrypted and the user has used
your login-form before. The browsers will autofill your form.

But they wont really fill your form. Its just a preview.
And they will do it on page-load they dont need the focus.

If you use javascript to check if the form-value is filled, it will appear empty.

And in the end, the filled in preview-data, will overlap your label-/placeholder.

The Solution

To prevent this, you could use a construct like the following.
So you will check for the placeholder. You should also set the color of the input-placeholder to transparent.

input:not(:placeholder-shown) ~ label,
input:focus ~ label {/* ..do stuff*/}

<input placeholder="input" id="user"><label for="user">Input</label>

Hope that will help somebody. :D

Welcome - This is the DevRound

Benjamin Wehner — Mon, 09 Mar 2020 10:28:51 +0000

Moin, I'm Benny, webdeveloper at Etribes.
We are a consulting-/tech-agency from Hamburg.
Our goal is to digitize germany.
Currently, we are about 30 tech-people, still growing.

As our first post, I want to present you the DevRound.

The DevRound is a meeting for all tech related people from Etribes.

Every Friday we have these one hour together. Where we socialize,
talk about our current- or private work or present awesome stuff.

How it works:

Everything has to be handled within one hour.
On each meeting we decide who will be the next moderator and protocol-keeper.
Only the current moderator is allowed to use a laptop.
We have a strict agenda:

How are you?
News from lead-round
HR Update
Topics of the Week
Tasks from last Dev Round
"Nice and Dirty" of the week

1. How are you?:

The more emotional part. Every developer is asked these question.
Say a number from one to six to present your current mood. Like in the german school-system, one is the best.
What makes you happy, what lets you feel bad. Say what you want, nothing will leave the room.
Except you want it.

2. News from lead-round:

Need more information here. Our company is splitted into tribes (tech-,consultant-,PO-,Scaling-).
So once in a week also the tribe-leads meet to discuss company-wide topics.

We try to be as transparent as possible. So our tribe-lead tells us all the news from this round.

3. HR Update:

Did we had some awesome new meetings with possible new candidates?
Did someone say, yes I will. Or did we have some people that changed they're minds?
We try also to collect ideas for how to make the current process better.

4. Topics of the Week:

Every tech-tribe-member has the chance to add topics over the week.
At the beginning we will sort them and after that we discuss every topic.
And it could be everything.

Like you heard about this new fancy js lib?
See what fancy Iot I build at home.
We need FritzCola instead of Coke.
I want to show you PSR11.
What notebooks should a new techTribeMember use?
What will be our next teamEvent?
Don't write codeToDoComments without a ticketNumber.

I think you could see, everything is allowed. That is a lot of fun.
Because you never know what this meeting is about in detail.
Also, the chance to learn new things is very high.

5. Tasks from last Dev Round:

As we discuss topics, we will sometimes create some tasks.
Like creating these blogPost. Someone will be assigned and has to do it, in the best case until the next DevRound.
Tasks also could be everything, organize a date for a teamEvent or prepare a presentation for the next DevRound.

6. Nice and Dirty of the week:

We build the most of our software on top of Shopware and Spryker, so we see a lot of code from developers outside of the company.
So if we see something dirty we want to blame someone. And as we don't blame ourselves, we do it with code from remote developers ;)
Its like a peer-code-review. We always try to make it better.
Sometimes if someone is very proud of his/her code, she/he will also present it on the DevRound.

Additional things:

We always try to get all developers together. Even if they are in another country, we try to reach them via video-chat.

I hope this helps to get you a small blink of how we work and handle our team.
How do you handle this kind of things?

DEV Community: Benjamin Wehner