a thoughtful web.
Good ideas and conversation. No ads, no tracking.   Login or Take a Tour!
comment by rezzeJ
rezzeJ  ·  2472 days ago  ·  link  ·    ·  parent  ·  post: Pubski: June 21, 2017

I've been continuing to learn my front-end web development stuff. My first website, the idea for which was indirectly courtesy of flac, is now well underway.

Here is a screenshot:

It's also fully responsive, though the specifics aren't quite nailed down yet:

https://streamable.com/e3y3z

Still, i'm pretty proud of how it's looking. Though I must say that the design of the site was done by my brother who is a professional UX Designer, so the layout looks infinitely than my initial version!

I don't know if it's just because I'm wrapped up in learning something knew, but I've played hardly any games for the last 2/3 weeks. I've just been learning and playing around with making websites. I just need to find a way to redirect some of this energy back into my music as that's been neglected as of late.

Though I do have one new track finished if you mighty fine hubski folk fancy a listen.





veen  ·  2472 days ago  ·  link  ·  

Nice! I've also been fiddling around with web development this week - I'm teaching myself how to visualize with d3:

I'm using Skeleton for a responsive UI and SQLite for my database. Making that all work with d3 scripts other people wrote is quite the headache though. What frameworks / thingabajings do you use?

rezzeJ  ·  2472 days ago  ·  link  ·  

That looks awesome. I'm looking forward to learning more JavaScript. I've only covered the basics so far, but it seems to be where a lot of exciting stuff happens in development world. What sort of data are you visualizing?

For this site I'm using the alpha of Bootstrap v4. The module of the course I'm doing is currently on Bootstrap, so it seemed a good excuse to cement some of that knowledge. Funnily enough, until about 5 days ago I didn't really know what a framework was. I coded the first version of the site entirely from scratch, so learning about the power of frameworks was a very welcome revelation. So much so that I didn't mind archiving all of the previous HTML/CSS and starting again.

Skeleton looks neat, I'll keep that one on my radar.

user-inactivated  ·  2472 days ago  ·  link  ·  

I never liked Bootstrap for one particular reason:

    'Cause once you have the theory of how the thing works

    Everybody wants the next thing to be just like the first

via

Sure, it lets you build a website in a jiffy if you know how to use it - but it takes away the personal touch and the expression of the designer in a way that tends to hurt the overall impression from the page. It's the IKEA of furniture. We have a better saying for it over here: "дёшево и сердито". Means it's cheap but does the job well enough not to complain.

I write the CSS by hand every time. Not the least factor in this is that it's my pleasure, but it also allows me to give each web creation its own flavour and spirit. No two pages are similar unless they have to be. Most of the time, for both JS and CSS, I end up learning something new or refreshing the old material; must I say how good that is?

rezzeJ  ·  2472 days ago  ·  link  ·  

    Sure, it lets you build a website in a jiffy if you know how to use it - but it takes away the personal touch and the expression of the designer in a way that tends to hurt the overall impression from the page.

I would posit that frameworks in general allow you to more quickly focus on those more personal and expressive design elements by cutting out a lot of foundation CSS that goes into a every project. For example, every project is going to need to be responsive and will more than likely be grid-based. Bootstrap has that all ready to go for you.

It's the same reason people use normalize.css rather than doing that all themselves: it's necessary, but unnecessary for you to do yourself if there's a template their for you to use.

If I start a new musical composition, I load my template. It has all of the thing that I use in every project I make: audio busses set up, favourite instruments loaded, effects plugins ready to go, session markers in place... Bypassing all of that each time I start a new track is not taking away the personal touch and expression of my composition. On the contrary, it gets me focused on it faster by having mundane but necessary processes already done.

Or take this exact web based tool I'm building. It will give the user quick access to information that would otherwise take considerably longer to work out by hand. But that working out isn't a creative or design based process, it's just necessary ground work. It's once you have that ground work done that you can use the results to do something personal. Is that not analogous to a framework?

Granted, Bootstrap goes a bit further than that and offers more design based components as well. But you can, and I have, customised those things with your own custom CSS. Furthermore, you can choose which parts of Bootstrap you want to use so it's not like it's all or nothing. You can even go and find a different, more light framework such as the one veen mentioned if it's found that Bootstrap seems to impose itself too much upon one's creative decisions.

Now I can't argue against your enjoyment of doing the HTML/CSS by hand each time. That's a personal thing and that's cool. But I'm looking to build websites in the way that professionals do. And I'm certain that every agency and web design house in the world will be using a framework for every project they do, whether it's Bootstrap, their own custom made one, or something else. I just don't see a reason not to use one unless you're specifically wishing to show off your front-end chops or practice concepts.

