Guys on CodePen are making battling Pikachus out of pure CSS and I'm just sitting here trying to get my navbar straight.

I have a peeeeeennn

I have some code

Uuuh

Codepen.io

Just before you, my fellow system programmer, scroll past this, let me say this:

🍬 The web is actiually simple. 🍬

Both HTML and CSS is declarative. It's all easy when you understand the concepts, learn how to be idiomatic and quit trying to do that imperative bullshit in languages that aren't imperative.

HTML is simple. You know the boilerplate: doctype, head, body, that's all. Just mark it up and do NOT look at it before you end, mark it up as it were article or something. The appearance is up to css.

CSS is simple. You may even forget bem or rscss, you're already a skilled software developer. Use common sense and your code-splitting and naming skills you gained reading The Code Complete or doing software development for years.

Forget mockups. Forget absolute positioning, forget setting width and height in pixels. Go to awwwards, find some inspiration. Draw some buttons and fields on paper with your good old pencil. Then go and write some css. Feel free to steal some shadows and transitions from codepen.

Read about 8-pixel grid system. Let every element push away from others by setting something like margin: 16px; and whoops! You've just got fully responsive and got great vertical rhythm without even using media queries!

Oh my god, do NEVER set width and height explicitly! Type something like button { width: 120px; } and bang! The entire web page is broken. Quit that shit. Let it resize as it should. It will resize itself to fit its contents.

HTML is by default ready for your template engine. That's how you receive data from server — as server-side rendered, plain old HTML page. On the other hand, the form element is the most axiomatic and simple way to send the data to server. That's how you send it — as plain old GET or POST that every webserver can handle.

All of there are true:
1. It's easy to get great 100% responsiveness without media queries.
2. It's easy to align items in row, it's just one line of css. Maybe two, if you still want elements to wrap, but want to use flexbox:
.parent {
display: flex;
flex-wrap: wrap;
}
3. HTML and CSS are fast by default.
4. You don't need mockups to achieve great visual experience. Mockups is imperative, web is declarative.
5. You may not even need JavaScript to make great website.

Go on, ask me a question about web! I'll ready to answer everything.

