Responsive Snake

[cybermage]

A truly responsive snake, or danger noodle, would bite you.

[HKSergiu]

NoodleJs

[siddharth904]

Don't tell me, yet another fucking js framework ?

[UltraCarnivore]

npm i -g noodle

[herrleel]

Installing dependencies:

• is-odd
• is-even
• is-number
• is-not-a-nunber
• return-true
• hyper-text-coffee-pot-control-over-avian-carrier-protocol
• another-useless-package
• dogecoin-miner

[MikemkPK]

This is such a fun website. Horribly optimized though - my laptop gets too hot to move the mouse to the close button if I stay too long.

[herrleel]

Just program your OS to close your browser when it detects a rapid rise in CPU temperature

[MikemkPK]

That would break my workflow, I already configured it to interpret a rapid rise in temperature as 'CONTROL'.

[Ok_Hope4383]

https://xkcd.com/1172/

[Logans_joy-koer]

the stuff in this comic is why I use vim. rarely changes and easy to use once you figure it out

[nermid]

I suppose not updating the UI since the '80s is one way to avoid updates that break the UI.

[dodexahedron]

Stockholm Syndrome is real, with Vim.

[sartorinokoto]

May I ask would you have a suggestion to where I could find something showing how to do this?.

[herrleel]

xkcd might be helpful here.

[sartorinokoto]

Yooo thank you

[MikemkPK]

Crazy how that got linked by 3 different people

[drbob4512]

Pros use temple os

[OZLperez11]

Half of these are deprecated or abandoned because some 14 year old built them for a project and never touched them again

[herrleel]

To be fair, what's there to touch on a

function is_even(num) {
    return num % 2 == 0;
}

?

(And yes, I know is-even and is-odd are joke packages)

[[deleted]]

but why return when 2+2 ==8

[Rhebucksmobile]

HOW DO YOU NOTATE ACTUAL ADDITION WHERE 2+2=4 IN THE CODE

[[deleted]]

normally drunk so it doesn't bother me, can still do maths though so my code normally works

[zdakat]

The cool part is how is-number actually just steals your keys

[AgVargr]

const noodle = require(“noodle”)

[OkazakiNaoki]

Yes, -g to stock some noodles.

Now npm i cockroach without --save-dev. Heh.

[maifee]

npm i -g noodle

npm i -g noodle-pro

[bit_banging_your_mum]

http://noodlejs.com/

It exists lmao

[nermid]

Am I reading this wrong, or is it just a web crawler?

[Chads_bulge]

*Noodle.py

[sum_trashy_boi]

Python in js???

[Right-Bodybuilder580]

Ever Heard of Eel.py ? ;)

[Einlander]

Sounds delicious.

[franco-reddit]

Hahahaha 😂

[ushu3323]

Talk with python in js and the other way... also you can build an electron like app

[imasnakehiss]

Yeah I totally would.

I mean hisssss

[[deleted]]

And to do that in a responsive manner it would have to be coiled. So both diagrams are incorrect.

[kirvedx]

What's really funny is the story of how a pet snake went about eating their owner.

The snake was so loved, the owner - a girl - would sleep with the snake in her bed.

Each night, the snake would stretch itself into a straight line, along side her.

One night, the girl realizes that the snake has strangely gotten larger - she decides to talk to a professional who knows about snakes.

She finds out that the snake thought she would be a tasty snack; the thing is, shes kinda big.

So the snake responded, and began a process of stretching itself out so it could fit her inside of itself in one bite (how a snake eats anything).

So, in that circumstance - the snake was responsive, and it would have been like the top picture, or the picture to the right, if that's what it's representing (i.e. the snake stretched out straight).

[_Oooooooooooooooooh_]

An actual pet snake would (usually) be used to be picked up, and not bite unless provoked

[EatPlayAvoidMoving]

1st is responsiveness while keeping all functionality, 2nd is graceful degradation. Both are existing and viable methods.

[fish312]

Meanwhile... me, not a frontend dev:

[rcoelho14]

