#I am learning HTML CSS whatever code against my will | Explore Tumblr posts and blogs

tap-tap-tap-im-in · 7 years ago

Text

A Web Development Master Post

I’ve spent the last two years working as a professional developer. I didn’t go to college for this, and just about everything I know I’ve either taught myself or learned from looking through other people’s source code as we research if we want to pull a project into our code base. I love it, and I have done some things I never would have expected from myself at the start. But before we get into any of those, I wanted to put together a list of resources I wish I had or worked with more fully when I was sitting in my job interview two years ago. Think of this as part resources on how to learn some of these skills, some recommendations on applications to incorporate into your workflow, and a few opinions on some of the other common applications that you’re welcome to heartily disagree with.

First things first lets get a few resources together, and for those of you who are already familiar with HTML, CSS, JavaScript, and PHP, none of these will be a surprise. It might be worth your while to jump ahead.

Online Resources

https://www.w3schools.com/

Starting out, W3 schools will probably be pretty omnipresent for help. They have tutorials for HTML, CSS, JavaScript, PHP, ASP, and many other web technologies. They pride themselves in being the largest web developer site, and unfortunately that has a downside. They don’t always update all of their articles to the most current specifications. This is a wonderful resource, as they do a good job of explaining a lot of these concepts in a beginner friendly way, but when you’re ready for nitty-gritty details, it’s almost always best to go with a more specialized developer resource.

https://css-tricks.com/

CSS is a powerful and flexible tool. Every day I see projects where developers have pushed it to new heights, but sometimes it’s a little arcane too. Well the wizards over at CSS-Tricks have collected a large number of articles and tutorials that explain everything from how z-index works to how to use newer layout-centric rules like Flexbox or Grid. If a CSS rule is misbehaving, 9 times out of 10, I can find a clear and concise reason on this site, and more importantly, I find many recommendations on how I can achieve the same effect differently.

https://flexboxfroggy.com/

Speaking of Flexbox, Flexbox Froggy is a one-note kind of resource, but it teaches all of the core concepts behind flexbox, and it can also teach CSS savvy managers why moving to a new layout methodology would benefit your work flow.

https://cssgridgarden.com/

Created by the same developer as Flexbox Froggy, and it does the same thing with Grid concepts.

https://developer.mozilla.org/en-US/

Mozilla’s developers have been at this game a long time, and their resources are next to none. In my opinion, this collection does not do much help a beginner understand, but the trade-off is that once you’re over that initial hurdle, the information you’re looking for is almost always only a few clicks away. This is the first, and often the last, place I go whenever I’m looking to solve a weird JavaScript bug that the rest of the internet is too clever to have encountered, (or to explain why only IE9 is seeing it).

http://php.net/manual/en/index.php

I know PHP isn’t a popular language right now, but it’s powerful, it’s flexible, and it’s still the primary language of the largest and most popular CMS on the planet, for better or worse, WordPress. Especially if you’re going to work freelance, you owe it to yourself to at least be familiar with PHP, and this will be your best friend. It’s no nonsense, and not beginner friendly, but it’s clear, and the comments on the articles are often as helpful as the articles themselves.

https://codex.wordpress.org/Developer_Documentation

Speaking of working in freelance (or even for a firm like I do), I have my own opinions about the way WordPress works, but you’re going to be doing projects in WordPress, and you aren’t going to be able to accomplish them without this. I have a small problem with the way functions and parameters are explained (it isn’t always easy to differentiate how one calls a function manually, or if it is called by filters, or how it is different from they three other functions named roughly the same thing), but I do know that the WordPress core developers work very hard, so there is always a method to the madness, even if you don’t have the key to see it.

https://stackoverflow.com/

When you get to the debugging stage, you’re going to become familiar with Stack Overflow pretty fast, as it almost always dominates the first few google results for a problem. Now, I’ve had developers try to scare me away from using Stack Overflow because it is open for beginners and experts, and sometimes it’s hard to tell quality of answers, but I strongly disagree with that. While it’s true you should always look cautiously at using someone else’s code right out of the box, there are a lot of members of the community that go out of their way to explain what the code is doing, and those are the answers you should be looking for. You don’t have to use their code, but if you can understand why you had the problem in the first place, you grow as a developer, and now have the tools to solve the problem. Stack Overflow is a big part of the Open Source community, so it’s always nice to give back at least as much as you take, so if you see a question you have the answer to, feel free to share.

https://github.com/

Eventually, you’re going to run into a project where you need a plugin developed by someone else, either because you don’t yet have the knowledge or you don’t have the time, but the client needs the functionality. 9 times out of 10 you’ll find what you need on GitHub, and honestly, you should be getting together your own GitHub with plugins and projects of your own. No matter how single purpose they may be, you’d be surprised how useful things can be in very specific situations. GitHub, like Stack Overflow, is a big part of the Open Source community, so it’s always nice to give back when you can. Make suggestions or report problems you have with any projects you pull, and in doing so you’ll make the community a better place.

Applications for Windows Based Developers

Now, for the next section let’s get into some tools. I love gaming, so I have a Windows computer at home. I don’t really know why we’re wasting money on a Windows license at work, but we are so I can mirror the full stack in both locations. Here’s what I use.

https://notepad-plus-plus.org/

