360-degree verification
Strategy

Anti-Virus and 0-Day Threat Protection for Java Web Applicat…


Web APIs and applications are increasingly becoming a target. Gartner predicts that by 2022, the #1 attack vector for enterprise applications will be the API. Not only can end-users upload viruses, but attackers can craft specialized attack malware and upload this content through your public web application. Once uploaded, these threats can move through your systems, being stored in cloud storage or databases, and eventually can get executed.

Consider an example: an insurance company allows its users to upload PDFs as part of the claims process. An attacker creates a custom executable and uploads that into the claims UI. Since it has the right file extension (.PDF), the system accepts it and stores it into its database. Because it is a new, 0-day threat it passes through the minimal virus scanning that the company has in place. Later, a claims manager downloads this file onto their computer and opens it — resulting in an endpoint infected with an Advanced Persistent Threat (APT). From the attacker’s perspective, this was actually easier than phishing because they didn’t even need to send any emails.

So how can we protect our Java web applications from threats like this? Basic anti-virus is not enough — we also need the ability to detect threats and invalid content uploads as well. A complete solution to protect our web application needs to be able to do the following:

  1. Scan for viruses and malware
  2. Detect executables
  3. Detect scripts
  4. Detect encrypted/password-protected files
  5. Validate the input file to ensure it is a real content file
  6. Restrict the upload to only specific file types that we wish to support (e.g. PDF)

Here, we’ll look at a free solution for Java that can scan for viruses, but also protect against all of the spear threats and APTs described above.

First, we will install the library using Maven by adding this repository:

And the Maven package:

Now what we want to do is accept the file into memory in our Java application, but we don’t want to store the file yet. First we need to scan the in-memory file to make sure it is safe. If it is not safe, we should release the memory, log all the details of the threat, and warn the user. If it is safe, we should proceed with our normal storage and processing logic. In this way, a potentially infected file is never stored until it has been first scanned for threats.

It is important that the scanning system be fast and optimized for this type of real-time user interaction scenario because we do not want to keep our users waiting.

First, at the top of our controller we should add these imports:

Next, we will add this code to our controller — after the file is uploaded and received into memory, but before it is actually processed or saved into our application:

Note that here, we want to do the following:

  • Set allowExecutable to false because we do not want our users to be able to upload executable files
  • Set allowInvalidFiles to false because we do not want our users to be able to upload invalid PDF files since this could allow threats masquerading as real content to get through
  • Set allowScripts to false because we do not want Python scripts, Shell scripts, etc. being uploaded
  • Set allowPasswordProtectedFiles to false because we do not want any encrypted or password protected files
  • Set restrictFileTypes to “PDF” because we only want PDF files to be uploadable; in this endpoint we will not accept other file formats. If we wished to, we could also list other file formats and types such as docx, png, jpg and so on. The system will understand and validate the contents of the file to make sure it complies with the formats listed. If we leave this field blank or null, no restrictions will apply.
  • Set our API key — you can get a free forever API key from the Cloudmersive website that can scan 1,000 files/month

That’s it! Now we can test our web application by uploading various types of invalid files, executables, and scripts. You can even try renaming the file extension to make sure the files are fully validated and blocked when they are not within our target parameters.

In conclusion, we can see that 360-degree content verification, not just virus scanning, is actually critical to practical endpoint protection.

360-degree verification

By fully configuring our scanning system to protect against the full range of possible 0-day and custom-made threats, we can fully protect our system.



Source link

Feedback on fake security company logo
Strategy

Feedback on fake security company logo


Feedback on fake security company logo

I posted a mock logo I designed for a fake security company a couple of days ago. I incorporated a lot of the changes suggested in the comments. Let me know what y'all think about the new design!

https://preview.redd.it/fzepgpb3fh951.png?width=11852&format=png&auto=webp&s=d64490dfe6d2063d16f5b03295054e912fbc2725

submitted by /u/CommandNC
[comments]



Source link

Forum templates/apps/softwares that are more modern/stylish looking
Strategy

Forum templates/apps/softwares that are more modern/stylish …


Forum templates/apps/softwares that are more modern/stylish looking

I want to create a forum, but so many of the popular templates/apps/softwares I am coming across are just too boring and out of date looking like below.

So any suggestions for templates/apps/softwares that are more modern/stylish looking???

https://preview.redd.it/cb6wcjkx4h951.png?width=640&format=png&auto=webp&s=f09c7b60aca701a8edd8fa276e00941b0e9b4be3