Also, one last point is that websites, especially one like mine that's meant as a tool, are required to have a standardised user experience. Users expect websites to functionally basically the same and that should be catered too as it allows the user experience to flow smoothly. An industry standard framework allows me to achieve that faster.

Though at the end of the day, I've only been doing this for ~3 weeks, so I'm still finding my footing. Perhaps the above sentiments are misguided. But If I want something where I value my own personal expression above all else, I will compose music.

user-inactivated  ·  2472 days ago  ·  link  ·  

    It's the same reason people use normalize.css rather than doing that all themselves: it's necessary, but unnecessary for you to do yourself if there's a template their for you to use.

My objection is not against frameworks or utility files like normalize.css.

The most "foundation" I have whenever I design a website is having a full-width header seldom. I can do that in a couple of minutes. Everything I design, web-wise, is unique in purpose and, subsequently, feel. It's one of the things that guide my outlook on these things. I never design for the public specifically; I only design what I see fit for the situation.

You want to design websites professionally, or for public use? You're probably better off using a popular framework as your foundation. HR will expect you to have experience with "common frameworks" like Bootstrap when they check your CV. I'm not saying getting proficient with one of those is bad or dispassionate.

My objection with Bootstrap et al. is that they're opinionated to a degree I find uncomfortable working with or, indeed, seeing around. Bootstrap, in particular, pushes a sterile, bland design doctrine with its default values, and most people using it won't bother or aren't capable of tweaking it to their preferences beyond changing color values, perhaps.

It's one of those things that allow extensive public access to a field that used to be dominated by professionals. Fifty years ago, photography used to be a hobby of someone passionate enough to spend a lot of time mastering it. Nowadays, even a three-year-old could take daddy's smartphone and start their artistic career on Instagram (even if by accident). Opinionated CSS frameworks allow people to engage their user with an at-least-somewhat-meaningful design, as opposed to having no design at all.

I think it's good that more people are getting involved in the process of web design. Most of them will never become professionals or even amateurs, but now they can at least try their hand at it with a guidance that would ensure they will most likely not suck. However, as an amateur designer, I find this kind of frameworks to be less of a help to another amateur designer and more of a hinderance.

It could be that I find it particularly difficult making sense of someone else's systems and code and would rather make my own. I'm scared into a corner by the massive amount of stuff I have to learn for any single decent framework, JS or CSS. I'd rather start from scratch and know why I'm getting the shit that I'm getting. This is a minor but important factor, as well.

rezzeJ  ·  2472 days ago  ·  link  ·  

    It's one of those things that allow extensive public access to a field that used to be dominated by professionals. Fifty years ago, photography used to be a hobby of someone passionate enough to spend a lot of time mastering it. Nowadays, even a three-year-old could take daddy's smartphone and start their artistic career on Instagram (even if by accident).

That's still the case. The skill floor lowering doesn't affect the skill ceiling. It just gives more people the chance to become potential masters. Sure, it comes with the downside of the medium being flooded with a lot more crap. But if even a couple of every 100 people who take up x hobby due to increased accessibility become fantastic practitioners of their craft, then that's a good thing,

Also, I think that it's important to make a distinction between web design and web development here. Though interdependent they're not the same thing. I think all your points are agreeable from web design standpoint. I get that a designer might not want to be thinking about how to layout a website with the restrictions of a specific framework already in their mind. But once they have finished their design and pass it on to a developer, how said developer reaches the final product is irrelevant to how one should regard the the quality of it. Whether specific frameworks and tools where used or it was all done from scratch.

I'm aware that in the modern aged it is normal to be multi-disciplined. But at the moment I am only learning development specifically. And from a development standpoint frameworks are awesome. Maybe that's where our initial different perspectives arose from.

    It could be that I find it particularly difficult making sense of someone else's systems and code and would rather make my own. I'm scared into a corner by the massive amount of stuff I have to learn for any single decent framework, JS or CSS.

I don't think that needs to be the case. The Bootstrap module on my course only contains 2 hours of video content. What's more, I haven't even finished it yet and I managed to build what you see in the OP.

user-inactivated  ·  2472 days ago  ·  link  ·  

    Also, I think that it's important to make a distinction between web design and web development here.

Not. The. Point.

Opinionated CSS frameworks. They promote bad taste. They promote bad design. Bland and tasteless.

That's my point.

You can build furniture from IKEA with just a manual and arms growing from upper rather than lower body. It's still bland. Even LEGO furniture has more character.