When I first started, my boss insisted I use Dreamweaver for everything. I have nothing against Adobe, and their products are quality, but Dreamweaver was way more trouble than it was worth. Everything I cared about from Dreamweaver I can do in this free and Open Source program, with some extra functionality I find it extremely hard to mimic in Dreamweaver. Notepad++ is fast, stable, and hugely extendable. If you’re doing this as a full time job, I strongly recommend switching to a dark theme for the sake of your eyes. Blackboard is among my favorites (unless you’re trying to write Python). I also really love its macro functionality, I have a couple of re-used DOM structures programmed in there right now as well as my multi-line comment format.

https://winscp.net/eng/download.php

Arguably, the best part of Dreamweaver is the built in FTP client that lets you push changes directly to the server, but set Notepad++ as your primary editor in this, and suddenly you even have that feature, as this will sync temp folders back to the server. This is probably the best FTP client I’ve seen on Windows, with full support for SFTP and SSH (built on PuTTY) with all sorts of encryption and authentication options. It’s also hugely configurable and fairly dependable. If you’re working on a remote server using a Windows machine, this is probably how you should be accessing the file system.

https://www.putty.org/

I hope that as a web developer you don’t have to learn to be a server administrator, but as a web developer I am telling you you’ll probably have to learn at least a little bit about Unix/Linux server administration, as they are by far the most popular web server stacks out there, and you’ll be controlling them with an SSH client at some points, even if a web interface is available. This is a great one, with all sorts of authentication options, so if (like us) you know you need root access to a server remotely, but you don’t like the idea of protecting that with just a simple password, you can set up Public/Private key pairs with encryption passphrases.

http://www.wampserver.com/en/

Let me be clear on this: WAMP, which stands for Windows Apache, PHP, MySQL, is great to have. It’s good for training, it’s good for prototyping tools without having to wait for a virtualized server to start up, but the differences in environments between running Apache, PHP, and MySQL on Windows versus Linux will bite you eventually. Don’t expect to be able to push anything you worked on in WAMP directly to your Linux based server without having to fix a few problems here and there. That said, I have a number of things I run in my WAMP server all the time (linting, IP geolocation, domain DIGs, and a few others). It’s a great tool, but it isn’t a replacement for a staging server.

https://www.virtualbox.org/

You should be using a virtual machine for your staging server. That way you can simulate things like network communications and how your code will actually be run on Linux. Virtual Box is free and powerful. You’ll need to get ISOs for whatever operating system you intend to run, and you should be aware that at least some versions of Windows have it written into their License agreement that you can’t run them virtualized.

https://www.gimp.org/

Gimp is powerful. I don’t really know how to use it well. It’s always been one of those things where I know I need to sit down and teach myself, but since I’ve fallen far into the trenches of server backend work, I haven’t ever had the motivation. Mostly, I use this to resize images when I notice that a website is loading a 14MB PNG on the homepage for some unknown reason. Please designers, think of the mobile phones, keep total page loads (Including all resources, pictures, scripts, and DOM structure) as close to or below 1MB as you can, especially if your site is supported by ad revenue, as there’s no telling how much the ads will need to load on top of that.

https://tools.stefankueng.com/grepWin.html

GrepWin is an implementation of Grep functionality on Windows. For those of you who aren’t aware, Grep is a terminal tool on Linux/Unix that uses a very efficient algorithm to search through large amounts of text for whatever you define, be it flat text, or something represented by a regular expression. It’s super useful for renaming an included document or global variable, and can really save your bacon if your error reporting is being vague. I like this particular implementation because it has context menu integration, so it’s as easy to use as right clicking in the directory you want to search in and telling it to search. It also supports text replacement with backups, so this simple tool is extremely useful more often than I’d like to admit.

https://gitforwindows.org/

The last tool is an implementation of Git for windows that also includes a Bash terminal. This is important because a lot of developers work in Linux, and so installation directions might only be available as Bash code, this makes it easy to move past that step without being bogged down translating that into Windows CMD code. This is a full implementation of Git, so it comes with all of the version control features and easy project building that Git provides. If you end up working with Electron or Node.JS in general, you’ll end up leaning on this pretty hard.

And that’s it. I’m hoping that later this week I can get into more interesting stuff, but I wanted to have a foundational post of the resources I might reference and the tools I’m using for people to fall back on. It’s the kind of thing I wish I had to reference when I was starting out, especially since all of the tools I’m using now are free and Open Source, and making that change has sped up my workflow significantly, as the only application I’ve listed here with any noticeable boot time is Gimp, something I hated about Dreamweaver every time I had to shut the computer down for whatever reason.

I plan on coming back to this post periodically and updating it as my opinions change, or I become aware of other resources that should be on here. Eventually I’ll also be lining out a software for Linux section, but I’m still shopping around for an affordable and stable Linux development machine.

Next time I think we’re going to dive right into some anecdotes about code commenting and design patterns, and why it pays to think about those from the beginning. Nothing glamorous, but I’d argue hugely important, and you get to laugh with me about some dumb things I’ve done.

#web development #php #javascript #coding #stephentkennedy #tutorial #resources #programming #css #html

4 notes · View notes

suzanneshannon · 5 years ago

Text

Reactive jQuery for Spaghetti-fied Legacy Codebases (or When You Can’t Have Nice Things)

