The "No Dev Question is Stupid" Thread - Basic HTML / CSS / Etc.

Discussion in 'DevOps' started by Ryuzaki, Mar 17, 2017.

  1. SmokeTree

    •  
    •  
    SmokeTree Developer/Linux Consultant

    Joined:
    Sep 23, 2014
    Messages:
    165
    Likes:
    253
    Degree:
    1
    Since this is just 2 files, you're probably best off just creating a tmp dir, moving the 2 files to it, deleting everything in the public dir then copying the files back. Here's a very simple bash script that should do the trick (Back up your files first).

    Code:
    #!/bin/bash
    
    SITE_DIR='/srv/users/serverpilot/apps/pizza-site/public'
    TMP_DIR='/tmp/pizza_site_bak'
    
    rm -rf $TMP_DIR
    mkdir $TMP_DIR
    
    cp $SITE_DIR/.htaccess $TMP_DIR
    cp $SITE_DIR/robots.txt $TMP_DIR
    
    rm -rf $SITE_DIR/*
    
    cp $TMP_DIR/.htaccess $SITE_DIR
    cp $TMP_DIR/robots.txt $SITE_DIR
     
    doublethinker likes this.
  2. built

    •  
    •  
    built

    Joined:
    Jan 23, 2015
    Messages:
    1,454
    Likes:
    1,222
    Degree:
    4
    Question:

    If I use @font-face for a custom font, do I have to upload a bold version and an italic version too?
     
  3. Ryuzaki

    •  
    •  
    Ryuzaki 女性以上のお金 Staff Member

    Joined:
    Sep 3, 2014
    Messages:
    2,282
    Likes:
    4,056
    Degree:
    6
    Yes and No. It depends on if you want to trust the browser to thicken the lines (it'll look different in each browser) or if you want to provide it for design consistency.
     
    built and Rageix like this.
  4. Joe

    Joe

    Joined:
    Apr 25, 2015
    Messages:
    49
    Likes:
    41
    Degree:
    0
    Code:
    #!/usr/bin/env bash
    shopt -s extglob
    cd /srv/users/serverpilot/apps/pizza-site/public
    rm -rf -- !(.htaccess|robots.txt)
    
     
  5. darkzerothree

    darkzerothree DunkelNullDrei

    Joined:
    Feb 16, 2017
    Messages:
    157
    Likes:
    135
    Degree:
    1
    You can also use find for this

    Code:
    find . ! -name ".htaccess" ! -name "robots.txt" -maxdepth 1 -type f -delete
     
  6. doublethinker

    doublethinker

    Joined:
    Apr 5, 2017
    Messages:
    96
    Likes:
    54
    Degree:
    0
    My cdn uses the subdomain, "www", which uses the primary domain as the source.

    Previously, I was using the primary domain as the primary site- but I am finding little reason to have my visitors connect to my server in the first place when I can direct them to the "www", which saves me resources.

    Am I missing out on any caveats (search, technical) that I should take note off? I have pointed everything to the "www" site properly and if a visitor goes into the primary site, all the links in it would go to a "www" version of it.

    Essentially, it's a static cdnized copy of the primary static site.

    Additionally, since the cdn is a mirror of the primary site, there a way that I could still pull from the primary site (or redirect to) automatically if the www, cdn hosted site is down?
     
  7. doublethinker

    doublethinker

    Joined:
    Apr 5, 2017
    Messages:
    96
    Likes:
    54
    Degree:
    0
    Update: for some odd reason, after changing all the pointers to "www", using links on the "www" site lead to the primary domain site. This is even after checking that the hrefs have "www" in them.

    This is incredibly strange and I cannot figure out why. Reverting back to original for the moment.
     
  8. built

    •  
    •  
    built

    Joined:
    Jan 23, 2015
    Messages:
    1,454
    Likes:
    1,222
    Degree:
    4
  9. doublethinker

    doublethinker

    Joined:
    Apr 5, 2017
    Messages:
    96
    Likes:
    54
    Degree:
    0
    @built not if you properly declare your canonical links. That and if all your directory links point to one version of the site, it helps prioritize that one for search. A CDN essentially duplicates your entire site and supports a website by helping to serve the assets (images, Javascripts, CSS) that the CDN duplicated.

    That means while the first ping to your site and the html is hosted by your server, the assets that are in the html are replaced with the CDN assets, which takes the load off your server.

    I wanted to go one step further and explore using the CDN as the main front end (no touching of my server except by the CDN), but stranger things happened on KeyCDN.

    I'm not sure if it's a typical CDN behavior that I don't know or problem I should reach KeyCDN for. The CDN is pulling from a completely static site.

    Maybe regular CDN wouldn't work for this, I am uncertain. I saw surge.sh allows you to directly push your static site to them and they will host it for you via command line for $0 and the cost of independence.
     
    built likes this.
  10. built

    •  
    •  
    built

    Joined:
    Jan 23, 2015
    Messages:
    1,454
    Likes:
    1,222
    Degree:
    4
    Question:

    If you use a flat file system, when traffic starts peaking will it use less memory and less CPU than Wordpress?

    So basically, are flat file systems lighter on resources?
     
  11. CCarter

    •  
    •  
    •  
    CCarter If they cease to believe in u, do u even exist? Staff Member

    •  
    •  
    Joined:
    Sep 15, 2014
    Messages:
    1,778
    Likes:
    3,838
    Degree:
    5
    In theory it should be, but it will depend on which flat-files CMS. Flat file CMSes are geared towards no database to query but they can be coded to do loops to create their environment - slowing down performance; more than Wordpress? I dunno. PicoCMS loops through every single page on every load to create the navigation for example. If you do not use the cached plugin you are screwed on processsing since it reads every single page in the content folder upon every request. If you have hundred or thousands of pages performance will be degraded without the caching plugin.

    You have to know the weaknesses and strength of every system you use. That's not to say it's a bad scenario since Wordpress or another system's may have other bad functions that are similar. The only way to truly know is to do benchmark test on the CPU load at peak time when using Wordpress versus your CMS.

    Potentially - but bad coding can happen always on the CMS developer side or a plugin developer side killing performance. Even if you started and benchmarked the barebones versions of Wordpress versus PicoCMS for example, it doesn't mean one will be lighter/faster if you introduce a plugin that is coded badly in the final production versions.
     
    Jord and built like this.
  12. darkzerothree

    darkzerothree DunkelNullDrei

    Joined:
    Feb 16, 2017
    Messages:
    157
    Likes:
    135
    Degree:
    1
    We also have to differentiate between "flat file CMS" and static site generators.

    A flat file CMS is not much different from WordPress - it queries files instead of a database, which might or might not make for better performance.

    A static site generator generates HTML pages.
    This is better on load and performance.
     
    Jord and SmokeTree like this.
  13. JasonSc

    •  
    JasonSc

    Joined:
    Mar 30, 2016
    Messages:
    61
    Likes:
    84
    Degree:
    0
  14. turbin3

    •  
    •  
    turbin3

    Joined:
    Oct 9, 2014
    Messages:
    429
    Likes:
    783
    Degree:
    2
    They're using JS (ReactJS in this case, but the type of JS framework is less important) to change document.title and the URL on scroll.

    As far as the value, unfortunately I can't really say one way or the other as I haven't tested it to that degree.
     
    JasonSc likes this.
  15. CCarter

    •  
    •  
    •  
    CCarter If they cease to believe in u, do u even exist? Staff Member

    •  
    •  
    Joined:
    Sep 15, 2014
    Messages:
    1,778
    Likes:
    3,838
    Degree:
    5
    In the content the code looks for the h1 tags (they are using h1 everywhere) that have the class "list-slide__title". It gets all the elements and most importantly their position on the page.

    Then it uses javascript/jquery and monitors the browser's scroll using ".scrollTop();".

    Once it passes a scrollTop position that's higher than the last h1 element, it switches the title of the page using "document.title" and sets the new title to the new corresponding h1 element using "document.title = newTitle;".

    There is no effect on SEO since the manipulation is handled by the user's browser. Since Google doesn't "scroll around" the page, the title will stay the same.

    I created a quick version of it that changes the title: jQuery: Title Change to Header Text on Scroll - DevSeries
     
    JasonSc likes this.
  16. JasonSc

    •  
    JasonSc

    Joined:
    Mar 30, 2016
    Messages:
    61
    Likes:
    84
    Degree:
    0
    I agree Google doesn't scroll. But, if you looked at the cached version Google only shows the current character in the cache.

    Main Page Cache only shows up to the character 1
    First Character Cache
    Second Character Cache

    I'm not disputing that is has no SEO value, but it does make me wonder why anyone would do this because I'm having a hard time seeing how it enhances the users' experience.

    Regardless, thank you for looking at this and the example/code you created.
     
    Steve likes this.
  17. Steve

    •  
    Steve

    Joined:
    Dec 29, 2016
    Messages:
    17
    Likes:
    15
    Degree:
    0
    They are basically mashing 25 separate (in the eyes of google, fb, twitter) pages into 1.
    Each page is rendered serverside, then pulls in the rest of the content client side, eg:

    view-source:http://uk.complex.com/pop-culture/2013/05/most-underrated-simpsons-characters/don-brodka

    The most obvious benefit is they get 25 pages indexed, each targeting their own keywords, with their own opengraph tags etc.

    Great you say, but why bother mashing them up client side? Because the combined article is considerably more shareable - its essentially a 'skyscraper' or listicle, a format proven to have high viral potential.

    Its a neat idea that im glad you posted.
     
  18. Jackv94

    Jackv94

    Joined:
    Jan 28, 2017
    Messages:
    22
    Likes:
    13
    Degree:
    0
    Hey all, I've got a question which is the complete opposite of my first one.

    How could I use CSS to make a H1 look like body text? Basically the persons site has a certain aesthetic that would be ruined by making this phrase big and bold like your typical H1.

    Would it literally be this?

    <div class="h1-body"> <h1> H1 I want to look like body text </h1> </div>

    .h1-body {
    font-size: 12px;
    font-weight: normal;
    margin-top: 0px;
    margin-bottom: 0px;
    }
     
  19. Jackv94

    Jackv94

    Joined:
    Jan 28, 2017
    Messages:
    22
    Likes:
    13
    Degree:
    0
    I managed to make that work ^ it took some messing around due to the theme CSS over ruling but now I have this issue:

    I'm getting multiple H1s from this part of code but I can't find it. From what I understand it's essentially the theme making the title the H1.

    Code:
    “<header class="site-header" itemscope itemtype="https://schema.org/WPHeader"><div class="wrap"><div class="title-area"><h1 class="site-title" itemprop="headline”>”
    anyone know how to change this so it doesn’t do that?
     
  20. Steve

    •  
    Steve

    Joined:
    Dec 29, 2016
    Messages:
    17
    Likes:
    15
    Degree:
    0
    What platform are you using? If wordpress, what theme? If its a free open source theme, post a link. If not, then as a start look into header.php, or just do a global find for '<h1 class="site-title"' in your chosen IDE
     
  21. Ryuzaki

    •  
    •  
    Ryuzaki 女性以上のお金 Staff Member

    Joined:
    Sep 3, 2014
    Messages:
    2,282
    Likes:
    4,056
    Degree:
    6
    What you did works, but is not what I'd suggest. You've nested your H1 into a useless div just for the sake of over-riding the CSS. What you're really looking for is a way to override it with CSS Specificity.

    So you either create new h1 CSS styling and add it to the bottom of the CSS file (lower = override), you inject it into the header using a theme option for custom CSS (inline = override), or you use a more specific nomenclature (specificity = override).

    An example of the 'more specific nomenclature,' based on your 2nd post, would be something like:

    header.site-header .wrap .title-area h1.site-title {}
    That's absolute overkill but shows how specific you can get.

    So what you'd do is set the h1 element to look the exact same as your body or paragraph tags (you'll have to determine which is telling the text to look a certain way, can be a combination of several elements) but you also need to un-set the ones you won't be using. So if the original h1 features a bold font-weight, you'll need to say font-weight: none; or it will still be bold.

    Because it's not actually override, it's "override and keep whatever we didn't address in the override."

    That code is fine. So you might have some custom php code after that wrapping the title in an additional h1 or something. If the title isn't being pulled using <?php the_title(); ?> then that confirms it and you can hunt around to find this function the theme developers created.

    Also, any of this theme work you do needs to be done in a child theme or you'll lose the work when you update the theme. For the CSS, if it's not in a child-theme CSS file, in the database thanks to a theme options panel, or in a separate CSS file you re-add or added in a child-theme template, you'll lose that too.
     
    Jackv94 and DarkRed like this.
  22. vinnypolston

    •  
    vinnypolston

    •  
    Joined:
    Oct 7, 2014
    Messages:
    152
    Likes:
    163
    Degree:
    1
    Hey guys! Been a long time. I have been learning Python. I have built a script that will automatically log into my Facebook account(s) and browse to a list of Facebook groups I am a member of at random intervals; which then submits whatever post I have set, one by one. The process is slower but it is as if I am actually doing it manually. Did this to look natural.

    The idea is automating traffic leaking from Facebook groups (that I am not an admin of). I've done this manually in the past and was able to get roughly 30k visitors to a website I was doing for testing social traffic; made about $100 from it. I proved the concept and was happy, learned a lot. I dropped that project because sitting there manually logging in and out of five Facebook accounts and posting to the 10 groups was mind-numbingly tedious; and to do it slow enough to not draw attention from Facebook took a couple hours. Decided to learn programming python so I could automate and then tackle it again.

    Anyways. Obviously the message each day I post will be different. What I would like to do is just have the script pull what I want to post from a txt file instead of being within the actual script. Any ideas?

    Thanks! Have googled it but for some reason my brain isn't getting it.
     
  23. CCarter

    •  
    •  
    •  
    CCarter If they cease to believe in u, do u even exist? Staff Member

    •  
    •  
    Joined:
    Sep 15, 2014
    Messages:
    1,778
    Likes:
    3,838
    Degree:
    5
    Do you have the script on a local machine or server? Either way it makes sense to have it pull a file just by opening it with Python. https://stackoverflow.com/questions/7409780/reading-entire-file-in-python

    I would recommend having the script read a JSON file that updates with new content and targets, so you can organize better: https://stackoverflow.com/questions/22366748/reading-json-files-from-curl-in-python

    I don't code in python, but the code looks simple enough to understand the basics of getting started with it.

    P.S. for what it's worth, I don't necessarily recommend traffic leaking in this manner unless you go into your account and manually reply to users and engage - otherwise after 3-4 posts several users will realize you are a bot very very quickly, especially if you never reply to comments - something to think about. (If you don't want to interact with users then you are just spamming, not traffic leaking - traffic leaking's ultimate goal is to build you up as an authority within that group so people will gravitate towards you and your site more and more often).
     
  24. Rageix

    •  
    Rageix

    Joined:
    Jan 11, 2017
    Messages:
    59
    Likes:
    80
    Degree:
    0
    To expand on what CCarter said, simple use case is to just use some kind of data file. JSON works well for basically any kind of data and is everywhere. So lets say you have a JSON file that looks like this:

    Code:
    {
        "data": [{
            "date": "somedate",
            "message": "Hi guys this is a sweet facebook group eh?"
        },
        {
            "date": "anotherdate",
            "message": "Hi guys! Check out my sweet site eh!"
        }]
    }
    Use CCarters method or check out the documentation here:

    Code:
    f = open('somefile', 'r')
    file_contents = f.read()
    Now you have all the file data in the file_contents variable. Now you need to convert the JSON to a Python dictionary.

    Code:
    import json
    json_data = json.loads(file_contents)
    Now you can access the JSON data through the Python dictionary!

    Really though this was just a cock tease. There is still a mountain of things you need to do to actually automate this and then post your message to Facebook.

    You should get familiar with the Requests library. It's really the easiest way to make web requests with Python. Because from here on out your goal is to break down all the requests in the process and pretend you are a desktop browser. So:
    • Figure out how to log in to Facebook using requests. Pull up your browsers dev tools and get to work in the Networking tab looking at the requests and what data is passed during login. Then replicate it in your Python script.
    • Figure out how to spoof your requests so you look like a browser and not like a bot. This means setting proper user agents and limiting how fast your bot moves through the site.
    • Figure out how to post to the Facebook group using web requests. Basically same process as the login one.
    Then if you want to go deeper:
    • How to scale by using multiple accounts.
    • How to set up and connect through proxies.
    If you don't want to use the Requests library mentioned above, look at PhantomJS or similar project. These type of browser projects are really great for javascript / ajax heavy websites.
     
    Last edited: Aug 15, 2017
    vinnypolston, Ryuzaki and CCarter like this.
  25. SmokeTree

    •  
    •  
    SmokeTree Developer/Linux Consultant

    Joined:
    Sep 23, 2014
    Messages:
    165
    Likes:
    253
    Degree:
    1
    I'd go a different route than using a plain .txt file. There is no structure there. @CCarter recommended using JSON and that's definitely a step in the right direction.

    If it were me, I'd create a small in-house app, store the posts in a Database and use forms to update/maintain the data. You probably don't want to deal with a raw JSON file yourself as far as creating the posts. Since you're using Python, I'd recommend reading up on the Django framework (https://www.djangoproject.com). Once you get past the learning curve, you can build this type of thing in a couple of hours. By starting your own in-house system and taking it slowly, you'll get yourself out of the "bucket of scripts" mindset and get more into developing sophisticated software. The investment in time will pay you back, don't let anyone tell you otherwise.