See what I'm getting at?

weewooweewoo  ·  2472 days ago  ·  link  ·  

I've spent the last 4 years of my life working in Webflow, as some sort of weird web design / artist / marketer. It's sort of a drag and drop thing. People like the websites I make, but I know that I'm not really a web designer, or a UX designer, or a professional in any sense, and it's really stressful on an existential level. I don't really know what I'm doing with my career.

And it's really lonely. I feel like I'm reading a book that half the people who know anything about it will laugh at me for, and the other half will know nothing about, and politely be amazed with the magic.

I'm kind of frozen with the amount of choices I have to go from here, can I PM you and ask for career advice?

steve  ·  2472 days ago  ·  link  ·  

    I don't really know what I'm doing with my career.

When you figure it out... take really good notes on how you figured it out and please share.

user-inactivated  ·  2472 days ago  ·  link  ·  

Webflow seems damn good for rapid prototyping - something rezzeJ and I started talking about at the beginning of this thread. I've been looking for something like this for a while.

As for career advice: I'll remind you that I'm just an amateur designer. I don't do comissions of any sort, though I might enjoy the opportunity when I get there. I design things in part because I believe I have [good taste](zenpencils.com/comic/90-ira-glass-advice-for-beginners/) for it, and it part because I've gotten what I consider pretty good with it for an amateur (no portfolio to link to yet, but that's about to change).

If you think I still can help you, feel free to PM me.

weewooweewoo  ·  2464 days ago  ·  link  ·  

I'm sorry to take a long time about getting back to you. I've had it in my head to redo my portfolio before messaging you (it needs to be updated for clients soon), but I've been overloaded in the last week.

I'm mostly just curious about the front-end development track. I am frozen by the amount of learning choices, and then you read shit like "the state of javascript in 20XX" and I get more confused about if I even want to learn how to code things.

On one hand, you're right in that the tool I use is good for prototyping, I hear that a lot- but wtf, everything I make is just prototype! That's terrifying as hell to me.

I guess this is difficult, because I don't really have any questions, other than, how did you pick up the frond end knowledge that you know?

rezzeJ  ·  2463 days ago  ·  link  ·  

In terms of actual learning tools to use, I can recommend TeamTreehouse's Front-end web development track.

It starts with the assumption that you're a complete novice on everything HTML, CSS, and JavaScript. So keep that in mind and maybe just do the individual modules you want if you have some prior knowledge in certain areas.

My only real criticism of is that sometimes they hammer home the point a little too hard. Like, they make something obvious, and then explain it even more. But there's controls to speed the video up if it starts dragging a bit. Generally I've found the teaching to be of excellent quality and the live coding environment that you run along side the videos works great. You also get quizzes and code tests throughout and at the end of the modules.

If it's any sort of metric to you, I built the website in my OP after only ~2-3 weeks of doing the track. And I had no prior knowledge.

user-inactivated  ·  2464 days ago  ·  link  ·  

I started with no knowledge of JS whatsoever - the code barely made sense to me - so I took some of the more formal lessons in it, like CodeAcademy's course on JS, to start me off.

And then... basically, I wanted to make games, so I had an idea in mind and went from there: "how do I do that?". I looked through the MDN on details of what certain types can do (did you know that at certain point, you could observe changes in an object natively? they scrapped that, for some reason, but there was what you now do with auxiliary libraries) and tried my hand in crappy first designs.

Most of the projects never saw daylight because I was frankly ashamed of the results: it wasn't pretty or effective and sometimes, it didn't even do what I wanted it to. I look at some of them now and think: "Dear Heaven, did I actually write that?". However, it was those projects that made me observe and learn, and because of them I'm now a better programmer.

There were also these cool things that I wanted to do, and they mandated usage of something different from the usual JS experience. Enter the frameworks. The first one I used was AngularJS. ngJS was complicated to design as backbone for a small project and took a lot of figuring out for the JS part; HTML templating, however, was fairly simple. I have also used others briefly, perhaps just to try them out.

The most used library for me remains jQuery, simply because it makes DOM manipulation so much simpler and easier to read - and even that, I tend to exclude where it isn't mandated. I cut away everything I don't need in a project because size (and, therefore, load time) is a major concern of mine: I want to design things that are comfortable to use, and the 20+ kB of minified jQuery I'd rather replace with JS' native methods if I only need two lines of DOM change/observation.

At some point it turned that I've been following some of the stardard guides (there are several, oddly enough) inherently, because it seemed like good taste to me. I'd recommend you code the way that seems natural to you for a while, then read a few of them; take the good stuff in and leave the rest. That way, you make sure what you write makes sense to you but also follows certain common ground if you're ever to give command of your code away to another coder.

CSS came about for similar reasons: I wanted to try something - but mostly, because I can't stand a bland design. I even design my MS Word documents before any significant amount of work, whether they're to be released to public or used for personal goals. As you can see from our discussion with rezzeJ, I design every project by hand these days. I've tried Bootstrap and some others and just got confused; personally, I'd rather know what's been put into the palette because I was the one to build it. This may or may not apply to you; I'm telling you that to say that it's alright to write your own stylesheet.

Basically... do your own stuff and see what sticks. Don't be ashamed by not being able to do something: what I've done with my web dev skills in a couple of years is amazing to me, even if it's not up to the corporate standard. As with everything, strive to learn: search, ask or, if need be, develop your own. I made a timer library for a few games of mine just because I didn't see anything good on the market - and it was also a good exercise. You'll get there, just like I got where I am now. I'm actually learning PHP now, which feels exactly the same as JS did back in the day: mysterious and vague. I'm sure I'll make sense of it with rigorous enough study.

Feel free to ask any questions you might have. Also, feel free to message me if you want some designing done for your projects: I enjoy doing it, and for you, I'll do it free of charge. By the time you message me with something like that, I'll probably have a portfolio lying around.

rezzeJ  ·  2472 days ago  ·  link  ·  

    See what I'm getting at?

I think I am finally there, yes.

You are saying that front-end frameworks intrinsically inhibit creativity and the judgement of what is good design. Much like one might argue that music genres intrinsically inhibit creativity and judgement of what is good composition.

Before I continue, is this correct? I made the last analogy above because this is an area that I have though a lot about and actually wrote an essay on during my time at university. So I don't want to write a load, only to then find out I'm still not getting you.

user-inactivated  ·  2472 days ago  ·  link  ·  

    Much like one might argue that music genres intrinsically inhibit creativity and judgement of what is good composition.

After some consideration - and keep in mind my complete lack of knowledge in music theory - I'd say that, for comparison's sake:

frameworks, overall, are genres because they define some of the conventions for you (grid, [un]responsiveness, button shape etc.), and

opinionated frameworks are like using - more or less - the recipe for the typical song in the given genre (like the infamous four-chord songs).

rezzeJ  ·  2471 days ago  ·  link  ·  

Okay, to help gather my thoughts I consulted with my brother who has a degree in design and who has been a UX Designer for the best part of decade.

There's a couple of issues I have with your argument.

The first is that when I made the distinction between web design and web development you said that's not the point. But I think that is the point. It's right there in big writing on the Bootstrap homepage (emphasis mine):

    Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.

Front-end frameworks are not built as design tools for web or UX designers. They are built as development tools to help developers. If people's designs are becoming hamstrung by frameworks, then that's an issue with the people themselves, not the tool.

Now there's an argument that could be made that developers who otherwise have no idea about design take these tools and create functionally solid but generically designed products. There's certainly some truth in that. But it only serves to reiterate the point that it's about how the tool is used that matters. And as an aside, I'd much prefer to visit these stable but generic sites vs. stable sites that lack any semblance of design or consistency.

Another point that cements this is that for every indetikit website created that has their foundations in Bootstrap, there's plenty of amazingly designed ones too. Ones with creativity and imagination. If your point about these opinionated frameworks being analogous with someone instructing you to compose a song using only a specific chord progression is to be upheld, surely this wouldn't have been possible?

The second issue is that i'm unsure what you're constituting as an opinionated framework? Bootstrap is the primary name cropping up in this discussions. But like I stated before, you can heavily customise the implementation of Bootstrap to fit your specific purposes. Seriously, look at how many of the opinionated elements of it you can chose to completely remove. You could just have the grid if you wanted, with no CSS, pre-made components, or JavaScript at all. What's more, you can change the default values of that grid too. This seems to be the case with a lot of mainstream frameworks.

Again, we return to the central point that these frameworks do no intrinsically promote bad design and taste. Rather, it is bad and/or lazy designers that promote bad design and taste. No designer worth their salt is looking at Bootstrap's default guidelines as a reference when they're designing a site. Sure, there's chance there's subconscious influence. But part of being a good practitioner in any field is being aware of the invisible forces and constraints that are pulling at you, and in turn working with and around them to create the best final product.

user-inactivated  ·  2471 days ago  ·  link  ·  

First of all, let me say that I appreciate you holding up the discussion with the consistent respect to my arguments. I may have been too insistent on my being right in the past without doing much to prove it, which does not contribute to a discussion in any way. I've realized today that holding up a discussion with the point of advancing knowledge is all that really matters in communication.

    The first is that when I made the distinction between web design and web development you said that's not the point.

So, your argument is that because Bootstrap (as I keep emphasizing, though there are others) is a web development tool and not a web design tool, it doesn't deserve the criticism that I've expressed earlier.

After giving it some thought, I'd say that a) Bootstrap, indeed, doesn't deserve that kind of criticism, b) no CSS framework does unless it explicitly states to retain the best qualities and design practices available while not holding up that standard. Moreover, it was unfair of me to pick on a single specimen of a wide array of CSS frameworks simply because it's the most well-known - something I've blamed other people for on Hubski recently.

