Register a SA Forums Account here!
JOINING THE SA FORUMS WILL REMOVE THIS BIG AD, THE ANNOYING UNDERLINED ADS, AND STUPID INTERSTITIAL ADS!!!

You can: log in, read the tech support FAQ, or request your lost password. This dumb message (and those ads) will appear on every screen until you register! Get rid of this crap by registering your own SA Forums Account and joining roughly 150,000 Goons, for the one-time price of $9.95! We charge money because it costs us money per month for bills, and since we don't believe in showing ads to our users, we try to make the money back through forum registrations.
 
  • Post
  • Reply
Tei
Feb 19, 2011

prom candy posted:

No one should ever be able to access their own password, definitely don't store passwords in plain text.

I have a old application that created a url with a hash (https://foobar.com?autologin=ASFASFF234234234324). The client was creating that hash, and if it matched with the server generated one, would autologin that user. The hash included things like the day, year and original password.
This system require to remember the original password :(

This url was embedded inside a desktop application.

I want to change this, but I still have no idea how to improve it.

Tei fucked around with this message at 16:19 on Apr 15, 2019

Adbot
ADBOT LOVES YOU

Lumpy
Apr 26, 2002

La! La! La! Laaaa!



College Slice

LifeLynx posted:



create-react-app does that import React, { Component } from 'react' line in App.js, so I just left it there. Now I see why it just clutters up the code though. Thanks for the example with hooks and arrow functions, that's exactly what I needed and I'm going to study that one to see how it works because I'm not 100% clear on all the syntax yet.

Anonymous arrow functions in a nutshell:

JavaScript code:
// say you have this:
function (thing1, thing2) {
  return thing1 + thing2;
}

// Step 1: turn 'function' into '=>'
=> (thing1, thing2) {
   return thing1 + thing2;
}

// Step 2: Move the '=>' between the params and curly brace
(thing1, thing2) => {
  return thing1 + thing2;
}

// You're done! 

// almost...
// if you have a simple one-line return like we do,  you can omit the
// curly braces (or use parenthesis instead) and the 'return' keyword

(thing1, thing2) => thing1 + thing2

// if you only have one param, you can omit the parenthesis around them:
thing1 => thing1 * 2

You can assign arrow functions to vars / class properties as well. There is a benefit (or hidden danger) here being that `this` is automatically bound to the scope to which the function was defined, unlike "normal" functions.

Lumpy fucked around with this message at 16:21 on Apr 15, 2019

Tei
Feb 19, 2011

Heres a Perl script from 2004 to control a headless Internet Explorer.

code:
use Win32::OLE qw( EVENTS in with valof );
use Win32::OLE::Variant;

Win32::OLE->Option( Warn => 0 );

$HomePage = "http://www.greyhats.org/new/";

$IE = Win32::OLE->GetActiveObject( 'InternetExplorer.Application' );
if( ! defined $IE )
{
    print "Can not find open object. Creating one...\n";
    $IE = Win32::OLE->new( 'InternetExplorer.Application', "Quit" )
             or die "Unable to create a IE Object\n";
}

Win32::OLE->WithEvents( $IE, \&cleanExit, 'DWebBrowserEvents2' );

$IE->{Visible} = 1;
$IE->{RegisterAsDropTarget} = 1;
$IE->{RegisterAsBrowser} = 1;


$IE->Navigate( $HomePage );

# Let IE load the page
while( $IE->{Busy} )
{
    while ($IE->SpinMessageLoop()) { select undef,undef,undef,0.25; }
}


$Doc = $IE->{Document};

$forms = $Doc->{forms} or die "Unable to retrieve forms";
$form = $forms->item("log_form") or die "Unable to find my form";
$elements = $form->{elements} or die "Can't get the elements";

$login = $elements->item("login",0) or die "Where is my login !?";
$pass = $elements->item("pass", 0) or die "I wonder why there isn't a 
+pass";
$go = $elements->item("go", 0) or die "I want my button";

$login->{value} = "zejames";
$pass->{value} = "test";
$go->click;

# Do whatever you want.

sub cleanExit {
    my( $obj, $event, @args ) = @_;
    
    if ($event eq "OnQuit") {
        print "Terminating\n";
        undef $obj;
        exit(1);
    }
}
Heres a Javascript script from 2019 to control a headless Chrome:
code:
const fs = require('fs');
describe('test google.com', () => {
    const {
        Builder,
        By,
        Key,
        until
    } = require('selenium-webdriver');
    var driver;
 
    beforeEach(() => {
        driver = new Builder()
            .forBrowser('chrome')
            .build();
    });
 
    afterEach(() => {
        driver.quit();
    });
 
    it('should open google search', async () => {
        await driver.get('http://www.google.com');
        driver
            .getTitle()
            .then(title => {
                expect(title).toEqual('Google');
            });
    });
 
    it('should open google search and view search results', async () => {
        await driver.get('http://www.google.com');
        var element = await driver.findElement(By.css('input[title=Search]'));
        await element.sendKeys("selenium", Key.RETURN);
        await driver.wait(until.titleContains("selenium"), 4000);
        driver
            .getTitle()
            .then(title => {
                expect(title).toEqual('selenium - Google Search');
            });
    });
 
    it('should open google search and do image search', async () => {
        await driver.get('http://www.google.com');
        var element = await driver.findElement(By.css('input[title=Search]'));
        await element.sendKeys("selenium", Key.RETURN);
        await driver.wait(until.titleContains("selenium"), 4000);
        var imageSearch = driver.findElement(By.xpath("//a[contains(text(), 'Images')]"));
        await imageSearch.click();
        let image = await driver.takeScreenshot();
        fs.writeFileSync('out.png', image, 'base64');
 
    });
 
});
Here in the software world we can do magic, and the thing that is after magic. We can even make Javascript look more ofuscated than Perl.

Tei fucked around with this message at 16:48 on Apr 15, 2019

Munkeymon
Aug 14, 2003

Motherfucker's got an
armor-piercing crowbar! Rigoddamndicu𝜆ous.



LifeLynx posted:

Strictly speaking you need to have all links the ugly default web colors (or very close)

I thought they just had to have two(?) visual distinctions from normal text and be actual anchors, not just any old element gussied up to look like one, since the latter won't be a stop in a focus list. I've never had to make a court case out of it, though :shrug:

Ruggan
Feb 20, 2007
WHAT THAT SMELL LIKE?!


LifeLynx posted:

This is the code I came up with to get it to work:

code:
import React from 'react';

class App extends React.Component {

  constructor() {
    super()
    this.state = {
      cardname: []
    }
  }

  componentDidMount() {
    fetch("https://api.scryfall.com/catalog/card-names")
      .then(response => response.json())
      .then(data => {
        this.setState({
          cardname: data
        })
     })
  }

  render() {
      //return(<span>{this.state.cardname.data}</span>)
  
      if (this.state.cardname.data && this.state.cardname.data.length > 0) {
        return(
          <ul>
            {this.state.cardname.data.map(function(object, index) {
              return <li>{object}</li>
            })}
          </ul>
        )
      } else {
        return null
      }
  }
}

export default App;
create-react-app does that import React, { Component } from 'react' line in App.js, so I just left it there. Now I see why it just clutters up the code though. Thanks for the example with hooks and arrow functions, that's exactly what I needed and I'm going to study that one to see how it works because I'm not 100% clear on all the syntax yet.

Glad it helped. Your new code still has an error: you are initializing cardname to an empty array. You should initialize it to an empty object instead since your api call returns an object (that’s what you set it to). It’s not cardname that is an array, it’s cardname.data.

Anony Mouse
Jan 30, 2005

A name means nothing on the battlefield. After a week, no one has a name.
Lipstick Apathy
https://chaos-equations.glitch.me

So, I made a thing.

Based on an interesting YouTube video I watched recently: https://www.youtube.com/watch?v=fDSIRXmnVvk

The 6-letter code in the upper right encodes a set of parametric equations, for x and y. If you iterate the equations many times (in this case 800) and draw the corresponding points, you get an interesting visualization. Change the "time" parameter, animate the result, and there you go.

Here are a few of the interesting ones I've found:

https://chaos-equations.glitch.me/?p=LYDMYF


https://chaos-equations.glitch.me/?p=VQCUDW


https://chaos-equations.glitch.me/?p=HLX_DQ


https://chaos-equations.glitch.me/?p=LBKITQ


https://chaos-equations.glitch.me/?p=EXCLNT


https://chaos-equations.glitch.me/?p=NMJNRV


https://chaos-equations.glitch.me/?p=TAKICU


The number of possible permutations of parameters is over 387,000,000 and no two are alike. See how many you can find. :)

You can control the "time" value with the transport controls at the bottom. Click, drag, and zoom to control position and scale of the visualization. "Setting" on the left has some tweaks to things like color offset, animation speed, etc.

Have a gander at the source code if you'd like. I have a few things I'd like to refactor but overall it's not bad. https://glitch.com/edit/#!/chaos-equations?path=README.md:1:0

(Note: may require a fairly modern device to run smoothly. If you're on Mac, try it with Safari - WebGL seems faster than on Chromium)

Dominoes
Sep 20, 2007

Hey dudes. Trying to disable touch events on my page, but running into issues where 'touch-action' CSS attribute doesn't inherrit, so I'm having to use it an excessive amount. Any ideas?

Raskolnikov2089
Nov 3, 2006

Schizzy to the matic

Dominoes posted:

Hey dudes. Trying to disable touch events on my page, but running into issues where 'touch-action' CSS attribute doesn't inherrit, so I'm having to use it an excessive amount. Any ideas?

pointer-events: none; ?

Maleh-Vor
Oct 26, 2003

Artificial difficulty.
Ugh, I think I got into a project I really shouldn't have. My boss' boss at work asked me to help them out with some of their side-gigs and take a look at their sites because they hired some agency and got garbage back. I looked at the designs they had submitted to the agency for development and the current product and there's some pretty huge discrepancies.
My expertise that applies to this is mostly in web design, but whereas I generally design for raw development, I think this was made in some Wordpress theme that was bent and mangled to match the designs, but definitely does not match up 1:1 in a lot of places. I generally hate frameworks and themes, and have little experience in Wordpress, but I understand Drupal and can read PHP, and am competent enough at front-end work. I think I'm still going to have to face a nightmare when I get access to whatever this is made in though. I had a developer I know lined up to help me out with this but he barely has available hours, and this isn't something I can risk going in with someone I haven't worked with before.
I guess this is what most freelance work in the field probably is, I'm just used to working on a stable product and having custom development available for new features.

LifeLynx
Feb 27, 2001

Dang so this is like looking over his shoulder in real-time
Grimey Drawer

Maleh-Vor posted:

Ugh, I think I got into a project I really shouldn't have. My boss' boss at work asked me to help them out with some of their side-gigs and take a look at their sites because they hired some agency and got garbage back. I looked at the designs they had submitted to the agency for development and the current product and there's some pretty huge discrepancies.
My expertise that applies to this is mostly in web design, but whereas I generally design for raw development, I think this was made in some Wordpress theme that was bent and mangled to match the designs, but definitely does not match up 1:1 in a lot of places. I generally hate frameworks and themes, and have little experience in Wordpress, but I understand Drupal and can read PHP, and am competent enough at front-end work. I think I'm still going to have to face a nightmare when I get access to whatever this is made in though. I had a developer I know lined up to help me out with this but he barely has available hours, and this isn't something I can risk going in with someone I haven't worked with before.
I guess this is what most freelance work in the field probably is, I'm just used to working on a stable product and having custom development available for new features.

Sometimes it's less work/time/money to trash whatever garbage fire they have burning and redo it from scratch, and if you can do it competently and if you can convince the client the first two statements are true then you can charge whatever you think is fair and deliver a working product.

Maleh-Vor
Oct 26, 2003

Artificial difficulty.

LifeLynx posted:

Sometimes it's less work/time/money to trash whatever garbage fire they have burning and redo it from scratch, and if you can do it competently and if you can convince the client the first two statements are true then you can charge whatever you think is fair and deliver a working product.

I just read up a bit more and found out that it's made in whatever the hell this is: https://www.elegantthemes.com/gallery/divi/
I guess I could just try to drag that mess around? I'm exhausted just thinking about it.

spiritual bypass
Feb 19, 2008

Grimey Drawer
You're probably better off writing your own theme, but that requires PHP. Then you'd have full control over the HTML. I don't think it's possible to succeed with those drag and drop abominations.

Tei
Feb 19, 2011

Alternative idea:

Write a list of shortcomings has hard test. Ask the original agency to fix the quality of the website until it match that list.

Odds are they will be the ones that will rewrite it from scratch. Without costing your company a extra penny.

Writing a list expose yourself to less risking that trying to save a sinking ship. When you help a sinking ship you may be sharing part of the blame for the sinking.

Writing that list (or reading it) is also educative.... "What make a good website a good website?", you may know unconsciously, but knowing it consciously is another level.

barkbell
Apr 14, 2006

woof
Why is angular so tough. Does anyone have any good resources on learning it? The angular docs are very dense and I need something simpler

kedo
Nov 27, 2007

Maleh-Vor posted:

I just read up a bit more and found out that it's made in whatever the hell this is: https://www.elegantthemes.com/gallery/divi/
I guess I could just try to drag that mess around? I'm exhausted just thinking about it.

Divi is bad and a developer's nightmare to work with. I had the displeasure of working with it once several years ago and I now turn down any work where it's a requirement.

Tei
Feb 19, 2011

Somebody told me that is dumb to encrypt enumerable fields.

Like if I have a field that can be true and false. Encrypting that is dumb. You would end with binary garbage A, and binary garbage B.

But what if we create a json wrapping the value with a random number, something like this { r:4342342444, v:true} , then two values will be different, even if they encrypt the same value.

Maybe theres some encryptation algorithm that from A generates A*, A**, A*** different binary garbage that all wen decrypted generates again A. So you don't need the json wrapping above, but is already a feature of the encryptation algorithm.

Any opinion of this?

---

I looked at how you can encrypt a whole mysql database, and I have not found a way to do it. Don't seems to be feasible by mere humans. Is relatively easy to encrypt backups, but I have not seen a way to encrypt the database itself.

minato
Jun 7, 2004

cutty cain't hang, say 7-up.
Taco Defender
Modern encryption algorithms effectively throw that "random" data into the mix for you, so it doesn't matter whether you're encrypting 1 bit or 1000, you won't be able to figure out the plaintext. Each piece of encrypted data would look different, even if the underlying data was only 1 bit long.

Re: encrypting databases, you can do it at various levels:
1) Encryption-at-rest: the DB uses an encrypted filesystem. This is transparent to the DB, so it's compatible with all DBs. This only secures the data from someone copying the files.
2) Table/Row-level encryption: The DB has the keys in memory and encrypts/decrypts transparently on the fly. Used when encrypted filesystems are not available, and the app needs to do SQL on the values of encrypted fields. But the DB must explicitly support this.
3) App-level encryption: The app is responsible for encrypting/decrypting. The DB is unaware of encryption, from its POV it just stores opaque (encrypted) data alongside enough plaintext info used to find the records. Used when you can't trust either the DB or the filesystem, or they just don't support encryption. Has the disadvantage that you can't leverage SQL to search for data within encrypted fields, but you have more flexibility, e.g. you can apply a different encryption key for every user in the DB (keys would be stored in a different DB!), and then deleting that user is as simple as throwing away their encryption key.