I can hear you crying out now: “Why on Earth would you want to use jQuery when there are much better tools available? Madness! What sort of maniac are you?” These are reasonable questions, and I’ll answer them with a little bit of context.

In my current job, I am responsible for the care and feeding of a legacy website. It’s old. The front-end relies on jQuery, and like most old legacy systems, it’s not in the best shape. That alone isn’t the worst, but I’m working with additional constraints. For example, we’re working on a full rewrite of the system, so massive refactoring work isn’t being approved, and I’m also not permitted to add new dependencies to the existing system without a full security review, which historically can take up to a year. Effectively, jQuery is the only JavaScript library I can use, since it’s already there.

My company has only recently come to realize that front-end developers might have important skills to contribute, so the entire front end of the app was written by developers unaware of best practices, and often contemptuous of their assignment. As a result, the code quality is wildly uneven and quite poor and unidiomatic overall.

Yeah, I work in that legacy codebase: quintessential jQuery spaghetti.

Someone has to do it, and since there will always be more legacy code in the world than greenfield projects, there will always be lots of us. I don’t want your sympathy, either. Dealing with this stuff, learning to cope with front-end spaghetti on such a massive scale has made me a better, if crankier, developer.

So how do you know if you’ve got spaghetti jQuery on your hands? One reliable code smell I’ve found is a lack of the venerable old .toggle(). If you’ve managed to successfully not think about jQuery for a while, it is a library that smooths cross-browser compatibility issues while also making DOM queries and mutations incredibly easy. There’s nothing inherently wrong with that, but direct DOM manipulation can be very hard to scale if you’re not careful. The more DOM-manipulation you write, the more defensive against DOM mutation you become. Eventually, you can find yourself with an entire codebase written that way and, combined with less-than-ideal scope management, you are essentially working in an app where all of the state is in the DOM and you can never trust what state the DOM will be in when you need to make changes; changes could swoop in from anywhere in your app whether you like it or not. Your code gets more procedural, bloating things up with more explicit instructions, trying to pull all the data you need from the DOM itself and force it into the state you need it to be in.

This is why .toggle() is often the first thing to go: if you can’t be sure whether an element is visible or not, you have to use .show() and .hide() instead. I’m not saying .show() and .hide() should be Considered Harmful™, but I’ve found they’re a good indication that there might be bigger problems afoot.

What can you do to combat this? One solution my coworkers and I have found takes a hint directly from the reactive frameworks we’d rather be using: observables and state management. We’ve all found that hand-rolling state objects and event-driven update functions while treating our DOM like a one-way dataflow template leads to more predictable results that are easier to change over time.

We each approach the problem a little differently. My take on reactive jQuery is distinctly flavored like Vue drop-in and takes advantage of some “advanced” CSS.

CodePen Embed Fallback

If you check out the script, you’ll see there are two different things happening. First, we have a State object that holds all of the values for our page, and we have a big mess of events.

I’ll admit it, I love custom HTML attributes, and I’ve applied them liberally throughout my solution. I’ve never liked how HTML classes often do double-duty as CSS hooks and JavaScript hooks, and how if you use a class for both purposes at once, you’ve introduced brittleness into your script. This problem goes away completely with HTML attributes. Classes become classes again, and the attributes become whatever metadata or styling hook I need.

If you look at the HTML, you’ll find that every element in the DOM that needs to display data has a data-tag attribute with a value that corresponds to a property in the State object that contains the data to be displayed, and an attribute with no value that describes the sort of transformation that needs to happen to the element it’s applied to. This example has two different sorts of transformations, text and color.

<h1 data-tag="titleColor" data-color>jDux is super cool!</h1>

On to the events. Every change we want to make to our data is fired by an event. In the script, you’ll find every event we’re concerned about listed with its own .on() method. Every event triggers an update method and sends two pieces of information: which property in the State object that needs to be updated, and the new value it should be set to.

$("#inc").on("click", function(){ State.updateState("num", State.num + 1) }); $("#dec").on("click", function(){ State.updateState("num", State.num - 1) }); $("#firstNameInput").on("input", function(){ State.updateState("firstName", $(this).val() ) }); $("#lastNameInput").on("input", function(){ State.updateState("lastName", $(this).val() ) }); $('[class^=button]').on("click", function(e) { State.updateState('titleColor', e.target.innerText); });

This brings us to State.updateState(), the update function that keeps your page in sync with your state object. Every time it runs, it updates all the tagged values on the page. It’s not the most efficient thing to redo everything on the page every time, but it’s a lot simpler, and as I hope I’ve already made clear, this is an imperfect solution for an imperfect codebase.

$(document).ready(function(){ State.updateState(); });

The first thing the update function does is update the value according to the property it receives. Then it runs the two transformations I mentioned. For text elements, it makes a list of all data-text nodes, grabs their data-tag value, and sets the text to whatever is in the tagged property. Color works a little differently, setting the data-color attribute to the value of the tagged property, and then relies on the CSS, which styles the data-color properties to show the correct style.

I’ve also added a document.ready, so we can run the update function on load and display our default values. You can pull default values from the DOM, or an AJAX call, or just load the State object with them already entered as I’ve done here.

And that’s it! All we do is keep the state in the JavaScript, observe our events, and react to changes as they happen. Simple, right?

