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

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

  1. ragnar

    ragnar

    Joined:
    Dec 31, 2016
    Messages:
    174
    Likes:
    94
    Degree:
    0
    Thanks @turbin3 , I got it to work easily with Requests and BS.

    Another question and this might seem too basic, but isn't for me.

    I want to make a "You might also be interested in" shortcode for Wordpress. I don't have problems with the php part, but the .css is infuriating.

    I want to show a rectangle with 1/3 being an image, 2/3 a box with text in it.

    Like this one:

    [​IMG]
    I can't get the divs to line up using percentages, they overlap. If I use fixed width then they float the following text (float: left). I can't get the "clearfix" to work.

    This might be very basic, but can you refer me to something for making a div like the one at the div?
     
  2. Ryuzaki

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

    Joined:
    Sep 3, 2014
    Messages:
    2,731
    Likes:
    4,978
    Degree:
    6
    @ragnar, you're saying your div's are overlapping with percentages, which makes me think you're having the classic problem with the box model.

    What happens is you apply a percentage-based width to the main area, but then if you add on padding and margin and a border, that's extra width. So you may have taken care to add up the internal widths like 66.66% + 33.33% = 100%, but as soon as you add padding / margin / border, you go over 100%.

    The easiest way to fix this is to make it so the padding, margin, and borders are considered in the calculation of the general width. It will automatically adjust the width to accommodate those extra widths so you don't have to get into a ton of funky math. The way to do that is:

    Code:
    box-sizing: border-box;
    Apply that attribute to both boxes and you should see it all fall into alignment without any other intervention, if I'm understanding correctly.

    A lot of CSS guys will apply that universally at the start of a project and never worry about it again like this:

    Code:
    html {
        box-sizing: border-box;
    }
    
    *, *:before, *:after {
        box-sizing: inherit;
    }
    You would only do this if you're creating a theme or design from the ground up, or it'll destroy the current design.
     
    Jord and ragnar like this.
  3. turbin3

    •  
    •  
    turbin3

    Joined:
    Oct 9, 2014
    Messages:
    546
    Likes:
    1,068
    Degree:
    2
    There are many ways to do it of course. One that can work well is Flexbox. Especially where the use case is "2D" in nature. In short, you basically:
    • Put everything in a parent element (let's just say a div) and set to display flexbox.
    • Align items on the parent element however you want.
    • Set your desired custom CSS on each element individually.
    • Maybe add media queries to make things look nice on mobile.
    Let's say this is the element and surrounding text from your example image above:
    Code:
    <h1>Intelligent automatic boxes placement</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        <div class='related-content-box'>
            <div class='related-post-img'>
                <img src="https://placehold.it/600x100" alt="">
            </div>
            <div class='gray-box'>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse, obcaecati. Voluptatibus odit debitis veritatis.</div>
        </div>
    First we take care of the flexbox setup for the parent element:
    Code:
    .related-content-box {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    Then we customize each child component a bit:
    Code:
    .related-post-img {
        max-width: 100%;
    }
    
    .gray-box {
        background: #efefef;
        padding: 1rem;
        margin: 1rem;
    }
    Lastly, we throw in a media query:
    Code:
    @media screen and (max-width:990px) {
       .related-content-box {
           flex-wrap: wrap;
       }
    
       .gray-box {
           flex-basis: 100%;
       }
    }
    That's pretty rough, and I'm sure could be done better. You'll want to do some browser testing, and determine if you're going to need any fallbacks. I'd always recommend checking "Can I Use" for specific things like this. If most of your users are on newer browsers, there shouldn't be much of any issue, as flexbox is widely supported now. Here's a great guide to Flexbox.
     
    Jord and ragnar like this.
  4. ragnar

    ragnar

    Joined:
    Dec 31, 2016
    Messages:
    174
    Likes:
    94
    Degree:
    0
    Coding is so fun, I wish I had stuck with it when I was 10 and coded my first Qbasic programs, alas it was deemed "too nerdy" and no support from parents.

    I just spent some hours writing a script in php (a first there, only python previously), to grab affiliate earnings from a network api and then write it to a database, so I could get it to my Google Dashboard (next up, scrap Google, write my own dashboard).

    It's a lot of fun and time flies, but on the other hand, at my age, I will never be near good enough to sell it on the market. A regret for sure.
     
  5. CCarter

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

    •  
    •  
    Joined:
    Sep 15, 2014
    Messages:
    1,936
    Likes:
    4,285
    Degree:
    5
    You think most of the people in tech were “supported” or “encouraged” by their parents? I can’t count the amount of times I was screamed at to get off the internet cause it was tying up the phone line and go outside. Eventually they gave in and got a second line - YEARS later.

    It doesn’t matter your age, you are only defeated when you think you can’t anymore. All the people I ask coding/programming advice from are 10 years my senior, yet I probably have more coding time than most of them. What does that mean? Age is just a number in your head, and if you use the labels society gave you then you’ll find yourself saying “I can’t because I am (whatever)” for the rest of your life.

    It’s time to throw the chains away. One day of freedom is better than a continued life of subserviency.
     
  6. SmokeTree

    •  
    •  
    SmokeTree Developer/Linux Consultant

    Joined:
    Sep 23, 2014
    Messages:
    182
    Likes:
    295
    Degree:
    1
    That's just not true unless you really believe it. If you have already created a working script and you have the passion/drive, there's no reason you can't do this professionally. Just keep the things that are making you money on the front burner and work at the code, automating here and there for yourself first until you are confident you can do it for others. Being able to make your own tools is invaluable and if you stopped there and decided to never do it professionally, it's still time well spent.

    I'll be totally honest here. I meet a lot of people that claim to have 10+ years of experience but many times that means that they have "1 year experience 10 years in a row" because they plateau after the first year and end up sticking to whatever crusty tech they first learned because that's "all they know" and honestly that's all they'll ever know because they think/act more like a human resources exec than a passionate dev and don't really know what they don't know.

    most... :smile:
     
  7. Focused

    Focused

    Joined:
    Oct 18, 2017
    Messages:
    20
    Likes:
    5
    Degree:
    0
    I created a Wordpress instance using Bitnami on Amazon LightSail, but now I have no idea how to set up a domain to use the Wordpress install. All I see is a default Wordpress install when I visit the IP address that the Bitnami stack created.

    How do I set up my domain in LightSail/Bitnami so I can host my blog there?
     
  8. Ryuzaki

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

    Joined:
    Sep 3, 2014
    Messages:
    2,731
    Likes:
    4,978
    Degree:
    6
    I just Googled this while waiting on my ride to show up. I've not done this myself. But what I found sounds like you have a two step process.

    You won't just punch in domain name servers at the registrar. You'll have to set up "A records" that point the domain to the IP address. And then to get the site running on the domain instead of the IP address, you'll have to edit the wp-config.php via an FTP client, changing out the values here from the IP to the domain name:
    Code:
    define('WP_HOME','http://example.com');
    define('WP_SITEURL','http://example.com');
     
    Focused likes this.
  9. Apex

    Apex The time has come

    Joined:
    Jul 8, 2017
    Messages:
    75
    Likes:
    64
    Degree:
    0
    I want to learn a programming language that allows me to create web apps and web pages of the SAAS type. Mainly, I would like it to be an easy language to learn and that allows me to do things in the short term.

    After several hours of searching, I've reduced my options to Ruby and Python, which look like good languages and the frameworks Rails and Django also seem very good. What do you think is the best option?
     
    ragnar likes this.
  10. Ryuzaki

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

    Joined:
    Sep 3, 2014
    Messages:
    2,731
    Likes:
    4,978
    Degree:
    6
    @Apex, Python is older. They're both easy to read and type, with Ruby trying to kick that up a notch. When I tried to learn Ruby I kept getting disappointed by it's inability to do certain things (like create a self-packaged app) and how little documentation there was out, including finding answers on Stack Exchange and all that. Python seems to have a much larger base of users at this point with much more help already available.

    That may have changed in the 7+ years or whatever it's been since I messed with Ruby. It was pretty hipsterish and new at that point.

    There's a lot of Javascript options out there these days. @turbin3 talks about them, like ReactJS and other frameworks.

    There's still PHP too.
     
    Apex likes this.
  11. SmokeTree

    •  
    •  
    SmokeTree Developer/Linux Consultant

    Joined:
    Sep 23, 2014
    Messages:
    182
    Likes:
    295
    Degree:
    1
    Years ago, I would have told you to learn Ruby/Rails. The documentation for Rails was massive and you could pretty much do just about anything you needed to do on the back-end with it. Ruby as a language is very straightforward and beautiful to work with. I made a living using Ruby/Rails for Web Apps and C# for desktop apps for about a decade. The main problem with Ruby is it's a slow language in comparison to just about any other scripting language out there. There have been recent improvements that are going to change this dramatically but currently Ruby/Rails just doesn't do well in the performance/scaling dept which can cause you to have to solve a lot of the problems with better hardware to make up for the lack of performance of the lang itself.

    Since you've limited your choices to two, to answer your question my choice would be to go with Python and Django. You really can't go wrong with that combo. You'll also need to learn JavaScript because that's unavoidable for web apps.

    For me personally, I love the Elixir language (https://elixir-lang.org/) and Phoenix Framework (http://phoenixframework.org/). I've made quite a few small apps for clients in just the past 2 years and I have nothing but good things to say about the performance and fault tolerance. It's a different breed and in a class of it's own, handles multiple processor cores by default and scales with almost zero effort. I would like to give thanks to the alien lizard people that created it because it's making me money and a very happy dev.

    At the end of the day, don't limit yourself to one language. Learn to program, not to "program in Language X", you'll be happier :smile:
     
    Apex, ryandiscord and Ryuzaki like this.
  12. turbin3

    •  
    •  
    turbin3

    Joined:
    Oct 9, 2014
    Messages:
    546
    Likes:
    1,068
    Degree:
    2
    I'm curious. Are there specific factors that made those seem the most attractive for something you're looking to achieve? The exact languages and frameworks are less important in most cases. You can build things and make money with just about any language. It's usually most effective matching those choices based on fundamental needs and constraints.

    I have almost no experience with Ruby (save for SASS usage) or Rails, so I can't really comment on those.

    Python > Django
    For me, I use Python frequently for web-scraping purposes, processing files and manipulating data. So, in my case, Django has made a lot of sense to use on the backend. It has its cool value props, but it has plenty of downsides as well.

    For example, the standard template/view system is getting a bit antiquated these days, with sites needing much heavier JS framework usage on the front-end. These days, the front-end is just as complicated as the back-end. For an MVP, though, Django can still work well. Sometimes just being able to quickly add custom functionality is well worth it.

    Also, Python has its own weirdness, just like any other language. For example, forced whitespace. Also, managing Python versions (learn to love the virtualenv!). I've still found, if you use simple logic with Python, and don't try to get too creative, it can be easy to learn and reason about.

    PHP > Wordpress
    For those that use PHP as their go-to solution, Wordpress is the natural choice. People hate on Wordpress all day long. I'm usually one of them, though I still use it for a few sites.

    Whenever the subject of WP comes up, I've started making an effort to remember a specific question about marketing.
    For some, the ROI of Wordpress is barely worth their $5/mth shared hosting cost. Maybe a static site might be better for them.

    For The Wirecutter, the ROI of Wordpress was $30M.

    If a WP site can sell for thirty million dollars, the tech ain't exactly the limiting factor. :wink:

    If speed to market is a critical factor, and you don't have any highly custom needs, I'd still have to say WP is one of the most effective options.

    Narrowing Down Fundamental Needs
    Based on what you said, these seem to be a few of the fundamental needs you've mentioned:
    • Easy to learn
    • Productive to use
    Other questions I'd ask are:
    • Would you be using these skills for anything else?
    • Think you'll freelance in the future?
    • Think you'll look for jobs with those programming skills?
    Knowing those things will help make your choices easier. For example, say you'll definitely look to find a full time job programming in the language/framework of your choice. You'll find far more opportunities with PHP and Wordpress than just about anything else.

    Even if not Wordpress, PHP has a bunch of other great opportunities for work. Laravel has become the framework to use in that world. Also, there a number of other CMS', both flat file or database-driven, built with PHP (Grav, Pyro, October).

    There's still plenty of opportunities for Ruby and Rails, though it's popularity has been declining considerably.

    Python and Django seem to have picked up in popularity over the past couple years at least. Still, the opportunities for finding work with Django are a fraction of the percentage of Wordpress.
     
  13. Apex

    Apex The time has come

    Joined:
    Jul 8, 2017
    Messages:
    75
    Likes:
    64
    Degree:
    0
    Javascript is also an option that I've thought about, but I've read that the available frameworks are mostly quite young, although I don't think it's a very negative factor either.

    I don't want to limit myself to one language, but I've to start somewhere, and I would like to do it on the right foot :D

    From what I've read, they're easy to learn languages, they are not complicated to read, they've enough frameworks and they're also options that are not new or fruit of the "hype".

    • The only thing that interests me now is everything related to web apps. I don't need to program desktop applications, for example.
    • For now it's not in my plans.
    • For now it is not in my plans.
     
  14. Rageix

    •  
    Rageix

    Joined:
    Jan 11, 2017
    Messages:
    86
    Likes:
    98
    Degree:
    0
    I've been doing web development professionally for several years now, and I've touched most of the languages out there. I've worked on many projects in PHP, Python, Javascript, and Go.

    The first thing you need to know is, there is a lot to learn no matter what way you go, and all languages have up and down sides. That being said, every language mention can get the job done one way or the other.

    In terms of ease of use PHP or Python would be great picks. Both have large communities of developers and any question you could think of asking has an answer. If I had to give an edge to someone starting out it would have to be PHP, because frankly it's just easier to get out and get deployed when you first get started. There are a lot of cheap PHP hosts where you can just throw stuff and and go. Python isn't harder to deploy once you know what you are doing, but there aren't many hosts that just have Python environments set up ready to go. If you use something like Docker the point is moot.

    If you are dead set on Ruby or Python, then I'd say Python. Django and Flask are both great frameworks that can get a lot of stuff done. If you ever got interested in doing things like machine learning then there is lots of Python stuff around that too. Python is used for all kinds of stuff so it strikes me and the more broad language.
     
    ragnar and Ryuzaki like this.
  15. Steve

    •  
    Steve

    Joined:
    Dec 29, 2016
    Messages:
    48
    Likes:
    43
    Degree:
    0
    Go with what you know.
    Failing that, go with what's popular and well documented.

    Given your situation I would go with laravel (PHP). The framework is comprehensive, very popular, has great documentation and tutorials (look at the free ones on laracasts**), and despite some valid bad points, PHP is a decent language for web stuff. Since v7 it's also pretty fast as far as scripting languages go. The laravel framework promotes producer worker queues for long running tasks, which fits well with many SAAS designs, and should you need to do a bunch of heavy tasks that PHP can't handle fast enough, it's pretty simple to rewrite you workers in something blazing fast like golang.

    **This site alone could sway the argument if you are a complete beginner. Even if you don't want to use laravel, give it a look. Very well done tutorials, all the beginner ones are free.
     
    Last edited: Apr 4, 2018
    Focused, Rageix and Ryuzaki like this.
  16. ragnar

    ragnar

    Joined:
    Dec 31, 2016
    Messages:
    174
    Likes:
    94
    Degree:
    0
    I'm not at a level of being able to make advanced web apps in any language, but I can write tools for myself and set up basic web apps in say Django.

    From that perspective, as a recent noob who learned without compsci training, I'd give a plus to Python and PHP.

    The plus with Python is the pletora of excellent beginner tutorials which, along with a minimalistic and 'pretty' syntax, makes it easy to grasp coding basics like loops and objects. One thing lacking imo with Python is the intermediate practical examples. There's a lot of basic stuff and then a lot of advanced compsci lingo advanced stuff. Not so much in between. What I mean is, there isn't that many tutorials or inspiration for making practical small web apps. It's like you go from handholding in beginning to hardcore technical lingo and implied knowledge from experts. That was my experience. I also honestly found much of the MVC object stuff in Django to be overkill for simple webapps of the type I am talking about. Flask can get around some of this for sure.

    Compared to PHP which reallt has a lot of simplish practical web app stuff which is relevant to us as online marketers. If you want to make some practical tool for linkbait or calculators etc for example, then you will probably find it quicker and easier with PHP. I'd also say that to me, there's really no need to reinvent the wheel if you're not in the wheel business or car business. If you're in the transportation business, maybe it's better to invent an app like Uber, instead of building a car which can track customer orders, if you get the analogy. I find PHP and Wordpress to deliver a lot here with all of the building blocks, not only ready (like Django), but already assembled. With custom posts, I can do pretty much everything I want contentwise, no need to build from the ground up.

    If I look at my objectives, it's content delivery plus extra functionality like faceted search, calculators, quizzes, maybe some kind of community. All this you can do with both plugins or php/jquery in Wordpress with little trouble. Particularly if you get a simple css/jquery theme that won't give you lots of conflicts.

    I am sort of stuck in the "advanced beginner" stage and that's fine for now. I use coding to make tools and save lots of money there and to add some extra functionality to Wordpress sites. For those two purposes, Python and PHP serves me perfectly. I can't comment on actual software development or customer targeted apps.