Building websites in <this year>

gaekwad · 2019-06-17 09:47:10

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.

kuopassa · 2019-06-17 12:44:36

I’ll contribute one bullet point:

CSS frameworks

gaekwad · 2019-06-17 12:47:25

kuopassa wrote #318501:

I’ll contribute one bullet point:

CSS frameworks

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)

jakob · 2019-06-17 14:01:12

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.

cssguidelin.es
ITCSS
Short Skillshare video
inuitcss (ready-made css implementation thereof)
BEM and here

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.

gaekwad · 2019-06-17 14:05:01

Fantastic – thank you, jakob!

jakob · 2019-06-17 14:36:56

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 …

Algaris · 2019-06-17 14:38:46

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

SASS

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.

Codekit

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

HSLA

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.

HSLA colour picker

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

Bootstrap

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.

Tailwind CSS

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.

jakob · 2019-06-17 14:51:52

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…

Algaris · 2019-06-17 15:09:53

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)

gaekwad · 2021-02-23 12:55:29

Bumping a very old thread because a) I started it and a lot of it is sadly still relevant; b) Rachel Andrew has been name dropped; and c) I have a coupon thingy.

I am taking advice from various places, and learning how to make websites again…without using prefab frameworks. I knew how to make sites 20+ years ago, but technology changes, and I changed and…well, here I am. Asking for help is the first step, I suppose!

I live with Jen Dixon, she’s an artist and Skillshare educator (her courses are here if you’re curious…I make a cameo in one course, bonus points awarded to you if you spot me). She had a deal / link thingy come through from them today which gets 40% off Skillshare for new and lapsed members. The only caveat I can see is that there is no free trial period with this link, rather than the usual trial period.

In the interests of this being something more than a low-effort spam post (ugh), this is the first course I’m taking:

CSS Essentials: Getting Started with CSS Grid by Rachel Andrew.

There are more web dev courses there, but since the platform is geared more toward creatives than nerds you should do your homework to see if there’s enough value in it before you plonk your money down.

This link gets you 40% off the current pricing, which in my case made Skillshare $59.40 for a year:

skl.sh/3uo2xHx (40% off, no free trial)

…whereas this link gets you a 14-day free trial:

skl.sh/2barCxA (no money off, 14-day trial)

(Important disclosure: there’s a $30 referral payment for Jen if the first link is used and you sign up. This $30 will help pay our rent. Not very exciting, I know, but I like a roof over my head. There’s a $10 referral payment for me if the second link is used and you sign up. This $10 will go towards Textpattern demo site stuff when the rent is paid.)

Last edited by gaekwad (2021-02-23 13:05:03)

John-Paul F · 2021-03-16 11:29:19

Hello Pete (and others).

I enjoyed this thread, and hesitate to comment – but that hesitation is probably telling, and itself worth mentioning.

I’ve had a Textpattern-based website for 21 years (ish, maybe 20). I love the simplicity of it, the ease of use (I’m a writer). I’ve had a lot of help making it work, and been taught a lot.

But my knowledge of things like CSS is virtually nil, and I wish it was better. I wish I knew how to create a simple design, so that instead of making a website for a friend using Wordpress I could do it with Textpattern.

I just have no idea about how to create (as opposed to tinker with) the visual side of Textpattern.

I look at this forum and I find myself daunted by what seems like highly specialised discourse. That’s not a complaint – that’s how it should be – but I do wonder if there might be some way to make Textpattern more accessible to people who have even less of a clue than me?

If this sounds grumbly, sorry. I’m incredibly grateful for Textpattern, this forum, and certain individuals in it (you know who you are).

Bloke · 2021-03-16 12:30:08

John-Paul F wrote #329286:

I wish I knew how to create a simple design, so that instead of making a website for a friend using Wordpress I could do it with Textpattern.

If you ever want to take the tentative steps with HTML sprinkled with our tag language, and then making it pretty with CSS, please do consider checking out some online resources and then by all means post specific questions here. We’ll help you get oriented.

I don’t know your level of expertise, so apologies if what I post below comes across as too simplistic, but the key thing is that, once you have an inkling of how HTML is structured – what goes where and what the various tags represent – you can start to mess around. It’s just blocks of opening and closing tags that house content:

<!-- Start of page introduction section here -->
<section class="intro">
   <p>Welcome to John-Paul's fabulous new site. Hope you like it!</p>