submitted by /u/gbp1287
[comments]



Source link

Swagger API GUI
Strategy

REST API Tools Smackdown – DZone Web Dev


Introduction

So you’ve decided that with your next project you are going to tread the RESTful path. But to be smart about it, you need an intelligent tool to ensure quality and productivity. With the abundance of options available, let’s thumb through some of the developers’ favorites.

First Things First – API Definition

Swagger Editor is a popular choice with graphical visualization. APIs can be defined either in JSON or YAML. Additionally, you can generate a server-side or client-side stub for most of the relevant technologies (from ASP.NET Core and Kotlin to Node.JS and Python).

Swagger API GUI

Apicurio is an open-source project, simple, and elegant tool with support for JSON and YAML. It offers:

  • Importing APIs from source control, file, URL.

  • Integration with your GitHub, GitLab, or Bitbucket account.

  • Previewing live documentation.

  • Visual editors for designing APIs on Open API standard (no coding skills required!).

APICurio GUI

Have a look at the comparison below:

Swagger vs APICurio specs

Watch it Go: Testing and Monitoring

Postman is an intuitive and well-organized desktop tool for creating, testing and monitoring APIs. It is one of my personal favorites, as it was the first-ever tool that I used to test my own APIs, and the learning curve couldn’t have been smoother. The product is well-rounded, as it covers the API development from creation to testing and monitoring

With Postman, you can:

Medium and large teams will appreciate the personal and team workspaces and fork and merge features that work similarly to that of any version control system like GitHub. You can also add a basic API monitor (runs on a minute, hourly, or weekly basis) and get email notifications about failures.

API testing and monitoring with Postman

Ping API  is a powerful API inspector. Minimalistic in appearance, it allows the creation of projects for HTTP API calls. After you fill in the request and response data, test code is auto-generated. You can also create set-up scripts in JavaScript (or CoffeeScript) that are invoked before each test. It has a few basic built-in functions for parsing, decoding and encoding URIs. 

In case of failures, a notification is sent via email, Slack, or Hipchat. It’s especially useful for web developers whose sites need to be responsive around the globe. Tests check APIs responses from 5 locations in 3 continents: in U.S.A., Japan, Germany and Singapore. You can schedule to run tests from 1 minute to a full day. 

Ping-API GUI

API Science is an easy-on-the-eye monitoring tool with graphs and charts. API Science lets you check health, availability, and performance of your or third-party APIs and automatically notifies about failures. The dashboard is straightforward to use and intuitive. You can upgrade your monitoring with custom JavaScript scripts to run with tests (e.g. to load or parse data from JSON) or generate a report (not downloadable, unfortunately). A nice touch is the import option from other popular API-related tools: Postman, Swagger, RAML, HAR. Sad news for the Southern Hemisphere again, servers that are located in the U.S.A., Japan and Ireland.

API Science GUI

ReadyAPI is an advanced platform for functional, security, and load testing for tight integration with your CI/CD pipeline. ReadyAPI is a combination of 3 tools available for separate licence purchase: SoapUI Pro (functional testing), LoadUI Pro (performance testing), ServiceV Pro (service virtualization). They describe themselves as “the Most Advanced API Testing Tool on the Market”, and they might be right. ReadyAPI options are vast and can be intimidating to learn at first. It’s not cheap as it’s aimed at large companies whose products require complex, from top to bottom tests. The projects integrate with several CI/CD tools: Git, Docker, Jenkins, Azure DevOps, TeamCity, and more. Good news for tight budgets: there are open-source free versions available for Windows, Linux and Mac, however, the tests are slower.

Ready API GUI

Insomnia is a desktop app for debugging your API spec with Git sync option. The “Design” section offers style validation with detailed error messages. The auto-generated preview might remind API-navvies of Swagger Editor. In the “Debug” section you can tinker your API with:

  • Sending request with cookies, query and header, body of request is filled in editor.

  • Environments configured as JSONs 

  • Support for multiple authorization options: Basic, Digest, Bearer Token, Microsoft NTLM, OAuth, AWS IAM, Hawk, Atlassian ASAP, Netrc File

  • Client-side code snippet generator for multiple languages, some with different library implementations. 

The platform can be extended with installable plugins made by Insomnia community. The plugins cover JWT and token generators, environmental setups, XML-JSON translators, randomizers and UI themes. With paid plans, teams can collaborate and host the project in the cloud.

Insomnia API