(I know Linux is not included)
Which one do you like most?
(and yes, it's far from perfect, just a little CSS sketch for the fun)

My CodePen is one of today's "Picked Pens" so I've got that going for me, which is nice.

Today a few friends got together and built my gfs new computer. I just watched because.... I'm a hardware n00b :p

Anyways, it took them about 2 hours building all the stuff together and now we're done installing Windows from via disc. The problem is, it's 2015 windows. So we're updating.
And it already takes more time to update windows than building the actual computer.

Nice!

(Btw that's me in the background, super [not] comfy codepen-ing)

Dev confession:

I’ve been writing websites since I was 12 and I’m still yet to write a loading animation. I always just copy them off codepen

When you ctrl+s a jdfiddle, codepen, gmail composer, facebook post and the annoying save page as comes out

Hey guys, remember my batman pen ...is one of the picked pens at codepen io home page...feeling excited 😀😀😍

Stalker look up at Facebook, Twitter and Instagram. I stalk on Github, Stackoverflow, CodePen and devRant.

Identified the origin of the DDoS attack. Apparently, the person was just hopping through 3 IPs so looked like a targeted attack likely from a competitor. I sent the logs with incident notification to the abuse@hostprovider.com to ask them to suspend them.

Got a prompt response but took them a week to suspend this.

We were a very small team and had to stop everything to fix this-iptables and firewall etc.

We had not even launched the product and was still under development.

I love my adhd kicks. My webstorm trial ended, I downloaded vscode, hated the bindings, I then used thr intellij extension. Everything ok expect autocomplete, not a fan of tab, couldn't use enter to enter enter as a binding. Hacked that binding.json, idk how i ended up installing a json sorter extension, ow theres a imports sorter. Okay what exactly i wanted to do? Right, do my niche site. Bad idea, i had written it in kotlin js, (missing intellij already) so i searched for almost non-scripting framework. Idk what happened...i ended up being interested in tailwind. Tried it a bit, ow they have tailwind ui. Thinking about buying the sweet shit. Ow i see headless UI... Pause, threw tailwind out. Thinking about react, met Solid, loved it, yarned and npmed it. Extension time, auto tag rename, more emmet like shit, rainbow and fira fonts, theme, scheme, ow colors whaaaw. Okay, its not gonna look like or feel like intellij, more like IDEA community if i had made the ide. What was i making again? Ah my webcrapp. still (idea)less... I went to codepen, grew a beard, came out, still feeling powerfully uncreative. Last stop: awwwards.. ow that awesome 7up nl site, imma see it, they nuked the animations, everything. This is where the rant actually ends, because THANK GOD I DONT FULLSTACK FOR A LIVING!!! Swift, Kotlin, XML and unpredictable Gradle is good enough for me to stop me from going wild. Stay safe. Genetic.🙋‍♂️

codepen is the best thing which could happen to frontend development... i tried it out 5 months ago and now it is the most important part of my development process

Why tf yall trashing w3schools and praising mdn? When I forget the syntax I just ignore the mdn and go straight to w3schools, the information there is more condensed, more like a cheatsheet. Also their online editor is far quicker than any codepen hipster garbage you endorse

If I need spec I visit the fucking spec, not mdn

Just css'd the shit outta this Web app... by css I mean aggressively copied people on codepen til I patched together my idea of design

TL;DR: Stop. Hating. On. Ads. Here are 5 reasons why:

1. "No one likes ads"
I love seeing *good* ads before I watch a YouTube video. Or I looked up videos that YT recommended because they sounded fun and they were fun:
- Coke - Hey Brother is an amazing and touching short film
- Fressnapf (="food bowl") had an incredibly enjoyable "things you didn't know about cats" video I clicked on purpose and it was good.
- I found JetBrains through ads (free for me, student perks. But tbh I use atom)
and I could name more.

2. What are the alternatives?
I know there are some non-profits and that's cool but you wanna be paid in your job, right? So ads are why Facebook (I know, Facebook isn't enjoyed here but), YouTube, stackoverflow, etc. Wikipedia asks for a few million dollars of donations each year because they don't run ads. Smaller businesses can't do that really. Hell, even codepen has a "sponsored" section. Imagine you would have to pay for all of those services.

3. "Manipulation"
isn't a bad thing unless you abuse it. I manipulate you when I say that I love codepen in the same way an ad does. No one forces you to use a product or watch an ad (you can look away and often times skip).

4. Adblock
What if everyone did that? Adblock blocks happened a while ago and the war between adblock and ad-senders is still ongoing. The moment you see an ad, you are using/watching etc something which the creators thought is worth making money off. If you don't think so, leave the site. I am an adblock user but if the site politely asks me to disable it and I enjoy the content - I will disable it with pleasure.

5. Targeted ads
Yes. The internet is a huge data-crawling piece of shit. But there are many more questionable or even dangerous ways of data-harvesting online. I am glad to see ads I like and not the ones my sister might like. Some services allow you to disable personalized ads. Or use vpn if you really want to.

what did you do? :D

Finally, one of my pens got picked. Idk why I feel so good now #mademynight

! WebDevs
I'm just undecided with which ide for web development I should go..
I'm switching all the time.
I'm working with NetBeans, codepen and brackets.
What do you use and why? (please only free versions)
Thank you
Above are just example pics.

Worst "hackathon" turned out to be the boss (scrum master type) and a Magento guy (super OCD) working on a tiny tiny adjustment to a email template. They didn't really do anything and expected me to just make it all way better with CSS alone. I built out a robust responsive email in a codepen for them. They acted like they couldn't trust me to be a part of the team because I wasn't contributing - but I wasn't even sure what was happening. Between gathering refreshments and patting themselves on the back... it was hard to see what they had done. The online presentation to the magento people was pretty funny to watch though. If you think you can't have a presentation about nothing - think again. Magento is totally fucked. The word 'hacking' is not really suited to describe 'programming websites/applications quickly' anyway. 'Ninja' and 'hack' should always be considered red flags. 'Magento' should be a triple red flag: Jerk-off Jesus-complex boss, self-centered out of touch programmers, crap product. Watch out!

Guess the accent color:

when the setup of programming environment takes more effort than the code.
and you're like fuck it i'll do it online!

I always use bootstrap or anything else except writing CSS from scratch. I cant help it, I dont like writing CSS from nothing.

I asked the designer if he had ideas on the hover or active states of the buttons. He came with a pretty flashy codepen: “Maybe something like this?”

I tried making the thing myself. It was pretty complicated since it had a background/foreground etc so i tried a couple of things with :before :after but to no avail. I gave up and decided to give it another try the next morning.

Next morning i started to copy paste the existing code from the codepen.
Quickly i discovered what a pile of shit was send to me. This button had twice as much lines then needed and above all; it wasn’t scalable at all.

I reworked the code removed everything i didn’t need and now have decent animating button. Which is flashing the eyes out of the visitors. But hey, it’s flashy!!

Have this iOS maniac/UI guy/hustler at my office. (Refers to my first Rant,he's the fucker who always try to shove his iPhone to my face.) Hats off to him for knowing how to generate passive income and his hustling skill. But I hate that fucker. He always like to start a debate. He's always doing his sidejobs all the time. He sells staff online(even fidget spinner). He also does wedding photo shoots. Heard from a friend, he's a mediocre photographer but gets client by giving his potential clients lower prices than his competitors. He got a few connections and somehow always doing websites for his own client by going to codepen and copy pasting JavaScript from here and there. He doesn't know shit about programming. That fucker doesn't even know about closures. He literally doesn't know shit. Yet try to debate about with us regarding programming (wtf?) Always trying to get us to help him with his side paid jobs -when he encountered an error,he will immediately bug us- sometimes would interrupt us while we are busy with the company's stuff. If we don't help, he would slightly mock by saying things like "it's ok...I understand you guys are not that experienced yet..etc". The senior dev was pissed off the other day and emailed a super detailed complaint to the HR.
Note : He gets paid more by his photoshooting jobs on the weekend, he's only at this job for his future citizenship application. That fucker. He's the type of fucker that will definitely gets rich but gets hated by everyone.

what the mothetfucking fucked fuck of a fucking shit is going on man!!!!?!
FUCK YOU BOOTSTRAP!!!!!
on codepen i just deleted the bootstrap build in, but i had a cdn link in header... i tried different links now and other stuff BUT MY SITE LOOKS NOW UGLY AS SHIT AND I DONT GET OLD SITE BACK FUFUUUUUUUUUJUUUUU
.. spent so many hours in it i was so proud
FUCK YOU SON OF A MOTHRRFUCKING BOOTSTRAP BITCH😠😠😠😠😠

The most frustrating part with css is like seeing people make animations on codepen where a fkin panda closes eyes or moves around,

And you are like how to Center align this box or this Dam image keeps rolling around the screen

Is there any (web) IDE like Codepen for your desktop?

Recently shifted from codepen to thimble. Being a person not that into web development, I find thimble more convenient.

A guy on YouTube posted in a GraphQL tutorial about his CSS issue. He asked about why a certain background for a website that he is creating only looks good on a phone but not on his desktop. I asked him to put the code on either jsfiddle or codepen but he still put the code in the comments, only the CSS part. I kept telling him to place it on those two sites, eventually he did. I looked at the pen and guess what? The picture is a portrait one... He wants to use CSS to make it look good, I don't know how he is gonna achieve that but good luck. I am done with him, stopped commenting.

Assuming Mac: Alfred for OS such as searching and opening apps, using spaces to setup smart project areas, divvy app to quickly size and move around the windows, terminal shortcuts to open files in the OS or in an editor, transmit for hidden files and dragging between panes and server + occasional mounting for preprocessing, inbox-zero mentality, a properly setup google drive app so you don't email forked files back and fourth, beanstalk for deployment of larger stacks, surge.sh for targeted front-end sites, Ember CLI or brunch for build pipelines, CodePen for UI experiments outside of the project, slack instead of email, pick up the telephone and just call for clarification more often, stylus is easier to maintain then scss, hire designers that actually know what their job is if you can. For arduous WordPress administration, rightclick open in new tab for everything - or half your time will be pushing the back button, wp-migrate pro, and in general try to get out of WP when you can.

Fuck codepen!!! I wrote a killer pen and now it’s fucking gone!!!!

I got downvoted in stackoverflow because the guy had two problems. One he mentioned in the question, everyone answered that. The problem persisted because there was another problem too. And I kindly mentioned the problem. I currently have two downvotes on that answer. And I bet you, the answer is correct and working. I even created a codepen.

Designer wanted to help me making a certain part of the new layout responsive. After about 1.5 hours of struggling with a CodePen he comes back to me and says: yeah i can’t i would set it up in a totally different way.

Two weeks before that he suggested that i would rebuild it in this exact way.

I see people working with Atom. I assume none of them are dealing with even moderately large files. Codepen has better performance.

Since when I discovered codepen.io, everyday I watch the picked pens to discover new cool things and feel more and more ignorant. Do you have a codepen account? I want to see yours

hoi guys,
on freecodecamp i had a lesson to build a website on codepen.io with bootstrap.
except that it has some code features, it felt like normal coding.
i have to write all on my own also.
And then I opened a html5 project on netbeans with downloaded bootstrap and it filled the index. html plus css and other files with much content (but looked like shit)..
why is there such a big difference between codepen bootstrap and netbeans bootstrap?

Where can i find/signup for Daily Codepen Challenges?

Been searching around but I can only find old challenges. Mostly intereseted in UI and JS challenges:-)

Not a rant, but what tools do you use for development?
As-in, what apps/services you've bought / installed for free?
For example, I use Visual Studio Code, iTerm2, Docker, DigitalOcean, CodePen etc.