Posts

Showing posts with the label Web

Best Free Online Image Editing Tools

Image
There are lots of online image editors available, but I find most of the free ones difficult to use as they’re peppered with ads and most have limited features or the advanced features are “pay to use”. Meanwhile, the high ends are just expensive for me. I was digging deep into Google’s search results and found a lot of free services that have clean and professional interface. For moderate users, try Fotor , PhotoFunia , and DoneSmart's Photo Editor . Pixlr is a free full-featured online image editor with layers. Pixlr has the basic and easy to use Pixlr X and the more advanced Pixlr E. Pinetools have a lot of image editing tools too. Resizing and cropping are accessible to the public, but more advanced features require a login, which is free. Hatchful is a free logo maker by Shopify, account is needed. For desktop image editor GIMP , InkScape , Paint , and Pixia are highly recommended. For batch editing, renaming, resizing, converting, and watermarking I'm using XnConvert

Best Way Of Tipping The Web

Tipping is a form of gratuity, a recognition or appreciation of something like a useful content or online service, a helpful video, an exemplary music, etc. When you like a post/photo on Facebook you click the "Like' button, but in tipping you back it up by paying a micro amount(usually in cents) called a tip to the content/service provider. Sites like Flattr  cater to tipping, however, it uses PayPal for payment processing and I have a very nasty experience with PayPal . I avoid it like a plague. If you're a supporter of Buy Me Coffee type of tipping, check out at Ko-fi and Buy Me A Coffee . AddThis offers a Donate Button that supports Amazon Smile, Cash.Me, Patreon and Venmo, on top of PayPal.  Since tipping involves micropayments, I think Bitcoin is better suited for this purpose. With Bitcoin it is hassle-free to send tiny amounts and doesn't entail any deductions or fees. Plus it doesn't require any integration of third party buttons/links on your website,

Best Free Premium WordPress Theme Resources

Have a site that's based on WordPress and planning to change the theme? Or planning to put up a WordPress site? Aside from the official site , NicePage  is full of high-quality themes and all of it is free. You can browse their huge collection by type and color. For every theme, there's a demo and accompanying details to help you decide which one to use. TemplateMonster is also another good source. My sites are using Astra and also in some of my projects. It is free, lightweight and customizable. Among all the themes I've tried, it is the only one that didn't break the existing design. It works with a lot of page builders especially Elementor . Here's some free themes they recommend. ThemeForest sometimes give premium themes for free, but with no support and updates.  Materialis comes with a Companion plugin that turns it into a drag and drop front-page builder. The free version pretty features rich.

Best Free Website Monitoring Services

Image
If you own a website, the least you want to happen is downtime, so its very important to use a website monitoring service.  UptimeRobot offers free site monitoring that sends email alerts every time your site goes offline. The free plan has a 5 minutes monitoring interval and you can add up to 50 monitors. It comes with 1 status page. Not bad for a free plan. There are four monitor types, but I'm using only the http(s) and ping. In http(s), the service regularly sends requests and decides if it is up or down depending on the statuses returned. While the ping type involves sending Ping(ICMP) requests and the status is determined "if responses are received or not". This makes ping ideal for monitoring the server and confirms if the problem just affects your site or it is caused by the server itself. I'm using it on my website and I find it very effective, it is able to detect and notify me about blips in uptime. A better option is FreshPing  by FreshWorks . The free pl

Best Free Online SEO Tools

Image
SEO or Search Engine Optimisation is the process of getting traffic from the “free” and “organic” search results on search engines. Major search engines such as Google and Yahoo display web pages and other content such as videos and images based on what they consider as most relevant to users. Websites and contents are ranked, the exact mechanism involves a lot of factors unique to each engine. If you're interested to know more about SEO read Moz's article here . SEO is a giant industry in itself and encompasses a myriad of specialties. To spare you the time and effort of learning it, there are a lot of sites that offer free SEO services in a golden platter complete with an accompanying spoon and fork, haha. If your site is new, it needs to be submitted to search engines.  Attracta offer tools that increase your site's traffic. They have a Google blacklist checking, search engine submissions, link building and a lot more.  EntireWeb is another site that offers free submis