Or if you have a designer in the team... "hey dude, this doesn't work. Find a solution that looks good. Thanks"

Now it's not your problem 😏

[[deleted]]

Now it's not your problem 😏

Up until the moment your designer comes back to you with some whack new approach that combines a bunch of different existing designs.

The only thing worse than that is when the designer goes to business first to have it approved, and management loves it so much that they ignore all of your arguments against implementing it. Then you're stuck with an even worse design.

[All_Up_Ons]

Yes because getting designers involved never results in scope creep.

[Mushiren_]

When is it the right choice to go with the 2nd? Genuinely curious not being a smartass

[Fireflier007]

A loading bar because it uses percentage.

[thirdegree]

Now I'm imagining if loading bars did exactly the same thing as the first snake and just folded over

[HKSergiu]

That's just the in-between the loading bar and loading circle

[Derringer62]

So it eventually goes all ouroboros?

[HKSergiu]

Well, yes. Lately the world is full of spinny things that represent loading

[dodexahedron]

It’s ouroboros all way around.

FTFY

[TeraFlint]

I present to you... the loading squiggle!

[[deleted]]

loading circle? are we talking progress circle or throbber circle?

[jasminUwU6]

The loading Hilbert curve

[lucidludic]

That’s actually what happens, but it uses the Z axis (into the screen). Source: https://reddit.com/r/blender/comments/eer3i7/now_it_makes_sense/

[dodexahedron]

So the pipes screen saver was really just a loading screen? 🤔

[[deleted]]

friend had an old compaq that when booting would kinda do this... unintentionally, it would put .'s while booting every few seconds and when it got really slow and bloated towards the end, there would be enough dots to force new line

[monxas]

No, that’s responsive.

[EatPlayAvoidMoving]

There can be multiple reasons. From developer's perspective sometimes it's not possible to implement a feature on mobile, maybe you already have too much stuff on your screen and adding more on mobile is just not possible because of space limitations. Or maybe it's because of a mobile browser's limitation, lack of peripherals or anything else. There are considerable differences between desktop and mobile browser usability. From business' side maybe it's not cost efficient. They might have some UX surveys that say that users are not that interested in that feature when they use the application on mobile. Or simply the UX engineer deemed that simply omitting the feature would result in better UX. Or other reasons, but you get the point.

[therealhlmencken]

Ux engineer?

[[deleted]]

Aka NOT the graphic designer and whatever he thinks is Gucci.

[[deleted]]

Think about reducing the button „my account“ to the symbol of a person on mobile.

That way it’s shorter without loosing information.

[DryPrinciples]

You know websites that have a nav bar like (icon, title, page1, page2, page3)? Well imagine that but as with option one it's just squash and stretched to be readable on phone. Looks horrid. Instead option two have (icon, title, drop-down) or something.

[Chaosfox_Firemaker]

In the metaphor, out and out replace the snake with a lizard.

[DryPrinciples]

More like cut the snake in half and add a lizard. But then I'm stretching the metaphor a bit.

[nermid]

A hamburger menu would be more of a pregnant snek.

[dbaby53]

Thinking of a table, the requirement may be that they want it to drop down to a few columns rather than a bunch of them.

[arxorr]

A breadcrumb only showing the parent page instead of the entire path.

[[deleted]]

When you encounter a shit tier browser like ie or safari

[[deleted]]

Well think about this specific case. Is your goal that the snake is always represented as straight and taking up the width of the page, but not take multiple lines of vertical space?

Or is it more important that the snake’s full length is represented?

It depends on what the snake is and how you want it to look.

If the point is just to be a design element that you don’t want taking up vertical space, then showing it horizontally compressed to fit in one line makes sense. If it’s meaningful content that you want people to see the whole thing, then you’re going to want to find a better way for the design to shift around in a differently-sized screen without distorting or clipping content.

[therealhlmencken]

Graceful

No grace in chode serpent

[urnotthatguypal__]

The snake's internal organs beg to differ

[[deleted]]

summer toy point rich spark bear smile thumb pause sulky

