teleren/devto huggingface dataset:
IDE vs code editor, which one is better for web developement.
Published: 2021-02-15 07:20:09

As a web developer, the first choice you will have to make will be the tool for coding. The tool can be either IDE or code editor. As a beginner, it is hard to choose what to choose because there is a wide variety of options available, both with the IDEs and Editors. Let’s dig deeper into the subject and find the best option for you.

For the best web development services, you must visit Navicosoft, a top-notch website development company.

Haters will say that choosing IDE or code editor is a must. Conversely, it is not the case that web developer cannot make it to the top without anyone of them. However, for a beginner, it would help him to excel in his job and work smarter.

<strong>What is a Code Editor?</strong>

Website development is all about the programming language, and a code editor is a text editor that helps you with coding language. Saying that, I mean it lets you code your website easily and improves your coding quality. The first code editor was Notepad++, and after that, various other options with improved features such as autocorrect and prompt error. Logically, there is no such option as IDE or code editor, yet it is often confused. Some code editors are Atom, Vim, SublimeText, Emacs, etc.

<strong>What is an IDE?</strong>

IDE comes from an integrated Development Environment that facilitates coding. However, it is much more than just a code editor. It helps a developer with the code creation, building as well as testing at one platform. More than that, it enables you to organize your task with the different modules of a project—for example, IntelliJ IDEA, NetBeans, and Xcode.
Just as the team, Navicosoft uses the smartest tools to provide the best website development services.

<strong>IDE vs code editor</strong>
 
The main difference between the two is in terms of functionality. Code editor helps you with coding language. Whereas, an IDE facilitates you with the tasks of a text editor, debugger, code editor, and compiler.

While you decide to choose between the two, there is no best tool for the job, and you must choose according to your comfortability, ease, or you can adopt it from a website development company. However, whatever you choose, you must be an expert at it. As a newbie, it will be a critical decision, so you can take time and re-evaluate your preference from time to time and choose accordingly.

<strong>Learn More:</strong>https://www.navicosoft.com/web-development-services/
Typescript - Tips & Tricks - typeof
Tags: typescript, webdev
Published: 2021-02-15 06:59:50

Today I want to start a series of tips and tricks about Typescript.
I will try to publish two/three tips & tricks a week.
Before start, I want to explain why I start this series.
I start this series because every day I see too many _any_ types in the typescript files and so I want to help the developers to learn better the typescript language.

# typeof
Today I start with the **typeof** operator.
Typeof is an operator used to detect the type of our variables.
A little preamble, typeof is also a javascript operator, but with typescript, it has superpowers.

Typeof in javascript has these behaviors:
```ts
const valueString = "string";
const valueNumber = 1;
const valueBoolean = true;
const valueBigInt = 1n;
const valueFunction = () => true;
const valueUndefined = undefined;
const valueNull = null;
const object = {
  prop1: "value1",
  prop2: "value2",
};

console.log(typeof valueString); // string
console.log(typeof valueNumber); // number
console.log(typeof valueBoolean); // boolean
console.log(typeof valueBigInt); // bigint
console.log(typeof valueFunction); // function
console.log(typeof valueUndefined); // undefined
console.log(typeof valueNull); // object
console.log(typeof object); // object
```
How we can see some things are strange: e.g. when we get the typeof of a null variable javascript returns an object type.

But here we see the same example in typescript:
```ts
type valueStringType = typeof valueString; // "string"
type valueNumberType = typeof valueNumber; // 1
type valueBooleanType = typeof valueBoolean; // true
type valueBigIntType = typeof valueBigInt; // 1n
type valueFunctionType = typeof valueFunction; // () => boolean
type valueUndefinedType = typeof valueUndefined; // undefined
type valueNullType = typeof valueNull; // null
type objectType = typeof object; // { prop1: string; prop2: string; }
```
The first impact is friendlier for us developers because the typeof operator converts the type exactly as expected. The best advantages can be seen in the types: function, null, object.