What’s the benefit here? Working with a pattern like this maintains a single source of truth in your state object that you control, you can trust and you can enforce. If you ever lose trust that your DOM is correct, all you need to do is re-run the update function with no arguments and your values become consistent with the state object again.

Is this kind of hokey and primitive? Absolutely. Would you want to build an entire system out of this? Certainly not. If you have better tools available to you, you should use them. But if you’re in a highly restrictive legacy codebase like I am, try writing your next feature with Reactive jQuery and see if it makes your code, and your life, simpler.

The post Reactive jQuery for Spaghetti-fied Legacy Codebases (or When You Can’t Have Nice Things) appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.

Reactive jQuery for Spaghetti-fied Legacy Codebases (or When You Can’t Have Nice Things) published first on https://deskbysnafu.tumblr.com/

0 notes

horsebitesfence · 5 years ago

Text

One year Sober – Sophie Helf interview

How is New York ? We know from Twitter and your guest spot on the Death Panel Podcast that you spent a year working toward moving back there, and you made it! How has it been going so far?

– It’s been wonderful. The past year was incredibly difficult – going through surgeries, relearning to walk – but I knew I wanted to move here so did whatever I could to heal up quickly. So far I’m quite happy here! It’s nice to be able to see all my friends, go where I want, explore different opportunities. Simple things feel so good – having my own room, living with nice people, ‘hustling’ for work (ha!). Not a fan of the weather though.

We really love your piece for the Outline, where you talk about inspo porn, being a little worm and how you love your legs. We I hear you’re getting new prosthetics – how do they compare, and might they lower the chance of another infection? That must have made the move that much harder (and more inspirational).

–– Thank you! My new prosthetics will actually be vacuum-powered – every time I take a step the ends of my legs sort of get ‘sucked’ into the prosthetic, so to speak. Everything is custom made, from the liners to the sockets, so it’ll be a lot harder for my legs to chafe. The infection was miserable but has healed up pretty well so far. Sometimes the leg still hurts but not nearly as badly as it did before.

They sound cool and we hope it goes on healing really well.

You’ve been tweeting about using the subway since you’ve been back there. From here it seems like New York’s public transport infrastructure is pretty run down – kind of hostile for users in general and especially for disabled users. Has that been your experience?

–– The infrastructure can be pretty shit, depending on which station you’re at. The one near my place is just a set of stairs leading underground that I have to carefully waddle down (though I’m getting better at that). Most people here stick to the ‘keep right’ rule, which is nice, but there have been occasions when I’ve had to dodge someone and almost fallen down. At the larger stations with various train lines there are elevators and escalators, but if you’re at a smaller one it’s probably just stairs. Good exercise, I suppose, but for people with mobility issues it’s incredibly unfriendly.

Sort it out NYC. You’ve lived in London, SF and New York; how do the three cities compare in terms of transport, access, attitudes?

–– The Bay Area actually has a fantastic subway system for disabled people. Every MUNI and BART station has an elevator and the trains can easily accommodate someone in a wheelchair. London stations were squeaky clean and most stations had elevators, even at the farther-out ones; I took it for granted at the time, but looking back it was very well put together. New York definitely has the most unfriendly transport system, but from what I’ve heard there have been rallies to make it more accessible, which I’m hoping leads to something better.

Yeah, London’s public transport infrastructure’s pretty good, but there are just so many people, and not everyone is good at keeping left or moving carefully. It doesn’t help that the UK is one of the few countries where you’re supposed to pass on the left side, whereas London is such a global city that many people naturally tend toward the right.

It’s better not to travel at rush hour if you can help it, but that’s not always possible, and it’s also pretty restrictive. London Transport now do a ‘please offer me a seat’ badge, but we also need ones that say ‘don’t push’, ‘give me space’, ‘keep your distance’ . Or maybe just ‘keep the fuck away from me.’ And more ‘keep left’ signs – it makes such a big difference.

–– London transport gets so incredibly crowded, more than in New York or San Francisco, I think – I definitely understand why you’d avoid rush hour! I generally try not to go places during rush hour; seeing as I’ve mostly been working from home, it’s been easy to avoid it. I’m hoping to get a 9-to-5 job, though, and am not sure how I’ll deal with the crush. Stay posted for developments!

Yes! Best of luck! And best of health insurance.

One of the many things to love about your Twitter is the way you tweet on MH stuff, and meds, and coffee, and coffee on meds. You also tweet about sobriety. What’s it like being at NY parties sober?

–– I’ve definitely had my mental health issues in the past, which led me to getting sober. It’s the best thing I’ve done for myself, I think; my mental health, though not perfect, is doing better without the guilt I used to get when I’d wake up after a messy night out. I don’t really mind people drinking around me (or doing coke in some cases – oof) and people have been really respectful of my decision not to participate. I feel really lucky that hardly anyone’s pressed me on why I got sober; if someone does, I just say ‘I felt like it’ and don’t go into anything deeper because I don’t really owe anyone an explanation.

Yes to respectfulness, and to not owing. And congratulations on a year sober.