PT6A
Jan 5, 2006

Public school teachers are callous dictators who won't lift a finger to stop children from peeing in my plane

Tei posted:

But what if we create a json wrapping the value with a random number, something like this { r:4342342444, v:true} , then two values will be different, even if they encrypt the same value.

I'm not sure if this is the most efficient possible way of accomplishing what you want, but I see no reason why it wouldn't work.

my bony fealty
Oct 1, 2008

kedo posted:

Divi is bad and a developer's nightmare to work with. I had the displeasure of working with it once several years ago and I now turn down any work where it's a requirement.

this extends to every one of these monolithic WP theme frameworks thats out there. Avada and divi being the prime two I know of.

their entire point and indeed main selling feature is "customize without code!" so when someone comes calling for a custom feature that does require PHP knowledge...you're going to be fighting the theme the entire time. even thorough WP knowledge probably wont help.

good luck OP. as stated maybe it's best to just roll a new theme if that's an option. Sage is a good powerful starter with a good dev experience.

PT6A
Jan 5, 2006

Public school teachers are callous dictators who won't lift a finger to stop children from peeing in my plane
Part of the problem with Wordpress is that people are using it for things that it was really never intended to do. It started off as a blog system, and it was decent at that, but at some point it was decided that it should be a basis for pretty much anything and everything, and as such it's now accumulated years and years of damage from people trying valiantly to hammer a multitude of square pegs into round holes.