My blame of Bootstrap was motivated by the fact that I felt like it should somehow promote the idea that it's only a baseline for design while encouraging the user to move past it and into the territory of more elaborate, educated design - not simply learning more CSS, but also color theory, the holy grail design and other such things. It's not a fair premise, however: though it is not a bad practice to encourage others to learn and educate themselves for a better result, it's not a responsibility for those who promote design/development frameworks (and Bootstrap is a design framework, but only in part) available and aimed for the mass usage. Would have been cool if it were, but it isn't and it doesn't have to be. It doesn't kill you to have bad design, unlike, say, smoking cigarettes and drinking alcohol.

I don't think Bootstrap is "heavily" customizable. I think it's versatile by its nature and that one could use their creativity to produce amazing and unorthodox results (I was going to prove my assessment with screenshots from the web, but Google has malfunctioned on me right as I tried to find some). In this respect, it's similar to LEGO: both are massive toolkits that could be flexible enough to produce a wide array of good results. That being said...

    The second issue is that i'm unsure what you're constituting as an opinionated framework? <...> You could just have the grid if you wanted, with no CSS, pre-made components, or JavaScript at all.

Have you actually tried to download only the Grid component? I have. It includes normalize.css by default, with no option to opt out. That's "opinionated". Just how opinionated? Of the ~1000 lines of the main development .CSS file, something like 250 are normalize.css alone. To add insult to injury, it contains default classes I didn't ask for (like .img-rounded and .hidden), which adds up to about 75 lines. A third of Grid-only development .CSS file is something I didn't ask for and had no choice to opt out of.