Talend API Tester is a tool dedicated to testing HTTP and REST APIs. The significant functionalities are:

  • Sending requests and inspecting responses

  • Validating API behaviour

  • Importing Postman, Swagger, OAS, OpenAPI, HAR test collections

With API Tester, you can create dynamic requests with custom variables, security and authentication, and keep them organized as projects or services. You can run assertions against the responses of different formats (JSON, XML, HTML and others). Assertions are created in visual editors. 

Talend API tester

Here comes a summary of the testing-oriented tools.

Testing oriented tools summary

Bringing the API out to the world

Apigee is an online platform that enables you to build, manage, consume APIs and expose its functionalities via a portal for your consumers. From all the online tools mentioned in this smackdown, Apigee set itself apart from the others with the most elegant web experience, analytical tools, proxy creator, and sweet website generator.

If you need to adopt a SOAP service into a REST one, or you consume API but would like to expose API’s backend services via a middleman, you are presented with proxy wizards with lots of policy options (quotas, authentications, data mediation, caching).

Apigee offers the consumer, neat, modern and straightforward portals including interactive auto-generated documentation sites for your APIs. The portal templates, with CSS themes, HTML and user management premade is ready to be customized or published right away. To ensure world-class API performance, their analytics tool and charts cover: 

Apigee API GUI

Apigee API GUI

Putting the Moving Parts Together

Linx is a sophisticated developer tool for backend integrations, automations and web services. The main use scenarios are:

  • Building, hosting and managing multiple APIs with one platform,

  • Consuming and orchestrating data across many technology end-points,

  • Accelerating API Development,

  • Simplifying existing APIs.

Linx is particularly powerful for creating or calling internal and external REST web services. It is on the fastest ways to extend an API that requires integration with other technologies (e.g. you need to load or push data into a database, conjure up a rapport, push updates to notification steam, modify or encrypt data at any point, etc). Alongside REST, Linx offers several other features from database to cryptography and cloud, which creates tons of possibilities for integrating your API with multiple different technologies. The Linx IDE Designer is a great, free option for carrying out tests and service calls. If you want to monitor and automatize the test suits or schedule calls either on-premise or in cloud, you will need to upgrade to the paid Linx Server. 

Linx API Setting

Linx vs Apigee

Feature Smackdown

Still at a lost? Use the comparison table below to help yourself decide.

API tools comparison chart

Conclusion

With REST’s and APIs’ taking root in the digital world, one can only expect more tools to appear. 

Now that you had a glimpse of options above, tailored for different needs of various size teams, projects and capabilities. If you are not happy with your current choice, it’s easy enough to hop and experiment. Let me know your favorites in the comments below.

Happy hunting.



Source link

Improving Chromium's browser compatibility in 2020
Strategy

Improving Chromium’s browser compatibility in 2020


Last year, MDN ran the 2019 Web Developer Needs Assessment (DNA) survey. The DNA survey drew responses from over 28,000 developers from around the world, together contributing more than 10,000 hours of insights into what is and isn’t working on the web today, and how the web needs to change to meet the needs of the developer community.

There were many needs expressed in the survey results, but one that stood out clearly was browser compatibility – the manner in which websites look or behave differently on different web browsers. It is clear that it is still painful to develop a website or web app that works reliably across browsers.

To help focus in on specific developer needs, MDN ran a follow-up survey in March 2020 – the MDN Browser Compatibility Survey. This survey, taken by over 3000 web developers and augmented by post-survey interviews, aimed to uncover the specific pain-points the web developer community is having with browser compatibility. Today I’d like to talk about our takeaways from the results, and what we – Google Chrome – are doing about them.

It is important to stress that these are just some early findings from the MDN Browser Compatibility survey and are focused on pain points developers have relating to Chrome.

Flexbox

Flexbox is a powerful tool for layout on the web. It offers an ergonomic way to define layouts that will respond gracefully on different sized viewports. But this power isn’t much good when it can’t be relied on across browsers. Flexbox is one of our top priorities for browser compatibility across the web in 2020, and we’ve put heavy investment into it already.

The Chrome rendering team has been working on a rearchitecture of the Chromium flexbox implementation on top of our modern LayoutNG layout engine. This work, which we plan to bring to Chrome 84, is expected to fix a number of Flexbox compatibility issues in Chromium.

We’re also working towards bringing flex-gap and fieldset+flex support to Chromium this year. In fact, flex-gap will be available in Chrome 84 – try it out and let us know what you think.

Scrolling