Best Free Data Visualization Tools

Image
Data is more than just numbers and text, it is information that maybe of value. It takes special skills to turn meaningless data into an understandable, impactful and engaging presentation. Patterns, trends and correlations are easily recognizable using data visualization tools and services. I've been involved with quite a few web projects that require graphs, but with advancements like HTML5 and CSS3, data presentation goes beyond the standard lists, tables and graphs that people are used to. There are now tools that take visualization to a whole new level. JavaScript Frameworks Let's begin with ones that require good old coding. Personally, I use  ChartJS for my projects. Here are some self hosted JavaScript(JS) based visualization libraries:  Chiasm ,  Dygraphs  and  JavaScript InfoVis Toolkit (JIT). If you prefer Python, Bokeh  is for you. For non developers, whine not as there are online services that allows you to generate stunning visuals with less tinkering. Online Ser

Best Free HTML Resources

Image
HTML is short for HyperText Markup Language. It is a computer language used to create websites. A link or hyperlink is a special text that's “linked” to another page. This allows navigation through the web. It is called HyperText because as what “hyper” connotes, you can go to any place on the Internet where ever links lead you in no particular sequence. Markup specifies the code for formatting, both the layout and style, within a document. Using tags, content is formatted into italics or bold, for example. HTML is constantly evolving to meet the demands and requirements of the ever-growing Internet under the direction of the World Wide Web Consortium (W3C). The current version is now HTML5. Below are some useful HTML resources I've collected. Quick, what's the code for ©? No need to grab that book or search online, go to HTMLSymbols and  Entity Code . It has a complete list of all HTML symbol entities and their equivalent name and number. They grouped the entities into ta

Best Free Research and Writing Tools

Image
In my free time, I write articles for my blog, as such I've used several web services to help me come up with better content. Though I admit my writing style reflects my personality and character no matter what I used. Below are some of the best free research and writing tools. Google Search is a ubiquitous tool, my Web Development career wouldn't have been possible without it. It may seem to be a simple and straight forward process to us. But in reality, in order to ensure the quality of search results, its way more complicated. In order for users to understand, they created a dedicated page that explains  how Google Search works . The amazing thing is its more than just a search engine. There's a lot more you can do about it. Read  some of the “tricks” you may find useful  here  and  here . Research and information gathering is an important part of the process. Nimbus Notes and Clipper allows you to save snippets of information & media from the web. Available as ex

Best Free JavaScript Tools

Image
JavaScript or JS for short is a high-level and object-based programming language. It enables you to create dynamic content, control multimedia, animated images, etc. Along with HTML and CSS, JS forms the indispensable core of the World Wide Web(WWW). Below is some of best free JS-based tools you can use in a web development project. Sweet Alert 2 is a beautiful replacement for JavaScript's own "Alert" and a lot more. It can show images and HTML content but not an iframe. It's not just limited messages, it can accept input and display confirmation. You can download it for free and have it integrated with just a few lines of code. As a home-based Web Developer, it is common to get a project that will test not just your skill but also your will to solve problems. Recently, I'm assigned to rip off a specific site's audio player built with HTML & CSS. Easy, but the code that runs the player is nowhere to be found. That really complicates what is otherwise just

Best Free Security Resources And Tips For Online Accounts And Devices

Image
Got password problems? Have you already decided on what password to use? If not yet, no worries. I get you bro, a password is no small thing. Choose an easy one and your account might be compromised in a few minutes. To help secure your online accounts, check the cool resources below. Read guides on how to create the "perfect" password here , here and here . RandomKeyGen is a password and key generator, useful when a secret key is needed. They can generate Fort Knox quality keys. So now that you have a password in mind, how would you know that it is really "strong"? Kaspersky has a password strength checker that's fun to use. You enter the password and it gives you an estimate of how long it can withstand a brute force attack. Mine will take more than 3 centuries, haha. If you are lazy like me and don't want to sweat over passwords,  LastPass is an easy-to-use password manager that also has a password generator . There is no need to download software, j