Maleh-Vor
Oct 26, 2003

Artificial difficulty.

my bony fealty posted:

this extends to every one of these monolithic WP theme frameworks thats out there. Avada and divi being the prime two I know of.

their entire point and indeed main selling feature is "customize without code!" so when someone comes calling for a custom feature that does require PHP knowledge...you're going to be fighting the theme the entire time. even thorough WP knowledge probably wont help.

good luck OP. as stated maybe it's best to just roll a new theme if that's an option. Sage is a good powerful starter with a good dev experience.

Yeah, that looks like the case. Since some of the details they had with it seemed minor, I thought maybe I could mess around in Divi and get close to what they were trying to do by dragging things around, which I imagine will not go well. In case it doesn't, then I'll just offer a rewrite, but with a single PHP developer working 5hrs/week that might be a non-starter. At least I'll learn something from this project.

If styling is the main issue, would slapping some extra CSS on top of it work? I'm guessing "sometimes, maybe" is the answer, though.

Scaramouche
Mar 26, 2001

SPACE FACE! SPACE FACE!

PT6A posted:

Part of the problem with Wordpress is that people are using it for things that it was really never intended to do. It started off as a blog system, and it was decent at that, but at some point it was decided that it should be a basis for pretty much anything and everything, and as such it's now accumulated years and years of damage from people trying valiantly to hammer a multitude of square pegs into round holes.