But now an advanced example:
```ts
const item = {
  id: '0000',
  name: 'Item',
  unit: {
    id: '1',
    code: 'PZ'
  },
  variants: [{
    id: '1',
    code: '001',
    color: 'FFFFFF'
  }]
};

type Item = typeof item;
type Unit = typeof item["unit"];
type Variant = typeof item.variants[number];
```
In this example, we can see how we can extract simple types from a complex object.

I leave you the [link](https://www.typescriptlang.org/docs/handbook/2/typeof-types.html) of the official documentation of this operator.

For today is all.
See you soon!
Auditing My Website: MichaelCao.Tech
Published: 2021-02-15 06:54:38

Websites can be challenging to create, and there's no greater challenge in webdev than keeping your website up to date, meeting standards, and accessible to everyone who'd like to take a peek at it. It's a necessary task though, and while it's grueling, every developer should take the time to learn how to do these things and do them every once in a while to all the websites they own. If they don't, their website may become inaccessible to people who need accommodations or drop in SEO rankings, keeping their website from remaining relevant.

Now, let's talk about people who tell you to do something and then don't do it themselves, because I'm that exact person here. I've never analyzed my website's accessibility, nor optimized its SEO. I've never kept it up to date with standards, instead just keeping it presentable as best I can. But today it's time to change that! I'm going to walk you guys through how to run two different website audits and analyze the results as they pertain to my own website.

1. Web.dev
2. Lighthouse 

Each of these audits provide me with a different look at three things about my website: the accessibility, how well it meets web standards, and how well it ranks in SEO. Using these audits, I can effectively keep my website modern, up to date, and accessible to all who wish to learn more about me and maybe hire me.

From both audits, I ended up realizing that I should definitely focus on optimizing my images, making my text contrast more, and including alt tags in all the images I embed. I should also probably stop using a template for my website and try to learn more Vue.js to make a new website from scratch, but that's a project for another time, isn't it?

Check out my video on this topic here: https://youtu.be/ate7upT980I
Docker tutorial - Install Docker on Ubuntu fast
Tags: docker, programming, devops, ubuntu
Published: 2021-02-15 06:53:21

I've just uploaded a new video where I show how to install Docker on Ubuntu Linux.

Please check it out and subscribe to my channel to be notified when my new videos will be released.

Thank you in advance.

Link to video: [https://youtu.be/5Dhx_ssK8oY](https://youtu.be/5Dhx_ssK8oY)

Link to my personal blog: [https://www.anmalkov.com](https://www.anmalkov.com)

Link to my playlist: [Learn containers fast by doing](https://youtube.com/playlist?list=PLDoQ6gLAki7eu_ugunWVPX10fFOcok1iG)
SEO and A11y
Published: 2021-02-15 04:00:20


## Background
Search engine optimization (SEO) and accessibility (A11y) are two significant parts of creating and maintaining a website. There are certain tools that you can use to objectively score a website's accessibility, speed, and features. The ones I am going to talk about today are WAVE (Web accessibility evaluation tool) and Lighthouse. I used these tools on a website for the company, Berner International ([Berner Website](https://berner.com)). It is an HVAC and air curtain business that is considered small to medium size. I chose this website because it is the company my dad works for and he explained that they have a dedicated team at the business that works on SEO and accessibility. Below will be an explanation of the results.

## Lighthouse

![Screenshot (251)](https://dev-to-uploads.s3.amazonaws.com/i/mtqvk6336ea7yqlct692.png)

The website scored a 90 in Performance, a 77 in Accessibility, a 71 in Best Practices, and an 83 in SEO. Overall the website performed very well with speed, having the longest time take 1.5 seconds. The Accessibility section gave three issues:
* Buttons do not have an accessible name
* Form elements do not have associated labels
* Links do not have a discernible name
* Background and foreground colors do not have a sufficient contrast ratio.

These can be solved by some stylistic changes to make links and buttons more discernable and changing some of the contrast throughout the website.

In the Best Practices section, there were only two major issues:
* Links to cross-origin destinations are unsafe
* Includes front-end JavaScript libraries with known security vulnerabilities

The only two issues with the SEO section are:
* Links do not have descriptive text
* Links are not crawlable

## WAVE

![Screenshot (249)](https://dev-to-uploads.s3.amazonaws.com/i/glw4ccqwxbmwrv46znhq.png)
 
After running Lighthouse, I ran WAVE on the website. The report came back with 7 errors, 22 contrast errors, and 20 alerts. The errors included 4 missing form labels and 3 empty links. These are relatively small problems that can be fixed easily. The contrast errors are all low contrast issues and the 20 alerts are broken up into redundant links or suspicious link text.

This is a video of interaction with the website and more details on the issues and solutions of the website.

[Lighthouse and WAVE explanation](https://youtu.be/1Dmo-oFJhYE)
3 common indications that your website security is at risk
Tags: security, riskindications
Published: 2021-02-15 06:43:31

With the increasing trend to maintain an online presence, digital security threats have also increased. Security breaches often mean stealing customer’s data and payment method breaches etc. It is noteworthy here that the simpler the website, secure it is. If your website is complex, you might have your website security at risk.
 
Undoubtedly, it sounds like a nightmare if your website with all your sensitive data gets hacked. To avoid such a situation, you must keep yourself updated with the most common loop holes your website may have.

Here are some indications for you to watch out for concerning your website security. 

Social carelessness most common reason behind any breaching activity is never any error in web development. If you leave your passwords written somewhere obvious, you are leaving your website security at risk. Never share your credentials through a social application or untrusted platform. 

Furthermore, they may call you as customer care before they spend long hours breaching your website. It is much easier for them.
So, beware! Do not share your credentials over untrusted platforms.

<strong>Third-party codes</strong>
 
Even if you obtain website development services from an expert, there are still some chances of bugs. WordPress is the most used CMS, and these days, most people start with implying different plugins. Here comes the point of more complexity giving way to more loopholes to hackers. It is recommended that you check each plugin before installation. Furthermore, update each plugin as regularly as the fixes roll out.

<strong>Security patches</strong>

Often administrators do not update the websites regularly and are leave them vulnerable. There may be various reasons, such as the administrators wouldn’t want to let the update break the in-house software. The management would not know the consequences of updating the system, or there may be no management at all. Whatever the reason is, with every security update, you must update your WordPress.

<strong>Injection attacks</strong>

Well, injection attacks, also known as the SQLi, scare me the most. The hacker will simply look for a form on your website. It may a contact form, sign-up, or a submission form. Rather than adding information, he will input SQL commands in an attempt to extract all the data. 

Only if you sanitize your forms from such SQL commands you can avoid having your website security at risk.

<strong>Read More:</strong> https://www.navicosoft.com/cheap-cpanel-license/
Makerwork 004
Tags: php, bookmarker, browser, makerwork
Published: 2021-02-20 00:57:13

---
title: Makerwork 004
published: true
date: 2021-02-15 04:00:06 UTC
tags: #php, #bookmarker, #browser, #makerwork
canonical_url: https://makerwork.netlify.app/posts/makerwork004/
series: Makerwork
---

Hey Makers! 👋 

Kevin, our featured maker, created **InvoicePlane** and grew its users to thousands before feeling burned out and passing it to another maintainer after 4 years of work. He is now maintaining a bookmarking app that he created to scratch his own itch. 🏆 

Bookmarks are very popular among users and are used slightly more than other navigation strategies, such as querying a search engine. Over 90% of users have a bookmark archive according to research from the University of Toronto.

As the Internet becomes the dominant global information resource, users will need bookmark management systems that scale-up to manage their growing archives. Systems should minimize the effort needed to organize bookmarks, ideally an automated sorting system.

Poor visualization hampers users with large archives, while limited information in the top level listing of bookmarks makes it difficult to find bookmarks. With skills in web and backend development, Kevin created **LinkAce** with a focus on user management and handling. ⭐️

If you like to know about the maker, I interviewed Kevin of **LinkAce** in a weekly roundup of makers for makers. 

Makerwork 004 includes an open source userscripts support for browsers, namely **Violentmonkey**, and **Limus** a self-hosted image/screenshot editor.

[SUBSCRIBE FREE](https://makerwork.substack.com)

*The Makerwork newsletter includes interviews with makers featured in the email sharing their insights about open-source, their product, blog and work.*
🐝 Sapper Template w/ Tailwind 2.0, TypeScript, ESLint, and Prettier 🍯
Tags: svelte, sapper, tailwindcss, showdev
Published: 2021-02-15 06:34:18

I faced the conundrum of starting a new Sapper project with Tailwind 2.0, ESLint, Prettier, and the whole shebang.

Unfortunately for me, all the templates I came across were outdated or a bit too verbose/hacky.

Fortunately for you, I turned my research into a new and improved Sapper template featuring all the nuts and bolts of a more advanced config to help you hit the ground running!

***[Sapper-Tailwind2-Template repo](https://github.com/tonyketcham/sapper-tailwind2-template)***

## 🔑 Usage
You can jump in with a quick
```bash
npx degit "tonyketcham/sapper-tailwind2-template" my-winded-app
cd my-winded-app
yarn install
yarn dev
```

### Static Stuff 🗞
This also has shortcuts for working with SSG.
```bash
yarn static
```
This will export your site into static files and open a local production server on [localhost:5000](localhost:5000). You can run this to make sure everything matches your dev server and that you didn't mess up the one Tailwind caveat I'm about to touch on.

## 🚪 Closing arguments
There are too many dead Sapper templates so the obvious answer is to just add one more to the sea, right? 🥶

If you've got any input or PRs, feel more than welcome to drop them on [the repo](https://github.com/tonyketcham/sapper-tailwind2-template) to keep this thing running for when the ecosystem inevitably gets updated in the future. I'd also love to keep this alive as a SvelteKit template when that finally drops too.
Top apps to be productive
Tags: homeoffice, productivity, motivation
Published: 2021-02-15 06:22:42

---
title: Top apps to be productive
published: true
description: This is my selection of tools to let you be productive during home office
tags: homeoffice, productivity, motivation, 
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/ijyq04gsk3jk1pykhwyk.jpg
---

If you're reading this, you propably expect to get one or more tips for tools you didn't already know that make you more productive magically. In case you are a disciplined worker, you will be disappointed to read this article as the title was a little clickbaity. 

But in case you are in a phase like me some weeks ago, you are procrastinating and wasting your time reading articles and watching videos on how to be productive. I hope this method and the comprehensive tooling will help you.

## Start for 5 Minutes

If you have to work on stuff you don't want to work on, start a stop watch (no timer with notification), put it outside your field of view and start the task. If you take a look at the watch again and >= 5 mins passed, you can desicde if you stop or finish that task. 

> If you stop: You got more done than you would have done without this method.
> If you continue or ignore the stop watch: Congratulations, you were outgrowing yourself.

## How to get productive

- Get your ass up
- Replace "I should" with "I will"
- Switch off distractions
- Kick off that sound track that makes you focus
- Start working

> You want a new Todo-App? --> Open your text editor. 
> You want to note sth? --> Text editor. 

It's amazing how you're able to organize stuff inside a simple text editor by just starting. 

Have a productive day.
Please don't test attr_reader, attr_writer, or attr_accessor
Tags: rspec, ruby, testing
Published: 2021-02-15 06:12:51

Sometimes I see code like this:
```ruby
class Alarm
  attr_reader :at

  def initialize(at: )
    @at = at
  end

  def snooze
    # ...
  end
end

RSpec.describe Alarm do
  describe "#at" do
    it "returns alarm time" do
      time = Time.now
      alarm = described_class.new(at: time)

      expect(alarm.at).to eq time
    end
  end
end
```

This is a useless test. First, we are testing a standard library, a thing that already has its own tests. Why does it need more tests?

Secondly, we are testing trivial behavior.

Third, we will indirectly check the getter (`Alarm#at`) in other tests:
```ruby
describe "#snooze" do
  it "snoozes alarm for nine minutes" do
    # ...

    expect { alarm.snooze }.to change { alarm.at }.by(9.minutes)
  end
end
```

P. S. PROTIP: if the `attr_reader` is only needed by the object itself, it'd better to make it private:
```ruby
private

attr_reader :repeat
```
Project 45 of 100 - Single Page Business Template in React
Tags: react, javascript, 100daysofcode
Published: 2021-02-15 06:11:58

*Hey! I'm on a mission to make 100 React.js projects ending March 31st. Please follow my dev.to profile or my [twitter](https://www.twitter.com/jwhubert91) for updates and feel free to reach out if you have questions. Thanks for your support!*

Link to the deployed project: [Link](https://100-react-projects-day-45-golden-business-template.netlify.app)
Link to the repo: [github](https://github.com/jwhubert91/100daysofreact/tree/master/day-45-gb-template)

Last week two websites and a general theme came to my attention. Sometime around last Tuesday the topic 'Gayburgers' started trending on Twitter. Of course I had to follow up- it turned out to be this hilarious and pretty cool restaurant project where a start-up and an social media influencer had teamed up to create a virtual restaurant. Their [website](https://www.gayburgers.com/) was fantastic too.

A few days earlier I had noticed the announcement that SpaceX's Starlink venture had publicly launched in beta and that users could now get internet access from space via their fleet of tiny new satellites if they were in a supported coverage area. Their [website](https://www.starlink.com/) was also stunning.

The two projects are wildly different- ordering burgers from an LA influencer and ordering satellite internet access from Elon Musk- but what they share is they both have incredible single-page websites with the primary call-to-action clearly visible within the hero section. 

Gayburgers:
![gayburgers.com](https://dev-to-uploads.s3.amazonaws.com/i/ppfaw5c9q1avcn2asy7k.png)

Starlink:
![starlink.com](https://dev-to-uploads.s3.amazonaws.com/i/mvdqoy4t5jvvkwoeoqvl.png)

The brilliance of a single-page website is this: your company probably only has a couple things they offer- and that translates into just one or two things your customers need to do to purchase from you. Potentially just a single call-to-action before sending them to the purchase screen.

The other benefit of a single-page site is you don't hide any information from your customers. You put only what's absolutely necessary on the page and leave out the rest. This is respectful of their time and their attention.

I'm not a huge Steve Jobs fanboy anymore but he did have some dynamite product philosophy- exhibit A for the single page website thesis:
![All you need to know about SPAs](https://www.azquotes.com/public/picture_quotes/e5/1f/e51ff210422395a22f17781618b34439/steve-jobs-1056602.jpg)

Anyway- big shout out to the Gayburgers team. I know they used a webflow template but they knocked it out of the park by launching a virtual restaurant in just a few weeks. I had to pay homage by making something similar in React.

Follow me on Twitter for more tidbits: [@jwhubert91](https://www.twitter.com/jwhubert91)
See how we simplify app development using ZOho Creator
Tags: zoho, zohocreator, lowcodeplatform
Published: 2021-02-15 06:08:55

Developing an app for your business isn't a walk in the park.
There are many factors involved and a plethora of challenges can crop up during the ideation and deployment process.
Delegate the complex aspects of application development to us, our #appdevelopers will circumvent the pressing challenges that slow down the process of application development like

-Difficult in achieving the pleasing UI
-Poorly written code
-Bugs, defects, and errors—the need for testing and quality assurance
-Writing separate code for deploying in multiple platforms
and more... This adds to your expenses and prolongs the application development process 😕

There are many factors involved and a plethora of challenges can crop up during the ideation and deployment process.
All of these intricacies can be easily resolved by the #lowcodeapplication development platform- Zoho Creator, which saves you a substantial amount of cost and time, instead of wasting time on vestigial aspects of development.

Our #zohodevelopers are ready to build game-changing applications for your business!
Curious to know more?
Check it out here: www.bizappln.com/zoho-creator.html