Best Free Website Localization Tools

Majority of the world's population aren't well verse in English, if you intend to cater to this segment you'll need to localize your website. It means providing your visitors the means to read the content using their preferred language. Both Free-Website-Translation and ConveyThis offers a nifty free to use button that shows a selection of popular languages to translate content into. It's easy to generate the code for website integration. Plus, no registration needed. Speaking of translation, if you are interested to know the English equivalent of Hiligaynon terms then head on to Bohol.Ph . The dictionary is based on Kaufmann's Visayan-English Dictionary which is considered as one of the best dictionaries with regards to the Hiligaynon language. The dictionary has over 1000 pages and was first published in 1934 in Iloilo. Hiligaynon is spoken in Panay and Negros islands and is the fourth most spoken dialect in the Philippines. Do you know what higugma means?

Best Free Font Resources

A beautiful or sexy image is one way of gaining attention. In websites, text content can be pleasant to look at using the right font type, size, and color. Below are some of the best free Font resources to help transform bland words into eye candies. Google Fonts have a huge collection of font families. It is easy to integrate into a web project because it's hosted. There's no need to install on web servers. It's downloadable for desktop use. Google also have Noto , a font family that aims to support all the world's languages. Tagalog is right here .  To use, follow the installation instructions here . Selecting the right font combination in a project is an art. TypeConnection pairs fonts together based on font family, font style contrast or similarity and history. Spend hours dabbling by trial and error. But for those who don't have the luxury of time, select from tried and tested predefined matches . The site also has a lot of resources on typography . There'

Best Free Online Peer To Peer File Sharing

Image
File sharing is an integral part of web development and what's the faster way to share than Peer to Peer(P2P). P2P allows the sender to transfer file/s directly to the recipient without storing any data in an intermediary server. However, for the transfer to be successful, the connection between the sender and receiver must be maintained until the download is complete. In the online realm, this means the sender's tab in the browser, where the transfer was initiated must be kept "alive". The sender doesn't have to be a medical practitioner to do this, just keep the tab open. I've collected some of the best P2P services out there. Here are some of the criteria for inclusion: Well, we already know that it is fast, so the main factor here would be the file size. There must be no limit. No registration required. No need to provide recipient email, message, etc. Everything must be online. No need to download software. No need to use Flash or plugins or othe

Best Free Website Live Chats

Live chat is a must for all websites, especially if you are offering services like mine. Visitor's may need to talk about a possible project and I must be there to reply in real time. What features I am looking for? It must be a totally free service, no sneaky pay for upgrade gimmicks. No ads, I'm sure there are other more creative ways of generating income. It offers private one on one messaging. Highly customizable settings. No limitations whatsoever. Most importantly, it should be very easy to use and integrate. Wow, that's too much to demand a free service, but I did find one that meets all the criteria. Tawk.To offers a full-featured live chat widget. Although it is free, it has all the bells and whistle of a commercial version such as visitor monitoring and advanced trigger support. There are no limits to the number of agents you can add or how many messages you can send and receive. Integration just involves pasting a short JavaScript code. If you prefer a public ch

Best Free Website Development Tools and Admin Tips

Image
Every time I have a new web development project, I make it a habit to create a prototype on my PC first. It speeds up work. If you are testing a possible solution, you save the code and just press F5. You can see the result immediately, no need to wait for the page to finish loading. Among the many Windows-based web servers available, I use AMPPS . It allows you to create web applications with configurable Apache, PHP, and MySQL on your desktop. For basic needs, it is a complete package and comes with PHPMyAdmin. One of the factors that why I like it is, it's ease of use. Download it, install and it's ready to use, everything is set up automatically. To start using, go to https://localhost/ on your browser. The second thing is, unlike others of its kind, this one doesn't have any port conflicts with communication programs like Skype. Sometimes you think that your website is slow, when in fact it is your internet that is slow. To test internet speed, try Fast , it instantly

