Weeell it’s been since 2016 that I posted anything. May as well. A short list of random tools and things that help me in the day-to-day. Cross-Platform Tools Espanso – text expansion tool. I use it for lorem ipsum and a few other neat pet tricks such as getting the current date or converting the date to/from UNIX timestamp. I have a private GitHub repository and some bash aliases I use to sync this easily with commands such as espanso-push and espanso-pull. It also has a really neat CLI. Obsidian – neat Markdown based journaling and knowledgebase tool. I use […]
Displaying Website Projects in Web Development Portfolios
There are multiple methods for displaying a website project in your portfolio, with pros and cons to each. This is a very frequent question as far as I’ve seen. Many people are unhappy with flat screenshots, and want to show something more. So they wind up thinking about WordPress multi-site and other very complicated solutions — but there are easier ways to display your projects in web development portfolios.
Creating Successful Contact Forms
Creating successful contact forms is important. On your website, a contact form is often a primary means of getting in touch with you. For most people, this means money! Money is good — don’t throw it away with poor contact forms. Here’s a really good analogy from Marcin Treder on Design Modo: Let’s compare the online to the offline world. This always puts things into a familiar perspective. Let me make a simple analogy: form validation is the equivalent of having a conversation with a salesman right before a purchase – when everything is still on a knife’s edge. If […]
Non-Technical Freelance Front End Developer Skills
These are skills you might find useful as a freelance web developer. You’ll notice they are not relevant to actual web development. If you’re working in a larger environment, it can still be useful to note the basics of these: someone who understands basic limitations of other people’s jobs is usually easier to work with, and can sometimes provide cross-disciplinary insight. However, in a larger organization you’ll also probably have another person — if not a department with multiple teams — to worry about these things, so it’s not as crucial.
Basic Speed Optimization
Speed optimization is important for your website. It is very easy to build a bloated site, and that’s obviously bad — but why an optimized site? Several reasons: You use less server resources (thus your site is more scalable in the face of lots of traffic). Your site loads faster, meaning: Human visitors are less likely to click away from your site (people give about 2-3 seconds for your site to start showing content before leaving). Search engines give preference to faster sites in search engine rankings (NB: albeit very slight, and as one factor in many). Both of the […]
Basic Server Administration
The separation between server administration and web development is hazy to most beginners and non-technical folks alike. They are related and there is crossover (especially with the advent of servers specifically designed to run applications built on a certain technology). But rest assured — administering and maintaining a web server is generally a different skill-set altogether from web development. For a related analogy: the person who builds the fancy safety systems in a new car might not know the first thing about building the car’s frame. Nonetheless: as a web developer, you will benefit from knowledge of basic server administration […]
FOLAS Gets a New Website
Happy to announce that one of my local animal shelters has a new website! FOLAS has a complete site redesign live as of today. I created a new custom WordPress website for them after their old site was hacked. Read more in my portfolio!
Fixed Position Click-to-Call Mobile Phone Number Code
The code here helps you show, for your mobile website only, a mobile phone number stuck at the top of the site, following the user as they scroll down the page. The HTML <span class=”desktop-phone”>(555) 555-5555</span> <a id=”floating-mobile-phone” href=”tel:+15555555555″>(555) 555-5555</a> The CSS /* ======================== mobile phone ======================== */ a#floating-mobile-phone { display:none; } @media only screen and (max-width:600px) { a#floating-mobile-phone { /*theming-related: colors, fonts, sizing, etc. edit at will*/ background-color:#558a93; color:#fff; text-align:center; font-size:18px; /*positioning-related: don’t edit unless you’re css-confident*/ display:block; position:fixed; top:0; left:0; width:100%; z-index:9999; } }