From the author: on the way to becoming a CSS master, you need to know how to debug and optimize CSS. How do you diagnose and fix rendering issues? How do you ensure that CSS does not cause performance issues for end users? And how do you ensure the quality of the code?
Knowing which tools to use will help you ensure that the front-end is performing optimally. In this article, we'll take a look at browser developer tools for Chrome, Safari, Firefox and Microsoft Edge.
Browser-based developer tools
Most desktop browsers include an element inspection feature that you can use to debug CSS. You can activate this option by right-clicking and selecting "View item". Mac users can also inspect an item by clicking on it while holding down the Ctrl key. The image below shows what you can see in Firefox Developer Edition.
Firefox Developer Edition Developer Tools
JavaScript. Fast start
In Firefox, Chrome, and Safari, you can also press Ctrl + Shift + I (Windows / Linux) or Cmd + Option + I (macOS) to open the developer toolbar. The image below shows the Chrome developer tools.
Chrome developer tools
In Microsoft Edge, you can open the developer tools by pressing the F12 key as shown below.
Microsoft Edge developer tools
You can also open the developer tools of each browser using the application menu:
Microsoft Edge: Tools> Developer Tools
Firefox: Tools> Web Developer
Chrome: View> Developers
Safari: Development> Show Web Inspector
In Safari, you may need to enable the Develop menu first by going to Safari> Preferences> Advanced and checking the Show Menu checkbox in the menu bar. Below is a view for Safari developer tools.
Safari 11 Developer Tools
After opening the developer tools interface, you may need to select the desired panel:
Microsoft Edge: DOM Explorer
Firefox: Inspector
Chrome: Elements
Safari: Elements
You'll know you've opened the right panel when you see HTML on one side of the panel and CSS rules on the other.
Note. The markup you see in the HTML panel is the DOM representation. It is generated when the browser finishes parsing the document and may differ from the original markup. You can see the original markup by using View Source Cola, but keep in mind that JavaScript applications may not have this source markup.
Using the Styles Panel
Sometimes the item doesn't look as expected. The typographic change might not have been applied, or the indentation around the paragraph is less than you wanted. You can determine which rules affect an element using the Styles panel of the web inspector.
The Styles panel is organized in different browsers quite consistent. Standard styles, if any, are listed first. These are styles specified using the HTML style attribute, whether by CSS author or programmatically using scripts.
Authors' style rules precede user agent styles. User agent styles are the default browser styles. They also have an impact on appearance your site. (In Firefox, you may need to select the Show Browser Options option to view user agent styles. This option can be found in the Toolbar Options pane.)
Properties and values are grouped by selector. A check box is selected next to each property to enable or disable specific rules. By clicking on a property or value, you can change it to avoid having to edit, save, and reload your code.
Identifying cascade and inheritance problems
When you check the styles, you may notice that some properties are crossed out. These properties have been overridden by either a cascade rule, a conflicting rule, or a more specific selector, as shown below.
Defining property and value pairs that have been replaced by another declaration
JavaScript. Fast start
Learn JavaScript basics with a hands-on example of building a web application
In the image above, the background color, borders and font size of the box are shown with strikethrough. These declarations have been overridden by the ones in the .close block, which is prioritized in our CSS.
Determining Invalid Properties and Values
You can also use the Item inspector to find invalid or unsupported properties and property values. In Chromium browsers, incorrect CSS rules are displayed with strikethrough and a warning icon next to it:
Determining invalid CSS property value with Chrome
Firefox also strips out invalid or unsupported properties and values. Firefox Developer Edition also uses a warning icon as shown below. Standard Firefox displays errors in the same way, but does not include a warning icon.
How Firefox Developer Edition displays invalid properties and values
In the screenshot below, in Safari, unsupported rules are crossed out with a red line and highlighted with a yellow background and a warning icon.
Invalid CSS property value in Safari
Microsoft Edge instead uses a wavy underline to indicate unsupported properties or values.
Unconfirmed CSS property value in Microsoft Edge
When it comes to basic debugging and inheritance conflicts, whichever browser you choose, it doesn't matter. However, I recommend that you familiarize yourself with all of them for those rare cases where you need to diagnose a browser-specific problem.
Debugging responsive layouts
Testing is best done on a device. However, during development, it is useful to simulate mobile devices using a desktop browser. All major desktop browsers include adaptive debugging mode.
Chrome
Chrome in developer tools offers a device toolbar feature. To use it, click the device icon (pictured below) in the upper left corner next to the "Select item" icon.
Chrome Responsive Design Mode Icon
Device mode allows you to simulate multiple views Android devices and iOS, including older devices like the iPhone 5 and Galaxy S5. Device mode also includes network throttling to approximate different connection speeds and the ability to simulate offline mode.
Firefox
In Firefox, a similar mode is called Responsive Design Mode. Its icon is reminiscent of early iPods. You will find it on the right side of the screen in the developer toolbar, as shown below.
Firefox Responsive Design Mode icon
In responsive mode, you can switch between portrait and landscape orientations, simulate touch events, and take screenshots. Similar to Chrome, Firefox also allows developers to simulate slow connections through throttling.
Microsoft Edge
Microsoft Edge lets you emulate Windows mobile devices, such as the Surface tab, using the Emulation tab. Select Windows Phone from the Browser Profile menu as shown below.
SitePoint.com Using Microsoft Edge Device Emulation Mode
In addition to choosing orientation and resolution, the emulation mode allows you to test geolocation functions. However, you cannot use emulation mode to simulate different conditions. network connections.
Safari
Safari's Responsive Design Mode is in the developer tools. It is similar to Firefox emulation mode, but adds the ability to simulate iOS devices as shown below.
SitePoint.com when viewed using Safari's Responsive Design Mode
To enter Safari Responsive Design Mode, select Develop> Enter Responsive Design Mode or Cmd + Ctrl + R.
In our field, it is very important to know how to accomplish a particular task, as well as to use a creative approach to accomplish it. However, this is not always enough. It is also very important to choose the right tools, with the help of which the problem can be solved much easier and faster. Indeed, very often developers receive projects "for yesterday", and time is not the last factor for their implementation. Here are the resources and tools to help you facilitate the various stages of web projects.
Layout tools
MockFlow is a Flash-based service that allows you to create wireframes with simple elements for prototyping. It is ideal for both solo designers and teams of professional interface developers, as it has all the standard set of tools for interface prototyping.
FrameBox
Frame Box is a very simple online website layout tool. You can very quickly create a wireframe using ui elements, resize them, and even set the width of the layout. You can share your layout also in social networks... Simple and effective enough.
Icons
An interesting resource for downloading free icons.
Here you can find a lot of interesting icons. After selection, you can also change its background, angle, color. The search is carried out by keywords.
This is the right place for anyone looking for minimalistic icons. They can be loaded in PNG or SVG format.
All icons displayed on this site are pure CSS and only one DIV HTML block.
A site that provides icon fonts. You just need to add the font you like to the collection, import it into css, bind a class to it and apply it in the right place. You can see an example example here.
Textures
Searching for textures is quite convenient, as they are divided into different categories.
Another interesting collection of textures. The great thing about this site is that there are quite a few categories that cover many types of textures (like lights or plant leaves) that you won't find anywhere else.
The site has a fairly large number of free textures, images and 3D models.
Stock Images
The image you want can be found without any effort.
Dafont offers a really large number of fonts, most of them are free for commercial and personal use. Here you can also see at a glance how the text will look. There are many different categories to search for. You can also find Cyrillic fonts. Have
An extremely convenient service for embedding fonts and their automatic conversion to TrueType, WOFF, EOT Lite, EOT Compressed and SVG formats. The site also has a gallery of free fonts.
You can read how to embed fonts using Font Squirrel in the article.
Identifont has free fonts in a section called Fontset. But also with the help of this resource you will be able to define the font.
The service allows you to determine which font was used if you upload an image to it. It also has many free fonts for download.
We think it makes no sense to describe this resource. But still. With it, you can select the types of fonts you need and import them to your site.
Functionality Tools
It is a JavaScript library that aims to detect if the browser supports HTML5 and CSS3. In case new features are not supported, some classes are applied for HTML tags.
Who else is somehow unfamiliar with the library, you can read about practical use on Habré.
Ringmark is a web test to determine the capabilities of mobile browsers.
Polyfills are scripts that mimic the behavior of native APIs in older browsers. You can find over 40 scripts here. Some of them:
- JQuery-Animate-Enhanced $ .animate () method to define CSS transitions for Webkit, Mozilla and Opera. Compatible with IE6 +.
- CssSandpaper is a JavaScript library with which you can create quite interesting effects.
- JQuery-Anystrecht is a plugin that focuses on modeling css3 background-size.
- Transform.js and Transitions.js are also very useful plugins that open up new possibilities.
Image galleries
Responsive image gallery with captions.
Touch Touch is an image gallery that aims to be the perfect solution for Android and IOS mobile devices.
Simple parallax - content slider with different animations.
A slider where you can place text content, images with captions, and videos. In addition, it is infinite, since the user will jump to the last image, he will automatically jump to the first one.
Sprite generators
Everyone knows the benefits of using CSS sprites. An automatic sprite generator can help us save a lot of time. This generator provides the ability to create a sprite in .png, .jpg formats plus css code generation.
Useful sites
In total, to stay up to date on trends, below are some sites that will greatly help you with this.
- The World Wide Web Consortium (W3C) is an organization that develops and implements technology standards for the World Wide Web. The W3C develops uniform principles and standards for the Internet (called “guidelines”). W3C Recommendations), which are then implemented by software and hardware manufacturers. Thus, compatibility is achieved between software products and equipment of different companies, which makes the World Wide Web more perfect, universal and convenient.
- WebPlatform.org is an open source where developers share their experiences. On the site you can read about interesting trends in HTML5, SVG, CSS3, animation, video, WebGL and more.
- Html5 Please is a great resource if you want to know what's new in browsers. In addition, there are various polyfills and rollbacks that can be used if properties are not supported.
Translation - Duty
In the kits of many professional freelancers.
Thousands of them work and interact with this CMS in order to create interesting projects and our task today is to show you the tools that will help web developers, designers and freelancers work much more efficiently and more productively, without being distracted by extraneous things.
So here's a list of 23 useful tools to make your online experience easier. Go.
As the name suggests, this tool tracks your productivity, namely the time you spend at work. It can be used by both individual performers and entire teams. It also monitors, tracks the time spent on websites, social networks, applications and just idle time (inactivity).
If you really want to appreciate what you are doing, you can take screenshots of your screen without any problems.
Asana
Asana is an excellent tool for project managers who, according to the developers, promises to free their team from the shackles of e-mail correspondence. It integrates tasks and user conversations without unnecessary switching from Email on urgent tasks. That is, everything is in one bottle.
Hall
This helpful solution is a group chat for your team. It allows you to easily and securely exchange text messages, create groups, transfer files, and more. Works great on computers and mobile devices in such a way that you will always be aware of everything.
Trello is another user-friendly program for project managers. It allows you to create cards and locations on a dedicated Trello board. You can set tasks for your team members on these cards. You can also see the activity of all your participants in a separate window. You can easily add your comments, upload and share files, sync Trello with your DropBox account, Google apps or One Drive.
I think it can be used as notes for your company and team.
Probably the most recognizable name among project manager tools. This solution is ideal for companies of all sizes and shapes. It has everything: allows you to easily manage tasks, share files, group discussions and one-on-one, events, notes, and much more useful and interesting.
Slack
Slack creates simple communication between you and your team members, as well as between clients. Just like in other similar programs, you can freely chat, throw files to each other, share documents and code. It allows you to integrate itself with a dozen apps, many of which are likely used by your team. A worthy alternative to the Hall program.
Needless to say, Google provides a lot of gingerbread and goodies for its owners. What does this include? Corporate mail with its own brand name, business calendar, documents, tables and a bunch of other useful things. A lot of free space for storing various documents on dedicated powerful Google servers for ridiculous money. Sharing documents, video conferencing, communication - all this is very beautiful and neatly built into Google Apps.
It is perhaps the most popular solution for taking notes, managing lists, reminders and personal organization of work. It works in all popular devices and devices and is also easily synchronized and exchanged with them. A great tool for a web developer, designer or freelancer. There is a whole course by Evgeny Popov on the use of this program. You can find it on the Internet and buy if you want.
A simply amazing program and tool for everyone. This is simply a must have for an internet entrepreneur. Now I can't imagine my work without him. This is an awesome virtual flash drive. If earlier I saved files by sending them to my mailbox, now I throw everything into the cloud storage. And from any device I can access my files.
Skype
The great power of peer-to-peer networks is already known to most people, one way or another connected with the Internet. Skype is an excellent confirmation of this. A cool and convenient thing, an excellent tool for doing business, free video conferencing with several users, whom you can see in real time, fast exchange of messages, files, you can simply call from your phone, paying only for the Internet connection - all this is possible can not but rejoice? Answer each one for himself.
Using the same passwords for accounts of different services is very risky. LastPass is exactly the tool that works on all devices and all browsers. Its advantage is that it safely stores passwords and you will not need to remember them. Entrust passwords of any complexity to this program. To find out more, I recommend visiting and reading the article -. Our candidate will also be among them.
Unroll.Me
Every day we receive a huge number of letters from various services in which we have registered and which have already become useless for us, but we continue to receive messages. This tool unroll.me allows you to quickly unsubscribe from all of them in one click.
It automates groups of your subscriptions so that you can read them all together without unnecessary transitions. This gives you a clean, uncluttered inbox with only the most important letters. I personally marked it myself as an important tool for a web developer. Think about it too.
Mint
Mint allows you to connect to all of your bank accounts and credit cards, and you can organize all your submissions from your dashboard. With it, you can view all your transactions, transfers, categorized and organize your personal finances. I just scream WOW! I took it to the piggy bank.
This tool is useful for keeping monetary records for non-accountants. This software will help you manage cash flows, send invoices, automatically save receipts and many other cool features. Stop creating invoices manually. Make the process easier with a solution like FreshBooks.
Shake
The legal aspects of work contracts and agreements between freelancers and clients are a real headache. Shake helps you create, sign and send official and legal documents in minutes. It is not an alternative to hiring a legal advisor, but it does manage some of the legal frameworks. Save your time.
Canva
Canva lets you create a variety of professional-looking graphics for your websites, presentations, social media profiles. It comes with an intuitive drag-n-drop interface that can be used by non-design people.
PickToChart
Picktochart makes it possible to create beautiful infographics, presentations and charts. Contains hundreds of templates inside, also allows you to upload your photos, pictures. It is ideal for those situations where you need to quickly and easily make a presentation in a short time.
Foreign analogue of Smartresponder. As you all know, using your own mailing list improves your contact with your audience and makes them more receptive to constantly making purchases. Trust marketing is just a great thing that works.
Having a base of tens of thousands of people, you can make releases for tens and hundreds of thousands of rubles in profit. This is already a proven fact. This service will just help you to recruit and send personal letters to your subscribers. By the way, you can visit my article and find out some tricks and tricks if you still did not know them.
It is a modern program for reading and receiving news from RSS feeds, which works on all devices. Using it will keep you up to date with the latest posts and news from the blogs you subscribe to. Accordingly, you will be able to react faster and leave a comment and be at the very top and get a small influx of visitors to your site. Speed is very important here. On this occasion, I wrote an article -. Come in and study.
Buffer
As you may have already guessed, buffer allows you to easily exchange and publish in various social networks. Just install it for yourself on any device or browser. Then all you have to do is click on the add to Buffer icon. This way, all your posts will be scheduled according to the schedule you set for your notes throughout the day.
There is another alternative to this service - the Revive Old Posts plugin. I talk about him in the article -
Quite a useful tool for social media marketers. It allows you to manage all your social media profiles from a single one. You can trust your team to access your account and automate your activity by scheduling new notes. It really frees your hands and saves you time.
Another worthy contender for financial reporting for freelancers and small businesses. It has integrations with credit cards, bank accounts, PayPal, and more. Every business simply must have it.
An excellent application and tool to convert all your checks, business cards into information. You can take a picture from your smartphone, and it automatically, thanks to this program, will extract the necessary data and transfer it to a paperless version. Apparently there is an information recognizer there.
At this point, I think the list of tools for developers, designers, freelancers and economists can be finished too painfully, it is impressive and the article itself is very long. Now I try to write only such articles so that they are as informative and useful for the reader as possible, because high-quality content will feed the blog owner for years.
Do not forget to click on the "Tell your friends" buttons and share links, for this I will be grateful to you. Good luck to everyone and see you in the new, fresh notes of the smart blog
What would you do if you suddenly find yourself on a desert island in complete emptiness, having only a USB drive, dial-up Internet access and a simple computer on which only an operating system is installed? Naturally, the first thing you would do is call for help via the Internet, but then what? How would you set up your design work there?
Okay, with a more plausible scenario, it's probably easier to express the point. What if your computer breaks down, all data and programs are erased, and you have to hand over the project in two days? Or maybe you want to be light on your feet, get off the spot in a matter of minutes and hit the road without long fees, taking with you only a change of linen and a USB drive. If you had the applications listed below with you, none of the scenarios described would be a serious problem for you.
The apps included in this list can help you solve everything from programming to creating graphics, running online business and managing projects - all with just one flash drive. And while USB drives are getting bigger (in my latest observations, a 64GB flash drive is no longer that expensive, and it is 4GB more spacious than my current MacBook), you still need mainly special programs to achieve full-fledged portability. The apps on our list do just that: portable and compact enough for a USB stick (often a very small one).
01. Programming
-
Portable Edition Notepad ++ (Portable Edition) - an application for writing programs with all the necessary functions for this. Compiled in C ++, runs on Windows. Freely available, released under the GPL license.
The portable version retains all the functionality of the main one. Among them: multichannel data viewing, support for a heterogeneous language environment, WYSIWYG editor (with displaying the material in its final form during processing), using autocomplete, highlighting and collapsing syntax when encoding, memorizing and replaying performed operations, and other actions. It is a great compact application for writing programs.
-
Nvu Portable is the portable edition of Nvu Web Authoring Software. Includes WYSIWYG editor and powerful file management system. Designed for non-technical users with a basic (or no) knowledge of HTML and CSS programming.
The portable version retains all the functions and capabilities of the main one. Works in various modifications of the Windows system, released under the GPL license for free access.
-
Oiko CSS Editor is a fully featured CSS, (X) HTML and portable XML editor. Works in modifications of Windows from 98 to XP. A completely reliable editor with an easy-to-use interface, displaying properties and selectors by group, a structured tree of your CSS encoding, as well as a live view function in IE and Mozilla browsers.
02. Graphics and multimedia projects
-
Blender Portable is a portable version of the Blender 3D rendering program. Powered by PortableApps.com platform. The portable version retains all the functionality of the main Blender version.
Blender has a number of functions for building skeletal animations, calculating mathematical models, creating animations and generating 3D images. The application window is fully customizable, and the elements of its user interface do not overlap or obstruct each other. Built-in text editor for annotating and editing Python programs.
-
GIMP Portable is a decent small format alternative Adobe photoshop... Although the user interface of GIMP is not immediately easy to get used to, unlike other photo processing programs, it is nevertheless quite easy to use.
The portable version of GIMP retains all the functionality of the main one, including the application of layers and filters. It can be expanded and supplemented, just like the full version of the program.
-
Lightscreen Portable - portable application for Windows, allowing you to take desktop snapshots of any of your computers. Performs five operations with variable parameters (fixing the window, screen, etc.), each of which is triggered by a new keyboard shortcut.
Lightscreen saves images in PNG, JPEG, and a few other common formats. Turns on the slow motion function of the screen image. The process runs unnoticed until it is activated using a shortcut key or a combination of both.
-
Portable Audacity is a portable sound editor for Mac OS X. Audacity has many different functions, including recording live audio, editing (including processing and mixing an unlimited number of tracks), applying effects to audio files, and setting compatibility with various file formats.
The full version of Audacity is suitable for computers running Windows, Mac OS X and Linux, while the portable version is only suitable for Mac OS X and Windows platforms. Given that this is open source software, the decision to develop a lightweight version of the program for Linux, given sufficient demand, seems reasonable.
-
Portable Inkscape is a portable vector graphics editor. Inkscape's feature set is similar to that of other vector graphics programs, including Illustrator, CorelDraw, and Xara X. Graphics are saved in SVG format(Scalable Vector Graphics).
The features of Inkscape are described in detail on its developer's website, which is very useful for beginners. The portable version is only available for Mac OS X, although the full version is also available for Linux and Windows.
-
FastStone Capture is a portable screen capture utility. You can capture anything: windows, a full-screen picture, rectangular areas, any objects, freely delineated areas, and even scrollable windows (a serious advantage over many other screen capture programs, not only portable ones).
Other features include overlaying textual explanations on screenshots, scaling them, and using shortcut keys for a number of operations. FastStone Capture only works on Windows systems, but is compatible with Windows98 and up to Vista.
-
Fotografix - portable graphics program allowing you to both edit and create images. Contains a set of drawing tools, allows for its expansion due to user settings, selection of layers and channels (including working layers and stencils), and also includes various other tools.
One of the main advantages of Fotografix is its minimal file size: only 367 Kb. If you are looking for a really compact and easy-to-use graphics editor, choosing Fotografix might be the right solution. However, in terms of its capabilities, this program is inferior to Photoshop, take into account this nuance.
-
Artweaver is a freeware portable image creation program. It allows you to instantly turn photographs into drawings and contains a large set of drawing tools. In addition, you can design new tools as well as adapt existing ones.
Artweaver also allows the use of transient transparency and layers, supports a number of graphic formats (JPG, PNG, PSD and others). Can be expanded with additional modules. Artweaver runs on Windows 2000, XP or Vista platforms.
-
VLC Media Player Portable is a portable player for audio and video files. Plays MPEG-1, MPEG-2, MPEG-4, DivX, WMV, MP3 files and many other formats. And in addition to the function of playing your media files, it can also serve as a media server, directing data streams to one or more users via IPv4 or IPv6 protocols.
-
Winamp Lite is a portable version of Winamp MP3 player software. The skins and add-ons are also portable, making it great for listening to MP3 files on the go. This version is not so easy to configure, although it does not present any particular difficulties.
03. File Management
-
FileZilla Portable is another FTP application from PortableApps.com. Supports file transfer using FTP, FTPS and SFTP protocols, as well as bulk file transfer management (over 4 GB). Lots of configuration options. It also supports HTTP / 1.1, SOCKS5, and FTP-proxy, and includes file access logging, synchronized directory browsing, and remote file lookups.
-
WinSCP Portable - FTP software for Windows including SFTP protocols and SCP, as well as a directory synchronization function. Not new, but it does all the usual file operations and has a built-in text editor. Also supports using batch files and interface command line in addition to the graphical user interface.
-
7-Zip Portable is a program from PortableApps.com for compressing and expanding archive files of several types, including 7z, ZIP, GZIP, BZIP2, TAR and RAR files. It also supports the creation of 7z and ZIP-protected archives, contains a functional file management system. Localization options for 63 languages are available with the portable version.
-
Toucan allows Windows users to duplicate and synchronize data across two media (such as your hard drive and USB drive). Fully portable application available for free download... Has a number of additional settings for creating backups files, including, can save all intermediate versions when editing them, compressing them, and also apply special regulatory schemes.
04. Testing
-
XAMPP is a portable complete web server package that includes Apache, MySQL, PHP and Perl. It comes preconfigured, so you just need to unzip and install it. It includes phpMyAdmin, FileZilla FTP Server, SQLite, Zend Optimizer, and MiniPerl, among others. It is FTP, web server, and server database in one complete package. There is also a light version that includes Apache, MySQL, phpMyAdmin, SQLite and their software packages.
-
Portable Firefox - Portable Edition Mozilla Firefox... An excellent application for those who have to manage projects on other people's computers, as it allows you to save and use your own bookmarks, passwords and settings. This version of the program does not leave traces of your stay on your work computer, so you can safely save your passwords and other data there. It even seems to adapt to whatever extensions you have installed. The app is released by PortableApps.com, which means it only works on Windows computers.
When using Portable Firefox, be sure to also download some of the add-ons available and useful for expanding your web environment.
* - For viewing and editing HTML, CSS and javascript encoding directly on the page.
* - The main CSS property viewer.
* - Toolbar for checking the correctness of HTML codes in Firefox.
* - Additional menu and panel of various tools for web developers.
* - HTML / CSS reference embedded in Firefox.
-
Instant Rails is a Ruby framework containing Ruby on Rails, Apache and MySQL, ready to run. You just need to put this application in the chosen directory and put it into action; there are no installation files at all.
-
Server2Go is a server software package available in various configurations. There are packages consisting of Apache, PHP and SQLite; Apache, PHP, SQLite and MySQL; Apache, PHP, SQLite, MySQL and Perl; as well as mini-packages (containing only the necessary files) and a “plain vanilla” package - no PHP, Perl or MySQL.
-
Portable Chrome is a portable version of Google's Chrome browser. Has all the features of the main version of Chrome, including stability and speed, tabbed browsing and launching the search engine directly from the address bar.
-
[email protected]- a portable version of the Opera web browser. Very similar to the version for desktop PCs, and its differences from the main version are not given special attention in the description of the application. Both full and (probably) portable options include tabbed browsing, password management, a built-in spell checker, and support for remembering browser sessions.
-
MoWeS Portable is a portable web server for Windows. Tested on its modifications from Windows 98 to Vista. Free application released under the GNU / GPL license. This server is based on Apache, MySQL and PHP. The main difference between MoWeS and many other portable server packages is that you can include a number of software options in the download configuration of MoWeS, including TYPO3, WordPress, PHPMyAdmin, OS Commerce, Drupal, Mambo, Joomla! other.
05. Planning and improving labor productivity
-
Dia Portable is a diagramming application similar to Microsoft Visio. However, unlike Visio, it is more intended for building work diagrams, that is, more suitable for everyday use. Works with XML files, but is also capable of converting files to EPS formats, SVG, PNG, WMF and XFIG. Using Dia, you can also print diagrams (including multi-page ones).
Compatible with Linux systems, Unix and Windows. With this application, you can draw UML diagrams, flowcharts, and other types of graphs.
-
Mozilla Sunbird, Portable Edition is a Windows and Linux compatible calendar application. A standalone calendar service with a full set of functions, perfect for scheduling work schedules and managing projects in the usual way.
-
ToDoList is a portable task scheduler and project manager. Allows unlimited task splitting for more convenience. And it saves your task list in XML format so you can format it with stylesheets.
ToDoList is constantly evolving, it is suitable for managing IT projects as well as for managing less specialized environments (like the GTD method). In addition to the English version, the app is also published in French and Spanish.
-
Task Coach Portable is another scheduler for keeping lists of your tasks and current projects. Its features include an easy-to-use user interface that allows you to easily plan and organize activities, track the progress of their implementation, as well as calculate the budget for specific projects, set start and end dates for each of them, etc.
06. Business activity
-
GnuCash Portable is another application from PortableApps.com. Free access service for financial reporting with most of the functions inherent in commercial financial planning programs. Allows you to boo. double-entry accounting, maintain stock / bond mutual fund accounts, and process invoices and payables / receivables.
GnuCash is great for day-to-day bookkeeping and bookkeeping in the small business sector. The accounting journal is designed in the form of a checkbook to make it easier for beginners to get comfortable with it. It also contains the forms of reports, charts, allows you to make calculations in different currencies, reconcile bank statements, etc.
-
OpenOffice.org Portable is a version of the OpenOffice.org open source business suite from PortableApps.com. Includes all applications of the main OpenOffice.org edition: Writer (word processor), Calc (spreadsheet), Impress (presentation software), Draw (graphics editor), and Base (database).
OpenOffice.org is a great alternative Microsoft Office in the form of a free and freely available software package with almost the same high functionality. Very easy to use compared to many other office packages, and it's free.
-
AbiWord Portable is a word processor capable of opening files created in various text programs, including, Microsoft Word, Word Perfect, Open Document (OpenOffice.org), Office Open XML, RTF, HTML and others. Has all the basic functions of a standard word processor including spelling and grammar checking and auto-composing letters from fixed forms.
The portable version is based on the PortableApps.com platform and runs on Windows 2000, XP or Vista. Additional modules are available to extend the functionality of AbiWord.
07. Other useful applications
-
Sumatra PDF is a compact, portable free PDF viewer for Windows. It is portable in itself, so there is no more "portable" version of it. Driven by keyboard shortcuts, and can be configured as your primary PDF viewer.
-
Eraser Portable is a portable version of the Eraser security application. Allows you to permanently delete files from your hard drive by overwriting them with designated templates. Free open source application (licensed under the GNU General Public License). A very useful service for those who constantly work with secret data, since it can be used to cleanly erase all traces of the original file.
-
OperaTor combines the capabilities of Opera and Tor so that you can browse the web anonymously from any computer. The one to which your USB drive or other portable device is connected does not leave any of your data, which is very convenient when using a shared PC. The app also contains Polipo, a cached web proxy that provides anonymity and security at an extra level.
-
If you need to be in touch with colleagues or clients, Portable Windows Live Messenger 2009 is a great solution to this problem. This version saves everything Windows functions Live Messenger 2009, but comes in a portable format that allows you to connect it from any USB drive. However, its capabilities are much wider than that of a simple instant messaging service: you can also send documents, communicate via voice and video messages.
-
Foxit Reader V3.0 is a Portable Freeware Collection product. With Foxit, you can open and read PDF documents on the go. But keep in mind that, according to the comments on the download page for this application, it can be difficult to install and configure.
-
KeePass is a password manager for Windows. Free, open access, while helping you not to lose passwords to FPT-accounts, mailboxes, websites, etc. It saves everything in one database file, which can be opened with either a key or a key file.
-
TrueCrupt is a portable encryption program that creates a virtual encrypted disk and installs it as a real one. You can encrypt an entire partition or the contents of a USB stick. The application uses parallel and pipelined processing of data, which makes it available as quickly as without encryption. Remember that TrueCrypt asks for administrator access to files to open them, which becomes a serious problem when using shared computers.
-
Pidgin Portable is a portable version of the Pidgin (formerly Gaim) instant messaging client. Supports AOL, MSN, ICQ, Jabber and Yahoo Internet pagers. It can be supplemented with encryption modules for secure instant messaging.
-
WinPT Portable allows you to encrypt files on your flash drive and then unlock them without installing any special software. The service is still being finalized, so it can malfunction, but, in general, according to reviews, it is designed very competently. The only condition is parallel launch, also available as a portable application.
-
Trillian Anywhere allows you to connect the Trillian instant messaging client from a USB stick or drive. Thanks to it, you can take your contacts and settings with you wherever you go, and use the portable version of Trillian with full functionality on any computer with an Internet connection.
There are tons of tools out there for web developers. Some of them are really irreplaceable, others can be used from time to time, performing any specific tasks. These tools have one thing in common - they help turn good ideas into great designs. New tools appear very often, and the rapid spread of cloud technologies has already led to the fact that some developers practically do not use programs that need to be launched from hard disk- all the tools you need to work can be found online. FreelanceToday brings to your attention the 10 best tools for web developers.
Tim Petrusky, a developer from Germany, has created a very interesting site. He launched a web service called We Love Icon Fonts, which works the same way as Google Web Font, but not with fonts, but with icons. Its collection is constantly growing, so that many developers will be able to find icon sets on the site that can be used in their projects. You can connect the required set in just a few minutes. It is enough to write the code provided by the service in the CSS and after that the display of icons will be provided by We Love Icon Fonts acting as a hoster.
Maskew is a very interesting Javascript library that allows you to quickly create skewed elements. The site has an example of how you can achieve the desired effect. Sometimes these elements look very impressive and it will be helpful to know that there is an online tool created specifically for this.
The UXPim service is a tool that can come in handy when collaborating on projects. It is designed to quickly solve UX-related problems. The service creators are specialists who are well versed in various aspects of UX. One of the very important benefits of UXPin is the ability to collaborate in real time. This allows you to track errors in time at all stages of creating a website or application. A very useful tool that allows you to work on a project while testing it for usability.
This shadow generator can be one of the most useful tools in a web developer's arsenal. It can be used to create beautiful shadow effects for a wide variety of fonts. You can find a huge number of free themes on the site. To apply the effect, you'll need to download the code and embed it in CSS. Using the tool opens up great opportunities for designers - the presented effects can be applied to headers, banners, logos and any text blocks.
Over API is a service that will be appreciated by all web developers without exception. This is a resource where you can find a tip regarding any question related to the creation of sites and applications. Everything is laid out on the shelves, so it won't be difficult to find the information you need. Basically, it's a huge online developer cheat sheet. Knowing about it, there is no need to keep everything in your head - the required code, script and much more are just a couple of clicks away.
Scratchpad is a text editor for working with HTML and CSS. Works in real time, immediately shows how the code will be displayed, it can also be used to exchange links with other users. Also Scratchpad can close tags itself. An ideal tool for learning and teaching HTML / CSS.
CSS3 Generator is a very useful tool, especially for web designers who are not familiar with CSS well enough. If you have forgotten something or just don't want to spend time creating code, you can use the CSS3 Generator. Everything is very simple there: you just need to select the desired effect, adjust it using a few sliders, copy the code and paste it into your project. The service can be used both for its intended purpose and as a tutorial - depending on how the code changes depending on the selected settings, it becomes easier to understand how you can quickly achieve the desired result.
Viewport Resizer is a simple and convenient tool for testing websites for responsiveness. If you need to see how the site will be displayed on various mobile devices, just drag the blue button with the inscription ClickorBookmark to the tab of the site already open for testing. A panel with icons of various devices will appear at the top of the page: smartphones, tablets, laptops. By clicking on the icon, you can see how mobile friendly the site is. The service shows Apple devices by default, but using the settings you can choose any other screen resolution.
The MakeAppIcon tool converts the original image into a PNG application icon. This simple operation can be easily done manually, but the service can save a little time, since the selected image is resized to fit all standard sizes of icons for Android and iOS.
When developing websites, sometimes you don't have the right images at hand. But if you know the size of the picture, then you can take any image that will act as a "fish". But why waste time searching and processing images if there is a very useful tool Fake Images Please? This service generates a dummy image from a URL that can be used in design work. You can choose not only the size, but also the color and even the text.