The best part is storing data in serialized array, and depending on the plugin, actual HTML content.

Maleh-Vor
Oct 26, 2003

Artificial difficulty.

Maleh-Vor posted:

Yeah, that looks like the case. Since some of the details they had with it seemed minor, I thought maybe I could mess around in Divi and get close to what they were trying to do by dragging things around, which I imagine will not go well. In case it doesn't, then I'll just offer a rewrite, but with a single PHP developer working 5hrs/week that might be a non-starter. At least I'll learn something from this project.

If styling is the main issue, would slapping some extra CSS on top of it work? I'm guessing "sometimes, maybe" is the answer, though.

well, the "Custom CSS" field has 560 lines of CSS on it, most of which has !important, along with poo poo like this:
code:
#videoHome .et_pb_column.et_pb_column_4_4.et_pb_column_0 {
  width: 125.4%;
}
I'm dead.
:rip:

teen phone cutie
Jun 18, 2012

last year i rewrote something awful from scratch because i hate myself

PT6A posted:

Part of the problem with Wordpress is that people are using it for things that it was really never intended to do. It started off as a blog system, and it was decent at that, but at some point it was decided that it should be a basis for pretty much anything and everything, and as such it's now accumulated years and years of damage from people trying valiantly to hammer a multitude of square pegs into round holes.