Getting scrolling right in one browser can be tricky. Getting scrolling right across multiple browsers can be painful (for example, it takes an entire library to consistently lock body scrolling). We’re still digging through the feedback on scrolling compatibility, but a few key areas have stood out so far:

  • How virtual keyboards affect – or don’t affect – viewport units in different browsers. (Note recent work from Microsoft Edge on a VirtualKeyboard API that may help here.)

  • A lack of consistency in input-related events, and the outcome of interacting with them (e.g. what happens when you preventDefault() a touchmove).

  • Difficulty controlling how scrolling behaves across browsers (e.g. via scroll anchoring).

We plan to start here by investing more in understanding how we can effectively improve scrolling on the web. As part of that, we need to keep hearing from you. Please continue to tell us about your scrolling compatibility pains – especially as they relate to Chrome.

Form controls

Forms are a very old part of the web, added before even CSS. Form controls were intended to mimic the look and feel of the native platform, but it’s clear that they have failed to do so consistently and have also failed to keep up with the needs of modern web development. The compatibility survey turned up two general themes here: stylability and inconsistent behavior across browsers.

On styling form controls, the Microsoft Edge and Google Chrome teams recently finished a year-long project to refresh and update the default form styles in Chromium-based browsers. This much needed refresh modernizes the default look and brings improved accessibility and touch support. However it’s clear that without more control over how form controls are styled, they still present a compatibility pain for web developers. We don’t have anything to announce here today, but we will be continuing to look at form stylability during 2020.

Out with the old, in with the new; some of the form controls refresh that landed in Chrome 83. (more in the blogpost).

In terms of behavior, there appears to be a general concern that form control behaviors either aren’t well specified or that those specifications aren’t consistently followed by browsers. Some concrete examples of inconsistencies across browsers that we heard are support for certain <input> types, autofill behaviors, and content restoration behavior when navigating away from and back to pages that contain forms. Again we have nothing specific to announce yet, but will be looking at this area going forward.

CSS Grid

Like Flexbox, CSS Grid is an important component of modern layout. Looking at the early survey results it seems like the story for CSS Grid support in Chromium is fairly good (we have our friends from Igalia to thank for that!). There is one clear exception – Chromium still doesn’t support subgrid.

Hopefully it won’t be an exception for much longer. It’s still early days, but I’m excited to share that a team at Microsoft Edge are working on rearchitecting Chromium’s Grid support to use the new LayoutNG engine – and as part of this are intending to add subgrid support! We’re excited to see this feature land and want to express our appreciation to our partners at Microsoft, Igalia, and the many other Chromium contributors who have worked on CSS Grid support.

Launching features on the web

Unlike many platforms, the web has multiple implementations. This has downsides but it is also one of the web’s greatest strengths. It vastly widens the diversity of inputs into the web platform, and provides a guarding factor against architectural mistakes that can occur when one blurs a platform (the web) and an implementation (a single browser).

In Chrome we strongly believe in moving the web forward, and in shipping new features that bring benefits to users and developers. But it is clear from the MDN Browser Compatibility Survey that some developers have concerns about how this may impact compatibility. We aren’t going to stop moving the web forward, but we are planning to be more rigorous in how we approach it and in how we communicate about compatibility.  Look out for more on this soon.

Summing up

When it comes to browser compatibility, there are still too many missing features and edge-case bugs. But it doesn’t have to be this way. Things can and will get better, if browser vendors can understand what is causing the most pain, and take action to address the causes. In Chrome we’re doing our best to listen, and we’re doing our best to address what we’re hearing. We hope it helps, and we’re looking forward to a more compatible 2021.

For all of the above, please tell us if we’re right or wrong. Tweet us, file bugs and star the issues that you think we should prioritize, fill in this form, take part in the next web survey you see. Your voice matters to us and is a major factor in determining what work we prioritize.





Source link

Loading the settings file
Strategy

How to Load Custom JSON Files Into Laravel’s Config


Hi All, this is Adi, again with another Laravel blog post. This time, I wanted to share my solution to loading custom settings from a JSON file into Laravel’s config. Firstly, what’s the use case for this? I was working on a client project, where they had a huge list of configurations in a JSON file, and I had to use them in the code. An ideal solution for this could be storing these settings in the database and query them on demand, but I was not able to persuade them to this option, so here’s my solution to how I did it.

Loading the Settings file

First, let’s see how to load this file when the app initializes.

