/hobby/ - Hobbies

Entertainment, Education, Games, etc.

catalog
Mode: Reply
Name
E-mail
Subject
Message

Max message length: 8192

Files

Max file size: 20.00 MB

Max files: 3

Password

(used to delete files and postings)

Misc

Remember to follow the rules


Comrade 10/14/2019 (Mon) 19:56:15 No. 959
hey guys I've been working on a website, here's what I got so far
written in symfony
https://tiblar.com
>>906
looks good so far, is this a twitter clone? using anything else besides symphony? like bootstrap?
But does it federate?
what's the point other than resume stuff?
i dream of a world where dark mode is the default
>links don't work without javascript
Wow, a site just like one of the big professional ones
>>911
Dark modes are actually worse for your eyes.
>>910
I don't think a site with nazi anime pictures would look good on any resume.
>>912
every website after 2010 requires javascript you chode, you can't even use the major css libraries (ex: bootstrap) without at least jquery. Are you saying any leftist site or even good site fore discussion has to use literally no javascript on the front end?
>>912
shit in my mouth
>>916
Torum.

/thread
>>916
>Every website after 2010 requires javascript you chode, you can't even use the major css libraries (ex: bootstrap) without at least jquery.
This isn't true in the least, I always have javascript disabled and the vast majority of sites work perfectly fine, only faster. Writing quality CSS without javascript isn't hard.

>Are you saying any leftist site or even good site fore discussion has to use literally no javascript on the front end?
I'm not that anon, but ideally websites javascript would only be used to provide (non-audio/video, non-animation, non-scaling) dynamic content, such as automatic refreshing on this site, or delivery of part of a map for openstreetmap. Ideally it would fail gracefully as well so that the site could still function to a lesser extent without javascript.

I don't see anything on your site that shouldn't be able to fail gracefully, and most of it does. In your case if you're not doing asynchronous stuff (which you probably are) your site wouldn't need any javascript at all.

>>914
>Dark modes are actually worse for your eyes.
The only time it's not worse is when your in a dark room and your screen doesn't get dark enough, we've more or less proven that in every other situation it's worse for your eyes.
>>919
I didn't really analyze the actual site. I'm very critical of the like/subscribe model. Even more so of modes of communication which prioritize media over words. I doubt I'll be able to convince you of this unlike the javascript information, but it seems to me the like/subscribe model encourages the creation of a echo chamber of the users which eventually degrades into a reflection of the least common denominator as the site gets large, and encourages dopamine addiction of these users. The prioritization of media over words tends to relegate conversation to the background and discourages critical thinking. Maybe this is inline with your objectives but to me communication is a tool to critique and refine my ideas and actions, which I don't think this platform would be well suited to.
>>920
One last thing, I noticed that your approach is heavy on emphasizing the user that posted some content through profile pages, avatars, and usernames. I think this also discourages critical thinking because it shifts the discussion away from ideas to people. You're no longer making critical judgements about ideas and their implications but rather of individuals and their actions. Once again this does not serve my interests but perhaps it serves yours.
>>916
>you can't even use the major css libraries (ex: bootstrap) without at least jquery
use Bulma or something
>>918
*searching Wikipedia for Torum*
>an Afro-Asiatic language spoken in central Chad
😍Chad Central😍
>>922
looks good ill check it out
>>919
>Writing quality CSS without javascript isn't hard
hand written CSS is going to have alot of browser compatibility problems on nonstandard browsers (safari, etc.). thats why css frameworks like bootstrap were invented, so you could write the site once and not worry about covering a ton of edge conditions for every single browser on earth, no to mention different resolutions (responsive).
>>938
>Hand written CSS is going to have alot of browser compatibility problems on nonstandard browsers (safari, etc.).
It's pretty easy to have browser compatibility, you have to use a subset of the CSS3 standard without browser specific extensions, but you get the vast majority of it so long as you're okay abandoning ancient browsers which are in total less than 2% of the market. Just checkout https://caniuse.com while writing your stylesheets. It honestly is immensely simple without those 2%.

>Thats why css frameworks like bootstrap were invented.
They don't support many of these ancient browsers honestly:
https://github.com/twbs/bootstrap/blob/v4.3.1/.browserslistrc These numbers could easily be had by programming in a subset of CSS3. CSS was standardized for a reason. Also by the way a additional 1% of users have Javascript disabled so if you are actually concerned about that last 1% - 2% that's a group you should be concerned with. Also Google's webcrawlers don't use javascript, so if you want good STO you better support users without javascript.

>Not to mention different resolutions (responsive).
Responsive design is a cake walk these days, just use flexbox and/or grid; you don't even have to use media queries anymore.

