Textpattern CMS support forum

You are not logged in. Register | Login | Help

#1 2019-06-17 09:47:10

gaekwad
Admin
From: People's Republic of Cornwall
Registered: 2005-11-19
Posts: 2,482

Building websites in <this year>

I have never been especially good at designing websites. My core interests are not design and presentation. I wish to make websites that I am proud of.

To be able to translate visual ideas I like into the code that sites use, I would like to better understand current tools and methodologies for constructing and maintaining sustainable code for making websites. I know servers, I know HTML, I know CSS. I don’t do HTML or CSS particularly efficiently time-wise, but I do like to make sure it’s wicked-fast in a browser.

I’m sort of situated in this not-quite-frontend, not-quite-web-ops hinterland. Please understand that I’m fairly comfortable with where I am, but I do like a good deep dive now and again.

I would very much appreciate any bullets, links and war stories for tools / things to investigate and perhaps modernise my 20-year hobby of website building a bit. I’m working with the principle that when I know how to make best use of the code soup, I can look at the visuals, UX and other such things more closely.

If it matters: I use macOS as a daily driver, and I have numerous Linux-based servers dotted around the office and beyond for hosting, tools, and the like.

Thank you in advance for any pointers and advice.

Offline

#2 2019-06-17 12:44:36

kuopassa
Plugin Author
From: Porvoo, Finland
Registered: 2008-12-03
Posts: 191
Website

Re: Building websites in <this year>

I’ll contribute one bullet point:

Offline

#3 2019-06-17 12:47:25

gaekwad
Admin
From: People's Republic of Cornwall
Registered: 2005-11-19
Posts: 2,482

Re: Building websites in <this year>

kuopassa wrote #318501:

I’ll contribute one bullet point:

Thank you. I use Tachyons for my layout control at the moment, there’s something almost perversely minimal about their class names that make me want to learn them by heart.

Edit: I should also say I used to use Foundation until it went dormant for a while, then I looked elsewhere.

Last edited by gaekwad (2019-06-17 12:49:02)

Offline

#4 2019-06-17 14:01:12

jakob
Admin
From: Germany
Registered: 2005-01-20
Posts: 3,435
Website

Re: Building websites in <this year>

I reckon you already know your stuff pretty well. Frameworks are great for a quick start but in practice I rarely ever use them. I’m very wary of those that have very declarative class names where you effectively style looks with class names.

I’ve found that BEM Block-Element-Modifier class names in combination with SASS or a pre-processor can help a great deal in modularising the code of your site without being too prescriptive.

I particularly like Harry Roberts’ ITCSS approach to BEM and he’s a performance optimiser so may be right up your street.

inuitcss provides a breakdown and structure that does not specify appearance, just the pattern and its behaviour at different widths. You then add your own component class names with your own styling to these. I find it works well with Textpattern, because it fits well with the form setup, allows you to style the components individually without having to worry about the CSS cascade (because they are all low-specificity), and to make precise changes later (e.g. you may drop your float-based grid and replace it later with CSS flex or grid, and if you’ve got your system well-designed you only need swap out a file). All the same, it takes some practice and I still err back and forth between what’s best made an object, a component or a layout element. I’m also still somewhat disappointed with the size of the css files it produces…

Phil has a good build workflow setup for sass->css that you probably already know from the textpattern sites, but when I’m in a hurry, I tend to just use codekit on the mac.


TXP Builders – finely-crafted code, design and txp

Offline

#5 2019-06-17 14:05:01

gaekwad
Admin
From: People's Republic of Cornwall
Registered: 2005-11-19
Posts: 2,482

Re: Building websites in <this year>

Fantastic – thank you, jakob!

Offline

#6 2019-06-17 14:36:56

jakob
Admin
From: Germany
Registered: 2005-01-20
Posts: 3,435
Website

Re: Building websites in <this year>

Another thing I have tried, but have the nagging feeling “could be better” is ways of finding a good balance between including only the js you need and not breaking js down into too many small pieces.

I began with setting textpattern variables with my forms, e.g. I would set a txp variable in the slider form to say it existed on the page. Then at the bottom of the page, I would call the javascript files needed depending on the variables set. I started having to introduce other variables for the dependencies too, to avoid things like jQuery being called twice, so had the danger of getting cumbersome. Still, it was better than “load-everything-whether-you-need-it-or-not” method of WP.

Later I switched to RequireJS as a small-sized module loader. You can use it to respond to the existence of classes in your code and load the corresponding javascript file and any js-code you need on top of that, i.e. if there’s no slider, the slider js doesn’t get loaded. You also specify any dependencies a javascript ‘module’ has and it will intelligently handle their loading, avoiding duplication.

But apparently this is already “last year’s” way of doing things …


TXP Builders – finely-crafted code, design and txp

Offline

#7 2019-06-17 14:38:46

Algaris
Member
From: England
Registered: 2006-01-27
Posts: 441

Re: Building websites in <this year>

Here are a few things I use in my daily work.

Currently all of my work involves using SASS/SCSS. I Love SCSS as it allows me to use variables and includes in my CSS. I also love how I can modify my CSS on the fly using functions.

I use Codekit to compile all of my resources and scripts into a build folder ready for uploading.

I’ve recently been researching colours and have settled on HSLA (hue, saturation, lightness, alpha) for my current and future projects. I love that I can change a colour by just modifying its saturation or lightness rather than trying to figure out the new hexadecimal or RGBA numbers.

I use this handy HSLA colour picker to covert hexadecimal and RGBA into HSLA

All of my current projects use Bootstrap. Personally I’d rather use something less heavy as I find I’m often fighting to override it’s styles, but the VLEs and websites my organisation use were all built with Bootstrap in mind.

I’ve recently stumbled across the Tailwind framework and would love to dig in deeper with it but a lack of time has prevented me from doing so.

Offline

#8 2019-06-17 14:51:52

jakob
Admin
From: Germany
Registered: 2005-01-20
Posts: 3,435
Website

Re: Building websites in <this year>

Just recently, this popped up on my radar and made me realise (once again) that there’s still much to learn:

  • Refactoring (the way we talk about) CSS – a slideset by Rachel Andrews (another true expert in her field) but you can follow it quite well because the slides are broken down into individual steps.
    I’ve still to get my head to switch from physical dimensions – i.e. width/height and top-left-bottom-right – to logical and flow-related dimensions – e.g. inline-size, block-size, block-start, block-end, inline, inline-end. It all makes sense but it’s a bit more abstract and hard to ditch what you already know…

TXP Builders – finely-crafted code, design and txp

Offline

#9 2019-06-17 15:09:53

Algaris
Member
From: England
Registered: 2006-01-27
Posts: 441

Re: Building websites in <this year>

jakob wrote #318511:

Refactoring (the way we talk about) CSS – a slideset by Rachel Andrews

Wow. Thank you so much for posting this Jakob. It’s making for fascinating reading. The slides about using inline-size and block-size was an eye opener for me.

Last edited by Algaris (2019-06-17 15:10:44)

Offline

Board footer

Powered by FluxBB