[One Horse Bite discloses: I spent years feeling shame about MH stuff, being in denial and trying to ‘act normal’, which in hindsight has had distorting life-effects. I held out against doing psych meds for a really long time, even though they’re almost free, thanks to the NHS, what’s left of it – maybe that’s why they don’t get pushed on people here so hard. After my accident, I finally gave myself permission to try meds, maybe because I felt like it gave me a concrete reason to need them, one that carries less stigma than mental illness. And then I still wasn’t ok! Both due to the accident and because I was already not-ok, pre-accident. The accident was the last straw really; like I had no spare capacity to handle it. Invisible Strings / @M_Kelter, who tweets on autism and depression, suggests that in place of ‘comorbidity’, we might use the term ‘meanwhile’. Meanwhile, I had to begin to address the MH stuff I’d already been carrying, and admit to myself I’d been carrying it all that time, as well as with the accident. Meds were helpful with that, even tho it took a bit trial and error to find the right ones; for most of last year I was on what seemed to help at first, and then made me increasingly and dangerously disinhibited. There were – incidents, including but not limited to shouting ‘walk left’ at people on the underground. Still no ragrets – sort of; once I found the right meds, or the more-right ones, anyway, I kind of wished I’d started on them years ago, though it’s important to stress that nothing has helped so much as finally having stable housing for the first time in my adult life, post-accident. Also to note that my being in a state of ‘invisible homelessness’ at the time of the accident was a key causal factor in the accident itself. Meanwhile –. ]

Sophie, you went to art school, but studied design rather than fine art, and are now a coder; so while you’re art-world networked, hopefully you’re a bit less subject to the horrid vicissitudes of all that. How did you get into coding?

–– I was at Central St Martins from 2012 to 2015, a couple of years after they moved into that awful Granary Building. Very strange being there; they insisted that the great corridor in the centre was a space for collaborating, but you had to get express permission from tutors or higher-ups to put things there, and – I hated this – your tap-card could only get you into your studio. So if you were a design student and wanted to go into the fine art studios, you’d have to borrow a fine art student’s card to get in. It really kept all the different programmes separate from each other and discouraged collaboration in the end.

–– I got into coding after coming back to California from CSM without a Bay Area design/art network, without any idea how to get a job. I needed a portfolio site to present my work on but hated all the templated ones (Cargo Collective etc.), so decided to learn a bit of HTML and CSS to build one myself. To my surprise, I really enjoyed it, so started learning JavaScript as well. Choosing whether to professionally pursue coding instead of design was a huge decision to make, but eventually I decided ‘fuck it’, successfully applied to and attended a coding bootcamp.

Now I do front-end development, which focuses on the look and feel of a website and how a user interacts with it. It’s been interesting navigating the different splits and rivulets of ‘the coding world’, so to speak; there’s ‘the tech community’, which I do feel separate from as I tend to view coding just as something I do and not an entire lifestyle. Code can intersect with art and design in tons of different ways and I do like Twitter as a tool to keep up with some of the people I admire.

Can we be really prurient and ask what you meant when you tweeted about missing mid-2000s SF ?

–– I like this question! I guess it was a tweet that was sort of mourning what San Francisco used to be like back before it was stuffed and crawling with tech people. I was in high school in the mid-2000’s and specifically remember San Francisco as – scuzzier, I guess; still kind of eerie and loose and a little more dangerous. I was a little shit back then and spent a lot of time at a park called Dolores Park, which used to be crusty as hell and filled with naked hula-hooping people and boozy high schoolers passing around bad weed (including me and my friends). Now it’s squeaky clean and gets stuffed with frat kids on the weekends. I’ll admit that I do love to complain about current SF a little too much. Cities do change, of course, but it makes me sad that SF is so incredibly unaffordable and losing much of the weird, wonky character it used to be known for. It does still constantly smell like weed and piss though, which is oddly comforting.

Is that what made you so keen to get out of there, aside from the glut of other coders, and the fact that it’s your home town – or was it more about getting to NY ?

–– Honestly I think you really hit the nail on the head re: tech people and hometown. It’s a tiny city and I felt like I’d explored every corner, done everything I wanted to there, and got a little tired of bumping into parents of kids I went to high school with while I was buying a Diet Coke at the grocery store. And yes, I really wanted to go to New York – a lot of my friends live here, and it’s a whole new city to get to know and explore. I’ve been here for a couple of months and feel like I’ve seen a tiny droplet of what’s out there, which I like. And, truthfully, it’s cheaper both transport-wise and rent-wise, which is important while I’m freelancing while looking for a job, and will continue to be nice once I’m salaried – more to save for retirement, health insurance and occasional fun things. I’ve wanted to live here since middle school so it’s nice to, you know, be here. I like it a lot.

Sophie, thank you! Enjoy New York.

Thank you for interviewing, this was very fun!

#sophie helf #disability #zine

1 note · View note

topicprinter · 8 years ago

Link