In the code below I load the settings.json that’s in the storage folder in my AppServiceProvider‘s boot method. But if you have a lot more logic happening in your service provider you can create a new one just for this purpose.

I check if the file exists, if so, I decode the JSON into a PHP array. Then, I add it to the app config. Now, you are able to access all the keys from the settings file as config('settings.name') or whatever the key is.

Loading the settings file

Writing the Settings File

Now, let’s see how to edit or write to this file when you need to make new changes to the config.

In the below code, I show an example of getting the whole settings file’s contents and saving it to the file. But you can customize this for your own need. Let’s say you just need to edit one property; you can do this by updating your config like so config(['settings.name' => 'New Value']), and you could json_encode(config('settings')) and save the results to the file system.

Writing the settings file

Conclusion

I hope this gives you some idea of how to handle JSON config files in your Laravel app. The code example I gave you might be basic, but you can extend this to your own needs. Be cautious since you’re reading and writing to the file system directly.

For more Laravel resources visit BestOfLaravel.com

Thank You
That’s all for now, this has been Adi.
If you are looking for a Freelance Web Developer you can contact me



Source link

Post image
Strategy

HTTP2 push, prefetching and Axios : webdev


Hey,
In the last days I’ve been trying out Http2 (h2) and its push feature that should pack responses to requests not yet invoked to save time. It works and that’s great.

Now I am looking for a way to use this feature to preload api calls (Laravel sanctum takes care of the session) that will be requested by Axios in a JS script when the page loads. I’ve been looking around but I can’t find any documentation on this.

The Js script needs the content of /api/me and /api/events and I’m trying to push this two responses with the main one (first row, document).

In the returned document I have two links that are used by the PHP framework to push the Link headers. This part works, no issue here.

<link rel="preload" href="{{ url('/api/me') }}" as="fetch">
<link rel="preload" href="{{ url('/api/events') }}" as="fetch">

In the first document request (/events) I receive the Link headers and it seems to work regularly but the JS requests don’t use the pushed data and make new requests. Is it even possible to achieve this? How could I troubleshoot/solve this? Can it be some header/caching I should check out?

Many thanks and have a great day!

Post image

Inspection of the requests



Source link

WooCommerce on CSS-Tricks | CSS-Tricks
Strategy

WooCommerce on CSS-Tricks | CSS-Tricks


I always get all excited when I accomplish something, but I get extra excited when I get it done and think, “well, that was easy.” As much as I enjoy fiddling with technology, I enjoy reaping the benefit of well set-up technology even more. That’s why I still get so excited about WordPress — I feel so powerful being able to accomplish big things without a huge amount of time and effort.

I had that exact feeling this past month when I was getting WooCommerce set up here on CSS-Tricks (again).

Lemme show you how I’ve got it set up, because I bet there are plenty of you who could do the same thing and make even more use of this setup than what I’m doing!

WooCommerce Powered Membership

Let’s say you want to have a membership site. Perhaps you have a fitness website and you make training videos and you build a membership paywall for pages that display those videos and training regiments. Or perhaps you have a cooking website, and paid members have access to additional features, like saved shopping lists.

Having a system for paid members is a foundational concept for making money online, and is typically no small task. Fortunately, WooCommerce makes quick work of it. Aside from the (free) WooCommerce plugin, you’ll need the ($199) WooCommerce Memberships plugin.

If you’re eying up some paid plugins for WooCommerce, you might circle July 21st on your calendar. That’s WooCommerce Day and there are going to be some big sales.

Once you have that installed, you’ll see a Memberships tab within your WooCommerce area in the WordPress admin. In there is a Membership Plans area where you can set up your plans. We have a very simple one-plan setup: CSS-Tricks Member.

You could have a whole variety of plans if you like (e.g. bronze, silver, gold).

These plans don’t do anything all by themselves just yet —they are just user roles, and the access control stuff comes later. You could make these plans such that only admins can add people to them, that anybody can register for them for free, or that they require the purchase of a product to join. That last one is the useful one for an eCommerce setup!

As a side note, you’ll probably want to limit the time length of the membership. You could make it unlimited, but it’s probably smarter to start with memberships that expire after a set time so you aren’t promising things for life.

Since I’m selling memberships, I’ve tied the Membership Plan to the sale of a product: MVP Supporter.

Buy this product, activate subscription, activate membership

The way to get access to that membership plan is to purchase this product. You’ll also always be able to manually add people to plans as an admin.

This product could have been a one-off charge, which supports the idea of an unlimited length membership, but like most memberships in the world, I wanted to set it up as a recurring billing product. That means we need a little additional setup.