</section>
<!-- End of page introduction section -->

A good exercise is to take a ready-made theme from somewhere like html5up and just paste the home page HTML into a new Textpattern installation. Stick the contents of the home page in your default Presentation>Page template. Paste the CSS over your default Presentation Stylesheet and then view the front page of your site. It’ll look pretty much like the theme you picked – give or take, as there might be missing images depending on which one you chose.

You can fix those by uploading the images from the theme bundle to your /images directory via FTP and then looking for anywhere in the template code that uses an <img> or <picture> tag and changing the src path to be /images/name-of-image.jpg.

Once you have that up and running, start to make changes to the template. One at a time and refresh the page each time to see the effect. Remove a block here. Some words there. I use the web inspector built into the browser to inspect an element. If you fancy changing a colour, use the inspector to change it, then visit the inspector’s Style Editor panel and copy the entire stylesheet into your Presentation>Styles over the top of your default sheet. Save and refresh: your colours will have changed.

Do the same with a few margins or padding values for various elements. Just mess about and see what happens, live as you tinker. If you make a hash of it, just refresh the page and it’ll revert to your last saved version. When you like a particular look, copy the style code out of the inspector and paste it into Textpattern’s default Stylesheet.

Once you’re happy with that at a basic level you can start to look at content. Maybe write an article called “introduction” in your Articles section. Then, in your template where you have a block of Lorem Ipsum, cut it out. Instead of hard-coding that info, replace it with the content of the article. Wherever you put a <txp:...> language tag is where the content from the database will be inserted instead, replacing the tag.

So using the example code above:

<section class="intro">
   <txp:article_custom id="2" />
</section>

If you wrote “Welcome to John-Paul’s fabulous new site. Hope you like it!” in that article (I’m assuming it has an ID of 2, since id 1 will be the default welcome article), when you view the page, Textpattern would replace the article tag with the content. The way it does that is by passing the various bits of content to the default Form, so you may see other pieces like the excerpt, the category the article it’s in, your author name, when it was posted, and so forth. But the key point is that it’s taken the dynamic content and put it on the page right where you told it to do so.

Mostly, when dealing with article content like that, you don’t want to be sprinkling ID values around so that’s only an example. But you’ll start to get the gist that the available tags can be used to grab various things from your database and put them on the page in place of the tag. Some will return entire lists of things, other tags will return a single item, depending on where you use them and what the URL is, but you can get to all that later.

Your tinkering approach is the way I learned. And I know many others here do/did the same. Once you see that correlation of what is in the template and how it shows up on the page, and how CSS starts to influence how it looks, you can take more steps and replace more content, then start to dive into the world of using tag attributes and Forms to customise stuff and make sites easier to maintain over time.

You do that by taking repeated elements and writing the tag structure just once in a Form, then using the power of the tag language to pass each piece of content in, say, a list of articles through your markup block. That way, the Forms act as kind of micro templates to render a bunch of things at once, saving you time when you want to update things: change the micro template markup once and it changes everywhere it’s used, allowing you to keep your site consistent with less administrative overhead than if you had the same markup repeated in many places.

I do wonder if there might be some way to make Textpattern more accessible to people who have even less of a clue than me?

This is an interesting point. Phil has made some great inroads into writing a customisable theme where you can change a few key parameters in a Form and it cascades into your design. Myself and Jools (jakob in the forum) have done likewise in a theme we put together. It’s not point-and-click or grab-a-slider to change a colour, but it’s the next best thing.

The trouble with exposing a slew of things in the interface like that means we get into the situation that WordPress has where you can only change what the theme designer wants you to change. If they omit a widget to alter the left-alignment of text and you really, really want to change that, you’re out of luck unless you clone the theme and do it in your own stylesheet. All we do in Textpattern is cut out the slider UI bit, so you have to use the stylesheet straight away. Thus you have total control over every aspect of the site from the outset.

Yes, if you don’t have that exposure to CSS or HTML, you might find it a steep learning curve. But if you’re ready to take that step, we can point you to resources depending on how much you wish to learn and then guide you through the steps to building a site by tweaking some stuff. It’s surprising how quickly it falls into place when the penny drops.

As I say, sorry if that’s too simplistic and you know how everything hangs together already. Just know that we’ve got your back if you need us!

Textpattern CMS

Textpattern CMS support forum

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