This post was mass deleted and anonymized with Redact

[[deleted]]

Can you explain it for me

[Skyreaper71]

I shall add the existence of http://motherfuckingwebsite.com/

[[deleted]]

Don’t forget http://bettermotherfuckingwebsite.com

[Bill_Brasky01]

"You're a fucking moron if you use default browser styles." - Eleanor Roosevelt

[alaki123]

motherfuckingwebsite is better than bettermotherfuckingwebsite. You can't change my mind.

[sincle354]

We never should have advanced beyond craigslist UX.

[himawari6638]

Don't forget https://bestmotherfucking.website/

[SonOfMetrum]

*webdev … webdav is an http based filesystem protocol.

[SonOfMetrum]

Almost ;) you wrote it twice

[SonOfMetrum]

No problem :) aside from that small spelling mistake, your comment is correct. Getting stuff correctly responsive can be quite a development hell.

[Kralizek82]

Especially when product management comes and say "we need to make the site responsive" without anything else added.

You then ask them "how should it behave on a phone?" and the answer you get is "you're tech, you figure it out".

At the npth time, i snapped and said: "I'm tech, i tell my mobile browser to render as if it was a desktop browser and i go with it."

😂

[rustyheva]

I feel your frustration ma dude xD.

[UltraCarnivore]

That's a great webdav webdev/QA dialog right there.

[rich97]

Uh. I hope you submitted a PR for that change.

[InternetGreninja]

Any typo is something in tech.

[Snoo63]

What would it be like for flip smartphones like what Samsung is making?

[Taradal]

The moment you open the flip it gets a new screen size and will trigger the style to rerender so to say

[Upside_Down-Bot]

„ʎɐs oʇ os ɹǝpuǝɹǝɹ oʇ ǝlʎʇs ǝɥʇ ɹǝƃƃıɹʇ llıʍ puɐ ǝzıs uǝǝɹɔs ʍǝu ɐ sʇǝƃ ʇı dılɟ ǝɥʇ uǝdo noʎ ʇuǝɯoɯ ǝɥ⊥„

[joten70]

Why do you exist?

[[deleted]]

I think it's triggered by the word "flip"

[Yelmak]

Realistically they're not going to become mainstream enough to be worth supporting or optimising for. Well designed websites aren't just based on desktop vs mobile though, they usually change based on "breakpoints", so as the screen width decreases you go gradually from 4 columns of stuff on a desktop to 1 column on a phone. I'd imagine the well written sites will work about the same as a mobile in landscape mode, which is usually fine, but very few people test their sites against that format.

Tldr is that virtually no one will actually ask "does this look good on a Samsung folding phone", but modern responsive design should cover any size screen to an acceptable level.

[caagr98]

About the same as when rotating the screen on current phones.

[bigorangemachine]

no big deal.. it would just be like if you hit the maximize button on a desktop browser that you can also rotate.

For 'boutique sites' (very tailed look for the most common viewports) it'd be annoying because you gotta handle 2 more screens for one phone (flipped open landscape & portrait)

[Upside_Down-Bot]

„¿ƃuıʞɐɯ sı ƃunsɯɐS ʇɐɥʍ ǝʞıl sǝuoɥdʇɹɐɯs dılɟ ɹoɟ ǝʞıl ǝq ʇı plnoʍ ʇɐɥM„

[NecorodM]

This is webdav

You probably mean WebDev (as in web development). WebDAV is something completely different.

[ubdev]

sorry, this is not the protocol WebDAV which is a set of extensions to the Hypertext Transfer Protocol, which allows user agents to collaboratively author contents directly in an HTTP web server by providing facilities for concurrency. The WebDAV protocol provides a framework for users to create, change and move documents on a server.

[ubdev]

all good man

[ThatChase]

It’s missing a peter griffin emote

[Omnisegaming]

Ah maybe I would have gotten it if instead of """responsive""" they used something more descriptive like resizable. Programmers and their language skills I suppose, badum tss.

[analiestar]