Is Wordpress still the go-to for freelance developers or are more minimal libs like Gatsby replacing it?

prom candy
Dec 16, 2005

Only I may dance
Depends on if you're a developer or if you're more like a "super admin," ie someone who is very familiar with the WP ecosystem but only surface level familiar with the underlying web tech.

Although you can totally use Gatsby as a front end for WordPress and if I was still freelancing I'd probably do just that.

Jadeilyn
Nov 21, 2004

barkbell posted:

Why is angular so tough. Does anyone have any good resources on learning it? The angular docs are very dense and I need something simpler

What are you having trouble with? What experience do you have already? I would recommend starting with the official Tour of Heroes tutorial application. It covers many of the tools Angular gives you.

teen phone cutie
Jun 18, 2012

last year i rewrote something awful from scratch because i hate myself

prom candy posted:

Although you can totally use Gatsby as a front end for WordPress and if I was still freelancing I'd probably do just that.

Interesting. I didn't know headless CMSs were an option.

Boris Galerkin
Dec 17, 2011

I don't understand why I can't harass people online. Seriously, somebody please explain why I shouldn't be allowed to stalk others on social media!
Over the weekend I built my first website (personal landing page) layout using different frameworks just to get my feet wet. I ended up trying Bootstrap, Bulma, and Tailwind.