Anyway this is all besides the point, despite writing CSS being exceptionally easy, if you want to use a framework as a labor saving mechanism, all be it potentially at the expense of the efficiency of your end product there are CSS only frameworks: https://milligram.io/ https://bulma.io/ https://purecss.io/ http://getskeleton.com/ etc.
:s/programming/writing
>>939
can you redpill me on flexbox/grid, i haven't written frontend code since 2010ish and the whole SPA/JS + responsive mobile thing passed me by, im using to writing front end using jquery, etc. I know certain libraries like pure.css for example have grids, but does CSS have built in responsive grids now or something???
>>947
>can you redpill me on flexbox/grid, does CSS have built in responsive grids now or something???
It sure does and they can do some pretty neat stuff too! You have to be a little careful where you step because they are getting close to the point where you might want to question using them for compatibility reasons with only ~93% market share: https://caniuse.com/css-grid unlike flexbox with >98% market share: https://caniuse.com/flexbox but they make life so much better.

So following are a few examples, I was pretty dissatisfied with all the flexbox hamburger menu's, I might try to make a improved one for you tomorrow. Here are some decent examples of a simple responsive layout in pure CSS, responsive images sizes (for performance) in standard HTML, a simple responsive menu in pure CSS with a relatively simple media query, and a hamburger menu using a small amount of unnecessary javascript and a more complex media query. After that is some really solid documentation of flexbox and grid.

Neat features:
https://css-tricks.com/look-ma-no-media-queries-responsive-layouts-using-css-grid/
https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/
https://medialoot.com/blog/how-to-create-a-responsive-navigation-menu-using-only-css/
https://itnext.io/how-to-build-a-responsive-navbar-using-flexbox-and-javascript-eb0af24f19bf

Detailed guides:
https://css-tricks.com/snippets/css/complete-guide-grid/
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
>>948
I guess I didn't say why you should use these things. The first reason might be that you know it will always be relevant for employment, where as you don't really know for sure that any given framework or library will always be deemed desirable in the future. You also always know that your layout is fairly optimal in terms of bytes meaning you decrease load times and improve SEO, because you're just writing at the lowest possible abstraction level. There isn't much of a cost of writing at this lowest possible abstraction level, meaning the gains are of little cost, in some ways you are even reducing complexity. Lastly, you know the API won't change under you, because the CSS standard isn't going to drop backwards compatibility.
>>949
back in the early 2010s and before there was alot of problems with cross browser compatibility, where chrome would implement one thing and mozilla wouldnt, or vice versa. has that largely been resolved?
>>951
>back in the early 2010s and before there was alot of problems with cross browser compatibility, where chrome would implement one thing and mozilla wouldnt, or vice versa. has that largely been resolved?
Its pretty much resolved, yes. The W3C was captured by Chrome with Mozilla as controlled opposition, so they just make the standard together. IE (not Edge) and Opera Mini along with some esoteric browsers are pretty much the only things that really get in the way ever. Often you even up to IE8 supports many of these CSS3 features. Everything supports CSS2. You get a rare straggler like @media queries for pointers and hover which were only added in firefox 64 (and so aren't in firefox-esr) but those are pretty rare.

Just check caniuse.com before using any clever functionality and you should be completely fine.
>>948
This is 90% of a correct HTML/CSS menu, for devices with touch screens you have a burger icon which when clicked opens a menu from the left. On desktop it gives a pretty standard imageboard menu. The imageboard layout wraps when very small, and the mobile view scales columns and spacing to fit the screen, although it's broken in that menu takes up far more horizontal space than it needs. I'm certain that's fixable but I need to do some other things so I haven't the time to fix it currently.

index.html

[orange]!DOCTYPE html>
[orange]html lang="en">
[orange]head>
[orange]meta charset="utf-8">
[orange]title>debagga-kun[orange]/title>
[orange]link rel="stylesheet" href="style.css" hreflang="en" charset="utf-8">
[orange]/head>
[orange]body>
[orange]header>
[orange]a href="#start" id="skip-link">skip to content[orange]/a>
[orange]nav>
[orange]input type="checkbox" id="menu" autocomplete="off" checked>
[orange]ul>
[orange]span>[[orange]/span>
[orange]li>[orange]a href="home.html">home[orange]/a>[orange]/li>
[orange]span>/[orange]/span>
[orange]li>[orange]a href="rules.html">rules[orange]/a>[orange]/li>
[orange]span>/[orange]/span>
[orange]li>[orange]a href="boards.html">boards[orange]/a>[orange]/li>
[orange]span>][orange]/span>
[orange]span>[[orange]/span>
[orange]li>[orange]a href="mega.html">mega[orange]/a>[orange]/li>
[orange]span>/[orange]/span>
[orange]li>[orange]a href="pol.html">pol[orange]/a>[orange]/li>
[orange]span>/[orange]/span>
[orange]li>[orange]a href="g.html">g[orange]/a>[orange]/li>
[orange]span>/[orange]/span>
[orange]li>[orange]a href="g.html">b[orange]/a>[orange]/li>
[orange]span>/[orange]/span>
[orange]li>[orange]a href="v.html">v[orange]/a>[orange]/li>
[orange]span>/[orange]/span>
[orange]li>[orange]a href="a.html">a[orange]/a>[orange]/li>
[orange]span>][orange]/span>
[orange]span>[[orange]/span>
[orange]li>[orange]a href="irc.html">irc[orange]/a>[orange]/li>
[orange]span>/[orange]/span>
[orange]li>[orange]a href="a.html">git[orange]/a>[orange]/li>
[orange]span>][orange]/span>
[orange]/ul>
[orange]label for="menu">≡[orange]/label>
[orange]/nav>
[orange]/header>
[orange]main>
[orange]section id="start">
[orange]/section>
[orange]/main>
[orange]/body>
[orange]/html>


style.css

#skip-link {
position: absolute;
left: -9999px
}