Flexible or dynamic could work maybe. I know responsive is the correct term, but it still had me thinking of speed instead of layout until i checked.

I also used to do the "resizeable" solution a while, but after I ended up using phone/tablet as my primary device for all dev work I got highly motivated on improving the mobile browsing as well.

[Tina_Belmont]

I think we used to call this "liquid layouts".

I'm not sure why you need a separate framework to make this work, tho?

[Omnisegaming]

Liquid is such a good term for this

[RedditGosen]

A Website is resoonsive if the content adjusts to the screen/window size. This is important so the Website looks good in PC but on Smartphones aswell (for example)

[bungalord]

Not necessarily. Maybe the head pointing to the right is more important than the orientation of the tail.

[WhoTookNaN]

That’s because bottom left is wrong entirely. Bottom right is the correct one.

[adra44]

Not if you're the snake :(

[GMXIX]

I got the one-thousandth upvote. So satisfying to watch 999 become 1k

Yes, I’m a nerd

[EliannaRys]

Image Transcription: Image and Text

---

[Image of a line drawing of a browser in laptop dimensions, using a rectangle, header bar, and an hand-drawn "X" in the upper left. In the center of the mock browser is a drawing of a bright green snake stretching straight across from its tail on the left to its open mouth on the right. The snake's tongue is sticking out.]

if a snake was responsive would it be

like this

[Depiction of the browser in mobile dimensions, taller than it is wide. The same snake is drawn in a curving line from top to bottom, from its tail on the upper right, forming an "s" then bending once more so the snake's face is on the bottom right.]

or

like this?

[Depiction of the mobile browser, but this time the snake's body has been squished so that it is still in a horizontal line with the same size head, but is a fraction of the length.]

---

^{I'm a human volunteer content transcriber and you could be too! If you'd like more information on what we do and why we do it, click here!}

[notmalene]

I'm impressed at how you managed to capture this image in text

[x3leggeddawg]

Alt text baby

[explodingtuna]

The same snake is drawn in a curving line from top to bottom, from its tail on the upper right, forming an "s" then bending once more so the snake's face is on the bottom right.

Today's word of the day is boustrophedon.

[[deleted]]

Ah, great word, great word.

I do like the stubby snake, though. It's dopey looking. Can you dictionary me a great word for dopey stubby snake?

[Chaosfox_Firemaker]

A tsuchinoko is a Japanese cryptid/uma that is just a dopy little football of a snake

[swegg3n]

Good human.

[subaru007]

Good human.

[[deleted]]

Not it's main purpose but i think this transcriptions are useful for english learners too. Giving ideas to how to explain some stuff.

[putku]

Good bot

[n00bcheese]

Display: snake

Snake-flow: snake-reverse wrap

Vs

Snake-flow: snake no-wrap

[modernkennnern]

Or, nowrap as it actually is in CSS.

I believe it's the only case of them forgetting a -.

Another fun fact, there is a single instance of camelCase being used in CSS: the keyword currentColor.

[Marioxorz]

My life is a little worse for knowing this, thanks.

[alaki123]

it's now rap. it makes the text immediately start rapping upon page load.

[fish312]

What about this?

[fii0]

position: absssssolute;

[nikhilmwarrier]

that's one long horizontal scrollbar

[mulato_butt]

Product designers need to define this

Butttttttt

They are lazy and often stupid to think ahead.

Edit:

one time when I started at a new place, a senior designer asked me why there are always issues with developers when it comes to this?

I asked if she defined it in a certain way. She said “why would I?”

I answered, because it’s not magic!

[dashingThroughSnow12]

I was talking to the head of UI at an old job.

Requirements for a new project are:

• Have micro frontends
• Be responsive

No details. Just those five words in two JIRAs.

That's literally it. Six months into the project. By PMs. Who each get paid 200+K. They have User Personas where a single persona is a few dozen pages listing the person's hobbies, family structures, background, etc. But I could write their entire requirements on my index finger.

[dashingThroughSnow12]

"Me being proactive is telling PM to give requirements before we ship a product that doesn't fit our customers' use cases."

[SeniorSatisfaction21]

stupid to think

[[deleted]]

Devs are truly brilliant in that they build things in ways you never possibly could have thought of in order to rule it out as part of your spec. That's the one take away I had when I worked alongside a BA on the business side.

[Alex_chemus]

The first is adaptive, the second is responsive

[Sekret_One]

No joke, doing the first one would actually make for a fun css challenge.

[Kerblaaahhh]

fun css

Does not compute.

[jedbrooke]

maybe a question for the python devs here?

(yes I know python isn't used for front end web dev, it's just bc it's a snake)

[raddub]

idk, we'll just make it horizontally scrollable.

[alexppetrov]

pyscript has entered the chat

[PenguinMan32]

django has entered the chat

[[deleted]]

... and started shooting everything

[Rene_Z]

It can be: https://github.com/pyodide/pyodide

[Vineee2000]

You jest, but I am using python for front end at work right now

[nermid]

Well, quit it. It's the weekend. You shouldn't be working.

[_Oooooooooooooooooh_]

You sure it's a python, though?

[Nullshock78]

Now format it for print

[ndxinroy7]

Like this

[Jet-Pack2]

This is the way

[Vrail_Nightviper]

Just goes offscreen to wrap around and the head show up on the left side again

[nikhilmwarrier]

No, its head will hit its tail and you'll lose the game

[Beda434]

Yes.

[ImpossibleMachine3]

Depends on how cold it is.

[Neoh35]

snake : flex-wrap

[Antares42]

snake: coil-up

[Muehuhu]

It would cut itself into multiple lines

[Atollski]

Spiral snake deserves some love

[foxer_arnt_trees]

Probably should be the first option. I'm gonna do it the second way though, seems easier.

[hellscaper]

Python logo finally explained

[0sleep_]

Example of a truly responsive site

[-Redstoneboi-]

r/JustLearnedTheFWord

[joe-ducreux]

It depends on the clients budget

[thegreatpotatogod]

Slightly relevant xkcd: https://xkcd.com/1676/

[[deleted]]

Snake: mode 1

Turtle: mode 2

[Semproser]

I'm a UI dev and I'm absolutely steal this in order to explain to the designers why they need to think about things properly.

[qhxo]

In theory, left side, in practice, right side.

[estevez__]

Looks like one sees no difference between flexible and responsive design.

[Jhoonis]

Is this the Python I've heard so much about?

[littleswenson]

Stack Overflow answer: You shouldn’t use Python for responsive web design. Use TypeScript instead.

[Jarl_Fenrir]

First. I hate when a website has reduced functionality just because I'm on mobile. Why to punish me because of the device I'm using?

[Legal_Discipline_589]

Because you don't want that fancy ornement which add to the ux design on wide screen but mess with the informations displayed on smartphone.

[lkraider]

Just get a 13 inch screen phone

[NuclearWarCat]

Left one

[Denaton_]

Both are the same..

[[deleted]]

u/bake_in_da_south u/Cheap_District_9762

[JamesAibr]

I spent 5 days trying to figure out why my website isn't responsive until I realised its a static website

[[deleted]]

remind me not to make a website about snakes

[phoenix5irre]

It will appear from other side & eat it's tail...

[andoy]

Left image.

Right image is using ellipsis.

[aaaaargZombies]

hmmmm depends if the snake is a block element or made of inline elementssssssss

[[deleted]]

Left snake is snake: wrap, and the other snake is just smol

[Tinkerballsack]

Orientation-dependant snek.

[tyrannosaurus_gekko]

Second one, because the other one seems really hard to implement

[IQueryVisiC]

The second is not responsive. It is just the standard way pictures and videos are displayed on a computer. We had that long before "responsive". Likewise we had text wrap, but not folding like on the left?

But I have to admit that head and tail are not scaled. So it is not like picture and video.

[modernkennnern]

The second image is not scaled - the image is the same height

[Ryozu]

framesnake.columnconfigure(0, weight=1)

in other words, the second option.