What I liked about Bootstrap and Bulma was customizing it with sass. It just made it really simple to do. What I didn't like about these two was that I had to fight against the system to do what I wanted and in the case of Bulma… it's 2019 and they don't have an online searchable documentation and that's all I have to say about that.

I liked Tailwind the most because it didn't have any of the hidden secret sauce that Bulma/Bootstrap did. If I wanted my thing to look a certain way I just had to include the css class and viola it's done. Lots of people online seem to think this is a negative but I dunno, even the official documentation for it recommends that you start creating custom classes as you need them once your design matures. The negative I found was that it uses postcss and not sass. I only say it's a problem because it was the odd one out with everything else I've found using sass. Is postcss here to stay and worth using? I don't have any preferences for either one as it's all new to me, but it's odd that 9/10 projects use sass and the author of Tailwind recommends against it.

LifeLynx
Feb 27, 2001

Dang so this is like looking over his shoulder in real-time
Grimey Drawer
Now that I'm more familiar with npm and React, I'm considering switching to GatsbyJS powered by a WordPress backend. I'm just concerned that it'll confuse the main company I freelance for and/or that their plugins they use for SEO won't work. From the little I found (and WordPress's REST API is relatively new so I could easily be looking at older information), things like Yoast either don't work or require some major configuration. I can adapt my workflow more easily than an entire company, so they're stuck on WordPress. I might use it for my personal and other freelance projects though just to check it out.

Some WordPress plugins already have an API built in: The Events Calendar can output its content as JSON, so I was already planning on doing a Magic events site as a React app. I might try it with Gatsby instead.

my bony fealty
Oct 1, 2008

if you do go for headless WP with Gatsby for client work just make sure they have some understanding of how it works, especially if they're used to WP-with-head. if someone is used to their changes showing up right away when they click "update page" they might be confused that the whole thing has to rebuild which takes some time.

sometimes hosting can be an issue too, manually having to deploy a Gatsby site every time it changes is a chore.

It's a really sick combination though and definitely check it out, I'm working on a WP Gatsby site right now at work and it's a good experience for everyone

Furism
Feb 21, 2006

Live long and headbang
I'm using Semantic UI React but struggling to tweak some elements on this little project because web design isn't really my forte:



Specifically I'd like to be able to space out the elements vertically, and make the search input wider and not rounded. What's the Correct Way to do this?

Lumpy
Apr 26, 2002

La! La! La! Laaaa!



College Slice
Easy CSS: Flexbox for spacing (column direction, justify-content: space-between), and set border-radius to zero for the input. Should be a way to add classes or styles directly to the semantic components.

Lumpy fucked around with this message at 01:14 on Apr 24, 2019

teen phone cutie
Jun 18, 2012

last year i rewrote something awful from scratch because i hate myself

my bony fealty posted:

if you do go for headless WP with Gatsby for client work just make sure they have some understanding of how it works, especially if they're used to WP-with-head. if someone is used to their changes showing up right away when they click "update page" they might be confused that the whole thing has to rebuild which takes some time.

sometimes hosting can be an issue too, manually having to deploy a Gatsby site every time it changes is a chore.

It's a really sick combination though and definitely check it out, I'm working on a WP Gatsby site right now at work and it's a good experience for everyone

You mean if the client wants a front-end change outside of posting a new blog post, they have to contact the developer? Or is there some automated build process you have?

I'm assuming the main use of using headless WP is that blog posts come back from API responses, right?

Furism
Feb 21, 2006

Live long and headbang

Lumpy posted:

Easy CSS: Flexbox for spacing (column direction, justify-content: space-between), and set border-radius to zero for the input. Should be a way to add classes or styles directly to the semantic components.

So I added this to the component:

code:
<Search fluid size="large" style={{ borderRadius: 0 }}></Search>
But Semantic seems to apply it to the containing div, not the input itself?

code:
<div style="border-radius: 0px;" class="ui large fluid search">
<div class="ui icon input">
<input type="text" tabindex="0" class="prompt" autocomplete="off" value="">
<i aria-hidden="true" class="search icon"></i>
</div>
</div>

Ruggan
Feb 20, 2007
WHAT THAT SMELL LIKE?!


Furism posted:

So I added this to the component:

code:
<Search fluid size="large" style={{ borderRadius: 0 }}></Search>
But Semantic seems to apply it to the containing div, not the input itself?