At least the theme .CSS is a separate file.

Long story short: I wasn't justified in beating Bootstrap's drum as far as design practices are concerned. You're right in saying that it's on the user, not the toolmaker. However, I don't appreciate its bundleware status. No framework should tell user "You must use this with our product". Recommend? Knock yourself out - but don't put it into the package anyway without asking whether I want or need it first.

rezzeJ  ·  2471 days ago  ·  link  ·  

Likewise, I appreciate the patience whilst I finally got around to talking about what you were actually trying to discuss.

I agree that it should ideally always be a person's aim to learn how and why the tools they're using work. That's the only way to become a true master of your medium. And if they don't, there's certainly cases where that tool will become a crutch rather than something used for its advantages. I can see that frameworks definitely have that risk attached to them.

I will admit that I didn't try downloading just the Bootstrap grid. I simply looked at the customise screen and made an assumption. So it's good that you checked it out yourself and called me out on it. It's a bit lame to receive a substantial amount of unexpected and unwanted CSS.

rjw  ·  2472 days ago  ·  link  ·  

That web app looks awesome. I really need to rediscover the actual joy of programming and developing software because doing it as a job makes it not fun (especially when this means office politics).

rezzeJ  ·  2472 days ago  ·  link  ·  

Thanks! I'm definitely loving the process of it all.

Do you think that the joy of it dissipates regardless of any position, colleagues, or employer one could potentially have? Or is it more to do with the specific position you happen to be in?

rjw  ·  2472 days ago  ·  link  ·  

I think it's more due to the specific position. Another result of me having my current job is that I've become interested in a bunch of computing things I didn't know/care about before, e.g. automating processes, creating systems that are a bit more distributed, maintainability.

flac  ·  2472 days ago  ·  link  ·  

Ahh, sweet! The tools looking great, can't wait to use it!

Also, the new track is sounding rad! Reminds me a lot of Mouse on the Keys but actually somewhat dance-able. Looking forward to hearing more.

rezzeJ  ·  2472 days ago  ·  link  ·  

My influences are showing! I'm a massive a Mouse on the Keys fan and can't deny that I've consciously tried to impart some of the quality of their music on to my own.