* {
margin: 0;
padding: 0
}

nav {
display: flex;
flex-direction: row;
}

nav ul {
flex: 1;
height: 100vh;
display: flex;
flex-flow: column wrap;
align-content: flex-start;
list-style: none;
background-color: #D6DAF0;
}

nav li {flex: 1}

nav label {
font-size: 4em;
margin: .35em;
}

nav a, nav label {color: #34345C}

nav a {
display: block;
padding: 1em;
font-size: 16pt;
text-decoration: none
}

/* Can screen readers click labels? */
input#menu {display: none}

input#menu:checked ~ ul {
position: absolute;
left: -9999px
}

input#menu:not(:checked) ~ ul {
position: relative;
left: 0px
}

nav span {display: none}

/* not widely supported, but whatever. */
@media (any-pointer: fine) {
nav ul {
height: initial;
width: 100vw;
flex-direction: row;
justify-content: center;
border-bottom: 1px solid #B7C5D9
}

nav span {
font-size: 8pt;
display: initial;
margin: 0 0.5em;
color: #8899AA
}

input#menu:checked ~ ul {
position: initial;
left: 0px
}

nav li {flex: initial}

nav a {
font-size: 8pt;
padding: 0px
}

nav label {display: none}
}
>>953
christ, that's a lot of <, image of the mobile view untoggled.
>>954
lol it converts backwards too, what if it's in quotes: "<". Oh and here's the menu toggled.
>>948
>css-tricks.com
>text scrolls right off the web page on anything but super widescreen monitors with maxed browsers and can't be scrolled to the right to read the rest of it
This is comically embarrassing. Am I supposed to take advice from them seriously?
>>957
>This is comically embarrassing. Am I supposed to take advice from them seriously?
I actually dislike most of the layout they've got although in their defense scaling monospace text in a sane way isn't super easy. Most of the things posted there are by individuals not directly associated with the website if I understand correctly. Here's the standard documentation as a replacement for the documentation they provide if that's helpful:

https://www.w3.org/TR/css-flexbox-1/
https://www.w3.org/TR/css-grid-1/
https://www.w3.org/TR/html-srcset/

I don't know off hand of alternative quality sources on implementing grid based responsive websites, so I won't do that.
>>952
>You get a rare straggler like @media queries for pointers and hover which were only added in firefox 64 (and so aren't in firefox-esr) but those are pretty rare.
Amusingly the last firefox-esr to not support @media (any-pointer: fine) and similar media queries had its support dropped yesterday.
(18.31 KB 650x500 Red_Yotsuba.png)
I was bored, so instead of fixing the broken part of the CSS I posted yesterday I decided to write a Red Yotsuba theme. Maybe a little too breast cancer awareness, but I like it overall. What do you guy's think?

It's possible to make really clean CSS theme selector using custom properties and <select> tags, I might do that next and just have a dark, yotsuba, and red yotsuba theme.
>>964
>that subtitle
Can you explain that please?
Like, they'll be up on the gallows and once they get hanged they start trying to bid for the noose while they are gasping for air?
>>965
It's a Stalin quote, if I remember correctly he said this while the Soviet Union was buying massive amounts of foreign equipment to modernize manufacturing. GAZ is a good example of a factory made in this way.

In the case of a /tech/ or /g/ type board the implication is that we can use the technology that the bourgeoisie provide us as weapons against them.
>It's possible to make really clean CSS theme selector using custom properties and <select> tags, I might do that next and just have a dark, yotsuba, and red yotsuba theme.
I was kinda dead wrong about this, it seem barely even possible to have a theme selector of the sort I was thinking. I guess the way to solve this then would be to have slightly different URLs for each theme. Some sort of simple subdomain would likely be best. A bit disappointing though.

Delete
Report

no cookies?