**Thanks for the massive response on this everyone. I run a business during the day and wasn't really planning on this much feedback - I have tried to get back to everyone best as possible and will continue to do so as best as I can. Why am I sharing this? Steel sharpens steel. There isn no shortage of this work and many won't even try (thats not a dig). There are millions of websites and no matter how good they are now they need to be redone every few years anyway. A few will try though and as I scale up next year I would love to work with those who are as driven as I am.Those who doubt this money need to rethink what is possible. 10k+ is only one or two big websites a month. These figures are not that big in the larger scale of things but its only possible if you think it is. I was in the same place last year doubting I could even survive on web design but as I progressed I seen there is plenty of well paying work available. Again though its not easy and it is time consuming. None of this is meant to sound like I am preaching but rather just to confirm its possible. I hope to post on selling more tonight if possible. Thanks for reading so far** (tried to get this bold but couldn't?)Hi Guys,I started a small web development company this year in January and I wanted to document my journey from making nothing for the first few months up to a steady income of over $10,000 a month. This isn’t all profit as I will explain but it’s been good so far and my best month was $17,000+. Apologies for my rant-ish writing and hopefully some of you get some value out of this.*** This isn't some magic get rich formula but it is a great way to learn some useful skills and get paid decent money to help people’s businesses. Also the profit and skills can be quickly used to start your own business. It takes a lot of work though and plenty of hours sitting at your computer – just want to be realistic from the start! ***Backstory: I used to work as a drilling engineer in Alberta, Canada (I am Irish) but when oil crashed I was let go pretty fast. I decided to travel in South America for a month, which I loved, but I had to go back to Canada and try find some more work. Even though I had made some good money in oil I spent it as fast as I made it and I was back to very little savings. I worked some odds jobs including moving furniture for an events company and other things. I got pretty sick of it and decided to risk it all and sell everything I owned non-essential and move back to South America. I moved just before Christmas last year and rented a small apartment in a quiet neighborhood. I slept on the ground on a mattress and basically had nothing but a desk, laptop and Wi-Fi connection. I had never successfully made money online before and I had no idea where to start. I tried Instagram marketing for a month and failure miserably. I did get some comments from Gary Vaynerchuk though which was cool.I ended up doing a Udemy course to build a website for a product I was working on. I actually really liked the website and I found coding kind of fun. I decided to give this a go and went to work.Months 2-5: First stop was UpWork, which was brutal. I did about 3-4 months on here in total and it was pretty rough. I got some good clients but most were dicks and after some kid changed his mind for the 20th time on a $100 website I quit. I never made more than $200 and most websites took me two weeks to build (multiple changes, clients were slow, kept changing their mind).Months 5-6: After that I decided to just start approaching people I knew and I did some websites for $200-500. They were mostly for small businesses that didn’t have much cash flow and could not afford to pay me much. The websites were okay but they weren’t getting great results for their owners so I didn’t feel like I could charge much.Months 6+:At the time I was doing some legal work for Canada and the person I was working with had a terrible website. One day I asked her if she would want me to fix it (broken pages, terrible design) and she immediately said yes. She said she had been meaning to do it for years and badly needed it done. She said name my price. I picked the highest figure I could think of since I knew she had a very profitable business -$2,000!It took me about 4 weeks to finish but I felt super happy about it. I spent a LOT of time on having it look great and making sure the images and copy (text) was perfect. When I gave it to her she loved it. Afterwards I asked her if she had gone with a real web design company what price would she have been happy to pay for the exact same website. Her answer… $5,000-6,000. Whoops.After this job I figured out a lot of what I had been doing wrong. I had been trying to get smaller companies to pay for websites that they would see very little ROI on. They would never be able to pay much because they just don’t make much. Or they do make a bit but having a good website doesn’t help them make more (good example is a gym - you just go to the nearest gym or the one someone recommends, a cool website won't help too much).I completely changed my strategy and started approaching larger companies that made a lot of money and were losing A LOT by having a terrible website. These are actually not too hard to find (if people want I can cover this is another post) and after a lot of cold calls and emails I started to get traction. I moved from $2,000 to $4,000 to $6,500 and after a few more up to $15,000. I read a lot on sales, marketing, design but I still only knew basic HTML and CSS. I would start off with a basic theme (around $30) and make a lot of changes to come up with a great design.Now I know people might be saying that isn’t the best coding practice (and it is not) but I added a lot of value in other areas and everyone was super happy with their websites. They are simple static designs (these owners don’t want to edit anything again for a long time) but the results were really powerful.One business got a over 10 times increase in bookings (value 40-90k a month in future clients)Directly helped an oil company close a contract for over 1 million with a great new website (portfolio, downloadable brochure)Helped a pro athlete increase his sponsors and also get more recognitionThese are just a few examples but I am really happy with every one so far and my clients love to rave about the websites and the success.Quick recap: - I started with zero coding knowledge in January of this year. I didn't know how to host a website, I didn't know what HTML or CSS was, I made a tonne of really basic mistakes and figured it all out by myself. I didn't take any expensive courses, had no mentors and probably only spent a few hundred dollars getting set up.It took me a while to refine my niche but what I now focus on now is building simple yet powerful websites that get huge results. I usually charge between 4-15k and usually have a waiting list of 2-3 websites.While I made good money on these websites its nice to know that the value I added is many times more and all my clients have been very satisfied.I am still in the early stages of figuring this all out though so I will continue to add to this post with more lessons if people want.So my humble advice on how to begin:*** I only build "custom" HTML websites, I don't know/use wordpress except in some rare cases for add on blog/news sections to my sites. Why? Most of my clients are very busy, non-tech people. They don't want or have time to update their websites. They want it built well and they want it to run itself. HTML is a lot better for this and when done right looks way more professional and requires less maintenance (IMO). I don't have anything against WordPress just that I prefer to use HTML and both work fine for what I am doing. ***How to quickly begin with HTML:Take the HTML and CSS lessons on http://ift.tt/NNLzWO. You can also do the JS section but I didn't and have been just fine.Next take the following UDEMY course (non affiliate): http://ift.tt/2fGwPO8 this you will now know how to edit and work with HTML themes. What does that mean?Well there is no point creating a website from scratch. That takes years of coding experience and a lot of time for each new clients. Luckily enough people have gone and created HTML themes - its an already coded website where you just rearrange, switch out the pictures and text and add in a few extra bits. I am making this sound simpler than it is but its still quiet simple.An example of a theme is here... (again non affiliate)http://ift.tt/2gAuYPG just a blank slate with a certain style that you work with. While this may seem like strange or cheating (I thought this was how to learn to build websites!??) its not. Anyone with an Internet connection can create a website these days so that is not where I try to add value. I add value by building a website with a purpose. I aim to build websites that get results and make money, or whatever they are trying to achieve, for the owner. Its not about code, its about how it helps the owner.*** I hope this doesn’t piss off the obviously good coders on here, I do my best to code well but I am still learning ***So how do you build a website that gets great results?Good question.So first important thing is your clients want sales not a website. They don’t want a website that looks amazing, has cool videos and sections, talks about the companies recent golf tournament or how they really wanted to do X since they were 5 UNLESS it helps gets sales. Everything must be about getting a result.Every page, link, click and action on the website is to help facilitate the growth of the company and sales.Lets take for example an immigration lawyer website...Is the goal of the site to teach you about immigration law? Is it to show you stats of work, trade and education within the country? Is it to teach you about what to do when you first arrive, what to pack, what to expect?No.The whole purpose of that website is for the user to either book a consultation or contact them regarding their services. Which both lead to that person hiring them as their immigration lawyer.Now it might use some of the above points to help with that goal but it only has one main purpose. Everything we do for that client must help with that goal or if it doesn't help... be removed.Once you sell results there is no limit to what you can charge and achieve.So where do a lot of people go wrong?The types of clients you help.Imagine for a second the website you build will only ever generate one sale per year. Maybe only one sale ever.Now lets go over some businesses you could build a website for...Client one: Jimmy & Friends Coffee Shop. One sale is a cup of coffee or maybe if they are lucky a lunch special. One sale profit: $3-10 profit maybe.Client Two: Jimmy & Co Travel Agency. Maybe that one sale is a trip to Paris, or maybe even a round the world one year break. Profits on travel are slim though and the internet is really driving down those juice margins. One sale profit: $150- $1,000 profit maybe.Client Three: Jimmy Inc. Industrial Clean Up Services. Now this website is not on the sexy side of things. It won't exact be winning website of the year award or going viral on FB but... One sale of a large scale clean up at that oil refinery this winter... Maybe $500,000 to $4 million. Maybe more.Now when it comes time to sell websites you always want to aim to get your clients ten times the results that they invest in you.So lets do the maths...Client One: You can justify 30c - $1 Client Two: You can justify $15 - $100 Client Three: You can justify $50k to $400,000.It’s the same amount of time dealing with the client, same amount of time coding, same amount of time hiring a pro photographer. Very different result.Now what you charge is your own choice. But the above example should clearly show who to build for:ConstructionIndustrial ServicesEngineeringOilLegalMedicalOther Blue Collar nichesThe first four are my favorite. Unsexy, boring, aggressive clients (people are scared to call them which I like!), potnetial large contracts."Hey but what about tech start ups and that new app, they are making a zillion dollars. Lets go build for them!!!"No way and here is why...They are in the design and internet business, they know guys already or have minimum wage slaves to work round the clock on design and websitesThere is no shortage of guys trying to approach the "cool" companies for web designYou will always be replaceable and undercut by othersThey won't see your valueYour aim is to become a problem solver for large, boring, industrial companies that know nothing about the internet and want to deal with a "regular guy" to fix that website.*** Disclaimer ***While $15k+ a month (sales) might sound like a lot it’s not really. It’s enough. Enough to invest in my real businesses and cover my basic living costs. Not every month is clean profit. I reinvest a lot of money into education, design and growing. Things go wrong and learning from scratch is hard work. Some jobs run overtime, some things I have to do twice, or three times or more.I am not sipping cocktails on some beach while I go code once or twice a week on a hammock. I have since got a bed but I still live quite humble. I code 8 - 10 hours a day and also spend half the morning at Uni trying to learn Spanish.This is a crash course on entrepreneurship while you earn money. You have to learn to sell, cold call, manage, outsource, and so on. Everyday. Coding websites is time intensive by nature.If you are looking for easy money this probably isn't it. If you are looking to learn about business really fast though while funding and learning how to grow your own business this is excellent. Just want to add that in before someone thinks this is some overnight hack plan.Next year I am going to focus on scaling more and bringing on some part time staff. At the moment I have some copywriters and use some people off UpWork and Fiverr. There is a lot more I could talk about but this post is huge. I have posted some of this info on another forum before but I wanted to added it here since I have got a lot of value from a few posts on this sub reddit before.I will answer whatever questions you might have. I also have a little FB group where we help each other out... http://ift.tt/2gqjmf0 (no business or spamming please - its just to help each other)Thanks for reading, hopefully not too many typos.1st Edit:Thanks for all the positive comments and feedback. I will try get to everyone soon.I got through maybe half those comments and I will hit up more later after work. Sales seems to be a common theme so Ill expand on that too.Hope this advice helps. I won't be "proving" anything but hopefully my advice shows I know what I am talking about. I definitely am not a great coder but the work I do has added a lot of value and revenue to my clients so I feel great about what I have done. This and other forums (fastlane forum) have helped me a lot over the years so its great to give back. I actually had some doubts about posting here since its a big wilder than other threads but I like the pressure and it helps me step up my game. Ill be back later tonight to post more. Thanks.2nd and final part: SalesSide intro note: This was a simple AMA, I am not out to prove or convince anyone. If you think 10K a month is some huge figure you will approach it as such. It is not, its 2 big sales, or 1 small sale. There are a billion terrible websites. Learn to sell (from real resources not a quick reddit thread) and you can get in on this action. I know guys doing 40-50K a month with this stuff as a small team, and I know people doing 100-200k a month in ecommerce. 10k is small. When I started it seemed huge but its better to try focus on how little sales really make up that figure. I won't be responding to any more 20 point lists. I don't care and particular posters failures or bitterness doesn't change my reality. Anyway its only like 5 people but they keep posting - use that energy and pick up a phone!How to find jobs when you are first starting: GoogleAs for finding companies that could need a new website its very easy. In fact its probably one of the easiest services to find potential customers for.Job formula: Google... "niche industry" + "local town" and go through the first few pages of results. Anything that looks below par is suitable. I try go for companies that are clearly doing well but haven't updated the website in 3-6 years. You can usually tell by the date in the footer.For example I google "Carpet search Calgary", Within the first few searches this site came up...http://ift.tt/2i5fcdH a 4k job. Nice thing is he is ranked high on Google but has a poorly converting site. I don't have to focus on SEO or convincing him people will visit since its already on the first page. All he needs now is good copy, images and a clear path of desired action for customers to take. I would probably start the phone call off with that.You could do that all day and not run out of companies that need a better website.I go for certain niches - guys that probably don't like to deal with web companies. A lot of the companies outside of bug cities are run by red blooded, blue collar guys. The last thing they want is some "nerd" ( I am a secret nerd) they have to deal with. I run a no-bullshit web design company and know the way these people like to do deals and communicate. I don't talk about "migrating hosting" I just simply say the website has to be moved etc. I have 3 years experience on the oil rigs and grew up in a construction family so I know how to get on well with these guys. I think thats one main area that sets me apart.I hear a lot of "our current web guy is impossible to deal with, he is really weird / annoying /lazy / arrogant ". Its not a tough game to be better than the rest and Im only getting started. You can see by some posters on any coding/business forum that their attitude is not helping - be "cool", friends, helpful and useful. If you are stuck on this read How to Win Friends and Influence People. It works.Now let me show you how this works in realtime (don't all call this person at once ha)... Today (like right now) this guy is using Adwords for "Immigration Lawyer Canada" ... http://www.somjen.com/ Thats an expensive search. Go check out that site. Easy sale. Already spending money, you just need to redirect it.Web design is the easiest business in the world to find new sales - you have a full list of them anytime you search anything.I have already covered what to say when they pick up in the comments below. If you can't sell to people with sites this bad then please go work on that, its key to making bigger money.Once you do a few websites, and get great results, it is even easier to sell. Slowly move up to larger and larger businesses. As you move up you will need to improve on some things like invoices, email communication, information request forms etc but you can learn it all as it goes.Ways to even boost more sales... - Sales guys on commission (covered below) - 10% referral or free work for businesses that promote you - Working the network - Lets say you do a website for X Service in New York, then when its done call every other X Service in nearby cities. Show them your results OR call every other different business that is geographically close to X service. Work the connections - Believe in what you do. I love helping people and I love my websites. If you treat this as some money scheme or scam people will be able to tell and you get sales. If you look at this thread its like 90% upvoted because I gave a lot of value upfront and people responded, its the same with companies. Not everyone will respond (just like this thread ha) but you only need 2/3 a month.AIM BIGI did just as much work for $150 a month as I did for $15,000. Well maybe a little more work now but not much. Sales for a HUGE site and a small one takes the same amount of time, so does emails, so do calls, so does hosting, so does invoicing, so does 100 other things. The only bid difference is design and code but that is only 30% of a job.My point is it is easier to aim big. Aiming big pushes you harder and gives you the reward to keep going. Aiming small sucks and everyday is a drag. I have been there. So instead of dialing the small cafe dial Jimmys Tow Truck company, believe in what you can do and what you can achieve.Well that is it. This wasn't a "here are the super secrets to $$$", it was an AMA. These are my best answers and I hope you enjoyed them. I am still learning and still growing. I mess up all the time still but I keep the show on the road. If you think I am definitely wrong about X - maybe I am, but enough of this works to hold it all together. I got a lot of great responses and I am very grateful. If I was starting again I would have loved to see something like this and it probably would have saved months of time. Scarysaturday if you ever come to South America Ill buy you a beer to cheer you up.Thanks everyone.

#/r/entrepreneur #reddit

0 notes