Subscriptions to Memberships

I found this a tiny bit confusing. You might assume a membership plugin would support the idea of recurring billing for that membership, but it doesn’t do that out of the box. We need a second plugin for that: WooCommerce Subscriptions.

The subscription plugin is another $199, making this setup just shy of $400. That’s it for upfront costs though — you only need to renew the licenses next year if you need support and updates (I would). I find that cost to be more than fair for a system that works this efficiently, but you’ll have to do the business math for yourself.

Once you have that plugin installed, any product you create has the possibility of being a subscription product.

Here at CSS-Tricks, we’re charging $20/year for the membership. When someone signs up, they’ll be re-charged the next year at $20. That matches the length of the membership plan, which is an important step. Nothing forces you to do that but it would be weird to place a charge on a different date from the actual renewal.

Membership-Only Access to Posts

Wwe’ve done the two biggest parts of setup:

  1. Created a Membership Plan
  2. Created a product people can buy that subscribes them to that plan

Now for the part that actually gives the members some benefit! I am planning to sell access to a “book” that’s hosted on this site. The book is actually just a collection of posts. They are Custom Post Types we’ve set up called “Chapters.” In the editor for the chapter, below the content, there will be a Memberships area you can use for locking the chapter to a Membership Plan.:

This is in the post editor, underneath the post content.

Again, this example uses a Custom Post Type, but it could be any page or post type at all! It’s literally the flip of a switch to put something behind the membership wall.

There are two “faces” of a post with a content restriction:

  1. What members see: the content
  2. What non-members see: an excerpt and message on how to unlock the content

I think that’s a nice system. It shows people exactly what they could be reading if they were a member and shows them exactly how they can become a member.

Now there is some custom CSS happening here, but not much! I just use the default features, see what gets output onto the page, and there is always a sensible class name to hook onto to do styling — just how it should work.

Doing Things Programmatically for Members

In our case, the primary benefit to being a member is probably gaining access to the book, but it doesn’t have to stop there. I think giving as much as possible to a paying member is generally a good idea. And since advertising is the primary business model on this site, it seems fair to remove those ads if you have a paid supporter membership.

There are all kinds of APIs for these plugins to hook into whatever you need, but I like to keep things as simple as I can. For example, in any template, I can check to see if you’re a member or not.

<?php if ( !wc_memberships_is_user_active_member() ) { ?>
  <div>
     <!-- Show an ad if you're not a member. -->
  </div>
<?php } ?>

I also do this before I run any other of the site’s JavaScript, so I can know in the JavaScript if a user is a member or not.

<?php if ( wc_memberships_is_user_active_member() ) { ?>
    <script>
      window.activeMember = true;
    </script>
<?php } ?>

Some of the ads on this site are JavaScript-powered, so I can wrap the call for them in a !window.activeMember logic to not request them at all.

On-Demand Printing & Fulfillment

Memberships and subscriptions are just two of the things I’m doing with WooCommerce. The other is selling physical products, which is something I’ve dabbled in over the years. In fact, we used to hand-fulfill each and every order by taking products to the post office! We’ve also partnered with fulfillment companies in the past, but we still had to physically print up a bunch of inventory ahead of time.

Things have come a long way since then and there are lots of companies that print on demand! One such company (and I have no affiliation with them) is Printify. They sell all kinds of stuff, including what you’d expect from a printing company: t-shirts, hoodies, mugs… and the best part for me is that it connects directly to WooCommerce.

So far, we’ve stocked the store with posters! On the Printify side, I pick the product, upload the art, choose some options, and that’s that!

The last step in the process is to “Publish product to your WooCommerce store” which has worked perfectly for me so far. I trust that it works, as it must be forming the connection between Printify and WooCommerce such that Printify receives the order and fulfills it when they come in.

From there, the products appear on my site and I can edit or customize them from WordPress if I need to (like the copy and such):

Products in my WooCommerce admin

I can check orders at any time and watch as they are ordered, produced, prepped, and shipped:

Order dashboard on Printify

I ordered some posters myself, of course, so I could try it out before putting it in front of other people. The poster came in a nice triangular tube thing in perfect condition on thick bright white paper. I hung it right up next to my office computer:


Mobile App

If you’re like me and get excited to look at how your little store is doing and get notifications for sales, there is a mobile app.

I haven’t had the need to update order statuses or manage reviews and the like, but that’s all in there too.