code:
<div style="border-radius: 0px;" class="ui large fluid search">
<div class="ui icon input">
<input type="text" tabindex="0" class="prompt" autocomplete="off" value="">
<i aria-hidden="true" class="search icon"></i>
</div>
</div>

Yeah I personally don’t find Semantic UI very easy to personally style because they do a lot of wrapper components. Either use the default props or roll your own.

You could also write some complicated css that targets the same elements the library creates - for example, in your example:

.ui.icon.input>input { border-radius: 0px; }

prom candy
Dec 16, 2005

Only I may dance

Grump posted:

You mean if the client wants a front-end change outside of posting a new blog post, they have to contact the developer? Or is there some automated build process you have?

I'm assuming the main use of using headless WP is that blog posts come back from API responses, right?

Gatsby is a static site generator so you would need to rebuild the site after each content change. The beauty of that is your site is static, no worrying about the database going down or whatever. Easiest route is to host on netlify and set up Wordpress to trigger a rebuild via webhooks when content is updated. You could also do poo poo like have it rebuild via cron task or give your client a slack command to trigger a rebuild or something.

Any Wordpress plug-ins that do theme stuff won't work with headless Wordpress.

RE sass vs postcss, my personal opinion is that CSS preprocessing is on the way out and CSS post-processing is in. I kinda live in a React/Javascript bubble though. I was extremely hot for SASS when I was building full stack Rails sites. I also think Tailwind is neat, for the reasons you mentioned. I'm usually working with a designer so pre-built UI libraries don't fly for me, any time saved is just lost when I inevitably have to fight the framework.

Boris Galerkin
Dec 17, 2011

I don't understand why I can't harass people online. Seriously, somebody please explain why I shouldn't be allowed to stalk others on social media!
Quick question, if I'm using a font from Google Fonts (say Roboto) and I go export it, the only font weight selected is 'regular 400'. Does that mean that when I make it bold, italic, etc, that it won't work properly unless I also export the bolder and italic weights as well?

e: Seems to be the case but just wanted to make sure. I thought a font was just a font and things like bold/italics was a software effect.

Boris Galerkin fucked around with this message at 07:42 on Apr 24, 2019

Ruggan
Feb 20, 2007
WHAT THAT SMELL LIKE?!


Boris Galerkin posted:

Quick question, if I'm using a font from Google Fonts (say Roboto) and I go export it, the only font weight selected is 'regular 400'. Does that mean that when I make it bold, italic, etc, that it won't work properly unless I also export the bolder and italic weights as well?

e: Seems to be the case but just wanted to make sure. I thought a font was just a font and things like bold/italics was a software effect.

Browsers first check for a native bold and italic implementation, and if they can’t find one, attempt to self generate it (faux bold/italic). The faux versions are pretty awful because the browser simply stretches (bold) or slants (italic) the existing character set to generate the effect. The native option will often be far better in quality because it was hand styled.

https://www.smashingmagazine.com/2012/07/avoiding-faux-weights-styles-google-web-fonts/

Boris Galerkin
Dec 17, 2011

I don't understand why I can't harass people online. Seriously, somebody please explain why I shouldn't be allowed to stalk others on social media!

Ruggan posted:

Browsers first check for a native bold and italic implementation, and if they can’t find one, attempt to self generate it (faux bold/italic). The faux versions are pretty awful because the browser simply stretches (bold) or slants (italic) the existing character set to generate the effect. The native option will often be far better in quality because it was hand styled.

https://www.smashingmagazine.com/2012/07/avoiding-faux-weights-styles-google-web-fonts/

Thanks. If I add the other weights Google Fonts tells me in big scary red letters that it is "slow." Is that just relevant for people on dialup?

Adbot
ADBOT LOVES YOU

Ruggan
Feb 20, 2007
WHAT THAT SMELL LIKE?!


Boris Galerkin posted:

Thanks. If I add the other weights Google Fonts tells me in big scary red letters that it is "slow." Is that just relevant for people on dialup?

That’s a good question. I don’t know but I suspect browsers cache font resources in which case probably only slow the first time?

You could also host the font files yourself if you don’t care about that bandwidth.

Would be interested in hearing others chime in because I’ve wondered that myself.

  • 1
  • 2
  • 3
  • 4
  • 5
  • Post
  • Reply