Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
  • Stas Ustimenko
    Stas Ustimenko

    CodeLobster IDE - free PHP, HTML, CSS, JavaScript / TypeScript editor

    • Like 1
       (0 reviews)

    In this article, we suggest you to get acquainted with the free editor of web languages - CodeLobster IDE. It is presented on the software market for a long time already, and it wins a lot of fans.

     CodeLobster IDE allows you to edit PHP, HTML, CSS, JavaScript and TypeScript files, it highlights the syntax and gives hints for tags, functions and their parameters. This editor easily deals with those files that contain a mixed content.

     If you insert PHP code in your HTML template, then the editor correctly highlights both HTML tags and PHP functions. The same applies to CSS and JavaScript/TypeScript code, which is contained in HTML files.

     The program includes auto-completion function, which greatly speeds up the programmer's work and eliminates the possibility of errors.

     

    2.png.edc5045cc35a78c94dfadfb858c26c05.png

     

    CodeLobster IDE provides contextual help on all supported programming languages, it uses the most up to date documentation at this moment, downloading it from official sites. So we can quickly get a description of any HTML tag, CSS attribute, PHP or JavaScript/TypeScript function by pressing the F1 key.

     The built-in PHP debugger allows you to execute PHP scripts step by step, sequentially moving through the lines of code. You can assign check points, view the process of the work of loops, and monitor the values of all variables during the execution of the script.

     Other useful functions and features of the IDE:

    • A pair highlighting of parentheses and tags - you will never have to count parentheses or quotation marks, the editor will take care of it.
    • Highlighting of blocks, selection and collapsing of code snippets, bookmarks to facilitate navigation on the edited file, recognition and building of the complete structure of PHP projects - these functions ensure easy work with projects of any scale. 
    • Support for 17 user interface languages, among them English, German, Russian, Spanish, French and others.
    • The program works on the following operation systems: Windows 7, Windows 8, Windows 10, Mac OS, Linux, Ubuntu, Fedora, Debian. 

    The professional version of CodeLobster IDE provides the programmer with even more features.

    For example, you have an opportunity to work with projects on a remote server with use of the built-in FTP client. You can edit the selected files, preview the results and then synchronize the changes with the files on the hosting.

    In addition the professional version includes an extensive set of plug-ins:

    • Fully implemented support for JavaScript (and TypeScript) libraries, such as jQuery, Node.js, AngularJS, AngularTS, BackboneJS, EmberJS, VueJS and MeteorJS.
    • A large set of extensions that help to work with PHP frameworks - CakePHP, CodeIgniter, Laravel, Phalcon, Smarty, Symfony, Twig and Yii plug-ins.
    • Plugins for working with the most popular CMS - Drupal, Joomla, Magento and WordPress.
    • Also CodeLobster IDE has special plug-in for Bootstrap.

     

    We can download and install any framework directly from the program without being distracted from the main tasks.

     In general, for a year of work, our team had no complaints against the editor. CodeLobster IDE works fast, does not hang and allows us to work even with large PHP projects.

    You can download CodeLobster IDE from the original website:
    http://www.codelobster.com/


    • Like 1


    User Feedback

    Join the conversation

    You can post now and register later. If you have an account, sign in now to post with your account.

    Guest

  • Similar Content

    • By ©Jimi Wikman
      Database relations in Pages is a very powerful way to bring content from different databases into entries of ther databases. In this example I will show you how I added the People in project area in My Projects.

      Creating the Database
      I started by creating a new database called "People Profiles". It will be a database just to hold the data as it will not be publicly presented anywhere outside of the My Projects area. just to make it easier to work with I created a page and added the database to it. I also made the page available only to me so I can use it, but it will not be visible to anyone else.
      Then I decided on the fields that I wanted to use. I want to use an image, so I activated the record image. Then I went through the data I wanted to add:
      Name Title Awesome URL Linkedin URL Instagram URL Twitter URL Homepage URL Working area These are the basic fields. I realized thad I will probably have multiple versions of the profiles depending on when in time I worked with them. To search for the correct profile I would need more information, so I also added a Long Title that i se as the title field. I also added a Notes field to act as the Content field in case I wanted to scribble something down for myself.

       
      Setting up a Database Relationship
      After I added a few profiles it was time to bring them from the People Profiles database into the My Projects database. The first step was to add a new field into the My Projects database of the type "Database Relationship". When creating that I have to choose what database I want to create the relationship to, so I selected People Profiles. In the settings for display options I set a template key so I can reference it later and I unchecked the show in listing template and show in display tempate.

       
      Adding the database relationship in the template
      As I have selected not to display anything in the listing or display templates nothing will happen yet. So new we have to add this to our template for My Projects so we can show the data where we want it. So we head over to Templates in Pages where I have created my own template set for My Projects.
       

       
      Adding custom fields are done by adding a code line. There are some variations on this, but I will not into it in this post. This is the code:
      {$record->customFieldDisplayByKey('your custom field key', 'display')|raw} As you only want to show this field if it is actually not blank, then we wrap that in a condition to only show if it is not blank:
       
      {{if $record->customFieldDisplayByKey('your custom field key')}} {$record->customFieldDisplayByKey('your custom field key', 'display')|raw} {{endif}} In my case I also wanted to add some styling and a header. So my code looks like this:
       
      <!- People in Footer --> {{if $record->customFieldDisplayByKey('project_people')}} <div class="project_people_footer"> <h3>People in the Project</h3> <div class='ipsGrid ipsGrid_collapseTablet'> {$record->customFieldDisplayByKey('project_people', 'display')|raw} </div> </div> {{endif}}  
      Defining the output in basicRelationship
      Now that we have included the data from the People Profiles database you will see that it is just a link. We want to have more data than that so now we must define what data we want to pull from that database and how we want that to be displayed. We have to do that be editing a theme file called basicRelationship. So we head over to our Theme folder and click the "Edit HTML and CSS" icon to get into the templates. Then under CMS->Global you will find the basicRelationship file.
       

       
      This file is a bit tricky because it defines all database relations. In order for us to target specifically the data coming from People Profiles we need to figure out what ID that database has. We can do that from Pages under Content->Databases which will list all database. If you hover over the edit button over your selected database, then you can see the URL at the bottom of your screen with the ID of the database at the very end.
       

       
      With the ID defined we can add a bit of code to make sure we only target specific databases with our changes:
      {{foreach $items as $id => $item}} {{if $item::$customDatabaseId == 19}} <!-- People database --> {template="BasicRelationship_PeopleProfiles" app="cms" group="basic_relationship_templates" params="$item"} {{elseif $item::$customDatabaseId == 16}} <!-- Author database --> {template="BasicRelationship_author" app="cms" group="basic_relationship_templates" params="$item"} {{else}} <!-- all other databases --> <a class="ipsPages_csv" href="{$item->url()}">{$item->_title}</a> {{endif}} {{endforeach}}  
      Creating Theme Templates instead of just using basicRelationship
      In this code I have added 2 databases (19 and 16) and then I have a fallback for all others at the end that will show the default link. While it is very possible to add the code directly into this template I have used a different approach and instead created separate templates outside and then referenced them in the basicRelationship. This way I can work on the content for each database in a more focused way and the basicRelationship becomes a bit easier to overlook.
      In order to create a new template you go to Create New at the bottom of the template listings. Select HTML template and then fill out the form accordingly.
      Name - the name of the template. Variables - We add $items here since that is what is defined in the foreach loop in basicRelations. Location - Here we select front to place the template in the correct section. Group - I suggest you create your own group here so it is easier for you to find later. Application - Here we select Pages
      If you have done this as I have then you will have your new template located under CMS->Front->basic_relationship_templates. If you have selcted another group, then that is where you will find it instead.
       

       
      Adding data to the theme template
      Now that we have a template for our connection between the databases, then we can start adding the data to it that we want to show in My Projects. This is done in a very similar way as when we add the data to the entry templates. Instead of using $record however we use $item:
      {{if $item->customFieldDisplayByKey('your custom field key')}} {$item->customFieldDisplayByKey('your custom field key', 'raw')} {{endif}} As I added the default record image that is called a bit differently:
      {file="$item->_record_image_thumb" extension="cms_Records"} You can also reference the title field and the content field with a shorter tag:
      {$item->_title} {$item->_content|raw} In my current code I have nested the fields a bit and I have used the field for working area pretty sloppy, but I think you get the general idea.
      <div class='ipsGrid_span2 people-profiles_card'> <div class="people-profiles_image {{if $item->customFieldDisplayByKey('working-area')}}{$item->customFieldDisplayByKey('working-area', 'raw')}{{endif}}_image"> <img class="ipsImage {{if $item->customFieldDisplayByKey('working-area')}}{$item->customFieldDisplayByKey('working-area', 'raw')}{{endif}}" src="{file="$item->_record_image_thumb" extension="cms_Records"}" class=" {{if $item->customFieldDisplayByKey('working-area')}} {$item->customFieldDisplayByKey('working-area', 'raw')} {{endif}} " /> </div> <div class="people-profiles_Name"> {{if $item->customFieldDisplayByKey('people-profiles_Name')}} {$item->customFieldDisplayByKey('people-profiles_Name', 'raw')} {{endif}} </div> <div class="people-profiles_Title"> {{if $item->customFieldDisplayByKey('people-profiles_Title')}} <span class="{{if $item->customFieldDisplayByKey('working-area')}}{$item->customFieldDisplayByKey('working-area', 'raw')}{{endif}}">{$item->customFieldDisplayByKey('people-profiles_Title', 'raw')}</span> {{endif}} </div> <div class="people-profiles_links"> {{if $item->customFieldDisplayByKey('people-profiles_Awesome')}} <a href="{$item->customFieldDisplayByKey('people-profiles_Awesome', 'raw')}" class="people-profiles_Awesome"><i class="fas fa-id-card"></i></a> {{else}} <i class="fas fa-id-card"></i> {{endif}} {{if $item->customFieldDisplayByKey('people-profiles_Linkedin')}} <a href="{$item->customFieldDisplayByKey('people-profiles_Linkedin', 'raw')}" class="people-profiles_Linkedin"><i class="fab fa-linkedin"></i></a> {{else}} <i class="fab fa-linkedin"></i> {{endif}} {{if $item->customFieldDisplayByKey('people-profiles_Instagram')}} <a href="{$item->customFieldDisplayByKey('people-profiles_Instagram', 'raw')}" class="people-profiles_Instagram"><i class="fab fa-instagram-square"></i></a> {{else}} <i class="fab fa-instagram-square"></i> {{endif}} {{if $item->customFieldDisplayByKey('people-profiles_Twitter')}} <a href="{$item->customFieldDisplayByKey('people-profiles_Twitter', 'raw')}" class="people-profiles_Twitter"><i class="fab fa-twitter-square"></i></a> {{else}} <i class="fab fa-twitter-square"></i> {{endif}} {{if $item->customFieldDisplayByKey('people-profiles_Homepage')}} <a href="{$item->customFieldDisplayByKey('people-profiles_Homepage', 'raw')}" class="people-profiles_Homepage"><i class="fas fa-home"></i></a> {{else}} <i class="fas fa-home"></i> {{endif}} </div> </div>  
      This guide should help you to bring in the data from any database into another database with the styling of your choice. I know this is a pretty short and not very detailed guide, but I hope it was useful anyway. Please add questions and I will improve upon the guide where I am jumping a bit to fast.
      Happy coding!
    • By ©Jimi Wikman
      One of the best ways to learn is to find fun designs on existing websites and to try and recreate them, so with that in mind, we're taking the animated card design from the Top Games section over at https://popdog.com and seeing if we can recreate it with only HTML and CSS!
      /// Timestamps
      00:00 - Introduction 01:17 - Overview 02:18 - HTML 13:57 - CSS basic setup 15:35 - styling the front 28:24 - front and background hover 38:15 - animating the game name 42:43 - the rank 46:33 - styling the back 60:14 - fixing the spacing 65:31 - fade-up and in for the back
    • By ©Jimi Wikman
      Working on multiple projects at the same time is sadly a common experience for many of us working in IT. Many split their attention on at least 2 projects or responsibility areas. This comes at a cost however, not just for the person splitting their time, but also for the people they work with.
      Few lift an eyebrow at the mention that someone is in a project for as low as 20% these days. Sadly no one really bat an eyelash when a coworker break down mentally and get sick from the mental stress either. In my line of work as an IT consultant I often see people splitting their time and I see what it cost those persons as well as the projects they are doing their best to contribute to.
      Not to long ago I witnessed a co-worker taking a seat after lunch looking pale. A faded smile and assurance that he would join soon and just needed a moment to himself was followed by an ambulance taking him to the hospital. It took him a year to come back to work. More than once have I seen people pass out in a meeting and outbursts of anger and frustration for small things happen on a regular basis by even the most gentle and kind persons.
      What could possibly cause such extreme amounts of stress? The answer is that all of these people have suffered from extreme forms of content switching. As a human we need time to focus in order to make rational decisions. As the time to focus is interrupted we experience content switching. That is that moment when you are forced to go from one focused thought to another. This change of focus comes at a cost of mental energy and eveyone need a different amount of time to make the switch mentally.
      As a manager you do this a lot as part of your work. That mental flexibility and speed that you have as a manager serve you well to manage most situations. That is because the content switching is still within one context. When you need to split your attention on multiple context however the cost will increase exponentially and with time, you will build up negative stress. If you do not reduce that stress it will eventually cause physical harm and you will hit that famous wall head first.
      Other fields in IT have the same situation, but there is one group that suffer from this more than any other group: the developers. Developers unlike most other groups are focused oriented, mening that they spend more time in their own minds setting up structures and logical flows that create the code they write. Once interrupted it takes far longer to get back to their focused state of mind. Fortunately developers are less likely to work on multiple projects at the same time, but when they do the damage is more severe than for other groups. Designers have a similar situation, but have an easier time to make the mental switch.
       
      How to mitigate and avoid getting burned out
      Speed is everything, or so they make you think. Meeting after meeting where you jump from onte topic to the next in frantic speed. As you solve issue after issue with your quick and skilled mind you will experience a sense of accomplishment. This is because your brain reward you for it and it becomes an addiction. Soon you will crave it and like a junkie you will crave your fix even when you are off work. Eventually the rewards will not measure up with the cost and you will get frustrated and eventually have problem being happy. A sense of feeling empty and caught in a endless loop is your last warning before you bend the knee to the mental exhaustion and collapse.
      The price you pay fror strecthing yourself thin benefit no one as you break down. There are things you can do however to prevent this. Both as regular practices, but also as strategies and rules you set for yourself.
      Managers, Requirements & Business people
      Make time for focused work - As a manager or if you work in the Business area the biggest danger is having long periods without proper focus. Meetings and workshops take up much of your time, so make sure you dedicate at least 1 hour every day for focused work (no, not during lunch...). This is a time where you take time to be fully alone without distractions to focus on emails, power points and whatever else you have promised to do. This will naturally lower your stress levels and allow you a form of soft reboot. If this does not work, then dedicate a longer period 1-2 days a week. This can be that you work from home one day once a week or two half days for example.
        Turn off at the end of the day - The most common mistake managers do is that they never stop working. My suggestion is that you leave the computer at work if you can, or leave it in the bag when you get home. The same goes for the phone. make sure it is turned off as soon as you leave work, or at least as soon as you get home. If you are required to be reached every hour of they day, then you are constantly on stand by and never relaxed. Not only is this bad for your health, it is actually a legal issue as well in many countries as you are working over time. Stop doing that today!
        Say no or delegate - If you get asked to split your attention between multiple areas or you feel that thet area you are in charge of is becoming difficult to manage within your normal working hours, then you should say no or delegate.  Saying no is always difficult since most managers are driven by status or to help others. It s however a very useful skill to master and it will save you a lot of stress. Just make sure you say no for the right reason and not to avoid stepping out of your comfort zone, because that is actually a good thing.

      This is very hard in some cultures and if you feel that this is impossible, then find a way within the situation you find yourself. A trick that you can try is to promote people that work for you or offer to teach someone what you do. Just make sure you make sure the person you delegate to also have their regular workload reduced or you will burn them out instead.
        Never try to lead someone that is not fully commited - Having people in your team that split their time is a cause for much frustration. No matter how much time they dedicate to your project you will never get that time because of the cost of content switching. You will also find the moments when they are not working on your project, no matter how rare they are, to be annoying and inconvenient. My advice is to never try to lead anyone who is not fully commited to your project because of this.  
      Developers & Designers
      Never split your work - There are times when you might be asked to split your work and my advice to you is to say no. No matter what split you have you will never be able to dedicate 100% time between the two. Each split will cost you a lot of time just for switching between them and the mental toll will be far worse then you think. If you split yourself 50/50 you will do 40% in each project and you will work 120%. You will constantly feel stressed and that you do not do the work you are supposed to. It will eventually break you down mentally so never accept a split work situation.
        Avoid meetings if you can - Some meetings you need to attend, but try to avoid meetings that are not necessary. The reason is that a meeting, even if it is just 30 minutes long, will completely content switch you from your work. Unlike a short interruption that cost around 10-15 minutes of lost time a meeting will cost at least double that. Some meetings may be even more disruptive causing fragmentaion of thought for hours afterwards as you try to focus on work, but have the new information or task in mind as well.
        Take time to clarify things - The biggest issue for most developers and designers is unclear requirements and unclear expectations. If you take time to clarify things, then you will save a lot of time. That is because not only will you wate time trying to find answers, you also suffer from content switching. This can make a simple question cost hours of focused work. Everyone have different need when it comes to clarity so do not rush sprint startups, requirement sessions or technical architect forums. Make sure everyone in the team understand what to do and why. This way you can focus on working without having to find answers or explain things to other members of your team.
        Agree on work environments - All teams have different compositions. Some need a lot fo focus, others less. Make sure you define wht your team needs and agree on how you will work. I have had teams that work with the hand so they just put up the hand to let you know they are busy. This way you can signal that the person have to come back later as you are deep into something right now. If that is still to disruptive then use a hat or something that indicate this before you even approach teh developer. In some cases it can be a good idea to assign a team lead or project manager to handle all outside requests to further reduce disruptions. Whatever your team need, make sure it is defined and agreed upon by everyone.  
      Test
      Insert yourself into the information flow - As testers it is sometimes difficult to know what is going on. This is because testers can be seen as an external part of the development flow. This usually means test comes in long after requirements and development planning, which is not only stupid from a quality perspective, it is also cause for frustration and stress. As testers you should sign off on all requirements and you need to be on top of development and deploys. So if you are not included in the information flows you need to be in, then make sure that you are. This way you do not need to run around looking for information or work within an isolated workflow. If you do not, then you will constantly feel stressed and frustrated.
        Agree on bug flow with developers - As testers you should not sit and verify browser compability or standard flows. These should already be well tested by the developers. If this is not the case then you will feel that you are just writing bugs all days and no development ever get past test. This is a bad situation and you should make sure there is a proper definition of done that prevent this.

      When you find a bug you often want to discuss this with a developer. Doing so is disruptive however and I suggest that you set aside two slots every day where you can go over the defects with the team when it does the least damage. This can be done directly after the daily standup and directly after lunch as that is also when many teams collaborate on code reviews and so on. Just agree with the developers when and how you will go over the defects to ensure the impact is as small as possible.  
      These are just a few small tips on how to reduce stress and what the cost is for stretching yourself thin by splitting your attention between multiple projects. Most of these may be most relevant to a certain group, but most of them are valid for all groups. Content switching and bad work processes cost billions every day and they cause health issues that should not be underestimated.
      Stress related illness is increasing and in many fields you can name at least one or two persons that you work with that have suffered from being burned out. In Japan there is even a specific word for working yourself to death: Karoshi. So be wary of the many ways that you can harm yourself unintentionally. One good start to protect yourself is to never accept working on multiple projects at the same time.
      If you have more tips, please share to help others avoid getting burned out.
    • By ©Jimi Wikman
      Understaning how block, inline, and inline-block each behave is very important when learning CSS, as well as knowing why you might want to switch the display property of an element every now and then.
    • By ©Jimi Wikman
      Going over requirements and making time estimations and technical solutions for the front end part of the project.
×
×
  • Create New...