Best Free Flat UI Resources

Are you a fan of Flat Design or Flat UI(User Interface)? Flat Design is a minimalist style and is aptly named because unlike skeuomorphic(real life like) or three dimensional design concepts such as drop shadows and gradients, it uses few elements, clean typography and flat colors. It focuses on content without sacrificing visual appeal. Since it is using less elements, websites load faster and are more device responsive. Personally, I think this is the future of web/app interface design. Flat UI gained traction after Microsoft released Windows 8 which is based on their Metro design. FltDsgn.Com have many examples of websites that use Flat Design concepts. If you want to implement this new interface in your site/app, there are lots of kits that can help you get started. You can find a list a of mature Flat design UI kits here and here . Here's a collection of Flat based WordPress themes . If you like colors only, FlatColors.Net have a huge array of color variations to choose fro

Best Free CSS Tools

Cascading Style Sheets popularly called CSS is a language for describing the presentation web pages. It specifies the color, layout, and fonts of a markup document like HTML. Its separation from the structure or content results to easier site maintenance, sharing of style sheets, customizable and responsive pages that are device independent. Together with HTML and JavaScript, CSS provides the basic building blocks of a website. It is thus essential for any aspiring Web Developer to know basic CSS. For more advanced components, there are lots of free online CSS tools available, haha. First things first, learn and speak the lingo at CSS Vocabulary . Just click the sidebar text to see "which is what". One of the most vexing problems one is likely to encounter in web development is centering things. Guess the tool that solves this. HowToCenterCSS of course, haha. If you prefer using CSS sprites there are tools for that too. For those not familiar, a sprite is a very nifty techni

Best Free Popup Scripts

There are lots of instances in web development where popups are needed. To display an enlarged version of an image or an exit popup are few examples. It looks simple, but it is actually one tough task to work on. Integration in existing design and layout is challenging. It must be able to evade popup blockers, on top of cross-browser and device compatibility issues. jQuery Pop Up Window plugin is a responsive all around script. In fact, it is my preferred choice. See demo here . Exit popup is a popular and effective tool for milking the most out of a visitor that is leaving your site. It pops up when they're about to close the tab or browser, always catching their attention.  Beeker  has created a responsive exit intent popup script that has a lot of features yet easy to use. Plus it has documentation.

Best Free Sources Of Test Data

It is very cumbersome and time consuming to make up data for testing web applications or software in general. To make things easier next time around, I've searched on test data generators and found some good services to use. See them below. For personal information, FakeNa.Me offers basic details like name, address, phone and email. The email is a ready to use but temporary account from Teleosaurs.Xyz. Additional info such username, password, gender, date of birth and even US social security number are also provided. Fake Name Ganarator is another site, but more data and easier to use. In e-commerce applications, Visa, Mastercard, American Express and Discover test credit card numbers can be obtained from Stripe  and Paypal . You can assign any CVV, expiry date and personal information to the number. Just make sure that the expiry date is in the future. Mockaroo is a full feature commercial data generator. You can add any type of field. And I mean any type, CC numbers, JSON arra

Best Free Online Color Tools

Image
Eye-pleasing color is an essential component of web design. Bad color combination will turn off visitors and as such, creating a palette is a skill in itself. Luckily, there's no need to sweat it out, there are several online services that focus on nothing but colors. Have a colorful reading below. Wouldn't it be nice if you can use color names instead of cryptic hexadecimal or RGB(Red Green Blue) value? Personally, it is easier to recall colors by name and because of this I use Color Names , haha. If you're just interested in colors, Adobe Color has pre-made themes. Checkout their popular and most used . You can create your own too. They also have a feature that allow you to generate a theme based on an image . However, a website's colors are determined by a lot of factors. One of the most important is the contrast of the foreground and background. The WCAG 2.0 is a comprehensive guideline to achieve the right contrast ratio, but we will not be dealing with the techn