There is a lot of technology at work here!

But my actual time commitment has been minimal. I’ve spent longer writing this blog post than I have setting up all of this eCommerce stuff. I’m just an integrator here. I’m not inventing anything — just taking advantage of some best-in-class software to make my ideas happen.



Source link

Django ORM
Strategy

Introduction to Django – DZone Web Dev


In this blog, we are going to talk about Django.

Before that, let’s understand what is a web framework and why do we need it?

A web framework is a software tool that helps us develop an application faster and smarter. It eliminates the need to write a lot of repetitive code and saves time.

What Is Django?

Django is a free open source high-level web framework written in python. It has everything which is needed to build a Robust Framework. Django is used by Instagram, Mozilla, Pinterest, and many more companies.

How to Install Django?

In the command prompt, just type: pip install django 

If you want to download a specific version: pip install django===versionNumber 

Why Django?

  • Loosely Coupled – Django aims to make each element of its stack independent of the others.
  • Fast – Django enables rapid development with a clean and pragmatic design.
  • Don’t Repeat Yourself (DRY) – Keep everything simple and concise.
  • Tons of Packages – The set of components and libraries provided by Django will help you speed up the entire web development process. It also takes care of user authentication, content administration, site maps, and many more.
  • Secure – Django is built on Python, due to which, it reaps the benefit of the widely active Python community. It helps the developers to avoid many common security mistakes, such as SQL injection, cross-site scripting, csrf, and clickjacking. Its user authentication system provides a secure way to manage user accounts and passwords.
  • Scalable – Django has the ability to quickly and flexibly switch from small to large scale application projects.
  • Versatile – Django is used to build all sorts of things – from content management systems to social networks to scientific computing platforms.
  • Admin Interface – Django provides a built-in admin module which can be used to perform CRUD operations on the models.
  • ORM – Object-relational mapper is a code library that automates the transfer of data stored in relational databases tables into objects that are more commonly used in application code.

Django ORM

Django Architecture

Django architecture

Django follows the MVT pattern.

MVT is a software design pattern. It is a collection of three important components Model View and Template.

Model: The Model helps to handle the database. It is the backend where your database is defined.

Template: The Template handles User Interface part completely

View: The View is used to execute the business logic and interact with a model to carry data and renders a template.

A user sends the request via the browser. Django works as a controller and checks to the available resource in the URL. If URL maps, a view is called.

The view interacts with the model and template, retrieves data from the database via the model, formats it, render a template as a response.

Thanks for reading!



Source link

Nesting Style
Strategy

Introduction to SCSS – DZone Web Dev


In this post, I would like to give an introduction and discuss the features of, SCSS. If you’re new to SCSS and you really haven’t read much about it you should definitely read this blog to get all the information.

Sass (Syntactically awesome style sheets) is a style sheet language initially designed by Hampton Catlin and developed by Natalie Weizenbaum. Sass is a preprocessor scripting language that is interpreted or compiled into Cascading Style Sheets (CSS). SassScript is the scripting language itself. Embrace Sass once, and you may never want to go back to vanilla CSS again. I didn’t realize how much I was enjoying working with Sass until recently when I had to switch back to vanilla CSS in a project. During that time, I learned so much that I decided to praise Sass and make this a better world and make you a happier person.

How to Use SCSS

Preprocessors such as Sass are widely used in our RoR world and make writing CSS much easier and clutter-free. Most Rails developers are aware of advantages such as nesting, reference selector, variables, mixins, or extending directives. But Sass is much more than that!

Sass includes two type extension: .scss and .sass. The “.scss” file extension and is fully compliant with CSS syntax and .sass is not fully compliant with CSS syntax, but it’s quicker to write.

Let’s start with some installation and basic tips for using Sass.

There are a couple of ways to start SCSS using the application or command line.

Take a look at the Sass Documentation for installation with the command line.

Variables

We can define an element in a variable and interpolate it inside our Sass code. This is useful when you keep your modules in separate files. The most common uses of variables are color palettes, storing information like font declarations, sizes, and media queries, that can be used in separate stylesheets.

For Example

$body: #226666;
$primary-color: #403075;
$footer: #AA8439;
$font-stack: Helvetica, sans-serif;

The pieces code starting with $ are Sass variables. You will be able to use those variables later in your stylesheet, and they will be mapped to the values that you have defined, like:

body {
  background: $body;
  font: $font-stack;
}

.header {
  color: $primary-color;
}

a {
  color: $primary-color;
}

Nesting With SCSS

Nesting is one most popular features of SCSS. With nesting, you can add classes between the braces of a declaration. SCSS will compile and handle the selectors quite intuitively. You can even use the “&” character to get a reference to the parent selector.

The following example shows the structure of a basic webpage:

Nesting Style

The below style was used to create the above example:

header{
  padding:10px
  background-color: $grey
  text-align:center;
  .logo{
      display:inline-block;
      width:140px;
  }
  nav {
    ul {
      margin: 0;
      padding: 0;
      list-style: none;
      li {
        display: inline-block;
       a {
          display: block;
          padding: 6px 12px;
          text-decoration: none;
          &:hover{
              text-decoration:underline;
          }
       }
      }
    }
}

section{
  background-color: $grey;
  display:inline-block;
  width:70%;
  border:1px solid $grey;
  color: $text-color;
}

aside{
  background-color: $grey;
  display:inline-block;
  width:30%;
  border:1px solid $grey;
  color: $text-color;
}
 footer{
   padding:10px;
   .copyright{
   text-decoration:none;
    padding:5px;
    &:hover{
            text-decoration:underline;
          }
   }
}

Great! Now nested styling working as expcted. Let’s look at the corresponding CSS:

header{
  padding:10px
  background-color: #ded3d4;
  text-align:center;
}
header .logo {
   display:inline-block;
   width:140px;
 }
header nav ul{
   margin: 0;
   padding: 0;
   list-style: none;
}
header nav ul li{
   display: inline-block;
}
header nav ul li a{
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}
header nav ul li a:hover{
   text-decoration:underline;
}

section{
background-color: #ded3d4;
  display:inline-block;
  width:70%;
  border:1px solid #ded004;
  color: #555;
}

aside{
background-color: #ded3d4;
  display:inline-block;
  width:30%;
  border:1px solid #ded004;
  color: #555;
}
footer{
   padding:10px;
}
footer .copyright{
  text-decoration:none;
  padding:5px;
}
footer .copyright:hover{
   text-decoration:underline;
}

Mixins and Extends 

Mixins and extends are powerful features that help to avoid a lot of repetition. With mixins, you can make parameterized CSS declarations and reuse them throughout your stylesheets.

Let’s say you have a box and you want to give the box rounded corners:

@mixin border-radius($round) {
  -webkit-border-radius: $round;
     -moz-border-radius: $round;
      -ms-border-radius: $round;
          border-radius: $round;

}

/*Just use '@include' directive to apply mixin */
.box { @include border-radius(15px); }

Notice the @mixin directive at the top. It has been given the name border-radius and uses the variable $round as its parameter. This variable is used to set the radius value for each element. After that, the @include directive is called with the parameter value, i.e 15px.

Here is the corresponding CSS:

.box {
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  -ms-border-radius: 15px;
  border-radius: 15px;
}

If you want to add different sizes for each corner while using the @including the directive, that can be also done; you just need to specify it as follows:

.box { @include border-radius(15px 10px 5px 0px); }

You can create your own library of mixins, or, even better, you can use one of the community libraries out there.

The @extend directive has been called one of Sass’s most powerful features. This directive allows you to share properties from one selector to another.

Let’s say you declare a common class containing properties:

.box {
  margin: 10px;
  padding: 10px;  
  border: 2px solid blue;
}

And now you want two similar boxes with the same properties, but with different border colors.

.box-red {
  @extend .box;
  border-color: red;
}

.box-yellow {
  @extend .box;
  border-color: yellow;
}

In the above example, we extend the common class using the @extend directive. Let’s see the full SCSS we need to get the desired output.

.box, .box-red, .box-yellow {
  margin: 1em;
  padding: 1em;
  border: 2px solid red;
}

.box-red {
  border-color: red;
}

.box-yellow {
  border-color: yellow;
}

Import

@import will be handled by Sass and all our CSS and SCSS files will be compiled to a single file that will end up on our live site. You can create partial Sass files that contain little snippets of CSS that you can include in other Sass files, i.e. variable.scss, fonts.scss, buttons.scss, etc., and then we can include all SCSS files in the main/style.scss folder. If you don’t import the partial files, then reusable components like mixin and variable will not work.

Let’s say you have created multiple files and that you need to import them into the main.scss file:

@import “variables”;
@import “fonts”;
@import “base”;
@import “buttons”;
@import “layout”;

The only drawback is that a separate HTTP request gets triggered for each CSS file that you are importing.



Source link